diff --git a/docs/docs/alphamaskimage.md b/docs/docs/alphamaskimage.md
index 257e0dcc1d..a33d64cc02 100644
--- a/docs/docs/alphamaskimage.md
+++ b/docs/docs/alphamaskimage.md
@@ -208,4 +208,20 @@ image.setTexture(key, frame, {
     - `undefined` : Expand mask texture size to fit target texture.
     - A number : Scale mask texture size.
 - `backgroundColor` : Background color filled with masked area.
-    - `undefiined` : No background color.
\ No newline at end of file
+    - `undefiined` : No background color.
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/bbcodetext.md b/docs/docs/bbcodetext.md
index 81ed9573f5..70753e0c25 100644
--- a/docs/docs/bbcodetext.md
+++ b/docs/docs/bbcodetext.md
@@ -745,3 +745,19 @@ txt.setDelimiters(delimiterLeft, delimiterRight); // '<', '>'
     txt.setRTL(rtl).setText(newContent);
     ```
     - Invoke `setRTL` method before setting new content.
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/bitmaptext.md b/docs/docs/bitmaptext.md
index 5ae5ae4ecf..7bd8612cde 100644
--- a/docs/docs/bitmaptext.md
+++ b/docs/docs/bitmaptext.md
@@ -360,10 +360,27 @@ var data = txt.getCharacterAt(x, y);
     - `r` : The right-most point of this character, including xAdvance.
     - `line` : The line number the character appears on.
 
+
 ### Other properties
 
 See [game object](gameobject.md)
 
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
+
 ## Appendix
 
 ### Default characters set of retro font
diff --git a/docs/docs/blitter.md b/docs/docs/blitter.md
index 9768d906cd..74cd63d7bf 100644
--- a/docs/docs/blitter.md
+++ b/docs/docs/blitter.md
@@ -204,3 +204,22 @@ bob.destroy();
 ```javascript
 var data = bob.data;  // {}
 ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = bob.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/canvas-circularprogress.md b/docs/docs/canvas-circularprogress.md
index c7bcf05f11..d67c54961a 100644
--- a/docs/docs/canvas-circularprogress.md
+++ b/docs/docs/canvas-circularprogress.md
@@ -423,6 +423,22 @@ var circularProgress = scene.make.rexCircularProgressCanvas({
     }, scope);
     ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = circularProgress.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Compare with Circular-progress shape
 
 - Circular-progress canvas creates a canvas then draw on that canvas, [circular progress shape](shape-circularprogress.md) draw on GRAPHICS pipeline like Shape or Graphics game object.
diff --git a/docs/docs/canvas-lineprogress.md b/docs/docs/canvas-lineprogress.md
index 087ca5cd4e..f06d13efa6 100644
--- a/docs/docs/canvas-lineprogress.md
+++ b/docs/docs/canvas-lineprogress.md
@@ -364,6 +364,22 @@ var lineProgress = scene.make.rexLineProgressCanvas({
     // lineProgress.alpha = alpha;
     ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = lineProgress.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Compare with Line-progress shape
 
 - Line-progress canvas creates a canvas then draw on that canvas, [line progress shape](shape-lineprogress.md) draw on GRAPHICS pipeline like Shape or Graphics game object.
diff --git a/docs/docs/canvas-roundrectangle.md b/docs/docs/canvas-roundrectangle.md
index 26dc8e88ca..10a12efd39 100644
--- a/docs/docs/canvas-roundrectangle.md
+++ b/docs/docs/canvas-roundrectangle.md
@@ -342,6 +342,18 @@ Number of interpolation points in each round corner. Default value is `4`.
 
 See [game object](gameobject.md)
 
+### Create mask
+
+```javascript
+var mask = rect.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Compare with [Shape-Roundrectangle](shape-roundrectangle.md)
 
 - Gradient
diff --git a/docs/docs/canvas.md b/docs/docs/canvas.md
index 6bff206a75..77e511821c 100644
--- a/docs/docs/canvas.md
+++ b/docs/docs/canvas.md
@@ -267,7 +267,23 @@ or
 canvas.resize(width, height);
 ```
 
-## Compare with [Graphics object](graphics.md)
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = canvas.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
+### Compare with [Graphics object](graphics.md)
 
  - Drawing method
     - This canvas object draws stuff on canvas in WEBGL or CANVAS render mode.  
diff --git a/docs/docs/canvasinput.md b/docs/docs/canvasinput.md
index 0c9d0b0f5b..1b1a899f8a 100644
--- a/docs/docs/canvasinput.md
+++ b/docs/docs/canvasinput.md
@@ -533,4 +533,16 @@ Set `enableCapture` to `false` to bypass key input to this input-text game objec
 
 ### Other properties
 
-See [DynamicText](dynamictext.md).
\ No newline at end of file
+See [Dynamic text game object](dynamictext.md) [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/circlemaskimage.md b/docs/docs/circlemaskimage.md
index a128762fd3..7c5333f1da 100644
--- a/docs/docs/circlemaskimage.md
+++ b/docs/docs/circlemaskimage.md
@@ -253,4 +253,20 @@ image.setTexture(key, frame, {
                 bl: {x : radiusX, y: radiusY},
                 br: {x : radiusX, y: radiusY},
             }
-            ```
\ No newline at end of file
+            ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/container.md b/docs/docs/container.md
index f3b3795e20..37f873665c 100644
--- a/docs/docs/container.md
+++ b/docs/docs/container.md
@@ -264,7 +264,26 @@ var scaleX = matrix.scaleX;
 var scaleY = matrix.scaleY;
 ```
 
-## Compare with [group object](group.md)
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = container.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
+### Compare with [group object](group.md)
 
 - Container and group objects are all have a children list.
 - Container has position, angle, alpha, visible, ...etc, but group does not have.
diff --git a/docs/docs/containerlite.md b/docs/docs/containerlite.md
index f1baadf3ef..774ed726ac 100644
--- a/docs/docs/containerlite.md
+++ b/docs/docs/containerlite.md
@@ -691,7 +691,12 @@ This method also will reset all local state of children.
 !!! note
     `container.add(containerLite)`, or `layer.add(containerLite)` won't add children of containerLite.
 
-## Compare with Official Container
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Compare with Official Container
 
 - Position/anlge/scale of a child object :
     - [Container](container.md) : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale.
diff --git a/docs/docs/dynamicbitmaptext.md b/docs/docs/dynamicbitmaptext.md
index 7356fbf4a9..92a664298c 100644
--- a/docs/docs/dynamicbitmaptext.md
+++ b/docs/docs/dynamicbitmaptext.md
@@ -116,4 +116,19 @@ txt.text = '...';
 
 ### Other properties
 
-This dynamic bitmap text class is extended from [bitmap text](bitmaptext.md)
\ No newline at end of file
+See  [bitmap text](bitmaptext.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/dynamictext.md b/docs/docs/dynamictext.md
index 6538f6e3c3..70f5061404 100644
--- a/docs/docs/dynamictext.md
+++ b/docs/docs/dynamictext.md
@@ -927,6 +927,22 @@ txt.setWrapConfig(config);
     ```
     - `child` : Any [Character](dynamictext.md#character) or [Image](dynamictext.md#image) child
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Compare with other kinds of text game object
 
 - [Built-in text](text.md): 
diff --git a/docs/docs/filechooser.md b/docs/docs/filechooser.md
index 3d0cc05681..161c3259cc 100644
--- a/docs/docs/filechooser.md
+++ b/docs/docs/filechooser.md
@@ -298,7 +298,10 @@ scene.plugins.get('rexFileChooser').open({
             ```
     - Length `files` is 0 : User cancels file chooser dialog.
 
+### Other properties
+
+See [dom game object](domelement.md), [game object](gameobject.md)
 
 ### Interactive with other game objects
 
-See [dom-element's Interactive with other game objects](domelement.md#interactive-with-other-game-objects)
\ No newline at end of file
+See [dom-element's Interactive with other game objects](domelement.md#interactive-with-other-game-objects)
diff --git a/docs/docs/filedropzone.md b/docs/docs/filedropzone.md
index d9705590d4..33c0aad920 100644
--- a/docs/docs/filedropzone.md
+++ b/docs/docs/filedropzone.md
@@ -276,6 +276,10 @@ fileDropZone.loadFilePromise(file, loaderType, key, cahceType)
     URL.revokeObjectURL(objectURL);
     ```
 
+### Other properties
+
+See [dom game object](domelement.md), [game object](gameobject.md)
+
 ### Interactive with other game objects
 
 See [dom-element's Interactive with other game objects](domelement.md#interactive-with-other-game-objects)
\ No newline at end of file
diff --git a/docs/docs/graphics.md b/docs/docs/graphics.md
index 4ee062a2c0..c3654591e0 100644
--- a/docs/docs/graphics.md
+++ b/docs/docs/graphics.md
@@ -237,10 +237,21 @@ graphics.rotateCanvas(radians);
 graphics.generateTexture(key, width, height);  // key: texture key
 ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
 ### Create mask
 
 ```javascript
 var mask = graphics.createGeometryMask();
 ```
 
-See [mask](mask.md)
\ No newline at end of file
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/gridtable.md b/docs/docs/gridtable.md
index d51fe53040..e6e6bf815f 100644
--- a/docs/docs/gridtable.md
+++ b/docs/docs/gridtable.md
@@ -564,4 +564,8 @@ var cell = table.getCell(cellIndex);
 
 ```javascript
 var cellIndex = cell.index;
-```
\ No newline at end of file
+```
+
+### Other properties
+
+See [game object](gameobject.md)
diff --git a/docs/docs/image.md b/docs/docs/image.md
index 212f39603e..db9a792b96 100644
--- a/docs/docs/image.md
+++ b/docs/docs/image.md
@@ -99,4 +99,8 @@ See [game object](gameobject.md)
 var mask = image.createBitmapMask();
 ```
 
-See [mask](mask.md)
\ No newline at end of file
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/imagebox.md b/docs/docs/imagebox.md
index 8c1069b51e..963695d180 100644
--- a/docs/docs/imagebox.md
+++ b/docs/docs/imagebox.md
@@ -1,6 +1,7 @@
 ## Introduction
 
-Keep aspect ratio of image game object when scale-down resizing.
+Keep aspect ratio of image game object when scale-down resizing. 
+A [containerLite game object ](containerlite.md) with 1 [image game object](image.md).
 
 - Author: Rex
 - Game object
@@ -173,3 +174,21 @@ image.scaleImage();
 ```javascript
 var internalImageGO = image.image;
 ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+Create mask from internal image game object (`image.image`).
+
+```javascript
+var mask = image.image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Internal image game object (`image.image`) support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/inputtext.md b/docs/docs/inputtext.md
index 0780a7ffad..8a4051f751 100644
--- a/docs/docs/inputtext.md
+++ b/docs/docs/inputtext.md
@@ -464,6 +464,9 @@ var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);
 
 Set `enableCapture` to `false` to bypass key input to this input-text game objecct.
 
+### Other properties
+
+See [dom game object](domelement.md), [game object](gameobject.md)
 
 ### Interactive with other game objects
 
@@ -485,4 +488,4 @@ See [dom-element's Interactive with other game objects](domelement.md#interactiv
         }
     })
     ```
-    - `inputType` : `'text'`, `'textarea'`, ...
\ No newline at end of file
+    - `inputType` : `'text'`, `'textarea'`, ...
diff --git a/docs/docs/layer.md b/docs/docs/layer.md
index 81291051cf..7aee55ca26 100644
--- a/docs/docs/layer.md
+++ b/docs/docs/layer.md
@@ -230,7 +230,14 @@ See [game object](gameobject.md)
 ### Create mask
 
 ```javascript
-var mask = image.createBitmapMask();
+var mask = layer.createBitmapMask();
 ```
 
-See [mask](mask.md)
\ No newline at end of file
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/line.md b/docs/docs/line.md
index 1afca4a5c1..56bc4ba744 100644
--- a/docs/docs/line.md
+++ b/docs/docs/line.md
@@ -1,6 +1,6 @@
 ## Introduction
 
-Draw a line with start/end/body textures.
+Draw a line with start/end/body textures, extended from [RenderTexture game object](rendertexture.md).
 
 - Author: Rex
 - Game object
@@ -205,4 +205,20 @@ var line = scene.add.rexLine({
     - Set line-body width
         ```javascript
         line.setLineBodyWidth(width);
-        ```
\ No newline at end of file
+        ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = line.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/mesh.md b/docs/docs/mesh.md
index 8eb2d49245..e0ac2499ce 100644
--- a/docs/docs/mesh.md
+++ b/docs/docs/mesh.md
@@ -315,4 +315,23 @@ mesh.setInteractive();
     ```javascript
     debugGraphics.clear();
     debugGraphics.lineStyle(1, 0x00ff00);
-    ```
\ No newline at end of file
+    ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = mesh.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/ninepatch.md b/docs/docs/ninepatch.md
index 4262b660a1..fe66b2b228 100644
--- a/docs/docs/ninepatch.md
+++ b/docs/docs/ninepatch.md
@@ -1,6 +1,6 @@
 ## Introduction
 
-Stretchable image.
+Stretchable image, extended from [RenderTexture game object](rendertexture.md).
 
 - Author: Rex
 - Game object
@@ -325,6 +325,22 @@ ninePatch.setGetFrameNameCallback(callback);
 ninePatch.updateTexture();
 ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = ninePatch.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Compare with [nine-slice](nineslice.md)
 
 - Nine-slice is a built-in game object.
diff --git a/docs/docs/ninepatch2.md b/docs/docs/ninepatch2.md
index df86966e9a..c37a539068 100644
--- a/docs/docs/ninepatch2.md
+++ b/docs/docs/ninepatch2.md
@@ -335,6 +335,25 @@ ninePatch.setGetFrameNameCallback(callback);
 ninePatch.updateTexture();
 ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = ninePatch.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
 ### Compare with [nine-patch](ninepatch.md)
 
 - Nine-patch2 has better performance.
diff --git a/docs/docs/nineslice.md b/docs/docs/nineslice.md
index e392bd1c45..0e4479a2a7 100644
--- a/docs/docs/nineslice.md
+++ b/docs/docs/nineslice.md
@@ -105,6 +105,13 @@ var mask = nineSlice.createBitmapMask();
 
 See [mask](mask.md)
 
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
 ### Compare with [nine-patch](ninepatch.md)
 
 - Nine-slice is a built-in game object.
diff --git a/docs/docs/particles.md b/docs/docs/particles.md
index 8007f0445a..4caca02599 100644
--- a/docs/docs/particles.md
+++ b/docs/docs/particles.md
@@ -869,3 +869,22 @@ class MyParticle extends Phaser.GameObjects.Particles.Particle {
     }
 }
 ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = emitter.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-card.md b/docs/docs/perspective-card.md
index c2171e8ee8..53f2a0c4c6 100644
--- a/docs/docs/perspective-card.md
+++ b/docs/docs/perspective-card.md
@@ -314,4 +314,19 @@ card.flip.setEase(ease);
 
 ### Other properties
 
-See [container](containerlite.md).
+See [container](containerlite.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = card.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-carousel.md b/docs/docs/perspective-carousel.md
index 9da570a97d..327055898f 100644
--- a/docs/docs/perspective-carousel.md
+++ b/docs/docs/perspective-carousel.md
@@ -279,4 +279,19 @@ carousel.roll.setEase(ease);
 
 ### Other properties
 
-See [container](containerlite.md).
\ No newline at end of file
+See [container](containerlite.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = carousel.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-image.md b/docs/docs/perspective-image.md
index e685738418..d3ec0d5f0d 100644
--- a/docs/docs/perspective-image.md
+++ b/docs/docs/perspective-image.md
@@ -219,4 +219,19 @@ rt.drawFrame(key, frame);
 
 ### Other properties
 
-See [Mesh](mesh.md) game object.
\ No newline at end of file
+See [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-imagecarousel.md b/docs/docs/perspective-imagecarousel.md
index 34ec4d6bbd..20b7f6e1e4 100644
--- a/docs/docs/perspective-imagecarousel.md
+++ b/docs/docs/perspective-imagecarousel.md
@@ -232,3 +232,22 @@ carousel.roll.setEase(ease);
     ```javascript
     var isRunning = carousel.roll.isRunning;
     ```
+
+### Other properties
+
+See [container](containerlite.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = carousel.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-rendertexture.md b/docs/docs/perspective-rendertexture.md
index 1c32ccee8d..d17cbf8a66 100644
--- a/docs/docs/perspective-rendertexture.md
+++ b/docs/docs/perspective-rendertexture.md
@@ -206,4 +206,19 @@ image.rt.fill(rgb, alpha);
 
 ### Other properties
 
-See [Perspective image](perspective-image.md) game object.
\ No newline at end of file
+See [Perspective image game object](perspective-image.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/perspective-sprite.md b/docs/docs/perspective-sprite.md
index f090ff4aeb..fc47aba6e7 100644
--- a/docs/docs/perspective-sprite.md
+++ b/docs/docs/perspective-sprite.md
@@ -235,4 +235,19 @@ sprite.anims.restart();
 
 ### Other properties
 
-See [Perspective image](perspective-image.md) game object.
\ No newline at end of file
+See [Perspective image game object](perspective-image.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = sprite.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/plane.md b/docs/docs/plane.md
index 85ed365333..ff5a022b4d 100644
--- a/docs/docs/plane.md
+++ b/docs/docs/plane.md
@@ -239,3 +239,22 @@ replacing any current texture it may have.
     ```javascript
     plane.removeCheckerboard();
     ```
+
+### Other properties
+
+See [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = plane.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/quad-image.md b/docs/docs/quad-image.md
index f6bd6da37d..1350ea234d 100644
--- a/docs/docs/quad-image.md
+++ b/docs/docs/quad-image.md
@@ -213,4 +213,19 @@ var quadimage = scene.make.rexQuadImage({
 
 ### Other properties
 
-See [Mesh](mesh.md) game object.
\ No newline at end of file
+See [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/quad-rendertexture.md b/docs/docs/quad-rendertexture.md
index f68e71c4d6..acc75f027e 100644
--- a/docs/docs/quad-rendertexture.md
+++ b/docs/docs/quad-rendertexture.md
@@ -207,4 +207,19 @@ image.rt.fill(rgb, alpha);
 
 ### Other properties
 
-See [Quad image](quad-image.md) game object.
\ No newline at end of file
+See [Quad image game object](quad-image.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/rendertexture.md b/docs/docs/rendertexture.md
index 10aad61b93..feb16ecd2b 100644
--- a/docs/docs/rendertexture.md
+++ b/docs/docs/rendertexture.md
@@ -188,4 +188,8 @@ See [game object](gameobject.md)
 var mask = rt.createBitmapMask();
 ```
 
-See [mask](mask.md)
\ No newline at end of file
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/shader.md b/docs/docs/shader.md
index ef67fba85a..4f9a2fd1cc 100644
--- a/docs/docs/shader.md
+++ b/docs/docs/shader.md
@@ -235,6 +235,14 @@ end
 
 See [game object](gameobject.md)
 
+### Create mask
+
+```javascript
+var mask = shader.createBitmapMask();
+```
+
+See [mask](mask.md)
+
 ### BaseShader
 
 ```javascript
diff --git a/docs/docs/shape-arc.md b/docs/docs/shape-arc.md
index 2430b7779a..a1f37236f5 100644
--- a/docs/docs/shape-arc.md
+++ b/docs/docs/shape-arc.md
@@ -165,3 +165,18 @@ var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillC
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = arc.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-checkbox.md b/docs/docs/shape-checkbox.md
index 6175166887..886558e71b 100644
--- a/docs/docs/shape-checkbox.md
+++ b/docs/docs/shape-checkbox.md
@@ -372,3 +372,19 @@ var checkbox = scene.add.rexCheckbox({
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = checkbox.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-circle.md b/docs/docs/shape-circle.md
index 33ed8360f2..6bbf72377c 100644
--- a/docs/docs/shape-circle.md
+++ b/docs/docs/shape-circle.md
@@ -126,3 +126,19 @@ var circle = scene.add.circle(x, y, radius, fillColor);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = circle.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-circularprogress.md b/docs/docs/shape-circularprogress.md
index b388f18439..1afbe61412 100644
--- a/docs/docs/shape-circularprogress.md
+++ b/docs/docs/shape-circularprogress.md
@@ -371,6 +371,25 @@ var circularProgress = scene.make.rexCircularProgress({
     // circularProgress.alpha = alpha;
     ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = circularProgress.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
 ### Compare with Circular-progress canvas
 
 - [Circular-progress canvas](canvas-circularprogress.md) creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.
diff --git a/docs/docs/shape-cover.md b/docs/docs/shape-cover.md
index 5667ea46c9..d120159c97 100644
--- a/docs/docs/shape-cover.md
+++ b/docs/docs/shape-cover.md
@@ -144,3 +144,19 @@ var cover = scene.add.rexCover({
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = cover.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-curve.md b/docs/docs/shape-curve.md
index 1dfe5d9f2a..b2813bf372 100644
--- a/docs/docs/shape-curve.md
+++ b/docs/docs/shape-curve.md
@@ -115,3 +115,18 @@ curve.smoothness = smoothness;
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = curve.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-custom-progress.md b/docs/docs/shape-custom-progress.md
index 1336296370..5fec0c85c9 100644
--- a/docs/docs/shape-custom-progress.md
+++ b/docs/docs/shape-custom-progress.md
@@ -337,3 +337,22 @@ See [Shape class](shape-custom-shapes.md#shape-class)
     customProgress.setAlpha(alpha);
     // customProgress.alpha = alpha;
     ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = customProgress.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
\ No newline at end of file
diff --git a/docs/docs/shape-custom-shapes.md b/docs/docs/shape-custom-shapes.md
index 1b6629393c..0ce6023491 100644
--- a/docs/docs/shape-custom-shapes.md
+++ b/docs/docs/shape-custom-shapes.md
@@ -797,6 +797,25 @@ The same as Circle.
     // shape.alpha = alpha;
     ```
 
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = shape.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
 ### Compare with similar plugins
 
 - [Custom Shapes](shape-custom-shapes.md) : Draw shapes.
diff --git a/docs/docs/shape-ellipse.md b/docs/docs/shape-ellipse.md
index 343f74c232..97c5b7ff8b 100644
--- a/docs/docs/shape-ellipse.md
+++ b/docs/docs/shape-ellipse.md
@@ -126,3 +126,18 @@ ellipse.smoothness = smoothness;
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = ellipse.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-fullwindowrectangle.md b/docs/docs/shape-fullwindowrectangle.md
index 79d9db2d31..1c86331447 100644
--- a/docs/docs/shape-fullwindowrectangle.md
+++ b/docs/docs/shape-fullwindowrectangle.md
@@ -138,3 +138,19 @@ var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = rect.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-grid.md b/docs/docs/shape-grid.md
index 370cadef31..f972651db0 100644
--- a/docs/docs/shape-grid.md
+++ b/docs/docs/shape-grid.md
@@ -126,3 +126,19 @@ var grid = scene.add.grid(x, y, width, height, cellWidth, cellHeight, fillColor,
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = grid.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-isobox.md b/docs/docs/shape-isobox.md
index 106db9729c..4179d5b235 100644
--- a/docs/docs/shape-isobox.md
+++ b/docs/docs/shape-isobox.md
@@ -97,3 +97,18 @@ var isoBox = scene.add.isobox(x, y, width, height, fillTop, fillLeft, fillRight)
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = isoBox.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-isotriangle.md b/docs/docs/shape-isotriangle.md
index 0074e70e49..50a8d42229 100644
--- a/docs/docs/shape-isotriangle.md
+++ b/docs/docs/shape-isotriangle.md
@@ -113,3 +113,18 @@ var isoTriangle = scene.add.isotriangle(x, y, width, height, reversed, fillTop,
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = isoTriangle.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-line.md b/docs/docs/shape-line.md
index 4fd799e118..5d1eb77d1a 100644
--- a/docs/docs/shape-line.md
+++ b/docs/docs/shape-line.md
@@ -115,3 +115,19 @@ line.setLineWidth(startWidth, endWidth);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = line.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-lineprogress.md b/docs/docs/shape-lineprogress.md
index 1c74114dae..59bffc6296 100644
--- a/docs/docs/shape-lineprogress.md
+++ b/docs/docs/shape-lineprogress.md
@@ -355,3 +355,22 @@ var lineProgress = scene.make.rexLineProgress({
     lineProgress.setAlpha(alpha);
     // lineProgress.alpha = alpha;
     ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = lineProgress.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-polygon.md b/docs/docs/shape-polygon.md
index c9d432db2e..8aee045b7a 100644
--- a/docs/docs/shape-polygon.md
+++ b/docs/docs/shape-polygon.md
@@ -130,3 +130,18 @@ polygon.setTo(points);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = polygon.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-rectangle.md b/docs/docs/shape-rectangle.md
index d54b86f7a2..22d116e629 100644
--- a/docs/docs/shape-rectangle.md
+++ b/docs/docs/shape-rectangle.md
@@ -118,3 +118,18 @@ var rect = scene.add.rectangle(x, y, width, height, fillColor);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = rect.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
\ No newline at end of file
diff --git a/docs/docs/shape-roundrectangle.md b/docs/docs/shape-roundrectangle.md
index e8f7f4d040..71496a3175 100644
--- a/docs/docs/shape-roundrectangle.md
+++ b/docs/docs/shape-roundrectangle.md
@@ -386,3 +386,19 @@ Number of interpolation points in each round corner. Default value is `4`.
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = rect.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-spinner.md b/docs/docs/shape-spinner.md
index 17a2b25d9b..b1f1004616 100644
--- a/docs/docs/shape-spinner.md
+++ b/docs/docs/shape-spinner.md
@@ -326,4 +326,24 @@ var customSpinner = this.rexSpinner.add.custom({
 
 #### Shape class
 
-See [Shape class](shape-custom-shapes.md#shape-class)
\ No newline at end of file
+See [Shape class](shape-custom-shapes.md#shape-class)
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = customSpinner.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
diff --git a/docs/docs/shape-star.md b/docs/docs/shape-star.md
index 85674e3256..39e43e1f5f 100644
--- a/docs/docs/shape-star.md
+++ b/docs/docs/shape-star.md
@@ -147,3 +147,18 @@ var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = star.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-toggleswitch.md b/docs/docs/shape-toggleswitch.md
index 56b38e470d..52009baae4 100644
--- a/docs/docs/shape-toggleswitch.md
+++ b/docs/docs/shape-toggleswitch.md
@@ -405,3 +405,18 @@ var toggleSwitch = scene.add.rexToggleSwitch({
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = toggleSwitch.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-triangle.md b/docs/docs/shape-triangle.md
index 8fb657b54b..e35ccc9c20 100644
--- a/docs/docs/shape-triangle.md
+++ b/docs/docs/shape-triangle.md
@@ -115,3 +115,18 @@ triangle.setLineWidth(startWidth, endWidth);
 ### Other properties
 
 See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = triangle.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shape-triangle2.md b/docs/docs/shape-triangle2.md
index 319d4ab3c9..10ac0ddab4 100644
--- a/docs/docs/shape-triangle2.md
+++ b/docs/docs/shape-triangle2.md
@@ -339,4 +339,23 @@ var triangle = scene.add.rexTriangle({
     ```javascript
     triangle.setArrowOnly(enable);
     // triangle.arrowOnly = enable;
-    ```
\ No newline at end of file
+    ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = triangle.createGeometryMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shatter-image.md b/docs/docs/shatter-image.md
index 4de1973a9a..aebd673b95 100644
--- a/docs/docs/shatter-image.md
+++ b/docs/docs/shatter-image.md
@@ -338,4 +338,23 @@ image.resetImage();
     or
     ```javascript
     image.setTint(color);
-    ```
\ No newline at end of file
+    ```
+
+### Other properties
+
+See [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/shatter-rendertexture.md b/docs/docs/shatter-rendertexture.md
index e0b86cf78d..a8246a2599 100644
--- a/docs/docs/shatter-rendertexture.md
+++ b/docs/docs/shatter-rendertexture.md
@@ -198,4 +198,19 @@ image.rt.fill(rgb, alpha);
 
 ### Other properties
 
-See [Shatter image](shatter-image.md) game object.
\ No newline at end of file
+See [Shatter image game object](shatter-image.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/skew-image.md b/docs/docs/skew-image.md
index 1aba283dde..8ba5ed4d2e 100644
--- a/docs/docs/skew-image.md
+++ b/docs/docs/skew-image.md
@@ -165,4 +165,19 @@ var quadimage = scene.make.rexSkewImage({
 
 ### Other properties
 
-See [Mesh](mesh.md) game object.
\ No newline at end of file
+See [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/skew-rendertexture.md b/docs/docs/skew-rendertexture.md
index 962b7eaee7..4ca11ba406 100644
--- a/docs/docs/skew-rendertexture.md
+++ b/docs/docs/skew-rendertexture.md
@@ -186,4 +186,19 @@ image.rt.fill(rgb, alpha);
 
 ### Other properties
 
-See [Skew image](skew-image.md) game object.
\ No newline at end of file
+See [Skew image game object](skew-image.md), [Mesh game object](mesh.md), [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = image.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
diff --git a/docs/docs/sprite.md b/docs/docs/sprite.md
index f22e945717..31c16b79ae 100644
--- a/docs/docs/sprite.md
+++ b/docs/docs/sprite.md
@@ -113,6 +113,18 @@ See [game object - texture](gameobject.md#texture)
 
 See [game object](gameobject.md)
 
+### Create mask
+
+```javascript
+var mask = sprite.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
+
 ### Animation
 
 #### Create animation
diff --git a/docs/docs/tagtext.md b/docs/docs/tagtext.md
index 36e67fa057..54ed5e7c97 100644
--- a/docs/docs/tagtext.md
+++ b/docs/docs/tagtext.md
@@ -673,3 +673,19 @@ txt.generateTexture(key);
     txt.setRTL(rtl).setText(newContent);
     ```
     - Invoke `setRTL` method before setting new content.
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/text.md b/docs/docs/text.md
index b685159fc8..7e57bfc037 100644
--- a/docs/docs/text.md
+++ b/docs/docs/text.md
@@ -333,4 +333,20 @@ Set the test string to use when measuring the font.
 
 ```javascript
 txt.style.setTestString(text);
-```
\ No newline at end of file
+```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/textplayer.md b/docs/docs/textplayer.md
index 5520f256df..78b0e43c96 100644
--- a/docs/docs/textplayer.md
+++ b/docs/docs/textplayer.md
@@ -986,7 +986,6 @@ Assume that adding a custom tag : `[custom=10,20][/custom]`
     ```
     - `params` : Parameters passed from `params` in `'parser.-custom'` event.
 
-
 ### Size
 
 - Resize canvas size
@@ -1005,3 +1004,19 @@ Assume that adding a custom tag : `[custom=10,20][/custom]`
     ```javascript
     txt.setToMinSize();
     ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = txt.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/tilemap.md b/docs/docs/tilemap.md
index afa54bdc55..c7405d5b8e 100644
--- a/docs/docs/tilemap.md
+++ b/docs/docs/tilemap.md
@@ -435,6 +435,13 @@ layer.setRenderOrder(renderOrder);
     layer.shuffle(tileX, tileY, width, height);
     ```
 
+### Shader effects
+
+`layer`` support [postFX effects](shader-builtin.md)
+
+!!! note
+    No preFX effect support
+
 ### Tile
 
 #### Get tile
diff --git a/docs/docs/tilesprite.md b/docs/docs/tilesprite.md
index aaf2a6ba43..c7f21f9fa9 100644
--- a/docs/docs/tilesprite.md
+++ b/docs/docs/tilesprite.md
@@ -98,4 +98,8 @@ See [game object](gameobject.md)
 var mask = image.createBitmapMask();
 ```
 
-See [mask](mask.md)
\ No newline at end of file
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/transitionimage.md b/docs/docs/transitionimage.md
index cbb40de349..0c313e5d50 100644
--- a/docs/docs/transitionimage.md
+++ b/docs/docs/transitionimage.md
@@ -1,6 +1,6 @@
 ## Introduction
 
-Transit texture to another one. A [containerLite game object](containerlite.md) with 2 [image](image.md) game objects.
+Transit texture to another one. A [containerLite game object](containerlite.md) with 2 [image game objects](image.md).
 
 - Author: Rex
 - Game object
@@ -472,4 +472,26 @@ Also will fire `'complete'` event.
     - [Grid cut](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/transition-image/grid-cut.js)
     - [Three-columns](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/transition-image/three-columns.js), apply mask to cell images.
 - Morph custom mask game object
-    - [Pie-mask](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/transition-image/pie-mask.js), mask current/next image by a [custom-progress game object](shape-custom-progress.md).
\ No newline at end of file
+    - [Pie-mask](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/transition-image/pie-mask.js), mask current/next image by a [custom-progress game object](shape-custom-progress.md).
+
+
+### Internal image game object
+
+- Current, next image game object
+    ```javascript
+    var curentImageGO = image.currentImage;
+    var nextImageGO = image.nextImage;
+    ```
+- Front, back image game object
+    ```javascript
+    var frontImageGO = image.frontImage;
+    var backImageGO = image.backImage;
+    ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Shader effects
+
+Internal image game objects (`image.currentImage`, `image.nextImage`) support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/transitionimagepack.md b/docs/docs/transitionimagepack.md
index ea3867369e..d35c9da173 100644
--- a/docs/docs/transitionimagepack.md
+++ b/docs/docs/transitionimagepack.md
@@ -241,3 +241,7 @@ Also will fire `'complete'` event.
     image.toggleFlipX();
     image.toggleFlipY();
     ```
+
+### Other properties
+
+See [transition image object](transitionimage.md), [game object](gameobject.md)
diff --git a/docs/docs/video.md b/docs/docs/video.md
index 69dd890601..4fd6e9e0df 100644
--- a/docs/docs/video.md
+++ b/docs/docs/video.md
@@ -369,3 +369,19 @@ var texture = video.saveTexture(key);
 
     }, scope);
     ```
+
+### Other properties
+
+See [game object](gameobject.md)
+
+### Create mask
+
+```javascript
+var mask = video.createBitmapMask();
+```
+
+See [mask](mask.md)
+
+### Shader effects
+
+Support [preFX and postFX effects](shader-builtin.md)
diff --git a/docs/docs/youtubeplayer.md b/docs/docs/youtubeplayer.md
index 42eb0a0d0e..2731a9aa75 100644
--- a/docs/docs/youtubeplayer.md
+++ b/docs/docs/youtubeplayer.md
@@ -349,6 +349,9 @@ player.resize(width, height);
 !!! warning "No `Playback time changed` event"
     Get playback time every tick might cause playing video lagging.
 
+### Other properties
+
+See [dom game object](domelement.md), [game object](gameobject.md)
 
 ### Interactive with other game objects
 
diff --git a/docs/docs/zone.md b/docs/docs/zone.md
index 45529d9adb..8586c72b12 100644
--- a/docs/docs/zone.md
+++ b/docs/docs/zone.md
@@ -47,10 +47,6 @@ var zone = scene.make.zone({
     var zone = new MyZone(x, y, width, height);
     ```
 
-### Other properties
-
-See [game object](gameobject.md)
-
 ### Input hit zone
 
 ```javascript
@@ -84,4 +80,8 @@ See [touch events](touchevents.md#register-interactive)
         }
         ```
     
-See [drop zone](touchevents.md#drop-zone)
\ No newline at end of file
+See [drop zone](touchevents.md#drop-zone)
+
+### Other properties
+
+See [game object](gameobject.md)
diff --git a/docs/site/alphamaskimage/index.html b/docs/site/alphamaskimage/index.html
index 526b6b6dd0..35e7dd3e7a 100644
--- a/docs/site/alphamaskimage/index.html
+++ b/docs/site/alphamaskimage/index.html
@@ -935,6 +935,27 @@
     Set texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9526,27 @@
     Set texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9728,6 +9770,14 @@ <h3 id="set-texture">Set texture<a class="headerlink" href="#set-texture" title=
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/bbcodetext/index.html b/docs/site/bbcodetext/index.html
index edeee08483..4019d6d49b 100644
--- a/docs/site/bbcodetext/index.html
+++ b/docs/site/bbcodetext/index.html
@@ -1820,6 +1820,27 @@
     RTL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9783,6 +9804,27 @@
     RTL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10553,6 +10595,14 @@ <h3 id="rtl">RTL<a class="headerlink" href="#rtl" title="Permanent link">&para;<
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/bitmaptext/index.html b/docs/site/bitmaptext/index.html
index bb1008888b..0ce73b54e2 100644
--- a/docs/site/bitmaptext/index.html
+++ b/docs/site/bitmaptext/index.html
@@ -1834,6 +1834,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9623,6 +9637,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10013,6 +10041,16 @@ <h4 id="get-information-of-character">Get information of character<a class="head
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h2 id="appendix">Appendix<a class="headerlink" href="#appendix" title="Permanent link">&para;</a></h2>
 <h3 id="default-characters-set-of-retro-font">Default characters set of retro font<a class="headerlink" href="#default-characters-set-of-retro-font" title="Permanent link">&para;</a></h3>
 <ul>
diff --git a/docs/site/blitter/index.html b/docs/site/blitter/index.html
index bf873ad155..0cbb126928 100644
--- a/docs/site/blitter/index.html
+++ b/docs/site/blitter/index.html
@@ -1121,6 +1121,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9629,6 +9650,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9821,6 +9863,18 @@ <h4 id="destroy">Destroy<a class="headerlink" href="#destroy" title="Permanent l
 <h4 id="data">Data<a class="headerlink" href="#data" title="Permanent link">&para;</a></h4>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">bob</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span><span class="w">  </span><span class="c1">// {}</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">bob</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/canvas-circularprogress/index.html b/docs/site/canvas-circularprogress/index.html
index 792e027436..a62415ca19 100644
--- a/docs/site/canvas-circularprogress/index.html
+++ b/docs/site/canvas-circularprogress/index.html
@@ -2460,6 +2460,27 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9610,6 +9631,27 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -10035,6 +10077,14 @@ <h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link
 <span class="p">},</span><span class="w"> </span><span class="nx">scope</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">circularProgress</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="compare-with-circular-progress-shape">Compare with Circular-progress shape<a class="headerlink" href="#compare-with-circular-progress-shape" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Circular-progress canvas creates a canvas then draw on that canvas, <a href="../shape-circularprogress/">circular progress shape</a> draw on GRAPHICS pipeline like Shape or Graphics game object.</li>
diff --git a/docs/site/canvas-lineprogress/index.html b/docs/site/canvas-lineprogress/index.html
index 71e805e898..2d4aa51db6 100644
--- a/docs/site/canvas-lineprogress/index.html
+++ b/docs/site/canvas-lineprogress/index.html
@@ -2474,6 +2474,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9610,6 +9631,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9972,6 +10014,14 @@ <h3 id="alpha">Alpha<a class="headerlink" href="#alpha" title="Permanent link">&
 <span class="c1">// lineProgress.alpha = alpha;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lineProgress</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="compare-with-line-progress-shape">Compare with Line-progress shape<a class="headerlink" href="#compare-with-line-progress-shape" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Line-progress canvas creates a canvas then draw on that canvas, <a href="../shape-lineprogress/">line progress shape</a> draw on GRAPHICS pipeline like Shape or Graphics game object.</li>
diff --git a/docs/site/canvas-roundrectangle/index.html b/docs/site/canvas-roundrectangle/index.html
index f7fbe4abd7..88119e15d1 100644
--- a/docs/site/canvas-roundrectangle/index.html
+++ b/docs/site/canvas-roundrectangle/index.html
@@ -2431,6 +2431,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9580,6 +9594,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9946,6 +9974,12 @@ <h3 id="iteration">Iteration<a class="headerlink" href="#iteration" title="Perma
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="compare-with-shape-roundrectangle">Compare with <a href="../shape-roundrectangle/">Shape-Roundrectangle</a><a class="headerlink" href="#compare-with-shape-roundrectangle" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Gradient<ul>
diff --git a/docs/site/canvas/index.html b/docs/site/canvas/index.html
index 78c83ca374..e281004954 100644
--- a/docs/site/canvas/index.html
+++ b/docs/site/canvas/index.html
@@ -2434,16 +2434,37 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
   <a href="#compare-with-graphics-object" class="md-nav__link">
     Compare with Graphics object
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -9612,16 +9633,37 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
   <a href="#compare-with-graphics-object" class="md-nav__link">
     Compare with Graphics object
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -9880,7 +9922,15 @@ <h3 id="size">Size<a class="headerlink" href="#size" title="Permanent link">&par
 <p>or</p>
 <div class="highlight"><pre><span></span><code><span class="nx">canvas</span><span class="p">.</span><span class="nx">resize</span><span class="p">(</span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
 </code></pre></div>
-<h2 id="compare-with-graphics-object">Compare with <a href="../graphics/">Graphics object</a><a class="headerlink" href="#compare-with-graphics-object" title="Permanent link">&para;</a></h2>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
+<h3 id="compare-with-graphics-object">Compare with <a href="../graphics/">Graphics object</a><a class="headerlink" href="#compare-with-graphics-object" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Drawing method<ul>
 <li>This canvas object draws stuff on canvas in WEBGL or CANVAS render mode.  </li>
diff --git a/docs/site/canvasinput/index.html b/docs/site/canvasinput/index.html
index 0e5b9ad2a5..23af8d22a7 100644
--- a/docs/site/canvasinput/index.html
+++ b/docs/site/canvasinput/index.html
@@ -1819,6 +1819,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9669,6 +9683,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10206,7 +10234,13 @@ <h3 id="bypass-key-input">Bypass key input<a class="headerlink" href="#bypass-ke
 </code></pre></div>
 <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../dynamictext/">DynamicText</a>.</p>
+<p>See <a href="../dynamictext/">Dynamic text game object</a> <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/circlemaskimage/index.html b/docs/site/circlemaskimage/index.html
index 8b7b6c8570..add9986210 100644
--- a/docs/site/circlemaskimage/index.html
+++ b/docs/site/circlemaskimage/index.html
@@ -921,6 +921,27 @@
     Set texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9526,27 @@
     Set texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9771,6 +9813,14 @@ <h3 id="set-texture">Set texture<a class="headerlink" href="#set-texture" title=
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/container/index.html b/docs/site/container/index.html
index 4666cd02fd..97343ee31b 100644
--- a/docs/site/container/index.html
+++ b/docs/site/container/index.html
@@ -2617,16 +2617,37 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
   <a href="#compare-with-group-object" class="md-nav__link">
     Compare with group object
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -9690,16 +9711,37 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
   <a href="#compare-with-group-object" class="md-nav__link">
     Compare with group object
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -9894,7 +9936,19 @@ <h4 id="get-world-position-rotation-scale">Get world position, rotation, scale<a
 <span class="kd">var</span><span class="w"> </span><span class="nx">scaleX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">matrix</span><span class="p">.</span><span class="nx">scaleX</span><span class="p">;</span>
 <span class="kd">var</span><span class="w"> </span><span class="nx">scaleY</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">matrix</span><span class="p">.</span><span class="nx">scaleY</span><span class="p">;</span>
 </code></pre></div>
-<h2 id="compare-with-group-object">Compare with <a href="../group/">group object</a><a class="headerlink" href="#compare-with-group-object" title="Permanent link">&para;</a></h2>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">container</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
+<h3 id="compare-with-group-object">Compare with <a href="../group/">group object</a><a class="headerlink" href="#compare-with-group-object" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Container and group objects are all have a children list.</li>
 <li>Container has position, angle, alpha, visible, ...etc, but group does not have.</li>
diff --git a/docs/site/containerlite/index.html b/docs/site/containerlite/index.html
index 7d137e3aa1..0bced1566d 100644
--- a/docs/site/containerlite/index.html
+++ b/docs/site/containerlite/index.html
@@ -2799,16 +2799,23 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties_1" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
   <a href="#compare-with-official-container" class="md-nav__link">
     Compare with Official Container
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -9970,16 +9977,23 @@
   
 </li>
         
-      </ul>
-    </nav>
+          <li class="md-nav__item">
+  <a href="#other-properties_1" class="md-nav__link">
+    Other properties
+  </a>
   
 </li>
-      
-        <li class="md-nav__item">
+        
+          <li class="md-nav__item">
   <a href="#compare-with-official-container" class="md-nav__link">
     Compare with Official Container
   </a>
   
+</li>
+        
+      </ul>
+    </nav>
+  
 </li>
       
     </ul>
@@ -10597,7 +10611,9 @@ <h3 id="add-to-container">Add to container<a class="headerlink" href="#add-to-co
 <p class="admonition-title">Note</p>
 <p><code>container.add(containerLite)</code>, or <code>layer.add(containerLite)</code> won't add children of containerLite.</p>
 </div>
-<h2 id="compare-with-official-container">Compare with Official Container<a class="headerlink" href="#compare-with-official-container" title="Permanent link">&para;</a></h2>
+<h3 id="other-properties_1">Other properties<a class="headerlink" href="#other-properties_1" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="compare-with-official-container">Compare with Official Container<a class="headerlink" href="#compare-with-official-container" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Position/anlge/scale of a child object :<ul>
 <li><a href="../container/">Container</a> : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale.</li>
diff --git a/docs/site/dynamicbitmaptext/index.html b/docs/site/dynamicbitmaptext/index.html
index d50d6e07ac..3ab1c27d54 100644
--- a/docs/site/dynamicbitmaptext/index.html
+++ b/docs/site/dynamicbitmaptext/index.html
@@ -1779,6 +1779,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9591,7 +9619,17 @@ <h3 id="crop">Crop<a class="headerlink" href="#crop" title="Permanent link">&par
 </code></pre></div></li>
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>This dynamic bitmap text class is extended from <a href="../bitmaptext/">bitmap text</a></p>
+<p>See  <a href="../bitmaptext/">bitmap text</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/dynamictext/index.html b/docs/site/dynamictext/index.html
index 26cf96e732..f574c4e8fb 100644
--- a/docs/site/dynamictext/index.html
+++ b/docs/site/dynamictext/index.html
@@ -1947,6 +1947,27 @@
     Input events of child
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9988,6 +10009,27 @@
     Input events of child
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -10922,6 +10964,14 @@ <h3 id="input-events-of-child">Input events of child<a class="headerlink" href="
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="compare-with-other-kinds-of-text-game-object">Compare with other kinds of text game object<a class="headerlink" href="#compare-with-other-kinds-of-text-game-object" title="Permanent link">&para;</a></h3>
 <ul>
 <li><a href="../text/">Built-in text</a>: <ul>
diff --git a/docs/site/filechooser/index.html b/docs/site/filechooser/index.html
index 87955072d8..41963d4a53 100644
--- a/docs/site/filechooser/index.html
+++ b/docs/site/filechooser/index.html
@@ -2934,6 +2934,13 @@
     Open file chooser
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9594,6 +9601,13 @@
     Open file chooser
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9913,6 +9927,8 @@ <h3 id="open-file-chooser">Open file chooser<a class="headerlink" href="#open-fi
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../domelement/">dom game object</a>, <a href="../gameobject/">game object</a></p>
 <h3 id="interactive-with-other-game-objects">Interactive with other game objects<a class="headerlink" href="#interactive-with-other-game-objects" title="Permanent link">&para;</a></h3>
 <p>See <a href="../domelement/#interactive-with-other-game-objects">dom-element's Interactive with other game objects</a></p>
 
diff --git a/docs/site/filedropzone/index.html b/docs/site/filedropzone/index.html
index 131b91d7a4..02a67ab39d 100644
--- a/docs/site/filedropzone/index.html
+++ b/docs/site/filedropzone/index.html
@@ -2934,6 +2934,13 @@
     Create object URL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9566,6 +9573,13 @@
     Create object URL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9850,6 +9864,8 @@ <h3 id="create-object-url">Create object URL<a class="headerlink" href="#create-
     <div class="highlight"><pre><span></span><code><span class="nx">URL</span><span class="p">.</span><span class="nx">revokeObjectURL</span><span class="p">(</span><span class="nx">objectURL</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../domelement/">dom game object</a>, <a href="../gameobject/">game object</a></p>
 <h3 id="interactive-with-other-game-objects">Interactive with other game objects<a class="headerlink" href="#interactive-with-other-game-objects" title="Permanent link">&para;</a></h3>
 <p>See <a href="../domelement/#interactive-with-other-game-objects">dom-element's Interactive with other game objects</a></p>
 
diff --git a/docs/site/graphics/index.html b/docs/site/graphics/index.html
index 702cc98e60..53fa37f2d9 100644
--- a/docs/site/graphics/index.html
+++ b/docs/site/graphics/index.html
@@ -2046,6 +2046,13 @@
     Generate texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -2053,6 +2060,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9662,6 +9676,13 @@
     Generate texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9669,6 +9690,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9880,10 +9908,18 @@ <h4 id="transfer">Transfer<a class="headerlink" href="#transfer" title="Permanen
 <h3 id="generate-texture">Generate texture<a class="headerlink" href="#generate-texture" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="nx">graphics</span><span class="p">.</span><span class="nx">generateTexture</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span><span class="w">  </span><span class="c1">// key: texture key</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
 <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">graphics</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/gridtable/index.html b/docs/site/gridtable/index.html
index 590b6c90e5..8036e5e80c 100644
--- a/docs/site/gridtable/index.html
+++ b/docs/site/gridtable/index.html
@@ -2767,6 +2767,13 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
       </ul>
@@ -9805,6 +9812,13 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
       </ul>
@@ -10338,6 +10352,8 @@ <h4 id="container">Container<a class="headerlink" href="#container" title="Perma
 <h4 id="properties">Properties<a class="headerlink" href="#properties" title="Permanent link">&para;</a></h4>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">cellIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">cell</span><span class="p">.</span><span class="nx">index</span><span class="p">;</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
 
 
   
diff --git a/docs/site/image/index.html b/docs/site/image/index.html
index a6408bd0da..3ae44fd1f6 100644
--- a/docs/site/image/index.html
+++ b/docs/site/image/index.html
@@ -838,6 +838,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9451,6 +9458,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9565,6 +9579,8 @@ <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title=
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/imagebox/index.html b/docs/site/imagebox/index.html
index 89856f3f32..068fa30b8c 100644
--- a/docs/site/imagebox/index.html
+++ b/docs/site/imagebox/index.html
@@ -983,6 +983,27 @@
     Internal image game object
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9594,27 @@
     Internal image game object
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9601,7 +9643,8 @@
   <h1>Image box</h1>
 
 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
-<p>Keep aspect ratio of image game object when scale-down resizing.</p>
+<p>Keep aspect ratio of image game object when scale-down resizing. 
+A <a href="../containerlite/">containerLite game object </a> with 1 <a href="../image/">image game object</a>.</p>
 <ul>
 <li>Author: Rex</li>
 <li>Game object</li>
@@ -9748,6 +9791,15 @@ <h3 id="scale-image">Scale image<a class="headerlink" href="#scale-image" title=
 <h3 id="internal-image-game-object">Internal image game object<a class="headerlink" href="#internal-image-game-object" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">internalImageGO</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">image</span><span class="p">;</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<p>Create mask from internal image game object (<code>image.image</code>).</p>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Internal image game object (<code>image.image</code>) support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/inputtext/index.html b/docs/site/inputtext/index.html
index 246c5b2d05..676314a8d0 100644
--- a/docs/site/inputtext/index.html
+++ b/docs/site/inputtext/index.html
@@ -2962,6 +2962,13 @@
     Bypass key input
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9685,6 +9692,13 @@
     Bypass key input
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -10143,6 +10157,8 @@ <h3 id="bypass-key-input">Bypass key input<a class="headerlink" href="#bypass-ke
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">keyObj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">scene</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">addKey</span><span class="p">(</span><span class="s1">&#39;W&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">enableCapture</span><span class="p">,</span><span class="w"> </span><span class="nx">emitOnRepeat</span><span class="p">);</span>
 </code></pre></div>
 <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../domelement/">dom game object</a>, <a href="../gameobject/">game object</a></p>
 <h3 id="interactive-with-other-game-objects">Interactive with other game objects<a class="headerlink" href="#interactive-with-other-game-objects" title="Permanent link">&para;</a></h3>
 <p>See <a href="../domelement/#interactive-with-other-game-objects">dom-element's Interactive with other game objects</a></p>
 <h3 id="close-editing">Close editing<a class="headerlink" href="#close-editing" title="Permanent link">&para;</a></h3>
diff --git a/docs/site/layer/index.html b/docs/site/layer/index.html
index c8c3d2392c..8a2cab3579 100644
--- a/docs/site/layer/index.html
+++ b/docs/site/layer/index.html
@@ -2692,6 +2692,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9531,6 +9538,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9748,9 +9762,15 @@ <h3 id="set-property">Set property<a class="headerlink" href="#set-property" tit
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
 <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
-<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">layer</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/line/index.html b/docs/site/line/index.html
index 16d6a2cb25..0cfa0fa3bb 100644
--- a/docs/site/line/index.html
+++ b/docs/site/line/index.html
@@ -1191,6 +1191,27 @@
     Set textures
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9526,27 @@
     Set textures
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9533,7 +9575,7 @@
   <h1>Line</h1>
 
 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
-<p>Draw a line with start/end/body textures.</p>
+<p>Draw a line with start/end/body textures, extended from <a href="../rendertexture/">RenderTexture game object</a>.</p>
 <ul>
 <li>Author: Rex</li>
 <li>Game object</li>
@@ -9742,6 +9784,14 @@ <h3 id="set-textures">Set textures<a class="headerlink" href="#set-textures" tit
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">line</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/mesh/index.html b/docs/site/mesh/index.html
index ca3913099f..e790ad5120 100644
--- a/docs/site/mesh/index.html
+++ b/docs/site/mesh/index.html
@@ -1318,6 +1318,27 @@
     Debug
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9623,6 +9644,27 @@
     Debug
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9963,6 +10005,18 @@ <h3 id="debug">Debug<a class="headerlink" href="#debug" title="Permanent link">&
 <span class="nx">debugGraphics</span><span class="p">.</span><span class="nx">lineStyle</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mh">0x00ff00</span><span class="p">);</span>
 </code></pre></div></li>
 </ol>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mesh</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/ninepatch/index.html b/docs/site/ninepatch/index.html
index 7207042be0..d73e047de6 100644
--- a/docs/site/ninepatch/index.html
+++ b/docs/site/ninepatch/index.html
@@ -1191,6 +1191,27 @@
     Update texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9568,6 +9589,27 @@
     Update texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9603,7 +9645,7 @@
   <h1>Nine patch</h1>
 
 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
-<p>Stretchable image.</p>
+<p>Stretchable image, extended from <a href="../rendertexture/">RenderTexture game object</a>.</p>
 <ul>
 <li>Author: Rex</li>
 <li>Game object</li>
@@ -9913,6 +9955,14 @@ <h3 id="fixed-part-scale">Fixed-part scale<a class="headerlink" href="#fixed-par
 <h3 id="update-texture">Update texture<a class="headerlink" href="#update-texture" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="nx">ninePatch</span><span class="p">.</span><span class="nx">updateTexture</span><span class="p">();</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ninePatch</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="compare-with-nine-slice">Compare with <a href="../nineslice/">nine-slice</a><a class="headerlink" href="#compare-with-nine-slice" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Nine-slice is a built-in game object.</li>
diff --git a/docs/site/ninepatch2/index.html b/docs/site/ninepatch2/index.html
index 28d2c2194b..16ade6d218 100644
--- a/docs/site/ninepatch2/index.html
+++ b/docs/site/ninepatch2/index.html
@@ -1212,6 +1212,27 @@
     Update texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9582,6 +9603,27 @@
     Update texture
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9940,6 +9982,18 @@ <h3 id="fixed-part-scale">Fixed-part scale<a class="headerlink" href="#fixed-par
 <h3 id="update-texture">Update texture<a class="headerlink" href="#update-texture" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="nx">ninePatch</span><span class="p">.</span><span class="nx">updateTexture</span><span class="p">();</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ninePatch</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h3 id="compare-with-nine-patch">Compare with <a href="../ninepatch/">nine-patch</a><a class="headerlink" href="#compare-with-nine-patch" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Nine-patch2 has better performance.<ul>
diff --git a/docs/site/nineslice/index.html b/docs/site/nineslice/index.html
index 64887419a9..37af5728ff 100644
--- a/docs/site/nineslice/index.html
+++ b/docs/site/nineslice/index.html
@@ -1136,6 +1136,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9486,6 +9493,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9603,6 +9617,12 @@ <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title=
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">nineSlice</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h3 id="compare-with-nine-patch">Compare with <a href="../ninepatch/">nine-patch</a><a class="headerlink" href="#compare-with-nine-patch" title="Permanent link">&para;</a></h3>
 <ul>
 <li>Nine-slice is a built-in game object.</li>
diff --git a/docs/site/particles/index.html b/docs/site/particles/index.html
index 210f9234d5..f9d92c705d 100644
--- a/docs/site/particles/index.html
+++ b/docs/site/particles/index.html
@@ -1226,6 +1226,27 @@
     Custom particle class
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9755,6 +9776,27 @@
     Custom particle class
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10622,6 +10664,18 @@ <h3 id="custom-particle-class">Custom particle class<a class="headerlink" href="
 <span class="w">    </span><span class="p">}</span>
 <span class="p">}</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">emitter</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-card/index.html b/docs/site/perspective-card/index.html
index d31b7f2b74..41f964b117 100644
--- a/docs/site/perspective-card/index.html
+++ b/docs/site/perspective-card/index.html
@@ -1439,6 +1439,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9669,6 +9683,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9988,7 +10016,17 @@ <h3 id="debug">Debug<a class="headerlink" href="#debug" title="Permanent link">&
 </code></pre></div></li>
 </ol>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../containerlite/">container</a>.</p>
+<p>See <a href="../containerlite/">container</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">card</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-carousel/index.html b/docs/site/perspective-carousel/index.html
index 3810b18d5f..698f8b1947 100644
--- a/docs/site/perspective-carousel/index.html
+++ b/docs/site/perspective-carousel/index.html
@@ -1446,6 +1446,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9655,6 +9669,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9949,7 +9977,17 @@ <h3 id="rotation">Rotation<a class="headerlink" href="#rotation" title="Permanen
 </code></pre></div></li>
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../containerlite/">container</a>.</p>
+<p>See <a href="../containerlite/">container</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">carousel</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-image/index.html b/docs/site/perspective-image/index.html
index c4c4ae66ed..c02c712f0a 100644
--- a/docs/site/perspective-image/index.html
+++ b/docs/site/perspective-image/index.html
@@ -1349,6 +1349,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9587,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9787,7 +9815,17 @@ <h3 id="change-frame">Change frame<a class="headerlink" href="#change-frame" tit
 <div class="highlight"><pre><span></span><code><span class="nx">rt</span><span class="p">.</span><span class="nx">drawFrame</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="nx">frame</span><span class="p">);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../mesh/">Mesh</a> game object.</p>
+<p>See <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-imagecarousel/index.html b/docs/site/perspective-imagecarousel/index.html
index 9953018300..73a88bf1c5 100644
--- a/docs/site/perspective-imagecarousel/index.html
+++ b/docs/site/perspective-imagecarousel/index.html
@@ -1425,6 +1425,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9585,6 +9606,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9839,6 +9881,18 @@ <h4 id="status">Status<a class="headerlink" href="#status" title="Permanent link
     <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">isRunning</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">carousel</span><span class="p">.</span><span class="nx">roll</span><span class="p">.</span><span class="nx">isRunning</span><span class="p">;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../containerlite/">container</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">carousel</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-rendertexture/index.html b/docs/site/perspective-rendertexture/index.html
index 959159e88d..c4f22b0fdc 100644
--- a/docs/site/perspective-rendertexture/index.html
+++ b/docs/site/perspective-rendertexture/index.html
@@ -1363,6 +1363,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9587,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9777,7 +9805,17 @@ <h4 id="fill">Fill<a class="headerlink" href="#fill" title="Permanent link">&par
 <span class="c1">// image.rt.fill(rgb, alpha, x, y, width, height);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../perspective-image/">Perspective image</a> game object.</p>
+<p>See <a href="../perspective-image/">Perspective image game object</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/perspective-sprite/index.html b/docs/site/perspective-sprite/index.html
index 92dfd7204f..2144321483 100644
--- a/docs/site/perspective-sprite/index.html
+++ b/docs/site/perspective-sprite/index.html
@@ -1370,6 +1370,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9559,6 +9573,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9805,7 +9833,17 @@ <h4 id="restart">Restart<a class="headerlink" href="#restart" title="Permanent l
 <span class="c1">// sprite.anims.restart(includeDelay, resetRepeats);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../perspective-image/">Perspective image</a> game object.</p>
+<p>See <a href="../perspective-image/">Perspective image game object</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">sprite</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/plane/index.html b/docs/site/plane/index.html
index ffdfd792af..418b82d413 100644
--- a/docs/site/plane/index.html
+++ b/docs/site/plane/index.html
@@ -1286,6 +1286,27 @@
     Checkerboard
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties_1" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9531,6 +9552,27 @@
     Checkerboard
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties_1" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9773,6 +9815,18 @@ <h3 id="checkerboard">Checkerboard<a class="headerlink" href="#checkerboard" tit
     <div class="highlight"><pre><span></span><code><span class="nx">plane</span><span class="p">.</span><span class="nx">removeCheckerboard</span><span class="p">();</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties_1">Other properties<a class="headerlink" href="#other-properties_1" title="Permanent link">&para;</a></h3>
+<p>See <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">plane</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/quad-image/index.html b/docs/site/quad-image/index.html
index c352be95ee..1efc290e0c 100644
--- a/docs/site/quad-image/index.html
+++ b/docs/site/quad-image/index.html
@@ -1453,6 +1453,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9545,6 +9559,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9765,7 +9793,17 @@ <h3 id="tint-color">Tint color<a class="headerlink" href="#tint-color" title="Pe
 </code></pre></div></li>
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../mesh/">Mesh</a> game object.</p>
+<p>See <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/quad-rendertexture/index.html b/docs/site/quad-rendertexture/index.html
index 431cc8c2bc..26e6b2afc6 100644
--- a/docs/site/quad-rendertexture/index.html
+++ b/docs/site/quad-rendertexture/index.html
@@ -1481,6 +1481,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9587,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9781,7 +9809,17 @@ <h4 id="fill">Fill<a class="headerlink" href="#fill" title="Permanent link">&par
 <span class="c1">// image.rt.fill(rgb, alpha, x, y, width, height);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../quad-image/">Quad image</a> game object.</p>
+<p>See <a href="../quad-image/">Quad image game object</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/rendertexture/index.html b/docs/site/rendertexture/index.html
index fa4344cb1a..d2475c97a4 100644
--- a/docs/site/rendertexture/index.html
+++ b/docs/site/rendertexture/index.html
@@ -2019,6 +2019,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9580,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9751,6 +9765,8 @@ <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title=
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/search/search_index.json b/docs/site/search/search_index.json
index ebba46ba41..46bda5a4f5 100644
--- a/docs/site/search/search_index.json
+++ b/docs/site/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":""},{"location":"#phaser","title":"Phaser","text":"<p>Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.</p>"},{"location":"#links","title":"Links","text":""},{"location":"#phaser3","title":"Phaser3","text":"<ul> <li>FAQ</li> <li>Official discord channel</li> <li>API document</li> <li>Examples</li> <li>Bug report</li> </ul>"},{"location":"#rex-plugins","title":"Rex plugins","text":"<ul> <li>Plugin list<ul> <li>Demos</li> </ul> </li> <li>Discord channel</li> <li>Bug report</li> <li>Feature suggestion &amp; discussion</li> </ul>"},{"location":"achievements/","title":"CSV Achievements","text":""},{"location":"achievements/#introduction","title":"Introduction","text":"<p>Achievements in a csv table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"achievements/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"achievements/#install-plugin","title":"Install plugin","text":""},{"location":"achievements/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexachievementsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexachievementsplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexachievementsplugin').add();\n</code></pre></li> </ul>"},{"location":"achievements/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AchievementsPlugin from 'phaser3-rex-plugins/plugins/achievements-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAchievements',\nplugin: AchievementsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre></li> </ul>"},{"location":"achievements/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Achievements from 'phaser3-rex-plugins/plugins/achievements.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = new Achievements();\n</code></pre></li> </ul>"},{"location":"achievements/#create-instance","title":"Create instance","text":"<pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre>"},{"location":"achievements/#load-table-from-csv-string","title":"Load table from csv string","text":"<pre><code>achievements.loadCSV(csvString, {\n// delimiter: ','\n});\n</code></pre> <p>For exameple, csv string</p> A A Lv1 Ach1 &gt;= 10 &lt; 20 Lv1 Ach2 &gt;= 20 &lt; 50 Lv1 Ach3 &gt;= 50 <pre><code>,A,A\nLv1,Ach1,&gt;= 10,&lt;= 20,\nLv1,Ach2,&gt;= 20,&lt; 50,\nLv1,Ach3,&gt;= 50,,\n</code></pre> <ul> <li>1st column : Level names</li> <li>2nd column : Achievement names</li> <li>Other columns : Condtions</li> <li>1st row : Variable names of conditions.</li> </ul> <p>means that:</p> <pre><code>Lv1, Ach1: (A&gt;=10) &amp;&amp; (A&lt;20)\nLv1, Ach2: (A&gt;=20) &amp;&amp; (A&lt;50)\nLv1, Ach3: (A&gt;=50)\n</code></pre>"},{"location":"achievements/#test","title":"Test","text":"<ol> <li>Run test     <pre><code>var achievements.runTest(levelName, values);\n</code></pre><ul> <li><code>levelName</code> : Level name, in 1st column of achievements table.</li> <li><code>values</code> : Inputs in Key-value pairs</li> </ul> </li> <li>Get obtained states     <pre><code>var states = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> </ol> <p>or</p> <pre><code>var states = achievements.getTestResults(levelName, values);\n</code></pre>"},{"location":"achievements/#get-obtained-states","title":"Get obtained states","text":"<ul> <li>Get obtained states of an achievement in a level     <pre><code>var state = achievements.getObtainedState(levelName, achievementName);\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> <li>Get obtained states of a level     <pre><code>var state = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre></li> </ul> </li> <li>Get obtained states of all levels     <pre><code>var state = achievements.getObtainedState();\n// var state = achievements.getObtainedStates();\n</code></pre><ul> <li><code>states</code> : Obtained states of all levels     <pre><code>{\nlevelName: {\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n}\n</code></pre></li> </ul> </li> <li>For each obtained state in a level     <pre><code>achievements.forEachObtainedState(levelName, function(levelName, achievementName, state) {\n\n}, scope)\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"achievements/#get-name","title":"Get name","text":"<ul> <li>Name of levels     <pre><code>var names = achievements.getLevelNames();\n// var names = achievements.getLevelNames(out);\n</code></pre></li> <li>Name of achievements in a level     <pre><code>var names = achievements.getAchievementNames(levelName);\n// var names = achievements.getAchievementNames(levelName, out);\n</code></pre></li> </ul>"},{"location":"achievements/#save-load-obtained-states","title":"Save &amp; load obtained states","text":"<ul> <li>Get obtained states     <pre><code>var states = achievements.getObtainedStates();\n</code></pre></li> <li>Load obtained states     <pre><code>achievements.loadObtainedStates(states);\n</code></pre></li> </ul>"},{"location":"achievements/#set-obtained-state","title":"Set obtained state","text":"<ul> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>true</code>.     <pre><code>achievements.setObtainedState(levelName, achievementName);\n</code></pre></li> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>false</code>.     <pre><code>achievements.clearObtainedState(levelName, achievementName);\n// achievements.setObtainedState(levelName, achievementName, false);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/","title":"Alpha mask image","text":""},{"location":"alphamaskimage/#introduction","title":"Introduction","text":"<p>Load a texture, then apply an alpha mask from another texture. Extended from canvas plugin.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"alphamaskimage/#live-demos","title":"Live demos","text":"<ul> <li>Alpha-mask-image</li> </ul>"},{"location":"alphamaskimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"alphamaskimage/#install-plugin","title":"Install plugin","text":""},{"location":"alphamaskimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexalphamaskimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexalphamaskimageplugin.min.js', true);\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AlphaMaskImagePlugin from 'phaser3-rex-plugins/plugins/alphamaskimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAlphaMaskImagePlugin',\nplugin: AlphaMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import AlphaMaskImage from 'phaser3-rex-plugins/plugins/alphamaskimage.js';\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = new AlphaMaskImage(scene, x, y, key, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAlphaMaskImagePlugin',\nplugin: AlphaMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"alphamaskimage/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <ul> <li><code>key</code>, <code>frame</code> : Texture key, frame name of target texture.</li> <li><code>mask.key</code>, <code>mask.frame</code> : Texture key, frame name of the mask texture.</li> <li><code>mask.invertAlpha</code> :<ul> <li><code>false</code> : Mask non-alpha (alpha === 0) area. Default behavior.</li> <li><code>true</code> : Mask alpha (alpha &gt; 0) area.</li> </ul> </li> <li><code>mask.scale</code> :<ul> <li><code>undefined</code> : Expand mask texture size to fit target texture.</li> <li>A number : Scale mask texture size.</li> </ul> </li> <li><code>backgroundColor</code> : Background color filled with masked area.<ul> <li><code>undefiined</code> : No background color.</li> </ul> </li> </ul> <p>Add image from JSON</p> <pre><code>var image = scene.make.rexAlphaMaskImage({\nx: 0,\ny: 0,\nkey: key,\nframe: name,\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n\nadd: true\n});\n</code></pre>"},{"location":"alphamaskimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends AlphaMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n// image.setTexture(key, frame, mask);\n</code></pre> <p>or</p> <pre><code>image.setTexture(key, frame, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <ul> <li><code>mask.key</code>, <code>mask.frame</code> : Texture key, frame name of the mask texture.</li> <li><code>mask.invertAlpha</code> :<ul> <li><code>false</code> : Mask non-alpha (alpha === 0) area. Default behavior.</li> <li><code>true</code> : Mask alpha (alpha &gt; 0) area.</li> </ul> </li> <li><code>mask.scale</code> :<ul> <li><code>undefined</code> : Expand mask texture size to fit target texture.</li> <li>A number : Scale mask texture size.</li> </ul> </li> <li><code>backgroundColor</code> : Background color filled with masked area.<ul> <li><code>undefiined</code> : No background color.</li> </ul> </li> </ul>"},{"location":"anchor/","title":"Anchor","text":""},{"location":"anchor/#introduction","title":"Introduction","text":"<p>Set size and position based on visible window.</p> <p>Note</p> <p>Visible window will be changed when scale mode is ENVELOP, WIDTH_CONTROLS_HEIGHT, or HEIGHT_CONTROLS_WIDTH.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"anchor/#live-demos","title":"Live demos","text":"<ul> <li>Anchor</li> <li>Resize</li> <li>Camera zoom/scroll</li> </ul>"},{"location":"anchor/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"anchor/#install-plugin","title":"Install plugin","text":""},{"location":"anchor/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexanchorplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexanchorplugin.min.js', true);\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = scene.plugins.get('rexanchorplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AnchorPlugin from 'phaser3-rex-plugins/plugins/anchor-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAnchor',\nplugin: AnchorPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = scene.plugins.get('rexAnchor').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Anchor from 'phaser3-rex-plugins/plugins/anchor.js';\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = new Anchor(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#create-instance","title":"Create instance","text":"<pre><code>var anchor = scene.plugins.get('rexAnchor').add(gameObject, {\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0',\n\n// width: '100%+0',\n// height: '100%+0',\n// onResizeCallback: function(width, height, gameObject, anchor) {},\n// onResizeCallbackScope: undefined,\n\n// onUpdateViewportCallback: function(viewport, gameObject, anchor) {},\n// onUpdateViewportCallbackScope: undefined,\n\n// enable: true\n});\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> </ul> <p>For example, anchor game object's left bound to viewport's left+10, centerY to viewport's center</p> <pre><code>{\nleft: 'left+10',\ncenterY: 'center'\n}\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li> <p><code>onResizeCallback</code>, <code>onResizeCallbackScope</code> : Callback of resizing game object     <pre><code>function(width, height, gameObject, anchor) {\n// gameObject.setSize(width, height);\n// gameObject.setDisplaySize(width, height);\n// ...\n}\n</code></pre></p> </li> <li> <p><code>onUpdateViewportCallback</code>, <code>onUpdateViewportCallback</code> : Callback invoked when viewport changed (anchor)     <pre><code>fucntion(viewport, gameObject, anchor) {\n// Can change properties of viewport here\n// var centerX = viewport.centerX,\n//     centerY = viewport.centerY;\n// viewport.width *= 0.8;\n// viewport.height *= 0.9;\n// viewport.centerX = centerX;\n// viewport.centerY = centerY;\n}\n</code></pre></p> <ul> <li><code>viewport</code>\uff1a A rectangle object</li> </ul> </li> <li> <p><code>enable</code> :</p> <ul> <li><code>undefined</code>, or <code>true</code> : Anchor game object under <code>'resize'</code> event of scale manager.</li> <li><code>false</code> : Won't anchor game object automatially.</li> </ul> </li> </ul>"},{"location":"anchor/#reset-config","title":"Reset config","text":"<pre><code>anchor.resetFromJSON({\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0',\n\n// width: '100%+0',\n// height: '100%+0',    \n\n// onUpdateViewportCallback: function(viewport, gameObject, anchor) {}\n// onUpdateViewportCallbackScope: undefined,\n})\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: 0~100<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code></li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code>, <code>onResizeCallbackScope</code> : Callback of resizing game object     <pre><code>function(width, height, gameObject, anchor) {\n// gameObject.setSize(width, height);\n// gameObject.setDisplaySize(width, height);\n// ...\n}\n</code></pre></li> </ul>"},{"location":"anchor/#set-onupdateviewport-callback","title":"Set OnUpdateViewport callback","text":"<pre><code>anchor.setUpdateViewportCallback(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>fucntion(viewport, gameObject, anchor) {\n// Can change properties of viewport here\n// var centerX = viewport.centerX,\n//     centerY = viewport.centerY;\n// viewport.width *= 0.8;\n// viewport.height *= 0.9;\n// viewport.centerX = centerX;\n// viewport.centerY = centerY;\n}\n</code></pre><ul> <li><code>viewport</code>\uff1a A rectangle object</li> </ul> </li> </ul>"},{"location":"anchor/#manual-anchor","title":"Manual anchor","text":"<pre><code>anchor.anchor();\n</code></pre>"},{"location":"anchor/#auto-anchor","title":"Auto anchor","text":"<ul> <li>Anchor game object under <code>'resize'</code> event of scale manager.     <pre><code>anchor.autoAnchor();\n// anchor.autoAnchor(true);\n</code></pre></li> <li>Disable auto-anchor     <pre><code>anchor.autoAnchor(false);\n</code></pre></li> </ul>"},{"location":"angle/","title":"Angle","text":""},{"location":"angle/#introduction","title":"Introduction","text":"<p>Convert angle value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"angle/#usage","title":"Usage","text":""},{"location":"angle/#degree-radians","title":"Degree &lt;-&gt; Radians","text":"<ul> <li>Degree to radians     <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> <li>Radians to degree    <pre><code>var deg = Phaser.Math.RadToDeg(rad);  // deg : -180 ~ 180\n</code></pre></li> </ul>"},{"location":"angle/#wrap","title":"Wrap","text":"<ul> <li>Wrap angle (radians) in the range of -PI to PI    <pre><code>var rad = Phaser.Math.Angle.Wrap(angle);\n</code></pre></li> <li>Wrap angle (radians) in the range of 0 to 2*PI    <pre><code>var rad = Phaser.Math.Angle.Normalize(angle);\n</code></pre></li> <li>Wrap angle (degrees) in the range of -180 to 180    <pre><code>var deg = Phaser.Math.Angle.WrapDegrees(angle);\n</code></pre></li> </ul>"},{"location":"angle/#angle-between-points","title":"Angle between points","text":"<ul> <li>Angle from (0,0) to vector (x2 - x1 , y2 - y1)    <pre><code>var rad = Phaser.Math.Angle.Between(x1, y1, x2, y2);\n</code></pre> <pre><code>var rad = Phaser.Math.Angle.BetweenPoints(point1, point2);\n</code></pre></li> </ul>"},{"location":"angle/#angle-between-angles","title":"Angle between angles","text":"<ul> <li>Shortest angle (degrees) between 2 angles     <pre><code>var deg = Phaser.Math.Angle.ShortestBetween(angle1, angle2)\n</code></pre><ul> <li><code>angle1</code>, <code>angle2</code> : Angle in degrees in the range of -180 to 180</li> <li><code>deg</code> : Shortest angle in degrees<ul> <li>deg &gt; 0 : Counter-ClockWise rotation</li> <li>deg &lt; 0 : ClockWise rotation</li> </ul> </li> </ul> </li> </ul>"},{"location":"angle/#rotate-around-position","title":"Rotate around position","text":"<ul> <li>Rotate a <code>point</code> around <code>x</code> and <code>y</code> by the given <code>angle</code>.     <pre><code>var out = Phaser.Math.RotateAround(point, x, y, angle);\n</code></pre></li> <li>Rotate a <code>point</code> around <code>x</code> and <code>y</code> by the given <code>angle</code> and <code>distance</code>.     <pre><code>var out = Phaser.Math.RotateAroundDistance(point, x, y, angle, distance);\n</code></pre></li> </ul>"},{"location":"angle/#rotate-to-angle","title":"Rotate to angle","text":"<pre><code>var rad = Phaser.Math.Angle.RotateTo(currentAngle, targetAngle, lerp)\n</code></pre> <ul> <li><code>currentAngle</code>, : The current angle, in radians.</li> <li><code>targetAngle</code> : The target angle to rotate to, in radians.</li> <li><code>lerp</code> : The lerp value to add to the current angle.</li> </ul>"},{"location":"angle/#random-angle","title":"Random angle","text":"<ul> <li>Returns a random angle in the range [-pi, pi].    <pre><code>var angle = Phaser.Math.Angle.Random();\n</code></pre></li> <li>Returns a random angle in the range [-180, 180].    <pre><code>var angle = Phaser.Math.Angle.RandomDegrees();\n</code></pre></li> </ul>"},{"location":"animation/","title":"Animation","text":""},{"location":"animation/#introduction","title":"Introduction","text":"<p>Animation and animations manager.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"animation/#usage","title":"Usage","text":""},{"location":"animation/#animation-manager","title":"Animation manager","text":""},{"location":"animation/#add-animation","title":"Add animation","text":"<pre><code>scene.anims.create({\nkey: '',\n\nframes: [],\n\nsortFrames: true,\ndefaultTextureKey: null,\nskipMissedFrames: true,\n\n\n// time\ndelay: 0,\nduration: null,\nframeRate: null,\n\n// repeat\nrepeat: 0,              // set to (-1) to repeat forever\nrepeatDelay: 0,\nyoyo: false,\n\n// visible\nshowBeforeDelay: false,\nshowOnStart: false,\nhideOnComplete: false\n});\n</code></pre> <ul> <li><code>key</code> : Unique key of this animation data</li> <li><code>frames</code> : An array of <code>{key, frame}</code><ul> <li>Properties     <pre><code>{\nkey: '',\nframe: '', // string, or number\nduration: 0\n}\n</code></pre><ul> <li><code>duration</code> : Additional time (in ms) that this frame should appear for during playback.</li> </ul> </li> <li>Every frame in the atlas     <pre><code>scene.anims.generateFrameNames(key);\n</code></pre></li> <li>Frame sequence indexing from start to end     <pre><code>var config = ;\nscene.anims.generateFrameNames(key,\n{\nprefix: '',\nstart: 0,\nend: 0,\nsuffix: '',\nzeroPad: 0,\n// outputArray: [], // Append frames into this array\n});\n</code></pre><ul> <li><code>prefix + Pad(i, zeroPad, '0', 1) + suffix</code>, i: start ~ end</li> </ul> </li> <li>Custom frame sequence     <pre><code>var config = ;\nscene.anims.generateFrameNames(key,\n{\nprefix: '',\nsuffix: '',\nzeroPad: 0,\nframes: [ ... ]\n// outputArray: [], // Append frames into this array\n});\n</code></pre><ul> <li><code>prefix + Pad(frames[i], zeroPad, '0', 1) + suffix</code></li> </ul> </li> </ul> </li> <li><code>sortFrames</code> : Frame names numerically sorted. Default value is <code>true</code>.</li> <li><code>defaultTextureKey</code> : The key of the texture all frames of the animation will use. Can be overridden on a per frame basis.</li> <li><code>skipMissedFrames</code> : Skip frames if the time lags, or always advanced anyway? Default value is <code>true</code>.</li> <li><code>delay</code> : Delay before starting playback. Value given in milliseconds.</li> <li><code>duration</code> : How long the animation should play for in milliseconds. If not given its derived from <code>frameRate</code>.</li> <li><code>frameRate</code> : The frame rate of playback in frames per second. Default value is <code>24</code>.</li> <li><code>repeat</code> : Number of times to repeat the animation. Default value is <code>0</code>.<ul> <li><code>-1</code> : Infinity</li> </ul> </li> <li><code>repeatDelay</code> : Delay before the animation repeats. Value given in milliseconds.</li> <li><code>yoyo</code> : Should the animation yoyo? (reverse back down to the start) before repeating? Default value is <code>false</code>.</li> <li><code>showBeforeDelay</code> :  If this animation has a delay, should it show the first frame immediately (<code>true</code>), or only after the delay (<code>false</code>)</li> <li><code>showOnStart</code> : Should <code>sprite.visible = true</code> when the animation starts to play? This happens after any delay, if set. Default value is <code>false</code>.</li> <li><code>hideOnComplete</code> : Should sprite.visible = false when the animation finishes? Default value is <code>false</code>.</li> </ul>"},{"location":"animation/#add-from-aseprite","title":"Add from Aseprite","text":"<p>Aseprite</p> <pre><code>scene.anims.createFromAseprite(key);\n// scene.anims.createFromAseprite(key, tags, target);\n</code></pre> <ul> <li><code>key</code> : The key of the loaded Aseprite atlas.</li> <li><code>tags</code> :<ul> <li><code>undefined</code> : Load all tags.</li> <li>Array of string tag : Load these tags.</li> </ul> </li> <li><code>target</code> : Create the animations on this target Sprite. <ul> <li><code>undefined</code> : Created globally in this Animation Manager. Default behavior.</li> </ul> </li> </ul>"},{"location":"animation/#remove-animation","title":"Remove animation","text":"<pre><code>scene.anims.remove(key);\n</code></pre>"},{"location":"animation/#delay-between-two-animations","title":"Delay between two animations","text":"<ul> <li>Add     <pre><code>scene.anims.addMix(animA, animB, delay);\n</code></pre><ul> <li><code>animA</code>, <code>animB</code> : String key of an animation, or an instance of animation.</li> </ul> </li> <li>Remove     <pre><code>scene.anims.removeMix(animA, animB);\n// scene.anims.removeMix(animA);\n</code></pre></li> <li>Get     <pre><code>var delay = scene.anims.getMix(animA, animB);\n</code></pre></li> </ul>"},{"location":"animation/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>scene.anims.play(key, children);\n</code></pre></li> <li>Stagger play (delay play)     <pre><code>scene.anims.staggerPlay(key, children, stagger, staggerFirst);\n</code></pre><ul> <li><code>children</code> : An array of Game Objects to play the animation on</li> <li><code>stagger</code> : The amount of time, in milliseconds, to offset each play time by</li> <li><code>staggerFirst</code> : Set <code>true</code> to apply delay on 1st child</li> </ul> </li> </ul>"},{"location":"animation/#pause-all-animations","title":"Pause all animations","text":"<pre><code>scene.anims.pauseAll();\n</code></pre>"},{"location":"animation/#resume-all-animations","title":"Resume all animations","text":"<pre><code>scene.anims.resumeAll();\n</code></pre>"},{"location":"animation/#has-animation","title":"Has animation","text":"<pre><code>var hasAnim = scene.anims.exists(key);\n</code></pre>"},{"location":"animation/#exportload","title":"Export/load","text":"<ul> <li>Export JSON     <pre><code>var json = scene.anims.toJSON();\n</code></pre></li> <li>Load from JSON     <pre><code>scene.anims.fromJSON(json);\n// scene.anims.fromJSON(json, clearCurrentAnimations);\n</code></pre><ul> <li>Load JSON in preload stage     <code>javascript    scene.load.json(key, url);</code></li> <li>Load animation in preload stage     <pre><code>scene.load.animation(key, url);\n</code></pre></li> </ul> </li> </ul>"},{"location":"animation/#events","title":"Events","text":"<ul> <li>On add animation    <pre><code>scene.anims.on('add', function(key, anim) {});\n</code></pre></li> <li>On remove animation    <pre><code>scene.anims.on('remove', function(key, anim) {});\n</code></pre></li> <li>On pause all animations    <pre><code>scene.anims.on('pauseall', function() {});\n</code></pre></li> <li>On resume all animations    <pre><code>scene.anims.on('resumeall', function() {});\n</code></pre></li> </ul>"},{"location":"animation/#animation-object","title":"Animation object","text":"<pre><code>var anim = scene.anims.get(key);\n</code></pre>"},{"location":"animation/#add-frame","title":"Add frame","text":"<ul> <li>Append frames     <pre><code>anim.addFrame(frame);\n</code></pre><ul> <li><code>frame</code> : <code>scene.anims.generateFrameNames(key, config)</code></li> </ul> </li> <li>Insert frames at index     <pre><code>anim.addFrameAt(index, frame);\n</code></pre><ul> <li><code>frame</code> : <code>scene.anims.generateFrameNames(key, config)</code></li> </ul> </li> </ul>"},{"location":"animation/#remove-frame","title":"Remove frame","text":"<ul> <li>Remove frame at     <pre><code>anim.removeFrameAt(index);\n</code></pre></li> <li>Remove frame     <pre><code>anim.removeFrame(frame);\n</code></pre></li> </ul>"},{"location":"animation/#get-frame","title":"Get frame","text":"<ul> <li>Has frame index     <pre><code>var HasFrameAt = anim.checkFrame(index);\n</code></pre></li> <li>Get frame at index     <pre><code>var frame = anim.getFrameAt(index);\n</code></pre></li> <li>Get last frame     <pre><code>var frame = anim.getLastFrame();\n</code></pre></li> </ul>"},{"location":"animation/#export","title":"Export","text":"<ul> <li>Export JSON     <pre><code>var json = anim.toJSON();\n</code></pre>     or     <pre><code>var jsonString = JSON.stringify(anim);\n</code></pre></li> </ul>"},{"location":"arcade-body/","title":"Body","text":""},{"location":"arcade-body/#introduction","title":"Introduction","text":"<p>Arcade physics body.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-body/#usage","title":"Usage","text":""},{"location":"arcade-body/#get-physics-body","title":"Get physics body","text":"<ol> <li>Enable physics world</li> <li>Add existing game object(s) to physics world<ul> <li>Add a game object     <pre><code>var gameObject = scene.physics.add.existing(gameObject, bodyType);\n</code></pre><ul> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body</li> <li><code>1</code> : Static body</li> </ul> </li> </ul> </li> <li>Add game objects     <pre><code>scene.physics.world.enable(gameObjects, bodyType);\n</code></pre><ul> <li><code>gameObjects</code> : An array of game objects, or a group object</li> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body</li> <li><code>1</code> : Static body</li> </ul> </li> </ul> </li> </ul> </li> <li>Get physics body     <pre><code>var body = gameObject.body;\n</code></pre></li> </ol>"},{"location":"arcade-body/#enable","title":"Enable","text":"<p>Whether this Body is updated by the physics simulation.</p> <ul> <li>Enable (default)     <pre><code>body.setEnable();\n</code></pre>     or     <pre><code>body.enable = true;\n</code></pre></li> <li>Disable     <pre><code>body.setEnable(false);\n</code></pre>     or     <pre><code>body.enable = false;\n</code></pre></li> </ul>"},{"location":"arcade-body/#immovable","title":"Immovable","text":"<p>Whether this Body can be moved by collisions with another Body.</p> <ul> <li>Enable     <pre><code>body.setImmovable();\n// body.immovable = true;\n</code></pre></li> <li>Disable (defalut)     <pre><code>body.setImmovable(false);\n// body.immovable = false;\n</code></pre></li> <li>Get     <pre><code>var immovable = body.immovable;\n</code></pre></li> </ul>"},{"location":"arcade-body/#pushable","title":"Pushable","text":"<p>Sets if this Body can be pushed by another Body.</p> <ul> <li>Enable (default value of dynamic body)     <pre><code>body.pushable = true;\n</code></pre></li> <li>Disable, reflect back all of the velocity it is given to the colliding body.     <pre><code>body.pushable = false;\n</code></pre></li> <li>Get     <pre><code>var pushable = body.pushable;\n</code></pre></li> </ul>"},{"location":"arcade-body/#moveable","title":"Moveable","text":"<p>Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity.</p> <ul> <li>Enable (default)     <pre><code>body.moves = true;\n</code></pre></li> <li>Disable     <pre><code>body.moves = false;\n</code></pre></li> <li>Get     <pre><code>var moves = body.moves;\n</code></pre></li> </ul> <p>Use case</p> <p>Set <code>body.moves</code> to <code>false</code> when game object is controlled by tween or dragging.</p>"},{"location":"arcade-body/#destroy","title":"Destroy","text":"<p>Physics body will be destroyed automatically when game object is destroyed.</p>"},{"location":"arcade-body/#movement","title":"Movement","text":""},{"location":"arcade-body/#velocity","title":"Velocity","text":"<ul> <li>Set     <pre><code>body.setVelocity(x,y);\n</code></pre>     or     <pre><code>body.setVelocityX(x);\nbody.setVelocityY(x);\n</code></pre></li> <li>Get     <pre><code>var vx = body.velocity.x;\nvar vy = body.velocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#max-speed","title":"Max speed","text":"<ul> <li>Set     <pre><code>body.setMaxSpeed(speed);\n</code></pre></li> <li>Get     <pre><code>var speed = body.maxSpeed;\n</code></pre></li> </ul>"},{"location":"arcade-body/#max-velocity","title":"Max velocity","text":"<ul> <li>Set     <pre><code>body.setMaxVelocity(x, y);\n</code></pre>     or     <pre><code>body.setMaxVelocityX(x);\nbody.setMaxVelocityY(y);\n</code></pre></li> <li>Get      <pre><code>var vx = body.maxVelocity.x;\nvar vy = body.maxVelocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#acceleration","title":"Acceleration","text":"<ul> <li>Set     <pre><code>body.setAcceleration(x, y);\n</code></pre>     or     <pre><code>body.setAccelerationX(x);\nbody.setAccelerationY(y);\n</code></pre></li> <li>Get     <pre><code>var ax = body.acceleration.x;\nvar ay = body.acceleration.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>body.setGravity(x, y);\n</code></pre>     or     <pre><code>body.setGravityX(x);\nbody.setGravityY(y);\n</code></pre></li> <li>Get     <pre><code>var gx = body.gravity.x;\nvar gy = body.gravity.y;\n</code></pre></li> <li>Enables (default)     <pre><code>body.setAllowGravity();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowGravity(false);\n</code></pre></li> </ul>"},{"location":"arcade-body/#drag","title":"Drag","text":"<p>Reduces speed per second.</p> <ul> <li>Set     <pre><code>body.setDrag(x, y);\n</code></pre>     or     <pre><code>body.setDragX(x);\nbody.setDragY(y);\n</code></pre></li> <li>Get     <pre><code>var dx = body.drag.x;\nvar dy = body.drag.y;\n</code></pre></li> <li>Enables (default)     <pre><code>body.setAllowDrag();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowDrag(false);\n</code></pre></li> <li>Enable Damping (default: disable)     <pre><code>body.setDamping(true);\n// body.useDamping = true;\n</code></pre></li> </ul>"},{"location":"arcade-body/#reset-position","title":"Reset position","text":"<pre><code>body.reset(x, y);\n</code></pre>"},{"location":"arcade-body/#stop","title":"Stop","text":"<p>Sets acceleration, velocity, and speed to zero.</p> <pre><code>body.stop();\n</code></pre>"},{"location":"arcade-body/#friction","title":"Friction","text":"<p>If this Body is <code>immovable</code> and in motion, this the proportion of this Body's movement received by the riding body on each axis.</p> <ul> <li>Set     <pre><code>body.setFriction(x, y);\n</code></pre>     or     <pre><code>body.setFrictionX(x);\nbody.setFrictionY(y);\n</code></pre></li> <li>Get     <pre><code>var fx = body.friction.x;\nvar fy = body.friction.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#speed","title":"Speed","text":"<ul> <li>The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step.     <pre><code>var dx = body.deltaAbsX();\nvar dy = body.deltaAbsY();\n</code></pre></li> </ul>"},{"location":"arcade-body/#rotation","title":"Rotation","text":""},{"location":"arcade-body/#allow-rotation","title":"Allow rotation","text":"<p>Whether this Body's rotation is affected by its angular acceleration and velocity.</p> <ul> <li>Enable (default)     <pre><code>body.setAllowRotation();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowRotation(false);\n</code></pre></li> <li>Get     <pre><code>var allowRotation = body.allowRotation;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-velocity","title":"Angular velocity","text":"<ul> <li>Set      <pre><code>body.setAngularVelocity(v);\n</code></pre></li> <li>Get     <pre><code>var av = body.angularVelocity;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-acceleration","title":"Angular acceleration","text":"<ul> <li>Set      <pre><code>body.setAngularAcceleration(v);\n</code></pre></li> <li>Get     <pre><code>var aa = body.angularAcceleration;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-drag","title":"Angular drag","text":"<p>Reduces angular speed per second.</p> <ul> <li>Set     <pre><code>body.setAngularDrag(v);\n</code></pre></li> <li>Get     <pre><code>var ad = body.angularDrag;\n</code></pre></li> </ul>"},{"location":"arcade-body/#collision","title":"Collision","text":""},{"location":"arcade-body/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>body.setSize(width, height, center);\n</code></pre><ul> <li><code>center</code> : <code>false</code> to set body's offset to (0, 0).<ul> <li>Not work in Graphics object.</li> </ul> </li> </ul> </li> <li>Circle     <pre><code>body.setCircle(radius, offsetX, offsetY);\n</code></pre></li> </ul>"},{"location":"arcade-body/#offset","title":"Offset","text":"<pre><code>body.setOffset(x, y);\n</code></pre>"},{"location":"arcade-body/#push-out","title":"Push out","text":"<pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre> <ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>Game objects in array (Add or remove game objects)</li> <li>Physics group (Add or remove game objects)</li> <li>Group (Add or remove game objects)</li> </ul> </li> </ul>"},{"location":"arcade-body/#callbacks","title":"Callbacks","text":"<p>Add collider</p>"},{"location":"arcade-body/#point-inside","title":"Point inside","text":"<pre><code>var hit = body.hitTest(x, y);\n</code></pre>"},{"location":"arcade-body/#is-colliding","title":"Is colliding","text":"<ul> <li>Is colliding this tick     <pre><code>var isColliding = body.touching;\n</code></pre><ul> <li><code>isColliding</code> :     <pre><code>{\nnone: true,\nup: true,\ndown: true,\nleft: true,\nright: true\n}\n</code></pre></li> </ul> </li> <li>Was colliding previous tick     <pre><code>var wasColliding = body.wasTouching;\n</code></pre><ul> <li><code>wasColliding</code> :     <pre><code>{\nnone: true,\nup: true,\ndown: true,\nleft: true,\nright: true\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-body/#bounce","title":"Bounce","text":"<ul> <li>Set     <pre><code>body.setBounce(x, y);\n</code></pre>     or     <pre><code>body.setBounceX(x);\nbody.setBounceY(y);\n</code></pre></li> <li>Get     <pre><code>var bx = body.bounce.x;\nvar by = body.bounce.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#world-bounds","title":"World bounds","text":"<ul> <li>Default world bounds</li> <li>Custom world bounds :     <pre><code>body.setBoundsRectangle(bounds);\n</code></pre><ul> <li><code>bounds</code> : A rectangle object.</li> </ul> </li> <li>Enable     <pre><code>body.setCollideWorldBounds();\n</code></pre></li> <li>Disable (default)     <pre><code>body.setCollideWorldBounds(false);\n</code></pre></li> <li>Get world bounds rectangle <pre><code>var top = body.world.bounds.top;\nvar bottom = body.world.bounds.bottom;\nvar left = body.world.bounds.left;\nvar right = body.world.bounds.right;\n</code></pre></li> </ul>"},{"location":"arcade-body/#blocked","title":"Blocked","text":"<p>Whether this Body is colliding with a tile or the world boundary.</p> <ul> <li>Blocked when moveing down     <pre><code>var onFloor = body.onFloor(); // blocked.down\n</code></pre></li> <li>Blocked when moveing up     <pre><code>var onCeiling = body.onCeiling();  // blocked.up\n</code></pre></li> <li>Blocked when moveing left or right     <pre><code>var onWall = body.onWall();  // blocked.left || this.blocked.right\n</code></pre></li> <li>State     <pre><code>var blocked = body.blocked;\n</code></pre><ul> <li><code>blocked</code> :     <pre><code>{\nnone: true,\nup: false,\ndown: false,\nleft: false,\nright: false\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-body/#mass","title":"Mass","text":"<ul> <li>Set     <pre><code>body.setMass(m);\n</code></pre></li> <li>Get     <pre><code>var m = body.mass;\n</code></pre></li> </ul>"},{"location":"arcade-body/#static-body","title":"Static body","text":""},{"location":"arcade-body/#sync","title":"Sync","text":"<p>Syncs the Bodies position and size with its parent Game Object.</p> <pre><code>body.updateFromGameObject();\n</code></pre>"},{"location":"arcade-body/#debug","title":"Debug","text":"<ul> <li>Bounds of Body<ul> <li>Enable drawing body     <pre><code>body.debugShowBody = true;\n</code></pre></li> <li>Color     <pre><code>body.debugBodyColor = 0xff00ff;\n</code></pre></li> </ul> </li> <li>Direction and magnitude of velocity<ul> <li>Enable drawing body     <pre><code>body.debugShowVelocity = true;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-gameobject/","title":"Game object","text":""},{"location":"arcade-gameobject/#introduction","title":"Introduction","text":"<p>Arcade physics Image/Sprite/Group object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-gameobject/#usage","title":"Usage","text":""},{"location":"arcade-gameobject/#add-physics-object","title":"Add physics object","text":"<p>Enable physics world</p>"},{"location":"arcade-gameobject/#image-object","title":"Image object","text":"<ul> <li>Static object, extends from Image object <pre><code>var image = scene.physics.add.staticImage(x, y, key);\n</code></pre></li> <li>Dynamic object, extends from Image object <pre><code>var image = scene.physics.add.image(x, y, key);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#sprite-object","title":"Sprite object","text":"<ul> <li>Static object, extends from Sprite object <pre><code>var image = scene.physics.add.staticSprite(x, y, key, frame);\n</code></pre></li> <li>Dynamic object, extends from Sprite object <pre><code>var image = scene.physics.add.sprite(x, y, key, frame);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#group","title":"Group","text":"<ul> <li>Static sprite objects, extends from Group object <pre><code>var group = scene.physics.add.staticGroup(children, config);\n// var group = scene.physics.add.staticGroup(config);\n</code></pre></li> <li>Dynamic sprite objects, extends from Group object <pre><code>var group = scene.physics.add.group(children, config);\n// var group = scene.physics.add.staticGroup(config);\n</code></pre><ul> <li><code>config</code> <pre><code>var config = {\nclassType: ArcadeSprite,\nenable: true,\ncollideWorldBounds: false,\ncustomBoundsRectangle: null,\naccelerationX: 0,\naccelerationY: 0,\nallowDrag: true,\nallowGravity: true,\nallowRotation: true,\nuseDamping: false,\nbounceX: 0,\nbounceY: 0,\ndragX: 0,\ndragY: 0,\ngravityX: 0,\ngravityY: 0,\nfrictionX: 0,\nfrictionY: 0,\nmaxSpeed: -1,\nvelocityX: 0,\nvelocityY: 0,\nmaxVelocityX: 10000,\nmaxVelocityY: 10000,\nangularVelocity: 0,\nangularAcceleration: 0,\nangularDrag: 0,\nmass: 0,\nimmovable: false,\n\nmaxSize: -1,\nrunChildUpdate: false\n};\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#enable","title":"Enable","text":"<ul> <li>Enable body     <pre><code>gameObject.enableBody();\n// gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject);\n</code></pre><ul> <li>Enable and reset position     <pre><code>gameObject.enableBody(true, x, y);\n// gameObject.enableBody(true, x, y, enableGameObject, showGameObject);\n</code></pre></li> <li><code>enableGameObject</code> : Also activate this Game Object.</li> <li><code>showGameObject</code> : Also show this Game Object.</li> </ul> </li> <li>Disable body     <pre><code>gameObject.disableBody();\n// gameObject.disableBody(disableGameObject, hideGameObject);\n</code></pre><ul> <li><code>disableGameObject</code> : Also deactivate this Game Object.</li> <li><code>hideGameObject</code> : Also hide this Game Object.</li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#movement","title":"Movement","text":""},{"location":"arcade-gameobject/#velocity","title":"Velocity","text":"<ul> <li>Set     <pre><code>gameObject.setVelocity(x, y);\n</code></pre>     or     <pre><code>gameObject.setVelocityX(x);\ngameObject.setVelocityY(y);\n</code></pre></li> <li>Get     <pre><code>var vx = gameObject.body.velocity.x;\nvar vy = gameObject.body.velocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#max-velocity","title":"Max velocity","text":"<ul> <li>Set     <pre><code>gameObject.setMaxVelocity(x, y);\n</code></pre></li> <li>Get      <pre><code>var vx = gameObject.body.maxVelocity.x;\nvar vy = gameObject.body.maxVelocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#acceleration","title":"Acceleration","text":"<ul> <li>Set     <pre><code>gameObject.setAcceleration(x, y);\n</code></pre>     or     <pre><code>gameObject.setAccelerationX(x);\ngameObject.setAccelerationY(y);\n</code></pre></li> <li>Get     <pre><code>var ax = gameObject.body.acceleration.x;\nvar ay = gameObject.body.acceleration.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>gameObject.setGravity(x, y);\n</code></pre>     or     <pre><code>gameObject.setGravityX(x);\ngameObject.setGravityY(y);\n</code></pre></li> <li>Get     <pre><code>var gx = gameObject.body.gravity.x;\nvar gy = gameObject.body.gravity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#drag","title":"Drag","text":"<ul> <li>Set     <pre><code>gameObject.setDrag(x, y);\n</code></pre>     or     <pre><code>gameObject.setDragX(x);\ngameObject.setDragY(y);\n</code></pre></li> <li>Get     <pre><code>var dx = gameObject.body.drag.x;\nvar dy = gameObject.body.drag.y;\n</code></pre></li> <li>Enable damping     <pre><code>gameObject.setDamping(value);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#immovable","title":"Immovable","text":"<ul> <li>Enable     <pre><code>gameObject.setImmovable();\n</code></pre></li> <li>Disable     <pre><code>gameObject.setImmovable(false);\n</code></pre></li> <li>Get     <pre><code>var immovable = gameObject.body.immovable;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#pushable","title":"Pushable","text":"<ul> <li>Enable     <pre><code>gameObject.setPushable();\n</code></pre></li> <li>Disable     <pre><code>gameObject.setPushable(false);\n</code></pre></li> <li>Get     <pre><code>var pushable = gameObject.body.pushable;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#friction","title":"Friction","text":"<p>If this Body is <code>immovable</code> and in motion, this the proportion of this Body's movement received by the riding body on each axis.</p> <ul> <li>Set     <pre><code>gameObject.setFriction(x, y);\n</code></pre>     or     <pre><code>gameObject.setFrictionX(x);\ngameObject.setFrictionY(y);\n</code></pre></li> <li>Get     <pre><code>var fx = gameObject.body.friction.x;\nvar fy = gameObject.body.friction.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#rotation","title":"Rotation","text":""},{"location":"arcade-gameobject/#allow-rotation","title":"Allow rotation","text":"<p>Whether this Body's rotation is affected by its angular acceleration and velocity.</p> <ul> <li>Enable (default)     <pre><code>body.setAllowRotation();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowRotation(false);\n</code></pre></li> <li>Get     <pre><code>var allowRotation = gameObject.body.allowRotation;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#angular-velocity","title":"Angular velocity","text":"<ul> <li>Set     <pre><code>gameObject.setAngularVelocity(v);\n</code></pre></li> <li>Get     <pre><code>var av = gameObject.body.angularVelocity;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#angular-acceleration","title":"Angular acceleration","text":"<p>-Set      <pre><code>gameObject.setAngularAcceleration(v);\n</code></pre> - Get     <pre><code>var aa = gameObject.body.angularAcceleration;\n</code></pre></p>"},{"location":"arcade-gameobject/#angular-drag","title":"Angular drag","text":"<ul> <li>Set     <pre><code>gameObject.setAngularDrag(v);\n</code></pre></li> <li>Get     <pre><code>var ad = gameObject.body.angularDrag;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#collision","title":"Collision","text":""},{"location":"arcade-gameobject/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>gameObject.setBodySize(width, height, center);\n</code></pre><ul> <li><code>center</code> : <code>false</code> to set body's offset to (0, 0)</li> </ul> </li> <li>Circle     <pre><code>gameObject.setCircle(radius, offsetX, offsetY);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#offset","title":"Offset","text":"<pre><code>gameObject.setOffset(x, y);\n</code></pre>"},{"location":"arcade-gameobject/#push-out","title":"Push out","text":"<pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre> <ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>Game objects in array (Add or remove game objects)</li> <li>Physics group (Add or remove game objects)</li> <li>Group (Add or remove game objects)</li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#callbacks","title":"Callbacks","text":"<p>Add collider</p>"},{"location":"arcade-gameobject/#point-inside","title":"Point inside","text":"<pre><code>var hit = gameObject.hitTest(x, y);\n</code></pre>"},{"location":"arcade-gameobject/#bounce","title":"Bounce","text":"<ul> <li>Set     <pre><code>gameObject.setBounce(x, y);\n</code></pre>     or     <pre><code>gameObject.setBounceX(x);\ngameObject.setBounceY(y);\n</code></pre></li> <li>Get     <pre><code>var bx = gameObject.body.bounce.x;\nvar by = gameObject.body.bounce.y;\n</code></pre></li> <li>Enable bounce when colliding with the world boundary     <pre><code>gameObject.setCollideWorldBounds();\n</code></pre></li> <li>Disable bounce when colliding with the world boundary     <pre><code>gameObject.setCollideWorldBounds(false);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#mass","title":"Mass","text":"<ul> <li>Set     <pre><code>gameObject.setMass(m);\n</code></pre></li> <li>Get     <pre><code>var m = gameObject.body.mass;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#static-game-object","title":"Static game object","text":""},{"location":"arcade-gameobject/#sync","title":"Sync","text":"<p>Syncs the Bodies position and size in static game object.</p> <pre><code>gameObject.refreshBody();\n</code></pre>"},{"location":"arcade-gameobject/#methods-of-group","title":"Methods of group","text":"<pre><code>group.setVelocity(x, y, step);\n</code></pre> <pre><code>group.setVelocityX(value, step);\n</code></pre> <pre><code>group.setVelocityY(value, step);\n</code></pre> <pre><code>group.refresh();  // call this method when position of game objects were changed in static object group\n</code></pre>"},{"location":"arcade-gameobject/#debug","title":"Debug","text":"<pre><code>gameObject.setDebug(showBody, showVelocity, bodyColor);\n</code></pre> <pre><code>gameObject.setDebugBodyColor(bodyColor);\n</code></pre>"},{"location":"arcade-tcrp-player/","title":"Player","text":""},{"location":"arcade-tcrp-player/#introduction","title":"Introduction","text":"<p>Player of T ime-C ommand-R ecorder-P layer with Arcade physics engine, to run commands on time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Arcade physics engine is fixed-step based, not tick time based.</p> <p>This Arcade-TCRP has better result of replaying, which store step count via WORLD_STEP(<code>worldstep</code>) event.</p>"},{"location":"arcade-tcrp-player/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-player/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-player/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-player/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexarcadetcrpplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var player = new TCRP.Player(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#create-instance","title":"Create instance","text":"<pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, {\n// commands: [],       // [[time, command], [time, command], ...]\n// timeScale: 1,\n// scope: undefined\n});\n</code></pre> <ul> <li><code>commands</code> : see next section</li> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul>"},{"location":"arcade-tcrp-player/#load-commands","title":"Load commands","text":"<pre><code>player.load(commands, scope);\n</code></pre> <ul> <li>Commands : see also Run commands <pre><code>[\n[time, command],\n[time, command],\n...\n]\n</code></pre><ul> <li>Format of each row :     <pre><code>[time, fnName, param0, param1, ...]\n// [time, callback, param0, param1, ...]\n</code></pre> <pre><code>[time, [fnName, param0, param1, ...]]\n// [time, [callback, param0, param1, ...]]\n</code></pre> <pre><code>[time, [command0, command1, ...]]\n</code></pre></li> <li><code>time</code> : Time in step-count</li> </ul> </li> </ul>"},{"location":"arcade-tcrp-player/#start-playing","title":"Start playing","text":"<pre><code>player.start();\n// player.start(startAt);  // Start-at time in step-count\n</code></pre>"},{"location":"arcade-tcrp-player/#events","title":"Events","text":"<ul> <li>Complete     <pre><code>player.on('complete', function(player){});\n</code></pre></li> <li>Run command     <pre><code>player.on('runcommand', function(commands, scope){});\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#pause-resume-stop-playing","title":"Pause, Resume, stop playing","text":"<pre><code>player.pause();\nplayer.resume();\nplayer.stop();\n</code></pre>"},{"location":"arcade-tcrp-player/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>player.seek(time);   // Elapsed time in step-count\n</code></pre>"},{"location":"arcade-tcrp-player/#state-of-player","title":"State of player","text":"<pre><code>var isPlaying = player.isPlaying;\nvar completed = player.completed;\nvar now = player.now;\n</code></pre>"},{"location":"arcade-tcrp-player/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>player.setTimeScale(value);\n// player.timeScale = value;\n</code></pre><ul> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul> </li> <li>Get     <pre><code>var timeScale = player.timeScale;\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/","title":"Recoder","text":""},{"location":"arcade-tcrp-recorder/#introduction","title":"Introduction","text":"<p>Recorder of T ime-C ommand-R ecorder-P layer with Arcade physics engine, to store commands with time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Arcade physics engine is fixed-step based, not tick time based.</p> <p>This Arcade-TCRP has better result of replaying, which store step count via WORLD_STEP(<code>worldstep</code>) event.</p>"},{"location":"arcade-tcrp-recorder/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-recorder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-recorder/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-recorder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexarcadetcrpplugin').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var recorder = new TCRP.Recorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#create-instance","title":"Create instance","text":"<pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre>"},{"location":"arcade-tcrp-recorder/#start-recording","title":"Start recording","text":"<pre><code>recorder.start();\n// recorder.start(startAt);  // start-at in step-count\n</code></pre>"},{"location":"arcade-tcrp-recorder/#push-commands","title":"Push commands","text":"<pre><code>recorder.addCommand([fnName, param0, param1, ...]);\n// recorder.addCommand([command0, command1, ...]);\n// recorder.addCommand([fnName, param0, param1, ...], offset);  // time-offset in step-count\n</code></pre> <p>See also Run commands</p>"},{"location":"arcade-tcrp-recorder/#get-commands","title":"Get commands","text":"<pre><code>var commands = recorder.getCommands();        // Get a shallow copy of commands\n// var commands = recorder.getCommands(true); // Get reference of commands\n</code></pre> <p>Format of return commands:</p> <pre><code>[\n[time, [command]],\n[time, [command0,command1]],\n...\n]\n</code></pre> <ul> <li><code>time</code> : Time in step-count</li> </ul>"},{"location":"arcade-tcrp-recorder/#pause-resume-stop-recording","title":"Pause, Resume, stop recording","text":"<pre><code>recorder.pause();\nrecorder.resume();\nrecorder.stop();\n</code></pre>"},{"location":"arcade-tcrp-recorder/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>recorder.seek(time);   // elapsed time in step-count\n</code></pre>"},{"location":"arcade-tcrp-recorder/#state-of-recorder","title":"State of recorder","text":"<pre><code>var isRecording = recorder.isRecording;\nvar now = recorder.now;\n</code></pre> <ul> <li><code>now</code> : Now time in step-count.</li> </ul>"},{"location":"arcade-tcrp-recorder/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>recorder.setTimeScale(value);\n// recorder.timeScale = value;\n</code></pre><ul> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul> </li> <li>Get     <pre><code>var timeScale = recorder.timeScale;\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/","title":"Step runner","text":""},{"location":"arcade-tcrp-step-runner/#introduction","title":"Introduction","text":"<p>Execute command in next WORLD_STEP(<code>worldstep</code>) event, to synchronize command execution with step-counter of Recorder of Arcade-TCRP.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Command might be executed before or after WORLD_STEP(<code>worldstep</code>) event, which is emitted in scene's <code>update</code> event.</p> <ul> <li>Before: Command is executed in any input(touch/keyboard) event, or in scene's <code>preupdate</code> event.</li> <li>After: Command is executed in <code>scene.updat()</code> method.</li> </ul>"},{"location":"arcade-tcrp-step-runner/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-step-runner/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-step-runner/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-step-runner/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = scene.plugins.get('rexarcadetcrpplugin').addStepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = scene.plugins.get('rexTCRP').addStepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = new TCRP.StepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#create-instance","title":"Create instance","text":"<pre><code>var stepRunner = scene.plugins.get('rexTCRP').addStepRunner(scene);\n</code></pre>"},{"location":"arcade-tcrp-step-runner/#push-commands","title":"Push commands","text":"<pre><code>stepRunner.add(commands, scope);\n</code></pre> <p>See also Run commands</p>"},{"location":"arcade-tcrp-step-runner/#offset-recorder","title":"Offset recorder","text":"<p>Since commands will be executed in next WORLD_STEP(<code>worldstep</code>) event, recorder have to add <code>1</code> step-count offset.</p> <ul> <li>Offset at recording start <pre><code>recorder.start(1);\n</code></pre></li> <li>Add offset when pushing commands <pre><code>recorder.addCommand([fnName, param0, param1, ...], 1);\n</code></pre></li> </ul>"},{"location":"arcade-world/","title":"World","text":""},{"location":"arcade-world/#introduction","title":"Introduction","text":"<p>World of Arcade physics engine in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-world/#usage","title":"Usage","text":""},{"location":"arcade-world/#configuration","title":"Configuration","text":"<pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n//    x: 0,\n//    y: 0,\n//    width: scene.sys.scale.width,\n//    height: scene.sys.scale.height,\n//    gravity: {\n//        x: 0,\n//        y: 0\n//    },\n//    checkCollision: {\n//        up: true,\n//        down: true,\n//        left: true,\n//        right: true\n//    },\n//    customUpdate: false,\n//    fixedStep: true,\n//    fps: 60,\n//    timeScale: 1,     // 2.0 = half speed, 0.5 = double speed\n//    customUpdate: false,\n//    overlapBias: 4,\n//    tileBias: 16,\n//    forceX: false,\n//    isPaused: false,\n//    debug: false,\n//    debugShowBody: true,\n//    debugShowStaticBody: true,\n//    debugShowVelocity: true,\n//    debugBodyColor: 0xff00ff,\n//    debugStaticBodyColor: 0x0000ff,\n//    debugVelocityColor: 0x00ff00,\n//    maxEntries: 16,\n//    useTree: true   // set false if amount of dynamic bodies &gt; 5000\n}\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"arcade-world/#update","title":"Update","text":"<ul> <li>Default updating : World updating every tick</li> <li>Custom updating : <ol> <li>Set <code>customUpdate</code> of arcade config to <code>false</code>.<ul> <li>Enable world updating : <code>scene.physics.enableUpdate()</code></li> <li>Disable world updating : <code>scene.physics.disableUpdate()</code></li> </ul> </li> <li>Run world updating manually     <pre><code>scene.physics.world.update(time, delta);\n</code></pre></li> <li>Enable/disable world updating<ul> <li>Enable : <code>scene.physics.enableUpdate()</code></li> <li>Disable : <code>scene.physics.disableUpdate()</code></li> </ul> </li> </ol> </li> </ul>"},{"location":"arcade-world/#step","title":"Step","text":"<p>Advances the simulation by one step.</p> <pre><code>scene.physics.world.step(delta);\n</code></pre>"},{"location":"arcade-world/#events","title":"Events","text":"<ul> <li>World step     <pre><code>scene.physics.world.on('worldstep', function(delta) { /* ... */ });\n</code></pre><ul> <li><code>delta</code> : The delta time amount of this step, in seconds.</li> </ul> </li> </ul>"},{"location":"arcade-world/#control","title":"Control","text":""},{"location":"arcade-world/#pause","title":"Pause","text":"<pre><code>scene.physics.pause();\n</code></pre>"},{"location":"arcade-world/#resume","title":"Resume","text":"<pre><code>scene.physics.resume();\n</code></pre>"},{"location":"arcade-world/#events_1","title":"Events","text":"<ul> <li>Pause world     <pre><code>scene.physics.world.on('pause', function() { /* ... */ });\n</code></pre></li> <li>Resume world     <pre><code>scene.physics.world.on('resume', function() { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#duration-per-frame","title":"Duration per frame","text":"<ul> <li>Time scale     <pre><code>scene.physics.world.timeScale = timeScale;\n</code></pre><ul> <li>1.0 = normal speed</li> <li>2.0 = half speed</li> <li>0.5 = double speed</li> </ul> </li> <li>FPS     <pre><code>scene.physics.world.setFPS(framerate);\n</code></pre></li> </ul>"},{"location":"arcade-world/#tile-filter-options","title":"Tile filter options","text":"<pre><code>var option = scene.physics.world.tileFilterOptions;\n</code></pre> <ul> <li><code>option</code> <pre><code>{\nisColliding: true,\nisNotEmpty: true,\nhasInterestingFace: true\n}\n</code></pre></li> </ul>"},{"location":"arcade-world/#body","title":"Body","text":""},{"location":"arcade-world/#enable","title":"Enable","text":"<pre><code>scene.physics.world.enable(gameObject);\n// scene.physics.world.enable(gameObject, bodyType);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or array of game objects, or game objects in a Group</li> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body. Default value.</li> <li><code>1</code> : Static body.</li> </ul> </li> </ul> <p>Or</p> <pre><code>scene.physics.add.existing(gameObject, bodyType);\n</code></pre> <p>See arcade-body</p>"},{"location":"arcade-world/#disable","title":"Disable","text":"<pre><code>scene.physics.world.disable(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or array of game objects, or game objects in a Group</li> </ul>"},{"location":"arcade-world/#addremove-body","title":"Add/remove body","text":"<ul> <li>Add body to the local search trees.     <pre><code>scene.physics.world.add(body);\n</code></pre></li> <li>Remove body from the local search trees.     <pre><code>scene.physics.world.disableBody(body);\n</code></pre></li> </ul>"},{"location":"arcade-world/#collision","title":"Collision","text":""},{"location":"arcade-world/#set-bound","title":"Set bound","text":"<p>See bound in body object, or game object.</p>"},{"location":"arcade-world/#collider-callback","title":"Collider &amp; callback","text":"<ul> <li>Add collider<ul> <li>Push out     <pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre></li> <li>Performs a collision check and separation between the two physics enabled objects given.     <pre><code>var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback);\n// var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>If you don't require separation then use <code>overlap</code> instead.     <pre><code>var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback);\n// var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>Parameters<ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>An array contains Game objects (Add or remove game objects)</li> <li>Physics group/Group (Add or remove game objects)</li> <li>An array contains Physics group/Group</li> </ul> </li> <li><code>collideCallback</code> :     <pre><code>var collideCallback = function(gameObject1, gameObject2) {\n// ...\n}\n</code></pre></li> <li><code>processCallback</code> : Fired when gameObject1 intersects gameObject2, optional.     <pre><code>var processCallback = function(gameObject1, gameObject2) {\nreturn true;  // return false will discard remaining collision checking\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Remove collider     <pre><code>scene.physics.world.removeCollider(collider);\n</code></pre></li> <li>Deactivate collider     <pre><code>collider.active = false;  // Set true to activate again\n</code></pre></li> <li>Name of collider (unused by engine)     <pre><code>collider.name = name;\n</code></pre></li> </ul>"},{"location":"arcade-world/#testing-wo-collider","title":"Testing wo collider","text":"<ul> <li>Test overlapping     <pre><code>var isOverlapping = scene.physics.world.overlap(object1, object2);\n</code></pre>     or     <pre><code>var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback);\n// var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>Test colliding, also push out     <pre><code>var isCollided = scene.physics.world.collide(object1, object2);\n</code></pre>     or     <pre><code>var isCollided = scene.physics.world.collide(object1, object2, collideCallback);\n// var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext);\n</code></pre></li> </ul>"},{"location":"arcade-world/#events_2","title":"Events","text":"<ul> <li>Two bodies overlap and at least one of them has their <code>onOverlap</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('overlap', function(gameObject1, gameObject2, body1, body2) { /* ... */ });\n</code></pre></li> <li>Two bodies overlap and at least one of them has their <code>onCollide</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('collide', function(gameObject1, gameObject2, body1, body2) { /* ... */ });\n</code></pre></li> <li>A body overlaps with a Tile and has its <code>onOverlap</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('tileoverlap', function(gameObject, tile, body) { /* ... */ });\n</code></pre></li> <li>A body overlaps with a Tile and has its <code>onCollide</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('tilecollide', function(gameObject, tile, body) { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#world-bounds","title":"World bounds","text":""},{"location":"arcade-world/#enable_1","title":"Enable","text":"<ul> <li>Body : Set <code>body.setCollideWorldBounds()</code> to enable worldBounds property.</li> <li>World :<ul> <li>Set bounds rectangle and enable bounds     <pre><code>scene.physics.world.setBounds(x, y, width, height);\n// scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown);\n</code></pre></li> <li>Set bounds rectangle <pre><code>scene.physics.world.bounds.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>scene.physics.world.bounds.x = x;\nscene.physics.world.bounds.y = y;\nscene.physics.world.bounds.width = width;\nscene.physics.world.bounds.height = height;\n</code></pre></li> <li>Enable bounds     <pre><code>scene.physics.world.setBoundsCollision();\n// scene.physics.world.setBoundsCollision(left, right, up, down);\n</code></pre>     or     <pre><code>scene.physics.world.checkCollision.left = left;\nscene.physics.world.checkCollision.right = right;\nscene.physics.world.checkCollision.up = up;\nscene.physics.world.checkCollision.down = down;\n</code></pre></li> <li>Get bounds rectangle <pre><code>var top = scene.physics.world.bounds.top;\nvar bottom = scene.physics.world.bounds.bottom;\nvar left = scene.physics.world.bounds.left;\nvar right = scene.physics.world.bounds.right;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-world/#bodies-inside-an-area","title":"Bodies inside an area","text":"<ul> <li>Overlap a rectangle area     <pre><code>var bodies = scene.physics.overlapRect(x, y, width, height, includeDynamic, includeStatic);\n</code></pre><ul> <li><code>includeDynamic</code> : Set <code>true</code> to search Dynamic Bodies</li> <li><code>includeStatic</code> : Set <code>true</code> to search Static Bodies</li> </ul> </li> <li>Overlap a circle area     <pre><code>var bodies = scene.physics.overlapCirc(x, y, radius, includeDynamic, includeStatic);\n</code></pre><ul> <li><code>includeDynamic</code> : Set <code>true</code> to search Dynamic Bodies</li> <li><code>includeStatic</code> : Set <code>true</code> to search Static Bodies</li> </ul> </li> </ul>"},{"location":"arcade-world/#events_3","title":"Events","text":"<ul> <li>World bounds     <pre><code>scene.physics.world.on('worldbounds', function(body, blockedUp, blockedDown, blockedLeft, blockedRight) { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#wrap","title":"Wrap","text":"<pre><code>scene.physics.world.wrap(gameObject, padding);\n</code></pre> <ul> <li>gameObject:<ul> <li>game object</li> <li>group</li> <li>array of game objects</li> </ul> </li> </ul>"},{"location":"arcade-world/#move-to","title":"Move to","text":"<ul> <li>Move to position with a steady velocity     <pre><code>scene.physics.moveTo(gameObject, x, y, speed, maxTime);\n</code></pre></li> <li>Move to object with a steady velocity     <pre><code>scene.physics.moveToObject(gameObject, destination, speed, maxTime);\n</code></pre></li> </ul>"},{"location":"arcade-world/#accelerate-to","title":"Accelerate to","text":"<ul> <li>Accelerate to position     <pre><code>scene.physics.accelerateTo(gameObject, x, y, acceleration, xSpeedMax, ySpeedMax);\n</code></pre></li> <li>Accelerate to object     <pre><code>scene.physics.accelerateToObject(gameObject, destination, acceleration, xSpeedMax, ySpeedMax);\n</code></pre></li> </ul>"},{"location":"arcade-world/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>scene.physics.world.gravity.x = gx;\nscene.physics.world.gravity.y = gy;\n</code></pre></li> <li>Get     <pre><code>var gx = scene.physics.world.gravity.x;\nvar gy = scene.physics.world.gravity.y;\n</code></pre></li> </ul> <p>Total Gravity = world.gravity + body.gravity</p>"},{"location":"arcade-world/#bodies","title":"Bodies","text":""},{"location":"arcade-world/#closestfurthest","title":"Closest/furthest","text":"<ul> <li>Closest     <pre><code>var body = scene.physics.closest(point);  // point: {x,y}\n// var body = scene.physics.closest(point, targets);\n</code></pre><ul> <li><code>targets</code> : Array of Arcade Physics Game Object, Body or Static Body.</li> </ul> </li> <li>Furthest     <pre><code>var body = scene.physics.furthest(point);  // point: {x,y}\n// var body = scene.physics.furthest(point, targets);\n</code></pre><ul> <li><code>targets</code> : Array of Arcade Physics Game Object, Body or Static Body.</li> </ul> </li> </ul>"},{"location":"arcade-world/#debug","title":"Debug","text":""},{"location":"arcade-world/#draw-body-velocity","title":"Draw body &amp; velocity","text":"<ul> <li>Bounds of dynamic Body<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowBody = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.bodyDebugColor = 0xff00ff;\n</code></pre></li> </ul> </li> <li>Bounds of static Body<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowStaticBody = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.staticBodyDebugColor = 0x0000ff;\n</code></pre></li> </ul> </li> <li>Direction and magnitude of velocity<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowVelocity = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.velocityDebugColor = 0x00ff00;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-world/#graphics","title":"Graphics","text":"<p>Draw debug body &amp; velocity on a Graphics object.</p> <pre><code>var graphics = scene.physics.world.debugGraphic;\n</code></pre> <ul> <li>Set visible     <pre><code>scene.physics.world.debugGraphic.setVisible();\n</code></pre></li> <li>Set invisible     <pre><code>scene.physics.world.debugGraphic.setVisible(false);\n</code></pre></li> </ul>"},{"location":"arcade-world/#update-loop","title":"Update loop","text":"<ol> <li>scene.sys.events: update<ol> <li>Update position &amp; angle of each body</li> <li>Process each collider</li> <li>Update final position of each body</li> <li>Emit <code>worldstep</code> event</li> </ol> </li> <li>scene.sys.events: postupdate<ol> <li>Draw debug graphics</li> </ol> </li> </ol> <pre><code>graph TB\n\nSceneEventUpdate&gt;\"scene.sys.events: update&lt;br&gt;&lt;br&gt;Update arcade world&lt;br&gt;gameObject.preUpdate()\"]\nSceneUpdate[\"scene.update()\"]\nSceneEventPostUpdate&gt;\"scene.sys.events: postupdate&lt;br&gt;&lt;br&gt;Post update arcade world\"]\nRender\n\nSceneEventUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneEventPostUpdate\nSceneEventPostUpdate --&gt; Render</code></pre>"},{"location":"array-addremove/","title":"Add/remove","text":""},{"location":"array-addremove/#introduction","title":"Introduction","text":"<p>Add/insert/remove item(s) of an array, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-addremove/#usage","title":"Usage","text":""},{"location":"array-addremove/#add-item","title":"Add item","text":"<pre><code>Phaser.Utils.Array.Add(arr, item);\n// Phaser.Utils.Array.Add(arr, item, limit, callback, context);\n</code></pre> <ul> <li><code>item</code> : An item, or an array of items.</li> <li><code>limit</code> : Optional limit which caps the size of the array.</li> <li><code>callback</code> : A callback to be invoked for each item successfully added to the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#insert-item-at","title":"Insert item at","text":"<pre><code>Phaser.Utils.Array.AddAt(arr, item, index);\n// Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context);\n</code></pre> <ul> <li><code>index</code> : The index in the array where the item will be inserted.</li> <li><code>item</code> : An item, or an array of items.</li> <li><code>limit</code> : Optional limit which caps the size of the array.</li> <li><code>callback</code> : A callback to be invoked for each item successfully added to the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-item","title":"Remove item","text":"<pre><code>Phaser.Utils.Array.Remove(arr, item);\n// Phaser.Utils.Array.Remove(arr, item, callback, context);\n</code></pre> <ul> <li><code>item</code> : An item, or an array of items.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-item-at","title":"Remove item at","text":"<pre><code>var removed = Phaser.Utils.Array.RemoveAt(arr, index);\n// var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context);\n</code></pre> <ul> <li><code>removed</code> : Removed item.</li> <li><code>index</code> : The array index to remove the item from. The index must be in bounds or it will throw an error.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-items-between","title":"Remove items between","text":"<pre><code>var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex);\n// var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context);\n</code></pre> <ul> <li><code>removed</code> : Removed items.</li> <li><code>startIndex</code> : The start index to remove from.</li> <li><code>callback</code> : The end index to remove to.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-random-item","title":"Remove random item","text":"<pre><code>var item = Phaser.Utils.Array.RemoveRandomElement(arr);\n</code></pre>"},{"location":"array-addremove/#replace-item","title":"Replace item","text":"<p>Replaces an element of the array with the new element. The new element cannot already be a member of the array.</p> <pre><code>Phaser.Utils.Array.Replace(arr, oldItem, newItem);\n</code></pre> <ul> <li><code>oldItem</code> : An item in array.</li> <li><code>newItem</code> : Another item, which is not in array.</li> </ul>"},{"location":"array-filter/","title":"Filter/Map","text":""},{"location":"array-filter/#introduction","title":"Introduction","text":"<p>Built-in javascript object.</p> <ul> <li>Author: Built-in javascript function</li> </ul>"},{"location":"array-filter/#usage","title":"Usage","text":""},{"location":"array-filter/#run-function-for-each-element","title":"Run function for each element","text":"<pre><code>arr.forEach(function(element, index, arr) {\n//\n}, scope);\n</code></pre>"},{"location":"array-filter/#filter-elements","title":"Filter elements","text":"<p>Creates a new array with all elements that pass the test function.</p> <pre><code>var result = arr.filter(function(element, index, arr) {\nreturn true; // false\n}, scope);\n</code></pre>"},{"location":"array-filter/#find-one-element","title":"Find one element","text":"<pre><code>var element = arr.find(function(element, index, arr) {\nreturn true; // false\n}, scope);\n</code></pre>"},{"location":"array-filter/#map-elements-to-a-new-array","title":"Map elements to a new array","text":"<pre><code>var newArray = arr.map(function(element, index, arr) {\nreturn newElement;\n}, scope);\n</code></pre>"},{"location":"array-random/","title":"Random","text":""},{"location":"array-random/#introduction","title":"Introduction","text":"<p>Random operation of an array, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-random/#usage","title":"Usage","text":""},{"location":"array-random/#get-random-item","title":"Get random item","text":"<pre><code>var item = Phaser.Utils.Array.GetRandom(arr);\n// var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length);\n</code></pre>"},{"location":"array-random/#remove-random-item","title":"Remove random item","text":"<pre><code>var item = Phaser.Utils.Array.RemoveRandomElement(arr);\n// var item = Phaser.Utils.Array.RemoveRandomElement(arr, startIndex, length);\n</code></pre>"},{"location":"array-random/#shuffle","title":"Shuffle","text":"<pre><code>var arr = Phaser.Utils.Array.Shuffle(arr);\n</code></pre>"},{"location":"array-sort/","title":"Sort","text":""},{"location":"array-sort/#introduction","title":"Introduction","text":"<p>Array sorting, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-sort/#usage","title":"Usage","text":""},{"location":"array-sort/#built-in-array-sort","title":"Built-in array sort","text":"<pre><code>var out = arr.sort(compareFunction);\n</code></pre> <ul> <li><code>compareFunction</code> : A function that defines an alternative sort order.     <pre><code>function(a, b) {\n// return a - b;\n}\n</code></pre><ul> <li>Return a negative value</li> <li>Return 0</li> <li>Return a positive value</li> </ul> </li> </ul>"},{"location":"array-sort/#stable-array-sort","title":"Stable array sort","text":"<pre><code>var out = Phaser.Utils.Array.StableSort(arr, compareFunction);\n</code></pre>"},{"location":"array-sort/#shuffle","title":"Shuffle","text":"<pre><code>var arr = Phaser.Utils.Array.Shuffle(arr);\n</code></pre>"},{"location":"array-sort/#move-item","title":"Move item","text":"<ul> <li>Moves the given element to the top of the array.     <pre><code>Phaser.Utils.Array.BringToTop(arr, item);\n</code></pre></li> <li>Moves the given element to the bottom of the array.     <pre><code>Phaser.Utils.Array.SendToBack(arr, item);\n</code></pre></li> <li>Moves the given array element up.     <pre><code>Phaser.Utils.Array.MoveUp(array, item);\n</code></pre></li> <li>Moves the given array element down.     <pre><code>Phaser.Utils.Array.MoveDown(array, item);\n</code></pre></li> <li>Moves an element in an array to a new position.     <pre><code>Phaser.Utils.Array.MoveTo(array, item, index);\n</code></pre></li> <li>Swaps the position of two elements.     <pre><code>Phaser.Utils.Array.Swap(array, item1, item2);\n</code></pre></li> <li>Moves the element at the start of the array to the end, shifting all items in the process.     <pre><code>Phaser.Utils.Array.RotateLeft(array, steps);\n</code></pre><ul> <li><code>steps</code> : The number of times to shift the array.</li> </ul> </li> <li>Moves the element at the end of the array to the start, shifting all items in the process.     <pre><code>Phaser.Utils.Array.RotateRight(array, steps);\n</code></pre><ul> <li><code>steps</code> : The number of times to shift the array.</li> </ul> </li> </ul>"},{"location":"audio/","title":"Audio","text":""},{"location":"audio/#introduction","title":"Introduction","text":"<p>Play sounds, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"audio/#usage","title":"Usage","text":""},{"location":"audio/#configuration","title":"Configuration","text":""},{"location":"audio/#web-audio","title":"Web audio","text":"<p>Web audio is the default audio context.</p>"},{"location":"audio/#html5-audio","title":"Html5 audio","text":"<pre><code>var config = {\n// ....\naudio: {\ndisableWebAudio: true\n}\n// ....\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"audio/#no-audio","title":"No audio","text":"<pre><code>var config = {\n// ....\naudio: {\nnoAudio: true\n}\n// ....\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"audio/#load-audio-file","title":"Load audio file","text":"<pre><code>scene.load.audio(key, urls);  // urls: an array of file url\n// scene.load.audio(key, urls, {instances: 1}, xhrSettings);\n</code></pre> <p>See loader</p>"},{"location":"audio/#decode-audio","title":"Decode audio","text":"<pre><code>scene.sound.decodeAudio(key, audioData);\n</code></pre> <ul> <li><code>audioData</code> : Audio data<ul> <li>A base64 encoded string</li> <li>An audio media-type data uri</li> <li>An ArrayBuffer instance</li> </ul> </li> </ul> <p>Or</p> <pre><code>scene.sound.decodeAudio(audioFiles);\n</code></pre> <ul> <li><code>audioFiles</code> : An array of <code>{key, data}</code><ul> <li><code>data</code> : Audio data<ul> <li>A base64 encoded string</li> <li>An audio media-type data uri</li> <li>An ArrayBuffer instance</li> </ul> </li> </ul> </li> </ul>"},{"location":"audio/#decoded-events","title":"Decoded events","text":"<ul> <li>Finished decoding an audio data     <pre><code>scene.sound.on('decoded', key);\n</code></pre></li> <li>Finished decoding all audio data     <pre><code>scene.sound.on('decodedall');\n</code></pre></li> </ul>"},{"location":"audio/#unlock-audio","title":"Unlock audio","text":"<p>Unlocks Web Audio API/HTML5 Audio loading on the initial input event.</p> <pre><code>scene.sound.unlock();\n</code></pre>"},{"location":"audio/#play-sound","title":"Play sound","text":"<p>Sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.play(key);\n</code></pre> <p>or</p> <pre><code>scene.sound.play(key, config);\n/*\nvar sound = scene.sound.add(key);\nsound.play(config);\n*/\n</code></pre>"},{"location":"audio/#position-of-the-spatial-audio-listener","title":"Position of the Spatial Audio listener","text":"<pre><code>scene.sound.setListenerPosition(x, y)\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The x/y position of the Spatial Audio listener. Default value is center of the game canvas.</li> </ul> <p>Note</p> <p>Web audio only</p>"},{"location":"audio/#sound-instance","title":"Sound instance","text":""},{"location":"audio/#create-sound-instance","title":"Create sound instance","text":"<pre><code>var music = scene.sound.add(key);\n</code></pre> <pre><code>var music = scene.sound.add(key, config);\n</code></pre>"},{"location":"audio/#configuration_1","title":"Configuration","text":"<pre><code>{\nmute: false,\nvolume: 1,\nrate: 1,\ndetune: 0,\nseek: 0,\nloop: false,\ndelay: 0,\n\n// source of the spatial sound\nsource: {\nx: 0,\ny: 0,\nz: 0,\npanningModel: 'equalpower',\ndistanceModel: 'inverse',\norientationX: 0,\norientationY: 0,\norientationZ: -1,\nrefDistance: 1,\nmaxDistance: 10000,\nrolloffFactor: 1,\nconeInnerAngle: 360,\nconeOuterAngle: 0,\nconeOuterGain: 0,\nfollow: undefined\n}\n}\n</code></pre> <ul> <li><code>source</code> : Source of the spatial sound<ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of the audio in a right-hand Cartesian coordinate system.</li> <li><code>z</code> : Represents the longitudinal (back and forth) position of the audio in a right-hand Cartesian coordinate system.</li> <li><code>panningModel</code> : An enumerated value determining which spatialization algorithm to use to position the audio in 3D space.<ul> <li><code>'equalpower'</code></li> <li><code>'HRTF'</code></li> </ul> </li> <li><code>orientationX</code>, <code>orientationY</code> : The horizontal/vertical position of the audio source's vector in a right-hand Cartesian coordinate system.</li> <li><code>orientationZ</code> : Represents the longitudinal (back and forth) position of the audio source's vector in a right-hand Cartesian coordinate system.</li> <li><code>refDistance</code> : A double value representing the reference distance for reducing volume as the audio source moves further from the listener. For distances greater than this the volume will be reduced based on <code>rolloffFactor</code> and <code>distanceModel</code>.</li> <li><code>maxDistance</code> : The maximum distance between the audio source and the listener, after which the volume is not reduced any further.</li> <li><code>rolloffFactor</code> : A double value describing how quickly the volume is reduced as the source moves away from the listener. This value is used by all distance models.</li> <li><code>coneInnerAngle</code> : The angle, in degrees, of a cone inside of which there will be no volume reduction.</li> <li><code>coneOuterAngle</code> : The angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the <code>coneOuterGain</code> property.</li> <li><code>coneOuterGain</code> : The amount of volume reduction outside the cone defined by the <code>coneOuterAngle</code> attribute. Its default value is <code>0</code>, meaning that no sound can be heard. A value between <code>0</code> and <code>1</code>.</li> <li><code>follow</code> : Set this Sound object to automatically track the x/y position of this object. Can be a Phaser Game Object, Vec2 or anything that exposes public x/y properties.</li> </ul> </li> </ul>"},{"location":"audio/#play-sound-instance","title":"Play sound instance","text":"<ul> <li>Start playing     <pre><code>music.play();\n</code></pre></li> <li>Start playing with configuration     <pre><code>music.play(config);\n</code></pre><ul> <li>config</li> </ul> </li> <li>Stop     <pre><code>music.stop();\n</code></pre></li> <li>Pause     <pre><code>music.pause();\n</code></pre></li> <li>Resume     <pre><code>music.resume();\n</code></pre></li> </ul>"},{"location":"audio/#methods","title":"Methods","text":""},{"location":"audio/#mute","title":"Mute","text":"<ul> <li>Set     <pre><code>music.setMute(mute); // mute: true/false\n// music.mute = mute;\n</code></pre></li> <li>Get     <pre><code>var mute = music.mute;\n</code></pre></li> </ul>"},{"location":"audio/#volume","title":"Volume","text":"<ul> <li>Set     <pre><code>music.setVolume(volume); // volume: 0 to 1\n// music.volume = volume;\n</code></pre></li> <li>Get     <pre><code>var volume = music.volume;\n</code></pre></li> </ul>"},{"location":"audio/#detune","title":"Detune","text":"<ul> <li>Set     <pre><code>music.setDetune(detune); // detune: -1200 to 1200\n// music.detune = detune;\n</code></pre></li> <li>Get     <pre><code>var detune = music.detune;\n</code></pre></li> </ul>"},{"location":"audio/#play-rate","title":"Play-rate","text":"<ul> <li>Set     <pre><code>music.setRate(rate); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed)\n// music.rate = rate;\n</code></pre></li> <li>Get     <pre><code>var rate = music.rate;\n</code></pre></li> </ul>"},{"location":"audio/#seek-to","title":"Seek to","text":"<ul> <li>Seek to     <pre><code>music.setSeek(time); // seek: playback time\n// music.seek = seek;\n</code></pre></li> <li>Get current playback time     <pre><code>var time = music.seek;  // return 0 when playback ends\n</code></pre></li> </ul>"},{"location":"audio/#loop","title":"Loop","text":"<ul> <li>Set     <pre><code>music.setLoop(loop); // loop: true/false\n// music.loop = loop;\n</code></pre></li> <li>Get     <pre><code>var loop = music.loop;\n</code></pre></li> </ul>"},{"location":"audio/#properties","title":"Properties","text":"<ul> <li>Duration : duration of this sound     <pre><code>var duration = music.duration;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = music.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = music.isPaused;\n</code></pre></li> <li>Asset key     <pre><code>var key = music.key;\n</code></pre></li> </ul>"},{"location":"audio/#events","title":"Events","text":"<ul> <li>Start playing     <pre><code>music.once('play', function(music){});\n</code></pre></li> <li>Playback end     <pre><code>music.once('complete', function(music){});\n</code></pre></li> <li>Looping     <pre><code>music.once('looped', function(music){});\n</code></pre></li> <li>Pause     <pre><code>music.once('pause', function(music){});\n</code></pre></li> <li>Resume     <pre><code>music.once('resume', function(music){});\n</code></pre></li> <li>Stop     <pre><code>music.once('stop', function(music){});\n</code></pre></li> <li>Set mute     <pre><code>music.once('mute', function(music, mute){});\n</code></pre></li> <li>Set volume     <pre><code>music.once('volume', function(music, volume){});\n</code></pre></li> <li>Set detune     <pre><code>music.once('detune', function(music, detune){});\n</code></pre></li> <li>Set play-rate     <pre><code>music.once('rate', function(music, rate){});\n</code></pre></li> <li>Seek to     <pre><code>music.once('seek', function(music, time){});\n</code></pre></li> <li>set loop     <pre><code>music.once('loop', function(music, loop){});\n</code></pre></li> </ul>"},{"location":"audio/#play-marked-sound","title":"Play marked sound","text":"<p>Sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.play(key, marker);\n</code></pre>"},{"location":"audio/#marker","title":"Marker","text":"<pre><code>{\nname: '',\nstart: 0,\nduration: music.duration,\nconfig: {\nmute: false,\nvolume: 1,\nrate: 1,\ndetune: 0,\nseek: 0,\nloop: false,\ndelay: 0\n}\n}\n</code></pre>"},{"location":"audio/#markers-in-sound-instance","title":"Markers in sound instance","text":""},{"location":"audio/#add-marker","title":"Add marker","text":"<pre><code>music.addMarker(marker);\n</code></pre> <p>Marker</p>"},{"location":"audio/#play-marked-sound_1","title":"Play marked sound","text":"<pre><code>music.play(markerName);\n</code></pre> <pre><code>music.play(markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#audio-sprite","title":"Audio sprite","text":""},{"location":"audio/#load-audio-sprite","title":"Load audio sprite","text":"<pre><code>scene.load.audioSprite(key, urls, markersConfig, config);\n</code></pre> <p>See loader</p> <p>Format of markersConfig <pre><code>{\nresources: urls, // an array of audio files\nspritemap: {\nmarkerName0: {\nstart: 0,\nend: 0\n},\nmarkerName1: {\nstart: 0,\nend: 0\n}\n// ...\n}\n}\n</code></pre></p>"},{"location":"audio/#play-sound_1","title":"Play sound","text":"<p>Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.playAudioSprite(key, markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#sound-instance_1","title":"Sound instance","text":"<p>Create a sound instance with markers.</p> <pre><code>var music = scene.sound.addAudioSprite(key, config);\n</code></pre> <p>config</p>"},{"location":"audio/#play-sound-instance_1","title":"Play sound instance","text":"<pre><code>music.play(markerName);\n</code></pre> <pre><code>music.play(markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#sound-manager","title":"Sound manager","text":""},{"location":"audio/#mute_1","title":"Mute","text":"<ul> <li>Set     <pre><code>scene.sound.setMute(mute); // mute: true/false\n// scene.sound.mute = mute;\n</code></pre></li> <li>Get     <pre><code>var mute = scene.sound.mute;\n</code></pre></li> </ul>"},{"location":"audio/#volume_1","title":"Volume","text":"<ul> <li>Set     <pre><code>scene.sound.setVolume(volume); // volume: 0 to 1\n// scene.sound.volume = volume;\n</code></pre></li> <li>Get     <pre><code>var volume = scene.sound.volume;\n</code></pre></li> </ul>"},{"location":"audio/#detune_1","title":"Detune","text":"<ul> <li>Set     <pre><code>scene.sound.setDetune(detune); // detune: -1200 to 1200\n// scene.sound.detune = detune;\n</code></pre></li> <li>Get     <pre><code>var detune = scene.sound.detune;\n</code></pre></li> </ul>"},{"location":"audio/#play-rate_1","title":"Play-rate","text":"<ul> <li>Set     <pre><code>scene.sound.setRate(rate); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed)\n// scene.sound.rate = rate;\n</code></pre></li> <li>Get     <pre><code>var rate = scene.sound.rate;\n</code></pre></li> </ul>"},{"location":"audio/#get-music-instance","title":"Get music instance","text":"<ul> <li>Get first by key     <pre><code>var music = scene.sound.get(key); // music instance, or null\n</code></pre></li> <li>Get all by key     <pre><code>var musicArray = scene.sound.getAll(key); // music instance, or null\n</code></pre></li> <li>Get all     <pre><code>var musicArray = scene.sound.getAll();\n</code></pre></li> <li>Get all playing     <pre><code>var musicArray = scene.sound.getAllPlaying();\n</code></pre></li> </ul>"},{"location":"audio/#remove-music-instance","title":"Remove music instance","text":"<ul> <li>Remove by key     <pre><code>var removed = scene.sound.removeByKey(key);\n</code></pre><ul> <li><code>removed</code> : The number of matching sound objects that were removed.</li> </ul> </li> <li>Remove all     <pre><code>scene.sound.removeAll();\n</code></pre></li> </ul>"},{"location":"audio/#stop-music-instance","title":"Stop music instance","text":"<ul> <li>Stop by key     <pre><code>var stopped = scene.sound.stopByKey(key);\n</code></pre><ul> <li><code>stopped</code> : How many sounds were stopped.</li> </ul> </li> <li>Stop all     <pre><code>scene.sound.stopAll();\n</code></pre></li> </ul>"},{"location":"audio/#analyser","title":"Analyser","text":"<p>Analyser node is only available in Web audio mode.</p> <ol> <li>Create analyser node     <pre><code>var analyser = scene.sound.context.createAnalyser();\n</code></pre></li> <li>Configure analyser node     <pre><code>analyser.smoothingTimeConstant = 1;\nanalyser.fftSize = 8192;\nanalyser.minDecibels = -90;\nanalyser.maxDecibels = -10;\n</code></pre><ul> <li><code>smoothingTimeConstant</code> : Averaging constant with the last analysis frame.<ul> <li><code>0</code>(no time averaging) ~ <code>1</code>. Default value is <code>0.8</code>.</li> </ul> </li> <li><code>fftSize</code> : Window size. <ul> <li><code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, <code>16384</code>, and <code>32768</code>. Defaults to <code>2048</code>.</li> </ul> </li> <li><code>minDecibels</code> : Minimum decibel value for scaling the FFT analysis data.<ul> <li><code>0</code> dB is the loudest possible sound, <code>-10</code> dB is a 10th of that, etc. The default value is <code>-100</code> dB</li> </ul> </li> <li><code>maxDecibels</code> : Maximum decibel value for scaling the FFT analysis data.<ul> <li>The default value is <code>-30</code> dB.</li> </ul> </li> </ul> </li> <li>Set source of analyser node<ul> <li>Global volume nodee -&gt; analyser node     <pre><code>scene.sound.masterVolumeNode.connect(analyser);\n</code></pre></li> <li>A sound instance -&gt; analyser node     <pre><code>music.volumeNode.connect(analyser);\n</code></pre></li> </ul> </li> <li>Ouput analyser node to audio context     <pre><code>analyser.connect(scene.sound.context.destination);\n</code></pre></li> <li>Create output data array     <pre><code>var dataArrayLength = analyser.frequencyBinCount;\nvar dataArray = new Uint8Array(dataArrayLength);\n</code></pre></li> <li>Get output data     <pre><code>analyser.getByteTimeDomainData(dataArray);\n</code></pre><ul> <li>Retrieve output data     <pre><code>for(var i= 0; i &lt; dataArrayLength; i++) {\nvar data = dataArray[i];\n}\n</code></pre></li> </ul> </li> </ol>"},{"location":"awaitloader/","title":"Await loader","text":""},{"location":"awaitloader/#introduction","title":"Introduction","text":"<p>Await custom task in preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"awaitloader/#live-demos","title":"Live demos","text":"<ul> <li>Wait 1000ms</li> </ul>"},{"location":"awaitloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"awaitloader/#install-plugin","title":"Install plugin","text":""},{"location":"awaitloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexawaitloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/    rexawaitloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexawaitloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexawaitloaderplugin').addToScene(this);\n\nthis.load.rexAwait(function(successCallback, failureCallback) { // successCallback()\n});\n}\n}\n</code></pre></li> </ul>"},{"location":"awaitloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAwaitLoader',\nplugin: AwaitLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexAwait(function(successCallback, failureCallback) { // successCallback()\n});\n</code></pre></li> </ul>"},{"location":"awaitloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Awaitloader from 'phaser3-rex-plugins/plugins/awaitloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>Awaitloader.call(scene.load, function(successCallback, failureCallback) {\n// successCallback();\n}, scope)\n</code></pre></li> </ul>"},{"location":"awaitloader/#start-loading-task","title":"Start loading task","text":"<p>In preload stage:</p> <pre><code>scene.load.rexAwait(function(successCallback, failureCallback) {\n// successCallback();\n}, scope);\n</code></pre> <p>or</p> <pre><code>var callback = function(successCallback, failureCallback) {\n// successCallback();\n};\nscene.load.rexAwait(key, {\ncallback: callback,\n// scope: scope\n});\n</code></pre> <ol> <li>This plugin runs <code>callback</code>  to start custom task.</li> <li>Calls <code>successCallback</code> when custom task completed, or <code>failureCallback</code> if error.</li> </ol>"},{"location":"awaytime/","title":"Away time","text":""},{"location":"awaytime/#introduction","title":"Introduction","text":"<p>Get time from previous closing application to now.</p> <ul> <li>Author: Rex</li> <li>Standalone object</li> </ul>"},{"location":"awaytime/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"awaytime/#install-plugin","title":"Install plugin","text":""},{"location":"awaytime/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexawaytimeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexawaytimeplugin.min.js', true);\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = scene.plugins.get('rexawaytimeplugin').awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AwayTimePlugin from 'phaser3-rex-plugins/plugins/awaytime-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAwayTime',\nplugin: AwayTimePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = scene.plugins.get('rexAwayTime').awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import AwayTime from 'phaser3-rex-plugins/plugins/awaytime.js';\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = (new AwayTime()).awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#default-away-timer","title":"Default away-timer","text":""},{"location":"awaytime/#get-away-time","title":"Get away-time","text":"<pre><code>var awayTime = scene.plugins.get('rexAwayTime').awayTime;\n// var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime;\n</code></pre> <ul> <li><code>awayTime</code> : Time in millisecond.</li> <li><code>key</code> : Save curent time-stamp in key of localstorage. Default value is <code>'away'</code>.</li> <li><code>time</code> : Period of saving current time-stamp. Default value is <code>1000</code>.</li> </ul> <p>Note</p> <p>This action also starts saving current time-stamp periodically into localstorage.</p>"},{"location":"awaytime/#set-key","title":"Set key","text":"<pre><code>scene.plugins.get('rexAwayTime').setKey(key);\n</code></pre> <ul> <li><code>key</code> : Save curent time-stamp in key of localstorage</li> </ul>"},{"location":"awaytime/#set-period","title":"Set period","text":"<pre><code>scene.plugins.get('rexAwayTime').setPeriod(time);\n</code></pre> <ul> <li><code>time</code> : Period of saving current time-stamp.</li> </ul>"},{"location":"awaytime/#add-away-timer-object","title":"Add away timer object","text":"<pre><code>var awayTimer = scene.plugins.get('rexAwayTime').add({\nkey: 'away',\nperiod: 1000\n})\n</code></pre>"},{"location":"awaytime/#get-away-time_1","title":"Get away-time","text":"<pre><code>var awayTime = awayTimer.awayTime;\n</code></pre> <p>Will also start timer.</p>"},{"location":"awaytime/#stop-timer","title":"Stop timer","text":"<pre><code>awayTimer.stop();\n</code></pre>"},{"location":"base64/","title":"Base64","text":""},{"location":"base64/#introduction","title":"Introduction","text":"<p>Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"base64/#usage","title":"Usage","text":""},{"location":"base64/#base64-array-buffer","title":"Base64 -&gt; Array buffer","text":"<pre><code>var arrayBuffer = Phaser.Utils.Base64.Base64ToArrayBuffer(base64);\n</code></pre>"},{"location":"base64/#array-buffer-base64","title":"Array buffer -&gt; Base64","text":"<pre><code>var base64 = Phaser.Utils.Base64.ArrayBufferToBase64(arrayBuffer, mediaType);\n</code></pre> <ul> <li><code>mediaType</code> : An optional media type, i.e. <code>audio/ogg</code> or <code>image/jpeg</code></li> </ul>"},{"location":"bbcodetext/","title":"BBCode Text","text":""},{"location":"bbcodetext/#introduction","title":"Introduction","text":"<p>Drawing text with BBCode protocol.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"bbcodetext/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text</li> <li>Hit area of words</li> <li>Align</li> <li>Escape</li> <li>Page, typing</li> <li>Wrap</li> <li>Measure margin of text</li> <li>Generate texture</li> <li>Image height</li> <li>RTL</li> </ul>"},{"location":"bbcodetext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bbcodetext/#install-plugin","title":"Install plugin","text":""},{"location":"bbcodetext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbbcodetextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbbcodetextplugin.min.js', true);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexBBCodeText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BBCodeTextPlugin from 'phaser3-rex-plugins/plugins/bbcodetext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBBCodeTextPlugin',\nplugin: BBCodeTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexBBCodeText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BBCodeText from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add text object     <pre><code>var txt = new BBCodeText(scene, x, y, content, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#bbcode","title":"BBCode","text":"<ul> <li>Bold : <code>[b]text[/b]</code></li> <li>Weight : <code>[weight=900]text[/weight]</code><ul> <li>Valid when text does not have bold tag.</li> </ul> </li> <li>Italic : <code>[i]text[/i]</code></li> <li>Color : <code>[color=red]text[/color]</code></li> <li>Size : <code>[size=18]text[/size]</code></li> <li>Stroke : <code>[stroke]text[/stroke]</code><ul> <li>Stroke with color setting : <code>[stroke=red]text[/stroke]</code></li> </ul> </li> <li>Shadow : <code>[shadow]text[/shadow]</code></li> <li>Underline : <code>[u]text[/u]</code><ul> <li>Underline with color setting : <code>[u=red]text[/u]</code></li> </ul> </li> <li>Strikethrough : <code>[s]text[/s]</code><ul> <li>Strikethrough with color setting : <code>[s=red]text[/s]</code></li> </ul> </li> <li>Superscript, subscript : <code>[y=-12]text[y]</code></li> <li>Image : <code>[img=imgKey]</code></li> <li>Hit area of words : <code>[area=key]text[/area]</code></li> <li>Url link : <code>[url=http...]text[/url]</code><ul> <li>Click this area to open web page on a new tab (<code>window.open(url, '_blank')</code>)</li> <li>Will register hit area with key <code>url:http...</code></li> </ul> </li> <li>Line alignment : <ul> <li><code>[align=left]text[/align]</code>, </li> <li><code>[align=center]text[/align]</code>, </li> <li><code>[align=right]text[/align]</code></li> </ul> </li> <li>Escape : Tags between <code>[esc]</code> ... <code>[/esc]</code> or <code>[raw]</code> ... <code>[/raw]</code> will be treated as content.<ul> <li><code>[esc][color=yellow]Text[/color][/esc]</code></li> <li><code>[esc][raw]Text[/raw][/esc]</code></li> <li><code>[raw][esc]Text[/esc][/raw]</code></li> <li><code>[raw][b]Text[/b][/raw]</code></li> </ul> </li> </ul> <p>Note</p> <p>Can set delimiter <code>[]</code> to another custom value in style of constructor.</p>"},{"location":"bbcodetext/#add-text-object","title":"Add text object","text":"<pre><code>var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello');\n// var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });\n</code></pre> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,  // null, css string, or number\nbackgroundColor2: null,  // null, css string, or number\nbackgroundHorizontalGradient: true,\nbackgroundStrokeColor: null,  // null, css string, or number\nbackgroundStrokeLineWidth: 2,\n\nbackgroundCornerRadius: 0,  // 0   : no round corner, \n// &gt; 0 : convex round corner\n// &lt; 0 : concave round corner\n\nbackgroundCornerIteration: null,    color: '#fff',  // null, css string, or number\nstroke: '#fff',  // null, css string, or number\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',  // css string, or number\nblur: 0,\nstroke: false,\nfill: false\n},\nunderline: {\ncolor: '#000',  // css string, or number\nthickness: 0,\noffset: 0\n},\nstrikethrough: {\ncolor: '#000',  // css string, or number\nthickness: 0,\noffset: 0\n},\n// align: 'left',  // Equal to halign\nhalign: 'left', // 'left'|'center'|'right'\nvalign: 'top',  // 'top'|'center'|'bottom'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\ntestString: '|M\u00c9qgy',\nwrap: {\nmode: 'none'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: null\n},\n// rtl: false,\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// images: {\n//     imgKey: {y: -8}\n// },\n\n// delimiters: '[]',\n\n// sharedPool: true,\n\n// urlTagCursorStyle: 'pointer',\n// interactive: false\n}\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexBBCodeText({\nx: 0,\ny: 0,\ntext: '',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\n// ...\n},\n})\n</code></pre> <p>or</p> <pre><code>var txt = scene.make.rexBBCodeText({\nx: 0,\ny: 0,\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\n// ...\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre> <ul> <li>Alignment<ul> <li><code>halign</code>, or <code>align</code> : Horizontal alignment.<ul> <li><code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> <li><code>valign</code> : Vertical alignment.<ul> <li><code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li><code>images</code> : See Image</li> <li><code>delimiters</code> : Delimiters of tags, default value is <code>[]</code>.</li> <li><code>sharedPool</code> : <ul> <li><code>true</code> : Use shared resouce pools during game. Default behavior.</li> <li><code>false</code> : Use local resource pools, will be free when game object destroying.</li> </ul> </li> <li><code>urlTagCursorStyle</code> : Cursor style when cursor moving over a url tag. Default value is <code>'pointer'</code>.</li> <li><code>interactive</code> :<ul> <li><code>true</code> : Invoke <code>txt.setInteractive()</code> for hit-area tag, or url tag.</li> <li><code>false</code> : Do nothing. Default behavior.</li> </ul> </li> </ul>"},{"location":"bbcodetext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends BBCodeText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, '[b]h[/b]ello');\n</code></pre></li> </ul>"},{"location":"bbcodetext/#wrap","title":"Wrap","text":"<ul> <li>Wrap by word or character.     <pre><code>var txt = scene.make.rexBBCodeText({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwrap: {\nmode: 0     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: 0\n}\n}\n});\n</code></pre><ul> <li><code>wrap.mode</code> : <ul> <li><code>0</code>, or <code>'none'</code> : No wrapping, default behavior.</li> <li><code>1</code>, or <code>'word'</code> : Word wrapping.</li> <li><code>2</code>, or <code>'char'</code>, or <code>'character'</code> : Character wrapping.</li> </ul> </li> <li><code>wrap.width</code> : Maximun wrapping width of a line.<ul> <li>Wrap-fit : Set wrapping width to <code>fixedWidth - padding.left - padding.right</code> if <code>fixedWidth &gt; 0</code></li> </ul> </li> </ul> </li> <li>Wrap mode<ul> <li>Get     <pre><code>var mode = txt.style.wrapMode;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'none'</code> : No wrapping.</li> <li><code>1</code>, or <code>'word'</code> : Word wrapping.</li> <li><code>2</code>, or <code>'char'</code>, or <code>'character'</code> : Character wrapping.</li> </ul> </li> </ul> </li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wrapWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapWidth(width);\n// txt.setWordWrapWidth(width);\n</code></pre><ul> <li><code>width</code> : Maximun wrapping width of a line.<ul> <li>Wrap-fit : Set wrapping width to <code>fixedWidth - padding.left - padding.right</code> if <code>fixedWidth &gt; 0</code></li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#content","title":"Content","text":"<ul> <li>Get source text     <pre><code>var curContent = txt.text;\n</code></pre></li> <li>Get plain text     <pre><code>var plainText = txt.getPlainText();\n</code></pre></li> <li>Set     <pre><code>txt.setText('[b]h[/b]ello');\n// txt.text = '[b]h[/b]ello';\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"bbcodetext/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);  // font: {fontFamily, fontSize, fontStyle}\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"bbcodetext/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Underline color, thickness<ul> <li>Get     <pre><code>var color = txt.style.underlineColor;\nvar thickness = txt.style.underlineThickness;\nvar offset = txt.style.underlineOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setUnderline(color, thickness, ofset);\ntxt.setUnderlineColor(color);\ntxt.setUnderlineThinkness(thickness);\ntxt.setUnderlineOffset(ofset);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Strikethrough color, thickness<ul> <li>Get     <pre><code>var color = txt.style.strikethroughColor;\nvar thickness = txt.style.strikethroughThickness;\nvar offset = txt.style.strikethroughOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setStrikethrough(color, thickness, ofset);\ntxt.setStrikethroughColor(color);\ntxt.setStrikethroughThinkness(thickness);\ntxt.setStrikethroughOffset(ofset);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Background<ul> <li>Color, or gradient color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\nvar color2 = txt.style.backgroundColor2;\nvar isHorizontalGradient = txt.style.backgroundHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre><ul> <li><code>color</code>, <code>color2</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Stroke color<ul> <li>Get    <pre><code>var color = txt.style.backgroundStrokeColor;\nvar lineWidth = txt.style.backgroundStrokeLineWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundStrokeColor(color, lineWidth);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Round rectangle<ul> <li>Get     <pre><code>var radius = txt.style.backgroundCornerRadius;\nvar iteration = txt.style.backgroundCornerIteration;\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> </ul> </li> <li>Set     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration);\n</code></pre><ul> <li><code>iteration</code> : <ul> <li><code>undefined</code> : Round rectangle</li> <li><code>0</code> : Octagon</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#align","title":"Align","text":"<ul> <li>Horizontal align<ul> <li>Get     <pre><code>var align = txt.style.halign;\n</code></pre><ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> <li>Set     <pre><code>txt.setHAlign(align);    </code></pre>     or     <pre><code>txt.setAlign(align);    </code></pre><ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> </ul> </li> <li>Vertical align<ul> <li>Get     <pre><code>var align = txt.style.valign;\n</code></pre><ul> <li><code>align</code> : <code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> <li>Set     <pre><code>txt.setVAlign(align);    </code></pre><ul> <li><code>align</code> : <code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#image","title":"Image","text":"<ul> <li>Uses texture key as image key by default.</li> <li>Add image render information     <pre><code>txt.addImage(imgKey, {\nkey: textureKey,\nframe: frameName,\nwidth: undefined,\nheight: undefined,\ny: 0,\nleft: 0,\nright: 0,\noriginX: 0,\noriginY: 0,\n});\n</code></pre><ul> <li><code>imgKey</code> : Image key used in text content, i.e. <code>[img=imgKey]</code>.</li> <li><code>key</code> : Texture key.</li> <li><code>frame</code> : Frame name.</li> <li><code>width</code> : Render width, set <code>undefined</code> to use the cut width of frame.</li> <li><code>height</code> : Render height, set <code>undefined</code> to use the cut height of frame.</li> <li><code>y</code> : Extra offset y.</li> <li><code>left</code> : Left padding space.</li> <li><code>Right</code> : Right padding space.</li> <li><code>originX</code> : Offset x via frame width * <code>originX</code></li> <li><code>originY</code> : Offset y via frame height * <code>originY</code></li> </ul> </li> <li>Add some image render informations     <pre><code>txt.addImage(data);\n</code></pre><ul> <li><code>data</code> : <code>{imgKey, config}</code></li> </ul> </li> </ul>"},{"location":"bbcodetext/#hit-area-of-words","title":"Hit area of words","text":"<p>Size of hit-area is word-width x line-height, or image-width x line-height.</p>"},{"location":"bbcodetext/#hitting-events","title":"Hitting events","text":"<ul> <li>Pointer down     <pre><code>txt.on('areadown', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areadown-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer click : pointer down then up, without pointer out     <pre><code>txt.on('areaclick', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaclick-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer up     <pre><code>txt.on('areaup', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaup-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer over     <pre><code>txt.on('areaover', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaover-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer out     <pre><code>txt.on('areaout', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaout-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> </ul>"},{"location":"bbcodetext/#draw-hit-areas","title":"Draw hit-areas","text":"<pre><code>txt.drawAreaBounds(graphics, color);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul>"},{"location":"bbcodetext/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"bbcodetext/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#margin-of-text","title":"Margin of text","text":"<pre><code>var leftMargin = txt.measureTextMargins(testString).left;\n</code></pre> <ul> <li><code>testString</code> : Measure left margin of this text.</li> </ul>"},{"location":"bbcodetext/#shift-start-position-of-text","title":"Shift start position of text","text":"<pre><code>txt.setXOffset(value);\n</code></pre>"},{"location":"bbcodetext/#resolution","title":"Resolution","text":"<ul> <li>Get     <pre><code>var resolution = txt.style.resolution;\n</code></pre></li> <li>Set     <pre><code>txt.setResolution(resolution);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"bbcodetext/#save-texture","title":"Save texture","text":"<pre><code>txt.generateTexture(key);\n// txt.generateTexture(key, x, y, width, height);\n</code></pre>"},{"location":"bbcodetext/#delimiters","title":"Delimiters","text":"<pre><code>txt.setDelimiters(delimiters);  // '&lt;&gt;', or ['&lt;', '&gt;']\n</code></pre> <p>or</p> <pre><code>txt.setDelimiters(delimiterLeft, delimiterRight); // '&lt;', '&gt;'\n</code></pre>"},{"location":"bbcodetext/#rtl","title":"RTL","text":"<ul> <li>Set <code>rtl</code> in style config when creating this text game object</li> <li>Change <code>rtl</code> during runtime     <pre><code>txt.setRTL(rtl).setText(newContent);\n</code></pre><ul> <li>Invoke <code>setRTL</code> method before setting new content.</li> </ul> </li> </ul>"},{"location":"bitmaptext/","title":"Static bitmap text","text":""},{"location":"bitmaptext/#introduction","title":"Introduction","text":"<p>Drawing text by texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"bitmaptext/#usage","title":"Usage","text":""},{"location":"bitmaptext/#load-bitmap-font","title":"Load bitmap font","text":"<ul> <li>Load bitmap font from texture and xml configuration     <pre><code>scene.load.bitmapFont(key, textureURL, xmlURL);\n</code></pre><ul> <li>Reference: load bitmap font</li> <li>Loaded texture also can be used for Image, Sprite, or Arcade Image, Arcade Sprite <pre><code>scene.add.image(x, y, key, char);\n</code></pre></li> </ul> </li> <li>Load retro bitmap font from texture and JSON configuration<ol> <li>Load texture in preload stage     <pre><code>scene.load.image(key, url);\n</code></pre>     Reference: load image</li> <li>Add retro bitmap font     <pre><code>var config = {\n// image\nimage: '',\noffset: {\nx: 0,\ny: 0\n},\n// characters\nwidth: 32,\nheight: 32,\nchars: '',\ncharsPerRow: 10,\n// spacing\nspacing: {\nx: 0,\ny: 0\n},\nlineSpacing: 0\n}\nscene.cache.bitmapFont.add(key, Phaser.GameObjects.RetroFont.Parse(scene, config));\n</code></pre><ul> <li>Image :<ul> <li><code>image</code> : The key of the image containing the font.</li> <li><code>offset</code> : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here.</li> </ul> </li> <li>Characters :<ul> <li><code>width</code> : The width of each character in the font set.</li> <li><code>height</code> : The height of each character in the font set.</li> <li><code>chars</code> : The characters used in the font set, in display order.<ul> <li>Default characters set</li> </ul> </li> <li><code>charsPerRow</code> : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth.</li> </ul> </li> <li>Spacing :<ul> <li><code>spacing</code> : If the characters in the font set have horizontal/vertical spacing between them set the required amount here.</li> <li><code>lineSpacing</code> : The amount of vertical space to add to the line height of the font.</li> </ul> </li> </ul> </li> </ol> </li> </ul>"},{"location":"bitmaptext/#add-bitmap-text-object","title":"Add bitmap text object","text":"<pre><code>var txt = scene.add.bitmapText(x, y, key, text);\n// var txt = scene.add.bitmapText(x, y, key, text, size, align);\n</code></pre> <ul> <li><code>size</code> : The size of the font</li> <li><code>align</code> : The alignment of the text in a multi-line BitmapText object.<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul> <p>Add text from JSON</p> <pre><code>var txt = scene.make.bitmapText({\nx: 0,\ny: 0,\ntext: 'Text\\nGame Object\\nCreated from config',\nfont: '',\nsize: false,\nalign: 0,\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"bitmaptext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.BitmapText {\nconstructor(scene, x, y, key, text, size, align) {\nsuper(scene, x, y, key, text, size, align);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, key, text);\n</code></pre></li> </ul>"},{"location":"bitmaptext/#set-text","title":"Set text","text":"<pre><code>txt.setText('...');\n</code></pre> <p>or</p> <pre><code>txt.text = '...';\n</code></pre>"},{"location":"bitmaptext/#set-align","title":"Set align","text":"<ul> <li>Left aligned     <pre><code>txt.setLeftAlign();\n</code></pre></li> <li>Middle aligned     <pre><code>txt.setCenterAlign();\n</code></pre></li> <li>Right aligned     <pre><code>txt.setRightAlign();\n</code></pre></li> </ul> <p>or</p> <pre><code>txt.align = align;\n</code></pre> <ul> <li><code>align</code> :<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul>"},{"location":"bitmaptext/#set-letter-spacing","title":"Set letter spacing","text":"<pre><code>txt.setLetterSpacing(spacing);\n</code></pre> <p>or</p> <pre><code>txt.letterSpacing = spacing;\n</code></pre> <p>Can be a positive value to increase the space, or negative to reduce it.</p>"},{"location":"bitmaptext/#set-line-spacing","title":"Set line spacing","text":"<pre><code>txt.setLineSpacing(spacing);\n</code></pre> <p>or</p> <pre><code>txt.lineSpacing = spacing;\n</code></pre> <p>Can be a positive value to increase the space, or negative to reduce it.</p>"},{"location":"bitmaptext/#set-font-size","title":"Set font size","text":"<pre><code>txt.setFontSize(size);\n</code></pre> <p>or</p> <pre><code>txt.fontSize = size;\n</code></pre>"},{"location":"bitmaptext/#set-font","title":"Set font","text":"<pre><code>txt.setFont(key);\n// txt.setFont(key, size, align);\n</code></pre>"},{"location":"bitmaptext/#tint","title":"Tint","text":"<p>See Tint.</p>"},{"location":"bitmaptext/#color-of-characters","title":"Color of characters","text":"<ul> <li>By character     <pre><code>txt.setCharacterTint(start, length, tintFill, color);\n// txt.setCharacterTint(start, length, tintFill, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre><ul> <li><code>start</code> : Index starting character. <ul> <li><code>&lt; 0</code> : Counts back from the end of the text.</li> </ul> </li> <li><code>length</code> : Number of characters to tint.<ul> <li><code>-1</code> : All characters from <code>start</code></li> </ul> </li> <li><code>tintFill</code> : <ul> <li><code>true</code> : Fill-based tint</li> <li><code>false</code> : Additive tint</li> </ul> </li> <li><code>color</code>, or <code>topLeft, topRight, bottomLeft, bottomRight</code> : Color integer.</li> </ul> </li> <li>By word     <pre><code>txt.setWordTint(word, count, tintFill, color);\n// txt.setWordTint(word, count, tintFill, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre><ul> <li><code>word</code> : The word to search for. <ul> <li>A string</li> <li>An index of the word in the words array.</li> </ul> </li> <li><code>count</code> : Number of matching words to tint.<ul> <li><code>-1</code> : All matching words</li> </ul> </li> <li><code>tintFill</code> : <ul> <li><code>true</code> : Fill-based tint</li> <li><code>false</code> : Additive tint</li> </ul> </li> <li><code>color</code>, or <code>topLeft, topRight, bottomLeft, bottomRight</code> : Color integer.</li> </ul> </li> </ul>"},{"location":"bitmaptext/#drop-shadow-effect","title":"Drop shadow effect","text":"<pre><code>txt.setDropShadow(x, y, color, alpha);\n</code></pre> <p>or</p> <pre><code>txt.dropShadowX = x;\ntxt.dropShadowY = y;\ntxt.dropShadowColor = color;\ntxt.dropShadowAlpha = alpha;\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the drop shadow.</li> <li><code>color</code> : The color of the drop shadow.</li> <li><code>alpha</code> : The alpha of the drop shadow.</li> </ul> <p>Note</p> <p>WebGL only</p>"},{"location":"bitmaptext/#wrap","title":"Wrap","text":"<ul> <li>Wrap     <pre><code>txt.setMaxWidth(width);\n// txt.setMaxWidth(width, wordWrapCharCode);\n</code></pre><ul> <li><code>width</code> : Line width in pixels.</li> <li><code>wordWrapCharCode</code> : The character code to check for when word wrapping. Defaults to 32 (the space character)</li> </ul> </li> <li>Disable wrapping     <pre><code>txt.setMaxWidth(0);\n</code></pre></li> </ul>"},{"location":"bitmaptext/#get-bounds","title":"Get bounds","text":"<pre><code>var width = txt.width;\nvar height = txt.height;\n</code></pre> <p>or</p> <pre><code>var bounds = txt.getTextBounds(round);\n// bounds = {\n//     local: {\n//         x: 0,\n//         y: 0,\n//         width: 0,\n//         height: 0\n//     },\n//     global: {\n//         x: 0,\n//         y: 0,\n//         width: 0,\n//         height: 0\n//     },\n//     lines: {\n//         shortest: 0,\n//         longest: 0,\n//         lengths: null,\n//         height: 0\n//     },\n//     wrappedText: '',\n//     words: [],\n//     characters: [],\n//     scaleX: 0,\n//     scaleY: 0\n// };\n</code></pre> <ul> <li><code>round</code> : Set <code>true</code> to round the results to the nearest integer.</li> <li><code>local</code> : The BitmapText based on fontSize and 0x0 coords.</li> <li><code>global</code> : The BitmapText, taking into account scale and world position.</li> <li><code>lines</code> : The BitmapText line data.</li> <li><code>wrappedText</code> : Wrapped content joined with <code>'\\n'</code>.</li> <li><code>characters</code> : Information of each character.     <pre><code>{\nchar, code, i, idx, x, y, w, h, t, b, r, line\n}\n</code></pre><ul> <li><code>char</code> : Character (string).</li> <li><code>code</code>: Character code (number)</li> <li><code>i</code> : Index of character</li> <li><code>x</code> , <code>y</code> : World position of this character</li> <li><code>w</code>, <code>h</code> : Width/height of this character</li> <li><code>t</code>, <code>b</code> : The top/bottom of the line this character is on.</li> <li><code>r</code> : The right-most point of this character, including xAdvance.</li> <li><code>line</code> : The line number the character appears on.</li> </ul> </li> <li><code>words</code> : Information of each word.     <pre><code>{\nword, i, x, y, w, h, cr\n\n}\n</code></pre><ul> <li><code>word</code> : Word string.</li> <li><code>i</code> : Index of start character</li> <li><code>x</code>, <code>y</code> : World position of start character</li> <li><code>w</code> , <code>h</code> : Width/height of word</li> <li><code>cr</code> : Is last word of current line</li> </ul> </li> <li><code>scaleX</code>, <code>scaleY</code> : Scale of width and height.</li> </ul>"},{"location":"bitmaptext/#get-information-of-character","title":"Get information of character","text":"<pre><code>var data = txt.getCharacterAt(x, y);\n// var data = txt.getCharacterAt(x, y, camera);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position.</li> <li><code>camera</code> : The Camera which is being tested against.</li> <li><code>data</code> : Information of character at world position.     <pre><code>{\nchar, code, i, x, y, w, h, t, b, r, line\n}\n</code></pre><ul> <li><code>char</code> : Character (string).</li> <li><code>code</code>: Character code (number)</li> <li><code>i</code> : Index of character</li> <li><code>x</code> , <code>y</code> : World position of this character</li> <li><code>w</code>, <code>h</code> : Width/height of this character</li> <li><code>t</code>, <code>b</code> : The top/bottom of the line this character is on.</li> <li><code>r</code> : The right-most point of this character, including xAdvance.</li> <li><code>line</code> : The line number the character appears on.</li> </ul> </li> </ul>"},{"location":"bitmaptext/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"bitmaptext/#appendix","title":"Appendix","text":""},{"location":"bitmaptext/#default-characters-set-of-retro-font","title":"Default characters set of retro font","text":"<ul> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET1</code> :     <pre><code>' !\"#$%&amp;\\'()*+,-./0123456789:;&lt;=&gt;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET2</code> :     <pre><code>' !\"#$%&amp;\\'()*+,-./0123456789:;&lt;=&gt;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET3</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 '\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET4</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET5</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET6</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' '\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET7</code> :     <pre><code>'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET8</code> :     <pre><code>'0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET9</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET10</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET11</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'\n</code></pre></li> </ul>"},{"location":"bitmapzone/","title":"Bitmap zone","text":""},{"location":"bitmapzone/#introduction","title":"Introduction","text":"<p>Particles' emitter zone from canvas bitmap of text/canvas game object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"bitmapzone/#live-demo","title":"Live demo","text":"<ul> <li>Particles</li> </ul>"},{"location":"bitmapzone/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bitmapzone/#install-plugin","title":"Install plugin","text":""},{"location":"bitmapzone/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbitmapzoneplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbitmapzoneplugin.min.js', true);\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = scene.plugins.get('rexbitmapzoneplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BitmapZonePlugin from 'phaser3-rex-plugins/plugins/bitmapzone-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBitmapZone',\nplugin: BitmapZonePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = scene.plugins.get('rexBitmapZone').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BitmapZone from 'phaser3-rex-plugins/plugins/bitmapzone.js';\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = new BitmapZone(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#create-shape","title":"Create shape","text":"<pre><code>var bitmapZone = scene.plugins.get('rexBitmapZone').add(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> :<ul> <li>Any kind of text object : Text object, bbcode text object, or tag text object.</li> <li>Canvas object</li> </ul> </li> </ul>"},{"location":"bitmapzone/#emit-zone","title":"Emit zone","text":"<pre><code>var particles = scene.add.particles(key,\n[\n// emitter config\n{\n// blendMode:\n// scale:\n// speed:\n// garvityY:\nemitZone: {\ntype: 'random',\nsource: bitmapZone\n}\n}\n]);\n</code></pre> <p><code>bitmapZone</code> provides getRandomPoint method.</p>"},{"location":"bitmapzone/#update-content","title":"Update content","text":"<pre><code>bitmapZone.setSource(gameObject);\n</code></pre>"},{"location":"blendmode/","title":"Blend mode","text":""},{"location":"blendmode/#introduction","title":"Introduction","text":"<p>Constant value of blend modes.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"blendmode/#usage","title":"Usage","text":""},{"location":"blendmode/#webgl-and-canvas","title":"WebGL and Canvas","text":"<ul> <li><code>'NORMAL'</code>, or <code>Phaser.BlendModes.NORMAL</code>, or <code>0</code> <ul> <li>Default setting and draws new shapes on top of the existing canvas content.</li> </ul> </li> <li><code>'ADD'</code>, or <code>Phaser.BlendModes.ADD</code>, or <code>1</code><ul> <li>Where both shapes overlap the color is determined by adding color values.</li> </ul> </li> <li><code>'MULTIPLY'</code>, or <code>Phaser.BlendModes.MULTIPLY</code>, or <code>2</code><ul> <li>The pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.</li> </ul> </li> <li><code>'SCREEN'</code>, or <code>Phaser.BlendModes.SCREEN</code>, or <code>3</code><ul> <li>The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)</li> </ul> </li> <li><code>'ERASE'</code>, or <code>Phaser.BlendModes.ERASE</code>, or <code>17</code><ul> <li>Alpha erase blend mode. Only works when rendering to a framebuffer, like a Render Texture</li> </ul> </li> </ul>"},{"location":"blendmode/#canvas-only","title":"Canvas only","text":"<ul> <li><code>'OVERLAY'</code>, or <code>Phaser.BlendModes.OVERLAY</code>, or <code>4</code><ul> <li>A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter.</li> </ul> </li> <li><code>'DARKEN'</code>, or <code>Phaser.BlendModes.DARKEN</code>, or <code>5</code><ul> <li>Retains the darkest pixels of both layers.</li> </ul> </li> <li><code>'LIGHTEN'</code>, or <code>Phaser.BlendModes.LIGHTEN</code>, or <code>6</code><ul> <li>Retains the lightest pixels of both layers.</li> </ul> </li> <li><code>'COLOR_DODGE'</code>, or <code>Phaser.BlendModes.COLOR_DODGE</code>, or <code>7</code><ul> <li>Divides the bottom layer by the inverted top layer.</li> </ul> </li> <li><code>'COLOR_BURN'</code>, or <code>Phaser.BlendModes.COLOR_BURN</code>, or <code>8</code><ul> <li>Divides the inverted bottom layer by the top layer, and then inverts the result.</li> </ul> </li> <li><code>'HARD_LIGHT'</code>, or <code>Phaser.BlendModes.HARD_LIGHT</code>, or <code>9</code><ul> <li>A combination of multiply and screen like overlay, but with top and bottom layer swapped.</li> </ul> </li> <li><code>'SOFT_LIGHT'</code>, or <code>Phaser.BlendModes.SOFT_LIGHT</code>, or <code>10</code><ul> <li>A softer version of hard-light. Pure black or white does not result in pure black or white.</li> </ul> </li> <li><code>'DIFFERENCE'</code>, or <code>Phaser.BlendModes.DIFFERENCE</code>, or <code>11</code><ul> <li>Subtracts the bottom layer from the top layer or the other way round to always get a positive value.</li> </ul> </li> <li><code>'EXCLUSION'</code>, or <code>Phaser.BlendModes.EXCLUSION</code>, or <code>12</code><ul> <li>Like difference, but with lower contrast.</li> </ul> </li> <li><code>'HUE'</code>, or <code>Phaser.BlendModes.HUE</code>, or <code>13</code><ul> <li>Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.</li> </ul> </li> <li><code>'SATURATION'</code>, or <code>Phaser.BlendModes.SATURATION</code>, or <code>14</code><ul> <li>Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.</li> </ul> </li> <li><code>'COLOR'</code>, or <code>Phaser.BlendModes.COLOR</code>, or <code>15</code><ul> <li>Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.</li> </ul> </li> <li><code>'LUMINOSITY'</code>, or <code>Phaser.BlendModes.LUMINOSITY</code>, or <code>16</code><ul> <li>Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.</li> </ul> </li> <li><code>'SOURCE_IN'</code>, or <code>Phaser.BlendModes.SOURCE_IN</code>, or <code>18</code><ul> <li>The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.</li> </ul> </li> <li><code>'SOURCE_OUT'</code>, or <code>Phaser.BlendModes.SOURCE_OUT</code>, or <code>19</code><ul> <li>The new shape is drawn where it doesn't overlap the existing canvas content.</li> </ul> </li> <li><code>'SOURCE_ATOP'</code>, or <code>Phaser.BlendModes.SOURCE_ATOP</code>, or <code>20</code><ul> <li>The new shape is only drawn where it overlaps the existing canvas content.</li> </ul> </li> <li><code>'DESTINATION_OVER'</code>, or <code>Phaser.BlendModes.DESTINATION_OVER</code>, or <code>21</code><ul> <li>New shapes are drawn behind the existing canvas content.</li> </ul> </li> <li><code>'DESTINATION_IN'</code>, or <code>Phaser.BlendModes.DESTINATION_IN</code>, or <code>22</code><ul> <li>The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.</li> </ul> </li> <li><code>'DESTINATION_OUT'</code>, or <code>Phaser.BlendModes.DESTINATION_OUT</code>, or <code>23</code><ul> <li>The existing content is kept where it doesn't overlap the new shape.</li> </ul> </li> <li><code>'DESTINATION_ATOP'</code>, or <code>Phaser.BlendModes.DESTINATION_ATOP</code>, or <code>24</code><ul> <li>The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.</li> </ul> </li> <li><code>'LIGHTER'</code>, or <code>Phaser.BlendModes.LIGHTER</code>, or <code>25</code><ul> <li>Where both shapes overlap the color is determined by adding color values.</li> </ul> </li> <li><code>'COPY'</code>, or <code>Phaser.BlendModes.COPY</code>, or <code>26</code><ul> <li>Only the new shape is shown.</li> </ul> </li> <li><code>'XOR'</code>, or <code>Phaser.BlendModes.XOR</code>, or <code>27</code><ul> <li>Shapes are made transparent where both overlap and drawn normal everywhere else.</li> </ul> </li> </ul> <p>Blend modes have different effects under Canvas and WebGL, and from browser to browser, depending on support. Blend Modes also cause a WebGL batch flush should it encounter a new blend mode. For these reasons try to be careful about the construction of your Scene and the frequency in which blend modes are used.</p>"},{"location":"blitter/","title":"Blitter","text":""},{"location":"blitter/#introduction","title":"Introduction","text":"<p>Display of static images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"blitter/#usage","title":"Usage","text":""},{"location":"blitter/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"blitter/#add-blitter-container","title":"Add blitter container","text":"<p>Add blitter container</p> <pre><code>var blitter = scene.add.blitter(x, y, key);\n</code></pre> <p>Add blitter container from JSON</p> <pre><code>var blitter = scene.make.blitter({\nx: 0,\ny: 0,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"blitter/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBlitter extends Phaser.GameObjects.Blitter {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var blitter = new MyBlitter(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"blitter/#add-bob-object","title":"Add bob object","text":"<pre><code>var bob = blitter.create(x, y);\n// var bob = blitter.create(x, y, frame, visible, index);\n</code></pre> <ul> <li>frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using.</li> <li>visible : Should the created Bob render or not?</li> <li>index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list.</li> </ul>"},{"location":"blitter/#add-mutiple-bob-objects","title":"Add mutiple bob objects","text":"<pre><code>var bobs = blitter.createMultiple(quantity, frame, visible);\n</code></pre> <ul> <li>quantity : The quantity of Bob objects to create.</li> </ul>"},{"location":"blitter/#add-bob-object-from-callback","title":"Add bob object from callback","text":"<pre><code>var bobs = blitter.createFromCallback(callback, quantity, frame, visible)\n// var callback = function(bob, i){};\n</code></pre>"},{"location":"blitter/#get-bob-objects","title":"Get bob objects","text":"<pre><code>var bobs = blitter.children.list;\n</code></pre>"},{"location":"blitter/#clear-all-bob-objects","title":"Clear all bob objects","text":"<pre><code>blitter.clear();\n</code></pre>"},{"location":"blitter/#bob-object","title":"Bob object","text":"<p>A Bob has a position, alpha value and a frame from a texture that it uses to render with. You can also toggle the flipped and visible state of the Bob.</p>"},{"location":"blitter/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var x = bob.x;\nvar y = bob.y;\n</code></pre></li> <li>Set     <pre><code>bob.setPosition(x, y);\n// bob.x = 0;\n// bob.y = 0;\n</code></pre>     or     <pre><code>bob.reset(x, y);\n// bob.reset(x, y, frame);\n</code></pre></li> </ul>"},{"location":"blitter/#frame","title":"Frame","text":"<ul> <li>Get     <pre><code>var frame = bob.frame;\n</code></pre><ul> <li><code>frame</code> : Frame object.</li> </ul> </li> <li>Set     <pre><code>bob.setFrame(frame);\n</code></pre></li> </ul>"},{"location":"blitter/#flip","title":"Flip","text":"<ul> <li>Get     <pre><code>var flipX = bob.flipX;\nvar flipY = bob.flipY;\n</code></pre></li> <li>Set     <pre><code>bob.setFlip(boolX, boolY);\n// bob.setFlipX(boolean);\n// bob.setFlipY(boolean);\n// bob.flipX = flipX;\n// bob.flipY = flipY;\n</code></pre>     or     <pre><code>bob.resetFlip(); // bob.setFlip(false, false)\n</code></pre></li> </ul>"},{"location":"blitter/#visible","title":"Visible","text":"<ul> <li>Get     <pre><code>var visible = bob.visible;\n</code></pre></li> <li>Set     <pre><code>bob.setVisible(boolean);\n// bob.visible = v;\n</code></pre></li> </ul>"},{"location":"blitter/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = bob.alpha;\n</code></pre></li> <li>Set     <pre><code>bob.setAlpha(v);\n// bob.aplha = v;\n</code></pre></li> </ul>"},{"location":"blitter/#tint","title":"Tint","text":"<ul> <li>Get     <pre><code>var tint = bob.tint;\n</code></pre></li> <li>Set     <pre><code>bob.setTint(tint);\n// bob.tint = tint;\n</code></pre><ul> <li><code>tint</code> : Tint value, between <code>0</code> and <code>0xffffff</code>.</li> </ul> </li> </ul>"},{"location":"blitter/#destroy","title":"Destroy","text":"<pre><code>bob.destroy();\n</code></pre>"},{"location":"blitter/#data","title":"Data","text":"<pre><code>var data = bob.data;  // {}\n</code></pre>"},{"location":"board-bejeweled/","title":"Bejeweled","text":""},{"location":"board-bejeweled/#introduction","title":"Introduction","text":"<p>Match3-like gameplay template.</p> <ul> <li>Author: Rex</li> <li>Template</li> </ul>"},{"location":"board-bejeweled/#live-demos","title":"Live demos","text":"<ul> <li>Events</li> <li>Custom input</li> <li>Mask</li> </ul>"},{"location":"board-bejeweled/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-bejeweled/#install-plugin","title":"Install plugin","text":""},{"location":"board-bejeweled/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load rexBoard plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\nscene.load.script('rexbejeweled', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbejeweled.min.js');\n</code></pre></li> <li>Add bejeweled object     <pre><code>var bejeweled = new rexbejeweled(scene, config);\n</code></pre></li> </ul>"},{"location":"board-bejeweled/#import-template","title":"Import template","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install rexBoard plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nimport Bejeweled from 'phaser3-rex-plugins/templates/bejeweled/Bejeweled.js';\n\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bejeweled object     <pre><code>var bejeweled = new Bejeweled(scene, config);\n</code></pre></li> </ul>"},{"location":"board-bejeweled/#create-bejeweled-object","title":"Create bejeweled object","text":"<pre><code>var bejeweled = new Bejeweled(scene, {\n// rexBoard: 'rexBoard',\n\nboard: {\ngrid: {\ngridType: 'quadGrid',\nx: 30,\ny: 30 - 600,\ncellWidth: 60,\ncellHeight: 60,\n},\nwidth: 10,\nheight: 20 // Prepared rows: upper 10 rows\n},\nmatch: {\n// wildcard: undefined\n// dirMask: undefined\n},\nchess: {\n// pick random symbol from array, or a callback to return symbol\nsymbols: [0, 1, 2, 3, 4, 5],\n// symbols: function(board, tileX, tileY, excluded) { return symbol; }\n\n// User-defined chess game object\ncreate: function (board) {\n// Create Game object (Shape, Image, or Sprite)\nvar scene = board.scene;\nvar gameObject = scene.add.sprite(0, 0, textureKey, frame);\n// Initial 'symbol' value\ngameObject.setData('symbol', undefined);\n// Add data changed event of 'symbol` key\ngameObject.data.events.on('changedata_symbol', function (gameObject, value, previousValue) {\n// Change the appearance of game object via new symbol value\ngameObject.setFrame(newFrame);\n});\nreturn gameObject;\n},\n\n// scope for callbacks\nscope: undefined,\n\n// moveTo behavior\nmoveTo: {\nspeed: 400\n},\n// tileZ: 1,\n},\n// mask: false,\n\nselect1Action: undefined,\nselect2Action: undefined,\nswapAction: undefined,\nundoSwapAction: undefined,\neliminatingAction: undefined,\nfallingAction: undefined,\n\n// input: true\n})\n</code></pre> <p>Configurations</p> <ul> <li><code>rexBoard</code> : Key of 'rexBoard' plugin. Default is <code>'rexBoard'</code>.</li> <li>Board properties<ul> <li><code>board.width</code> : Board width in tiles.</li> <li><code>board.height</code> : Board height in tiles.</li> <li><code>board.grid.x</code>, <code>board.grid.y</code> : World position of tile (0, 0)</li> <li><code>board.grid.cellWidth</code>, <code>board.grid.cellHeight</code> : The width/height of the cell, in pixels.</li> </ul> </li> <li>Chess properties<ul> <li><code>chess.symbols</code> : An array of possible symbols, or a callback to return a symbol. See Generate symbol</li> <li><code>chess.create</code>, <code>chess.scope</code> : Callback of creating chess object.</li> <li><code>chess.moveTo.speed</code> : Constant moving speed of chess, in pixel per-second.</li> </ul> </li> <li>Custom actions<ul> <li><code>select1Action</code> : Custom select first chess Action</li> <li><code>select2Action</code> : Custom select second chess Action</li> <li><code>swapAction</code> : Custon swap action</li> <li><code>undoSwapAction</code> : Custon undo-swap action</li> <li><code>eliminatingAction</code> : Custon eliminating action</li> <li><code>fallingAction</code> : Custon falling action</li> </ul> </li> <li>Touch input<ul> <li><code>input</code> : Set <code>true</code> to register default touch input logic.</li> </ul> </li> <li>Mask<ul> <li><code>mask</code> :<ul> <li><code>false</code> : No mask. Default behavior.</li> <li><code>true</code> : Mask invisible upper rows.<ol> <li>Create an internal layer</li> <li>Mask this internal layer.</li> </ol> </li> </ul> </li> </ul> </li> </ul>"},{"location":"board-bejeweled/#board-height","title":"Board height","text":"<p>Board is separated into two parts: upper and bottom</p> <ul> <li>Bottom : Visible N rows, to swap chess and run matching.</li> <li>Upper : Invisible N rows, chess in these rows will move down, to fill bottom rows.</li> </ul> <p>For example, if amount of visible rows is <code>10</code>, <code>board.height</code> should set to <code>20</code>.</p>"},{"location":"board-bejeweled/#generate-symbol","title":"Generate symbol","text":"<p>Symbols are declared in property <code>chess.symbols</code> in a symbol array like <code>[0, 1, 2, 3, 4, 5]</code>, or a callback to return a symbol. The callback also use <code>chess.scope</code> as the scope.</p> <pre><code>function(board, tileX, tileY, excluded) {\nreturn symbol\n}\n</code></pre> <ul> <li><code>excluded</code> : <code>undefined</code> or a symbol array. Don't return these symbols.</li> </ul>"},{"location":"board-bejeweled/#create-chess-object","title":"Create chess object","text":"<p>Return a game object from a callback.</p> <pre><code>function(board) {\n// Create Game object (Image, Sprite, or Shape)\nvar scene = board.scene;\nvar gameObject = scene.add.sprite(0, 0, textureKey, frame);\n// Initial 'symbol' value\ngameObject.setData('symbol', undefined);\n// Add data changed event of 'symbol` key\ngameObject.data.events.on('changedata_symbol', function (gameObject, value, previousValue) {\n// Change the appearance of game object via new symbol value\ngameObject.setFrame(newFrame);\n});\nreturn gameObject;\n}\n</code></pre> <p>Each chess has a <code>symbol</code> value stored in <code>'symbol'</code> key in private data. Add data changed event of <code>'symbol'</code> key to change the appearance of game object via new symbol value.</p>"},{"location":"board-bejeweled/#states","title":"States","text":"<pre><code>graph TD\n\nStart((Start)) --&gt; Select1Start[select1-start]\n\nsubgraph Select 1 states\n  Select1Start --&gt; |Input| Select1[select1]\nend\n\nSelect1 --&gt; select2Start[select2-start]\n\nsubgraph Select 2 states\n  select2Start --&gt; |Input| select2[select2]\nend\n\nselect2Start --&gt; Select1Start\nselect2 --&gt; Swap[swap]\nSwap --&gt; MatchStart[match-start]\n\nsubgraph Match states\n  MatchStart --&gt; Match[match]\n  Match --&gt; Eliminate[eliminate]\n  Match --&gt; MatchEnd[match-end]\n  Eliminate --&gt; Fall[fall]\n  Fall --&gt; Fill[fill]\n  Fill --&gt; Match\nend\n\nMatchEnd --&gt; UndoSwap[undo-swap]\nUndoSwap --&gt; Select1Start\nMatchEnd --&gt; Select1Start</code></pre>"},{"location":"board-bejeweled/#select-first-chess","title":"Select first chess","text":"<p>Fire <code>'select1'</code> event</p> <pre><code>bejeweled.on('select1', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-select-first-chess-action","title":"Custom Select first chess Action","text":"<p>Default select action:</p> <pre><code>function (chess, board, bejeweled) {\n// Do nothing\n}\n</code></pre>"},{"location":"board-bejeweled/#select-second-chess","title":"Select second chess","text":"<p>Fire <code>'select2'</code> event</p> <pre><code>bejeweled.on('select2', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.<ul> <li>Selected first chess :      <pre><code>var chess = bejeweled.getSelectedChess1();\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-bejeweled/#custom-select-second-chess-action","title":"Custom Select second chess Action","text":"<p>Default select action: The same as Select first chess Action</p>"},{"location":"board-bejeweled/#swap-selected-chess","title":"Swap selected chess","text":"<p>Fire <code>'swap'</code> event</p> <pre><code>bejeweled.on('swap', function(selectedChess1, selectedChess2, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-swap-action","title":"Custom Swap Action","text":"<p>Default swap action:</p> <pre><code>function (chess1, chess2, board, bejeweled) {\nvar tileXYZ1 = board.chessToTileXYZ(chess1);\nvar tileXYZ2 = board.chessToTileXYZ(chess2);\nvar tileX1 = tileXYZ1.x,\ntileY1 = tileXYZ1.y,\ntileX2 = tileXYZ2.x,\ntileY2 = tileXYZ2.y,\ntileZ = tileXYZ1.z;\n\n// TileZ of chess1 and chess2 are the same, change tileZ of chess2 to a different value\nboard.moveChess(chess2, tileX2, tileY2, `#${tileZ}`, false);\n\n// Move chess1 to tileXYZ2, chess2 to tileXYZ1\nvar moveTo1 = bejeweled.getChessMoveTo(chess1);\nvar moveTo2 = bejeweled.getChessMoveTo(chess2);\nmoveTo1.moveTo(tileX2, tileY2);\nmoveTo2.moveTo(tileX1, tileY1);\n\n// Change tileZ of chess2 back\nboard.moveChess(chess2, tileX1, tileY1, tileZ, false);\n\nif (moveTo1.isRunning) {\nbejeweled.waitEvent(moveTo1, 'complete');\n}\nif (moveTo2.isRunning) {\nbejeweled.waitEvent(moveTo2, 'complete');\n}\n};\n</code></pre> <ul> <li><code>bejeweled.getChessMoveTo(chess)</code> : Get moveTo behavior of a chess.</li> <li><code>bejeweled.waitEvent(moveTo, 'complete')</code> : Wait 'complete' event of this moveTo behavior.</li> </ul>"},{"location":"board-bejeweled/#match-start","title":"Match start","text":"<p>Fire <code>'match-start'</code> event</p> <pre><code>bejeweled.on('match-start', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#match-lines","title":"Match lines","text":"<p>Fire <code>'match'</code> event</p> <pre><code>bejeweled.on('match', function(lines, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>lines</code> : An array of matched lines, each line is a built-in Set object.<ul> <li>Length of each line (<code>lines[i].size</code>) could be 5, 4, or 3.</li> <li><code>lines[i].entries</code> : An array of chess (Game Object) in a matched line.</li> <li>Get cross chess of two lines via <code>lineA.intersect(lineB)</code>.</li> <li>All chess game objects in matched lines will be eliminated in next stage. <ul> <li>Add/remove chess game object in a line.</li> <li>Add new line/remove a line in <code>lines</code> array to change the eliminated targets.</li> </ul> </li> </ul> </li> <li><code>board</code> : Board object.<ul> <li>Get tile position <code>{x,y,z}</code> of a chess game object via     <pre><code>var tileXYZ = board.chessToTileXYZ(gameObject);\n//var tileXYZ = gameObject.rexChess.tileXYZ;\n</code></pre></li> <li>Get chess game object of a tile position <code>{x,y,z}</code> via     <pre><code>var gameObject = board.tileXYZToChess(tileX, tileY, tileZ);\n</code></pre></li> <li>Get array of neighbor chess of a chess game object via     <pre><code>var gameObjects = board.getNeighborChess(chess, null);\n</code></pre></li> </ul> </li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#eliminating-chess","title":"Eliminating chess","text":"<p>Fire <code>'eliminate'</code> event</p> <pre><code>bejeweled.on('eliminate', function(chessArray, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>chessArray</code> : An array of chess (Game Object) to be eliminated.</li> <li><code>board</code> : Board object</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-eliminating-action","title":"Custom Eliminating Action","text":"<p>Default fliminating action:</p> <pre><code>function (chessArray, board, bejeweled) {\nconst duration = 500; //ms\nfor (var i = 0, cnt = chessArray.length; i &lt; cnt; i++) {\nvar fade = FadeOutDestroy(chessArray[i], duration);\nbejeweled.waitEvent(fade, 'complete');\n}\n}\n</code></pre> <ul> <li><code>bejeweled.waitEvent(fade, 'complete')</code> : Wait 'complete' event of this fade-out-destroy behavior.</li> </ul>"},{"location":"board-bejeweled/#falling-chess","title":"Falling chess","text":"<p>Fire <code>'fall'</code> event</p> <pre><code>bejeweled.on('fall', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-falling-action","title":"Custom Falling Action","text":"<p>Default falling action:</p> <pre><code>function (board, bejeweled) {\nvar tileZ = bejeweled.chessTileZ,\nchess, moveTo;\n\nfor (var tileY = (board.height - 1); tileY &gt;= 0; tileY--) { // bottom to top\nfor (var tileX = 0, cnt = board.width; tileX &lt; cnt; tileX++) { // left to right\nchess = board.tileXYZToChess(tileX, tileY, tileZ);\nif (chess === null) {\ncontinue;\n}\nmoveTo = bejeweled.getChessMoveTo(chess);\ndo {\nmoveTo.moveToward(1);\n} while (moveTo.lastMoveResult)\nif (moveTo.isRunning) {\nbejeweled.waitEvent(moveTo, 'complete');\n}\n}\n}\n}\n</code></pre> <ul> <li><code>bejeweled.getChessMoveTo(chess)</code> : Get moveTo behavior of a chess.</li> <li><code>bejeweled.waitEvent(moveTo, 'complete')</code> : Wait 'complete' event of this moveTo behavior.</li> </ul>"},{"location":"board-bejeweled/#fill-chess","title":"Fill chess","text":"<p>Fire <code>'fill'</code> event</p> <pre><code>bejeweled.on('fill', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#match-end","title":"Match end","text":"<p>Fire <code>'match-end'</code> event</p> <pre><code>bejeweled.on('match-end', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#undo-swap-selected-chess","title":"Undo-swap selected chess","text":"<p>Fire <code>'undo-swap'</code> event</p> <pre><code>bejeweled.on('undo-swap', function(selectedChess1, selectedChess2, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-undo-swap-action","title":"Custom Undo-Swap Action","text":"<p>Default undo-swap action : Equal to Swap action</p>"},{"location":"board-bejeweled/#start-gameplay","title":"Start gameplay","text":"<pre><code>bejeweled.start();\n</code></pre>"},{"location":"board-bejeweled/#input-control","title":"Input control","text":""},{"location":"board-bejeweled/#default-input","title":"Default input","text":"<ol> <li>Enable default input control     <pre><code>var bejeweled = new Bejeweled(scene, {\n// ...\ninput: true\n});\n</code></pre></li> <li>Enable/disable temporarily.<ul> <li>Enable     <pre><code>bejeweled.setInputEnable();\n</code></pre></li> <li>Disable     <pre><code>bejeweled.setInputEnable(false);\n</code></pre></li> </ul> </li> </ol>"},{"location":"board-bejeweled/#custom-input","title":"Custom input","text":"<ol> <li>Discard default input control     <pre><code>var bejeweled = new Bejeweled(scene, {\n// ...\ninput: false\n});\n</code></pre></li> <li>Add custom input logic like     <pre><code>scene.input\n.on('pointerdown', function (pointer) {\nvar chess = bejeweled.worldXYToChess(pointer.worldX, pointer.worldY);\nif (chess) {\nbejeweled.selectChess1(chess);\n}\n}, scene)\n.on('pointermove', function (pointer) {\nif (!pointer.isDown) {\nreturn;\n}\nvar chess = bejeweled.worldXYToChess(pointer.worldX, pointer.worldY);\nif (chess &amp;&amp; (chess !== this.bejeweled.getSelectedChess1())) {\nbejeweled.selectChess2(chess);\n}\n}, scene);\n</code></pre><ul> <li>Invoke <code>bejeweled.selectChess1(chess)</code>, and <code>bejeweled.selectChess2(chess)</code> under custom logic.</li> </ul> </li> </ol> <p>Helper methods</p> <ul> <li>Get chess via worldXY position     <pre><code>var chess = bejeweled.worldXYToChess(worldX, worldY);\n</code></pre></li> <li>Get chess via tileXY position     <pre><code>var chess = bejeweled.tileXYToChess(tileX, tileY);\n</code></pre></li> <li>Get neighbor chess via angle     <pre><code>var chess2 = bejeweled.getNeighborChessAtAngle(chess1, angle);\n</code></pre><ul> <li><code>chess1</code> : Chess object, or tileXY position <code>{x, y}</code>.</li> <li><code>angle</code> : Angle in radius.</li> </ul> </li> <li>Get neighbor chess via direction     <pre><code>var chess2 = bejeweled.getNeighborChessAtDirection(chess1, direction);\n</code></pre><ul> <li><code>chess1</code> : Chess object, or tileXY position <code>{x, y}</code>.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-bejeweled/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = bejeweled.getData(key);\nvar values = bejeweled.getData(keys); // keys: an array of keys\nvar value = bejeweled.data.values[key];\n</code></pre></li> <li>Set     <pre><code>bejeweled.setData(key, value);\nbejeweled.setData(obj); // obj: {key0:value0, key1:value1, ...}\nbejeweled.data.values[key] = value;\nbejeweled.data.values[key] += inc;\n</code></pre></li> <li>Enable     <pre><code>bejeweled.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>bejeweled.on('setdata', function(bejeweled, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>bejeweled.on('changedata', function(bejeweled, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>bejeweled.on('changedata-' + key, function(bejeweled, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"board-bejeweled/#misc","title":"Misc","text":"<ul> <li>Board instance     <pre><code>var board = bejeweled.getBoard();\n</code></pre><ul> <li><code>board</code> : Board instance.</li> </ul> </li> <li>Match instance     <pre><code>var match = bejeweled.getMatch();\n</code></pre><ul> <li><code>match</code> : Match instance.</li> </ul> </li> </ul>"},{"location":"board-chessdata/","title":"Chess data","text":""},{"location":"board-chessdata/#introduction","title":"Introduction","text":"<p>Properties of chess, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-chessdata/#usage","title":"Usage","text":""},{"location":"board-chessdata/#add-chess-data-object","title":"Add chess data object","text":"<p>Chess data will be added to game object via <code>gameObject.rexChess</code> once adding this game object to board, or attach any chess behavior.</p>"},{"location":"board-chessdata/#get-chess-data","title":"Get chess data","text":"<pre><code>var chessData = gameObject.rexChess;\n</code></pre>"},{"location":"board-chessdata/#set-tile-z","title":"Set tile Z","text":"<pre><code>gameObject.rexChess.setTileZ(tileZ);\n</code></pre> <p><code>(tileX, tileY)</code> won't be changed.</p>"},{"location":"board-chessdata/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXYZ = gameObject.rexChess.tileXYZ;\n</code></pre> <ul> <li><code>tileXYZ</code> : Tile position <code>{x,y,z}</code>, return <code>null</code> if this chess is not added to any board.</li> </ul>"},{"location":"board-chessdata/#get-board","title":"Get board","text":"<pre><code>var board = gameObject.rexChess.board;\n</code></pre> <ul> <li><code>board</code> : Board object, or <code>null</code> if this chess is not added to any board.</li> </ul> <p>See also</p>"},{"location":"board-chessdata/#blocker","title":"Blocker","text":"<ul> <li>Set     <pre><code>gameObject.rexChess.setBlocker();\n</code></pre></li> <li>Disable     <pre><code>gameObject.rexChess.setBlocker(false);\n</code></pre></li> <li>Get     <pre><code>var blocker = gameObject.rexChess.blocker;\n</code></pre></li> </ul>"},{"location":"board-fieldofview/","title":"Field of view","text":""},{"location":"board-fieldofview/#introduction","title":"Introduction","text":"<p>Visible testing, to find field of view, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-fieldofview/#live-demos","title":"Live demos","text":"<ul> <li>Field of view</li> <li>Line of sigh</li> <li>Filter visible chess</li> <li>Pre-test callback</li> </ul>"},{"location":"board-fieldofview/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-fieldofview/#install-plugin","title":"Install plugin","text":""},{"location":"board-fieldofview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FieldOfView } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = new FieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#create-instance","title":"Create instance","text":"<pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, {\n// face: 0,\n// cone: undefined,\n// coneMode: 0,\n// perspective: false,\n\n// ** pre-test **\n// occupiedTest: false,\n// blockerTest: false,\n// preTestCallback: undefined,\n// preTestCallbackScope: undefined,\n\n// ** cost **\n// costCallback: undefined,\n// costCallbackScope: undefined,\n// cost: undefined,   // constant cost\n\n// debug: {\n//     graphics: undefined,\n//     visibleLineColor: 0x00ff00,\n//     invisibleLineColor: 0xff0000,\n//     log: false,\n// }\n})\n</code></pre> <ul> <li><code>face</code> : Face of chess.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>cone</code> : View of cone. Tile position or chess which not in view of cone will be invisible.<ul> <li><code>undefined</code> : Ignore this feature</li> </ul> </li> <li><code>coneMode</code> : Unit of cone , in direction or angle.<ul> <li><code>'direction'</code>, or <code>0</code> : Cone in directions.     For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set     <pre><code>face : 0,\ncone : 2,\nconeMode: 0\n</code></pre></li> <li><code>'angle'</code>, or <code>1</code> : Cone in angle.     For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set     <pre><code>face : 0,\ncone : 120,\nconeMode: 1\n</code></pre></li> </ul> </li> <li><code>perspective</code> : <ul> <li><code>false</code> : Test visible until blocked tiles. Default behavior.</li> <li><code>true</code> : Test visible until out-of-board. Will test cross any blocked (invisible) tile.</li> </ul> </li> <li>Pre-test : Test tiles on visible path.<ul> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property.</li> <li><code>preTestCallback</code>, <code>preTestCallbackScope</code> : Custom pre-test function, return <code>false</code> to discard cost function.     <pre><code>function(tileXYArray, visiblePoints, fieldOfView) {\n// return false;\n}\n</code></pre><ul> <li><code>tileXYArray[0]</code> is current tileXY position of chess.</li> </ul> </li> </ul> </li> <li>Cost function of each tile on visible path<ul> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback     <pre><code>function(curTile, fieldOfView, tileXYArray) {\nreturn cost;\n}\n</code></pre><ul> <li>Cost of blocker : <code>fieldOfView.BLOCKER</code>.</li> <li><code>curTile</code> : Currest testing tileXY.</li> <li><code>tileXYArray</code> : A read only  tileXY array of sight path.</li> </ul> </li> </ul> </li> <li><code>debug</code> :<ul> <li><code>debug.graphics</code> : A graphics object for showing debug messages.</li> <li><code>debug.visibleLineColor</code> : Color of visible line. Set <code>undefined</code> to not draw any line.</li> <li><code>debug.invisibleLineColor</code> : Color of invisible line. Set <code>undefined</code> to not draw any line.</li> </ul> </li> </ul> <p>Note</p> <p>Blocker is visible, but tiles behind blocker are invisible.</p>"},{"location":"board-fieldofview/#set-pre-test-function","title":"Set pre-test function","text":"<pre><code>fieldOfView.setPreTestFunction(callback, scope);\n</code></pre> <ul> <li><code>callback</code> <pre><code>var callback = function(tileXYArray, visiblePoints, fieldOfView) {\nreturn false;\n}\n</code></pre><ul> <li><code>tileXYArray[0]</code> is current tileXY position of chess.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>fieldOfView.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>fieldOfView.setCostFunction(callback, scope);\n</code></pre><ul> <li><code>callback</code> <pre><code>var callback = function(curTile, fieldOfView, tileXYArray) {\nreturn cost;\n}\n</code></pre><ul> <li>Cost of blocker : <code>fieldOfView.BLOCKER</code></li> <li><code>curTile</code> : Currest testing tileXY.</li> <li><code>tileXYArray</code> : A read only  tileXY array of sight path.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-fieldofview/#is-tilexychess-visible","title":"Is tileXY/chess visible","text":"<pre><code>var isVisible = fieldOfView.isInLOS(chess);\n// var isVisible = fieldOfView.isInLOS(chess, visiblePoints);\n// var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY);\n</code></pre> <ul> <li><code>chess</code> : Chess object or tileXY</li> <li><code>visiblePoints</code><ul> <li><code>fieldOfView.INFINITY</code> (undefined) : Infinity visible points. Default value.</li> </ul> </li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#get-tilexy-array-in-field-of-view","title":"Get tileXY array in field of view","text":"<pre><code>var tileXYArray = fieldOfView.findFOV();\n// var tileXYArray = fieldOfView.findFOV(visiblePoints);\n// var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY);\n// var out = fieldOfView.findFOV(visiblePoints, out);\n// var out = fieldOfView.findFOV(visiblePoints, originTileXY, out);\n</code></pre> <ul> <li><code>visiblePoints</code><ul> <li><code>fieldOfView.INFINITY</code> (undefined) : Infinity visible points. Default value.</li> </ul> </li> <li><code>out</code> : Returned tileXY array.</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#filter-visible-tilexy-array","title":"Filter visible tileXY array","text":"<ul> <li>Filter visible tileXY array     <pre><code>var out = fieldOfView.LOS(chessArray);\n// var out = fieldOfView.LOS(chessArray, originTileXY);\n// var out = fieldOfView.LOS(chessArray, out);\n// var out = fieldOfView.LOS(chessArray, originTileXY, out);\n</code></pre><ul> <li><code>chessArray</code> : Array of chess object or tileXY</li> <li><code>out</code> : Array of visible chess object or tileXY</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul> </li> <li>Filter visible tileXY array with visible points     <pre><code>var out = fieldOfView.LOS(chessArray, visiblePoints);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, out);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out);\n</code></pre><ul> <li><code>chessArray</code> : Array of chess object or tileXY</li> <li><code>out</code> : Array of visible chess object or tileXY</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-fieldofview/#face","title":"Face","text":"<p>Face direction</p> <ul> <li>Get     <pre><code>var face = fieldOfView.face;\n</code></pre></li> <li>Set     <pre><code>fieldOfView.setFace(direction);\n</code></pre>     or     <pre><code>fieldOfView.face = direction;\n// fieldOfView.face ++;\n</code></pre></li> <li><code>face</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#debug","title":"Debug","text":"<ul> <li>Clear debug graphics     <pre><code>fieldOfView.clearDebugGraphics();\n</code></pre></li> <li>Set color of lines     <pre><code>fieldOfView.setDebugLineColor(visibleLineColor, invisibleLineColor);\n</code></pre><ul> <li><code>visibleLineColor</code>, <code>invisibleLineColor</code> : Set <code>undefined</code> to not draw any line.</li> </ul> </li> </ul>"},{"location":"board-hexagongrid/","title":"Hexagon","text":""},{"location":"board-hexagongrid/#introduction","title":"Introduction","text":"<p>Hexagon grid object of Board system.</p> <ul> <li>Author: Rex</li> <li>Grid object of board</li> </ul>"},{"location":"board-hexagongrid/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-hexagongrid/#create-instance","title":"Create instance","text":"<pre><code>var grid = scene.rexBoard.add.hexagonGrid({\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\n// size: undefined,\nstaggeraxis: 1,\nstaggerindex: 1\n});\n</code></pre> <p>or</p> <pre><code>// import { HexagonGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\nvar grid = new HexagonGrid(config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position of origin tile (i.e. tileX = 0, tileY = 0)</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>size</code> : Distance between center to each corner. Get <code>cellWidth</code> and <code>cellHeight</code> from <code>size</code> if this parameter is not <code>undefined</code>.</li> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#world-position-of-tile-0-0","title":"World position of tile (0, 0)","text":"<ul> <li>Get     <pre><code>var worldX = grid.x;\nvar worldY = grid.y;\n</code></pre></li> <li>Set     <pre><code>grid.setOriginPosition(worldX, worldY);\n</code></pre>     or     <pre><code>grid.x = worldX;\ngrid.y = worldY;\n</code></pre></li> </ul>"},{"location":"board-hexagongrid/#cell-size","title":"Cell size","text":"<ul> <li>Get     <pre><code>var width = grid.width;\nvar height = grid.height;\n</code></pre></li> <li>Set     <pre><code>grid.setCellSize(width, height);\n</code></pre>     or     <pre><code>grid.width = width;\ngrid.height = height;\n</code></pre>     or     <pre><code>grid.setCellRadius(size);\n</code></pre><ul> <li><code>size</code> : Distance between center to each corner.</li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#grid-type","title":"Grid type","text":"<ul> <li>Get     <pre><code>var staggeraxis = grid.staggeraxis;\nvar staggerindex = grid.staggerindex;\n</code></pre></li> <li>Set     <pre><code>grid.setType(staggeraxis, staggerindex);\n</code></pre><ul> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#get-world-position","title":"Get world position","text":"<pre><code>var worldXY = grid.getWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = grid.getWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board-hexagongrid/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXY = grid.getTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = grid.getTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board-hexagongrid/#directions","title":"Directions","text":"<ul> <li>staggeraxis = <code>0</code>/<code>y</code><ul> <li><code>0</code> : Down-right</li> <li><code>1</code> : Down</li> <li><code>2</code> : Down-left</li> <li><code>3</code> : Up-left</li> <li><code>4</code> : Up</li> <li><code>5</code> : Up-right</li> </ul> </li> <li>staggeraxis = <code>1</code>/<code>x</code><ul> <li><code>0</code> : Right</li> <li><code>1</code> : Down-right</li> <li><code>2</code> : Down-left</li> <li><code>3</code> : Left</li> <li><code>4</code> : Up-left</li> <li><code>5</code> : Up-right</li> </ul> </li> </ul>"},{"location":"board-hexagonmap/","title":"Hexagon map","text":""},{"location":"board-hexagonmap/#introduction","title":"Introduction","text":"<p>Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. </p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-hexagonmap/#live-demos","title":"Live demos","text":"<ul> <li>Hexagon</li> </ul>"},{"location":"board-hexagonmap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-hexagonmap/#install-plugin","title":"Install plugin","text":""},{"location":"board-hexagonmap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = scene.rexBoard.add.hexagonMap.hexagon(board, radius);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = scene.rexBoard.add.hexagonMap.hexagon(board, radius);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { HexagonMap } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = HexagonMap.hexagon(board, radius);\nvar tileXYArray = HexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = HexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#create-tile-positions","title":"Create tile positions","text":""},{"location":"board-hexagonmap/#hexagon","title":"Hexagon","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.hexagon(board, radius);\n// var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>radius</code> : Radius in tile count.</li> </ul> staggeraxis y x"},{"location":"board-hexagonmap/#parallelogram","title":"Parallelogram","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height);\n// var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>width</code>, <code>height</code> : Size of parallelogram</li> </ul> type\\staggeraxis y x 0 1 2"},{"location":"board-hexagonmap/#triangle","title":"Triangle","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.triangle(board, type, height);\n// var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>height</code> : Size of Triangle</li> </ul> type\\staggeraxis y x 0 1"},{"location":"board-hexagonmap/#retrieve-tile-positions","title":"Retrieve tile positions","text":"<ol> <li>Offset all of tile positions to <code>(0, 0)</code>, and set board size to fit these tile positions.     <pre><code>var tileXYArray = board.fit(tileXYArray);\n</code></pre></li> <li>Retrieve tile positions     <pre><code>var tileXY;\nfor(var i = 0, cnt = tileXYArray.length; i &lt; cnt; i++) {\ntileXY = tileXYArray[i];\n// ...\n}\n</code></pre></li> </ol>"},{"location":"board-match/","title":"Match","text":""},{"location":"board-match/#introduction","title":"Introduction","text":"<p>Get matched chess in lines, or neighbors grouping.</p> <ul> <li>Author: Rex</li> <li>Application of Board system</li> </ul>"},{"location":"board-match/#live-demos","title":"Live demos","text":"<ul> <li>Match line</li> <li>Match neighbors</li> </ul>"},{"location":"board-match/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-match/#install-plugin","title":"Install plugin","text":""},{"location":"board-match/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add match object     <pre><code>var match = scene.rexBoard.add.match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add match object     <pre><code>var match = scene.rexBoard.add.match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Match } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add match object     <pre><code>var match = new Match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#add-match-object","title":"Add match object","text":"<pre><code>var match = scene.rexBoard.add.match({\nboard: board,\n// wildcard: undefined\n// dirMask: undefined\n});\n</code></pre> <ul> <li><code>board</code> : A board object</li> <li><code>wildcard</code> : A string or a number</li> <li><code>dirMask</code> : Enable/Disable matching at directions, all directions are enbale by default.<ul> <li>Quad grid, 4 directions     <pre><code>{\n0: true,  // set false to disable left/right matching\n1: true   // set false to disable up/down matching\n}\n</code></pre></li> <li>Quad grid, 8 directions     <pre><code>{\n0: true,  // set false to disable left/right matching\n1: true,  // set false to disable up/down matching\n4: true,  // set false to disable left-down/right-up matching\n5: true   // set false to disable right-down/left-up matching\n}\n</code></pre></li> <li>Hexagon grid <pre><code>{\n0: true,\n1: true,\n3: true\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-match/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyMatch extends RexPlugins.Board.Match {\nconstructor(config) {\nsuper(config);\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var match = new MyMatch(config);\n</code></pre></li> </ul>"},{"location":"board-match/#set-board","title":"Set board","text":"<p>Board object could be assigned later.</p> <pre><code>match.setBoard(board);\n</code></pre>"},{"location":"board-match/#update-symbols","title":"Update symbols","text":"<p>Each tile position (tileX, tileY)  has a symbol.</p>"},{"location":"board-match/#update-all-symbols-in-board","title":"Update all symbols in board","text":"<pre><code>match.refreshSymbols(function(tileXY, board) {\n// var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0);\n// if (chess == null) { return null; }\nreturn symbol;\n}, scope);\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code></li> <li><code>board</code> : Board object</li> <li><code>symbol</code> : A string or a number<ul> <li><code>null</code> : No symbol</li> </ul> </li> </ul>"},{"location":"board-match/#updata-a-symbol","title":"Updata a symbol","text":"<pre><code>match.setSymbol(tileX, tileY, symbol);\n</code></pre>"},{"location":"board-match/#get-symbol","title":"Get symbol","text":"<pre><code>var symbol = match.getSymbol(tileX, tileY);\n</code></pre>"},{"location":"board-match/#for-each-symbol-cahce","title":"For each symbol cahce","text":"<pre><code>match.forEach(function(tileXY, symbol, board) {\n// return true; // Break for each loop\n}, scope)\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code></li> <li><code>symbol</code> : A string or a number<ul> <li><code>null</code> : No symbol</li> </ul> </li> <li><code>board</code> : Board object</li> </ul>"},{"location":"board-match/#wildcard-symbol","title":"Wildcard symbol","text":"<ul> <li>Set     <pre><code>match.setWildcard(symbol);\n</code></pre>     or     <pre><code>match.wildcard = symbol;\n</code></pre></li> <li>Get     <pre><code>var wildcard = match.wildcard;\n</code></pre></li> </ul>"},{"location":"board-match/#directions-mask","title":"Directions mask","text":"<p>Enable/Disable matching at directions, all directions are enbale by default.</p> <pre><code>match.setDirMask(dir, value);\n</code></pre> <ul> <li><code>dir</code> :<ul> <li>Quad grid, 4 directions : <code>0</code>, <code>1</code></li> <li>Quad grid, 8 directions : <code>0</code>, <code>1</code>, <code>4</code>, <code>5</code></li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code></li> </ul> </li> <li><code>value</code> : <code>true</code> or <code>false</code></li> </ul>"},{"location":"board-match/#line-grouping","title":"Line grouping","text":""},{"location":"board-match/#match-n","title":"Match-N","text":"<pre><code>match.match(n, function (result, board) {\n// var chess = board.tileXYArrayToChess(result.tileXY, 0);\n// GroupCall(chess, function (chess) { chess.setScale(0.8); });\n\n// return true; // Break for each loop\n}, scope);\n</code></pre> <ul> <li><code>n</code> : A number, to get matched chess with n equal symbols</li> <li><code>result</code> : A group of chess     <pre><code>{\ntileXY: [],\ndirection: 0\npattern: symbol\n}\n</code></pre><ul> <li><code>tileXY</code> : An array of tile positions <code>{x, y}</code></li> <li><code>direction</code> : Direction of this chess group<ul> <li><code>0</code>, <code>1</code>, for quad grid with 4 directions</li> <li><code>0</code>, <code>1</code>, <code>4</code>, <code>5</code>, for quad grid with 8 directions</li> <li><code>0</code>, <code>1</code>, <code>2</code>, for hexagon grid</li> </ul> </li> <li><code>pattern</code> : Matched symbol</li> </ul> </li> <li><code>board</code> : Board object</li> </ul>"},{"location":"board-match/#any-match-n","title":"Any match-N","text":"<pre><code>var hasAnyMatchN = match.anyMatch(n);\n</code></pre>"},{"location":"board-match/#match-pattern","title":"Match pattern","text":"<pre><code>match.match(pattern, function (result, board) {\n// var chess = board.tileXYArrayToChess(result.tileXY, 0);\n// GroupCall(chess, function (chess) { chess.setScale(0.8); });\n}, scope);\n</code></pre> <ul> <li><code>pattern</code> : A list of symbols</li> </ul>"},{"location":"board-match/#any-match-pattern","title":"Any match pattern","text":"<pre><code>var hasAnyMatchN = match.anyMatch(pattern);\n</code></pre>"},{"location":"board-match/#neighbors-grouping","title":"Neighbors grouping","text":"<ul> <li>Group by neighbors with the same symbol     <pre><code>tileXYArray = match.group(startTileX, startTileY);\n// out = match.group(startTileX, startTileY, out);\n</code></pre><ul> <li><code>startTileX</code>, <code>startTileY</code> : Tile position of grouping, to group neighbors with the same symbol. Can't start from <code>null</code>, <code>undefined</code> or wildcard symbol.</li> </ul> </li> </ul>"},{"location":"board-miniboard/","title":"Mini board","text":""},{"location":"board-miniboard/#introduction","title":"Introduction","text":"<p>Chess Container, to rotate/mirror/drag chess together.</p> <ul> <li>Author: Rex</li> <li>Container Game object of chess group</li> </ul>"},{"location":"board-miniboard/#live-demos","title":"Live demos","text":"<ul> <li>Group 4</li> </ul>"},{"location":"board-miniboard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-miniboard/#install-plugin","title":"Install plugin","text":""},{"location":"board-miniboard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add container     <pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add container     <pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { MiniBoard } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add match object     <pre><code>var miniBoard = new MiniBoard(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#add-container","title":"Add Container","text":"<pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, {\ngrid: grid,\ndraggable: undefined,\n});\n</code></pre> <ul> <li><code>grid</code> : Create board object first, then get grid object via <code>board.grid</code>.<ul> <li><code>gridType</code> :<ul> <li><code>'quadGrid'</code> : Quad grid</li> <li><code>'hexagonGrid'</code> : hexagon grid</li> </ul> </li> </ul> </li> <li><code>draggable</code> : Set <code>true</code> to enable dragging events</li> </ul>"},{"location":"board-miniboard/#add-chess","title":"Add chess","text":"<pre><code>miniBoard.addChess(gameObject, tileX, tileY, tileZ);\n</code></pre> <ul> <li><code>chess</code> : A game object.</li> <li><code>tileX</code> , <code>tileY</code> , <code>tileZ</code> : Tile position.<ul> <li><code>tileX</code> , <code>tileY</code> : Number.</li> <li><code>tileZ</code> : Number or string.</li> </ul> </li> </ul> <p>Chess and tile position</p> <ul> <li>Any chess has a (tileX, tileY, tileZ) index</li> <li>Any (tileX, tileY, tileZ) index contains only 1 chess.</li> <li>(tileX, tileY) could have more then 1 chess with different tileZ index.</li> <li>tileZ is not equal to <code>depth</code>.</li> </ul> <p>These world properties of chess will be changed with container.</p> <ul> <li>Position/Angle/Scale</li> <li>Visible</li> <li>Alpha</li> <li>Scroll factor</li> <li>Mask</li> </ul>"},{"location":"board-miniboard/#remove-chess","title":"Remove chess","text":"<ul> <li>Remove chess object from board     <pre><code>miniBoard.removeChess(chess, null, null, null, destroy);\n</code></pre><ul> <li><code>chess</code> : A game object</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove chess at (tileX, tileY, tileZ) from board     <pre><code>miniBoard.removeChess(null, tileX, tileY, tileZ, destroy);\n</code></pre><ul> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove all chess     <pre><code>miniBoard.removeAllChess(destroy);\n</code></pre><ul> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> </ul>"},{"location":"board-miniboard/#set-origin","title":"Set origin","text":"<ul> <li>Set origin tileXY by offset tileXY of all chess.     <pre><code>miniBoard.setOrigin(origin);\n// miniBoard.setOrigin(originX, originY);\n</code></pre><ul> <li><code>originX</code>, <code>originY</code>: 0~1. <ul> <li><code>0</code> : Left/top.</li> <li><code>0.5</code> : Center. </li> <li><code>1</code> : Right/bottom.</li> </ul> </li> </ul> </li> <li>Set origin tileXY to center by offset tileXY of all chess.     <pre><code>miniBoard.setOrigin();\n// miniBoard.setOrigin('center');\n</code></pre></li> <li>Set origin tileXY to top-left.      <pre><code>miniBoard.setOrigin('top-left');\n</code></pre></li> </ul>"},{"location":"board-miniboard/#main-board","title":"Main board","text":"<p>Put chess to a main-board (Board object) with the same tile position in mini-board, or pull chess out from main-board.</p>"},{"location":"board-miniboard/#put-on-main-board","title":"Put on main-board","text":"<pre><code>miniBoard.putOnMainBoard(mainBoard, tileX, tileY);\n// miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align);\n</code></pre> <ul> <li><code>mainBoard</code> : Board object.</li> <li><code>tileX</code>, <code>tileY</code> : Tile position to put on.</li> <li><code>align</code> : Set <code>true</code> to align world position of each chess Game object to grid of main-board. Default is <code>true</code>.</li> </ul> <p>or</p> <pre><code>miniBoard.putOnMainBoard(mainBoard);\n</code></pre> <p>To put this mini-board to nearest grid of main-board.</p>"},{"location":"board-miniboard/#pull-out-from-main-board","title":"Pull out from main-board","text":"<pre><code>miniBoard.pullOutFromMainBoard();\n</code></pre> <p>Remove all chess from main-board.</p>"},{"location":"board-miniboard/#put-back-to-previous-main-board","title":"Put back to previous main-board","text":"<pre><code>miniBoard.putBack();\n</code></pre> <p>Previous main-board and tile position will be remembered for putting back.</p>"},{"location":"board-miniboard/#is-overlapping-to-main-board","title":"Is overlapping to main-board","text":"<p>Return <code>true</code> if any chess is overlapping to main-board.</p> <pre><code>miniBoard.isOverlapping(mainBoard);\n</code></pre> <p>or</p> <pre><code>miniBoard.isOverlapping(mainBoard, tileZ);\n</code></pre>"},{"location":"board-miniboard/#align-world-position-to-grid-of-main-board","title":"Align world position to grid of main-board","text":"<pre><code>miniBoard.alignToMainBoard(mainBoard, tileX, tileY);\n</code></pre> <ul> <li><code>mainBoard</code> : Board object</li> <li><code>tileX</code>, <code>tileY</code> : Tile position on main-board</li> </ul> <p>or</p> <pre><code>miniBoard.alignToMainBoard(mainBoard);\n</code></pre> <p>to align this mini-board to nearest grid of main-board.</p>"},{"location":"board-miniboard/#get-current-main-board","title":"Get current main-board","text":"<pre><code>var board = miniBoard.mainBoard;\n</code></pre> <ul> <li><code>board</code> : Board object</li> </ul> <p>Return <code>null</code> if this mini-board is not at any main-board.</p>"},{"location":"board-miniboard/#rotate","title":"Rotate","text":""},{"location":"board-miniboard/#can-rotate","title":"Can rotate","text":"<pre><code>miniBoard.canRotate(n);\n</code></pre> <ul> <li><code>n</code> : Rotate to direction <code>current direction + n</code></li> </ul> <p>or </p> <pre><code>miniBoard.canRotateTo(direction);\n</code></pre> <ul> <li><code>direction</code> : Rotate to direction<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Always return <code>true</code> if this mini-board is not on a main-board.</p>"},{"location":"board-miniboard/#rotate_1","title":"Rotate","text":"<pre><code>miniBoard.rotate(n);\n</code></pre> <ul> <li><code>n</code> : Rotate direction to <code>current direction + n</code></li> </ul> <p>or</p> <pre><code>miniBoard.rotateTo(direction);\n</code></pre> <ul> <li><code>direction</code> : Rotate to direction<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Return <code>true</code> if this rotating request is accepted.</p> <pre><code>var isSuccess = miniBoard.lastTransferResult;\n</code></pre>"},{"location":"board-miniboard/#mirror","title":"Mirror","text":""},{"location":"board-miniboard/#can-mirror","title":"Can mirror","text":"<pre><code>miniBoard.canMirror(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>0</code>, or <code>'x'</code> : Set tileX to <code>-tileX</code></li> <li><code>1</code>, or <code>'y'</code> : Set tileY to <code>-tileY</code></li> <li><code>3</code>, or <code>'x&amp;y'</code> : Set tileX to <code>-tileX</code>, and tileY to <code>-tileY</code></li> </ul> </li> </ul> <p>Always return <code>true</code> if this mini-board is not on a main-board.</p>"},{"location":"board-miniboard/#mirror_1","title":"Mirror","text":"<pre><code>miniBoard.mirror(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>0</code>, or <code>'x'</code> : Set tileX to <code>-tileX</code></li> <li><code>1</code>, or <code>'y'</code> : Set tileY to <code>-tileY</code></li> <li><code>3</code>, or <code>'x&amp;y'</code> : Set tileX to <code>-tileX</code>, and tileY to <code>-tileY</code></li> </ul> </li> </ul> <p>Return <code>true</code> if this mirroring request is accepted.</p> <pre><code>var isSuccess = miniBoard.lastTransferResult;\n</code></pre>"},{"location":"board-miniboard/#touch-events","title":"Touch events","text":""},{"location":"board-miniboard/#set-interactive","title":"Set interactive","text":"<ul> <li>Enable     <pre><code>miniBoard.setInteractive();\n</code></pre></li> <li>Disable     <pre><code>miniBoard.setInteractive(false);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#set-drag-able","title":"Set drag-able","text":"<ul> <li>Enable     <pre><code>miniBoard.setDragEnable();\n</code></pre></li> <li>Disable     <pre><code>miniBoard.setDragEnable(false);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#touch-event","title":"Touch event","text":""},{"location":"board-miniboard/#pointer-down","title":"Pointer down","text":"<ul> <li>Pointer down at any chess     <pre><code>miniBoard.on('pointerdown', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer down at a chess     <pre><code>miniBoard.on('gameobjectdown', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointerdown', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board-miniboard/#pointer-up","title":"Pointer up","text":"<ul> <li>Pointer up     <pre><code>miniBoard.on('pointerup', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer up at a chess     <pre><code>miniBoard.on('gameobjectup', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointerup', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)    </li> </ul> </li> </ul>"},{"location":"board-miniboard/#pointer-move","title":"Pointer move","text":"<ul> <li>Pointer move     <pre><code>miniBoard.on('pointermove', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer move to another chess     <pre><code>miniBoard.on('gameobjectmove', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointermove', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board-miniboard/#drag-events","title":"Drag events","text":"<ul> <li>Drag-start     <pre><code>miniBoard.on('dragstart', function(pointer, dragX, dragY){\n/*\n    miniBoard.pullOutFromMainBoard();\n    */\n}, scope);\n</code></pre>     Pull out from main-board for dragging.</li> <li>Dragging     <pre><code>miniBoard.on('drag', function(pointer, dragX, dragY){\n/*\n    miniBoard.setPosition(dragX, dragY);\n    if (miniBoard.isOverlapping(mainBoard)) {\n        miniBoard.alignToMainBoard(mainBoard);\n    }\n    */\n}, scope);\n</code></pre>     Set world position of mini-board via (<code>dragX</code>, <code>dragY</code>), align to nearest grid of main-board if overlapping with that main-board.</li> <li>Drag-end     <pre><code>miniBoard.on('dragend', function(pointer, dragX, dragY){\n/*\n    miniBoard.putOnMainBoard(mainBoard);\n    if (miniBoard.mainBoard) {\n    }\n    */\n}, scope);\n</code></pre>     Put chess on main-board at nearest grid.</li> </ul>"},{"location":"board-monopoly/","title":"Monopoly","text":""},{"location":"board-monopoly/#introduction","title":"Introduction","text":"<p>Move through path tiles, used in monopoly-like application, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-monopoly/#live-demos","title":"Live demos","text":"<ul> <li>Monopoly</li> </ul>"},{"location":"board-monopoly/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-monopoly/#install-plugin","title":"Install plugin","text":""},{"location":"board-monopoly/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Monopoly } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var board = new Monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#create-instance","title":"Create instance","text":"<pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, {\nface: 0,\n\n// ** cost **\n// pathTileZ: 0,\n// cost: 1,   // constant cost\n// costCallback: undefined,\n// costCallbackScope: undefined\n})\n</code></pre> <ul> <li><code>face</code> : Moving direction.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li>Cost function<ul> <li><code>pathTileZ</code> : TileZ of path tiles.</li> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback <pre><code>function(curTileXY, preTileXY, monopoly) {\nreturn cost;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-monopoly/#cost-function","title":"Cost function","text":"<pre><code>var callback = function(curTileXY, preTileXY, monopoly) {\nreturn cost;\n}\n</code></pre> <ul> <li><code>cost</code> : Number cost.</li> <li><code>curTileXY</code>, <code>preTileXY</code> : TileXY position <code>{x, y}</code>. Cost of moving from <code>preTileXY</code> to <code>curTileXY</code>.</li> <li><code>monopoly</code> : Path finder object.<ul> <li><code>monopoly.board</code> : Board object</li> <li><code>monopoly.gameObject</code> : Chess game object.</li> <li><code>monopoly.STOP</code> : Cost of stop. Return this value means chess will stop at <code>curTileXY</code>.</li> <li><code>monopoly.BLOCKER</code> : Cost of blocker. Return this value means that chess can not move to <code>curTileXY</code>.</li> </ul> </li> </ul>"},{"location":"board-monopoly/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>monopoly.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>monopoly.setCostFunction(callback, scope);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#set-face-direction","title":"Set face direction","text":"<pre><code>monopoly.setFace(direction);\n</code></pre> <ul> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Moving direction</p> <p>Get path toward this face direction.</p>"},{"location":"board-monopoly/#get-path","title":"Get path","text":"<pre><code>var tileXYArray = monopoly.getPath(movingPoints);\n// var out = monopoly.getPath(movingPoints, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> </ul>"},{"location":"board-moveto/","title":"Move to","text":""},{"location":"board-moveto/#introduction","title":"Introduction","text":"<p>Move chess towards target position with a steady speed, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-moveto/#live-demos","title":"Live demos","text":"<ul> <li>Push</li> <li>Follow chess</li> </ul>"},{"location":"board-moveto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-moveto/#install-plugin","title":"Install plugin","text":""},{"location":"board-moveto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { MoveTo } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = new MoveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#create-instance","title":"Create instance","text":"<pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, {\n// speed: 400,\n\n// rotateToTarget: false,\n\n// occupiedTest: false,\n// blockerTest: false,\n// moveableTest: undefined,\n// moveableTestScope: undefined,\n\n// sneak: false,\n})\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li><code>rotateToTarget</code> : Set <code>true</code> to change angle towards path.</li> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not, in moveable testing.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property in moveable testing.</li> <li><code>moveableTest</code>, <code>moveableTestScope</code> : Custom moveable test callback     <pre><code>function(fromTileXYZ, toTileXYZ, direction, board) {\nreturn true;\n}\n</code></pre><ul> <li><code>fromTileXYZ</code>, <code>toTileXYZ</code> : Move chess from tileXYZ <code>{x, y, z}</code>, to tileXYZ <code>{x, y, z}</code></li> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>board</code> : Board object.</li> </ul> </li> <li><code>sneak</code> : Set <code>true</code> to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied.<ul> <li><code>occupiedTest</code> will be ignored when <code>sneak</code> is <code>true</code>.</li> </ul> </li> </ul>"},{"location":"board-moveto/#move-to-destination-tile","title":"Move to destination tile","text":"<pre><code>moveTo.moveTo(tileX, tileY);\n// moveTo.moveTo(tileXY);\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul>"},{"location":"board-moveto/#move-to-neighbor-tile","title":"Move to neighbor tile","text":"<pre><code>moveTo.moveToward(direction);\n</code></pre> <ul> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul>"},{"location":"board-moveto/#move-to-random-neighbor-tile","title":"Move to random neighbor tile","text":"<pre><code>moveTo.moveToRandomNeighbor();\n</code></pre>"},{"location":"board-moveto/#move-away-or-move-closer","title":"Move away or move closer","text":"<ul> <li>Move away from a tile position     <pre><code>moveTo.moveAway(tileX, tileY);\n</code></pre>     or     <pre><code>moveTo.moveAway(tileXY);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul> </li> <li>Move closer to a tile position     <pre><code>moveTo.moveCloser(tileX, tileY);\n</code></pre>     or     <pre><code>moveTo.moveCloser(tileXY);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul> </li> </ul>"},{"location":"board-moveto/#can-move-to-tile","title":"Can move to tile","text":"<pre><code>var canMoveTo = moveTo.canMoveTo(tileX, tileY);\n</code></pre> <p>Return <code>true</code> if chess can move to (tileX, tileY)</p>"},{"location":"board-moveto/#last-move-result","title":"Last move result","text":"<pre><code>var lastMoveResult = moveTo.lastMoveResult;\n</code></pre> <p>Return <code>true</code> if chess is moved by <code>moveTo.moveTo()</code>, <code>moveTo.moveToward()</code>, or <code>moveTo.moveToRandomNeighbor()</code></p>"},{"location":"board-moveto/#destination","title":"Destination","text":"<pre><code>var destinationTileX = moveTo.destinationTileX;\nvar destinationTileY = moveTo.destinationTileY;\nvar destinationDirection = moveTo.destinationDirection;\n</code></pre>"},{"location":"board-moveto/#pause-resume-stop-moving","title":"Pause, Resume, stop moving","text":"<pre><code>moveTo.pause();\nmoveTo.resume();\nmoveTo.stop();\n</code></pre>"},{"location":"board-moveto/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>moveTo.setEnable();\n</code></pre>     or     <pre><code>moveTo.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>moveTo.setEnable(false);\n</code></pre>     or     <pre><code>moveTo.enable = false;\n</code></pre></li> </ul>"},{"location":"board-moveto/#set-speed","title":"Set speed","text":"<pre><code>moveTo.setSpeed(speed);\n// moveTo.speed = speed;\n</code></pre>"},{"location":"board-moveto/#set-rotate-to-target","title":"Set rotate-to-target","text":"<pre><code>moveTo.setRotateToTarget(rotateToTarget);\n</code></pre> <ul> <li><code>rotateToTarget</code> : Set <code>true</code> to change angle towards target</li> </ul>"},{"location":"board-moveto/#events","title":"Events","text":"<ul> <li>Try to move on an occupied tile position     <pre><code>moveTo.on('occupy', function(occupiedChess, gameObject, moveTo){\n// Move away occupiedChess\n});\n</code></pre></li> <li>On reached target     <pre><code>moveTo.on('complete', function(gameObject, moveTo){});\n// moveTo.once('complete', function(gameObject, moveTo){});\n</code></pre></li> </ul>"},{"location":"board-moveto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = moveTo.isRunning;\n</code></pre></li> </ul>"},{"location":"board-overview/","title":"Overview","text":""},{"location":"board-overview/#install-plugin","title":"Install plugin","text":""},{"location":"board-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board-overview/#using-typescript-declaration-file","title":"Using typescript declaration file","text":"<pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\n\nclass Game extends Phaser.Scene {\nrexBoard: BoardPlugin;  // Declare scene property 'rexBoard' as BoardPlugin type\n\ncreate() {\nvar board = this.rexBoard.add.board({\n// ...\n})\n}\n}\n\nvar game = new Phaser.Game({\nscene: Game,\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n});\n</code></pre> <ul> <li><code>'phaser3-rex-plugins/plugins/board-plugin'</code> : Factories of board components.</li> <li><code>'phaser3-rex-plugins/plugins/board-components'</code> : Class of board components.     <pre><code>import { Board } from 'phaser3-rex-plugins/plugins/board-components';\n</code></pre></li> </ul> <p>See this example</p>"},{"location":"board-overview/#list-of-board-plugins","title":"List of board plugins","text":""},{"location":"board-overview/#board","title":"Board","text":"<ul> <li>Board</li> <li>Grids<ul> <li>Quad grid</li> <li>Hexagon grid</li> </ul> </li> <li>Chess</li> </ul>"},{"location":"board-overview/#shapes","title":"Shapes","text":"<ul> <li>Shape</li> <li>Tile texture</li> </ul>"},{"location":"board-overview/#behaviors","title":"Behaviors","text":"<ul> <li>Move to</li> </ul>"},{"location":"board-overview/#applications","title":"Applications","text":"<ul> <li>Path finder</li> <li>Monopoly</li> <li>Field of view</li> <li>Match</li> <li>Hexagon map</li> </ul>"},{"location":"board-overview/#mini-board","title":"Mini-board","text":"<ul> <li>Mini-board</li> </ul>"},{"location":"board-overview/#templates","title":"Templates","text":"<ul> <li>Bejeweled</li> </ul>"},{"location":"board-pathfinder/","title":"Path finder","text":""},{"location":"board-pathfinder/#introduction","title":"Introduction","text":"<p>Find moveable area or moving path, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Application of Board system, or behavior of chess</li> </ul>"},{"location":"board-pathfinder/#live-demos","title":"Live demos","text":"<ul> <li>Find area, get path</li> <li>Draw path</li> <li>Energy drain</li> <li>Turning cost</li> <li>Move from high to low</li> <li>Chinese checkers</li> </ul>"},{"location":"board-pathfinder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-pathfinder/#install-plugin","title":"Install plugin","text":""},{"location":"board-pathfinder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = scene.rexBoard.add.pathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = scene.rexBoard.add.pathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PathFinder } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = new PathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#create-instance","title":"Create instance","text":"<pre><code>var pathFinder = scene.rexBoard.add.pathFinder({\n// occupiedTest: false,\n// blockerTest: false,\n\n// ** cost **\n// cost: 1,   // constant cost\n// costCallback: undefined,\n// costCallbackScope: undefined,\n// cacheCost: true,\n\n// pathMode: 10,  // A*\n// weight: 10,   // weight for A* searching mode\n// shuffleNeighbors: false,\n})\n</code></pre> <ul> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not, in cost function.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property in cost function.</li> <li>Cost function<ul> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback     <pre><code>function(curTile, preTile, pathFinder) {\nreturn cost;\n}\n</code></pre><ul> <li>Board : <code>pathFinder.board</code></li> <li>Chess game object : <code>pathFinder.gameObject</code></li> <li>Cost of blocker : <code>pathFinder.BLOCKER</code></li> </ul> </li> </ul> </li> <li><code>pathMode</code><ul> <li>Shortest path<ul> <li><code>'random'</code>, or <code>0</code></li> <li><code>'diagonal'</code>, or <code>1</code></li> <li><code>'straight'</code>, or <code>2</code></li> <li><code>'line'</code>, or <code>3</code></li> </ul> </li> <li>A* path<ul> <li><code>'A*'</code>, or <code>10</code></li> <li><code>'A*-random'</code>, or <code>11</code></li> <li><code>'A*-line'</code>, or <code>12</code></li> </ul> </li> </ul> </li> <li><code>weight</code> : Weight parameter for A* searching mode.</li> <li><code>cacheCost</code> : Set <code>false</code> to get cost every time. It is useful when cost is a function of (current tile, previous tile).</li> <li><code>shuffleNeighbors</code> : Shuffle neighbors.</li> </ul>"},{"location":"board-pathfinder/#create-behavior","title":"Create behavior","text":"<pre><code>var pathFinder = scene.rexBoard.add.pathFinder(chess, config);\n</code></pre>"},{"location":"board-pathfinder/#set-chess","title":"Set chess","text":"<pre><code>pathFinder.setChess(chess);\n</code></pre> <p>Note</p> <p>Don't use this method if pathFinder is a behavior of Chess</p>"},{"location":"board-pathfinder/#cost-function","title":"Cost function","text":"<pre><code>var callback = function(curTileXY, preTileXY, pathFinder) {\nreturn cost;\n}\n</code></pre> <ul> <li><code>cost</code> : Number cost.</li> <li><code>curTileXY</code>, <code>preTileXY</code> : TileXY position <code>{x, y}</code>. Cost of moving from <code>preTileXY</code> to <code>curTileXY</code>.<ul> <li><code>preTileXY.pathCost</code> : Path cost of <code>preTilexY</code>.</li> <li><code>preTileXY.preNodes</code> : Previous tiles of <code>preTileXY</code>.    </li> </ul> </li> <li><code>pathFinder</code> : Path finder object.<ul> <li><code>pathFinder.board</code> : Board object</li> <li><code>pathFinder.gameObject</code> : Chess game object.</li> <li><code>pathFinder.BLOCKER</code> : Cost of blocker. Return this value means that chess can not move to <code>curTileXY</code>.</li> </ul> </li> </ul>"},{"location":"board-pathfinder/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>pathFinder.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>pathFinder.setCostFunction(callback, scope);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#set-path-mode","title":"Set path mode","text":"<pre><code>pathFinder.setPathMode(pathMode)\n</code></pre> <ul> <li><code>pathMode</code><ul> <li>Shortest path<ul> <li><code>'random'</code>, or <code>0</code></li> <li><code>'diagonal'</code>, or <code>1</code></li> <li><code>'straight'</code>, or <code>2</code></li> <li><code>'line'</code>, or <code>3</code></li> </ul> </li> <li>A* path<ul> <li><code>'A*'</code>, or <code>10</code></li> <li><code>'A*-random'</code>, or <code>11</code></li> <li><code>'A*-line'</code>, or <code>12</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-pathfinder/#find-moveable-area","title":"Find moveable area","text":"<pre><code>var tileXYArray = pathFinder.findArea(movingPoints);\n// var out = pathFinder.findArea(movingPoints, out);\n</code></pre> <ul> <li><code>movingPoints</code><ul> <li><code>pathFinder.INFINITY</code> (undefined) : Infinity moving points. Default value.</li> </ul> </li> <li><code>tileXYArray</code> : An array of moveable tile positions <code>{x,y,pathCost}</code></li> </ul>"},{"location":"board-pathfinder/#get-shortest-path-to-a-moveable-tile","title":"Get shortest path to a moveable tile","text":"<pre><code>var tileXYArray = pathFinder.getPath(endTileXY);\n</code></pre> <ul> <li><code>endTileXY</code> : Tile position of moveable area in last result of <code>pathFinder.findArea()</code></li> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y,pathCost}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> </ul> <p>Path mode</p> <ul> <li>Path info of each tile is calculated during <code>pathFinder.findArea()</code></li> </ul>"},{"location":"board-pathfinder/#find-moving-path","title":"Find moving path","text":"<pre><code>var tileXYArray = pathFinder.findPath(endTileXY);\n// var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out);\n</code></pre> <ul> <li><code>endTileXY</code> : Tile position</li> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y,pathCost}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> <li><code>movingPoints</code><ul> <li><code>pathFinder.INFINITY</code> (undefined) : Infinity moving points. Default value.</li> </ul> </li> <li><code>isClosest</code> : Set <code>true</code> to get closest path.</li> </ul> <p>Path mode</p> <ul> <li>Set <code>pathMode</code> to A* (<code>'A*'</code>, <code>'A*-random'</code>, or <code>'A*-line'</code>) to speed up calculating.</li> </ul>"},{"location":"board-pathfinder/#cost-of-tile","title":"Cost of tile","text":"<p>During or after finding moveable area...</p> <ul> <li>Get cost of path from chess to tile     <pre><code>var pathCost = pathFinder.tileXYToCost(tileX, tileY, true);\n</code></pre></li> <li>Get cost of tile     <pre><code>var tileCost = pathFinder.tileXYToCost(tileX, tileY, false);\n</code></pre></li> </ul>"},{"location":"board-quadgrid/","title":"Quad","text":""},{"location":"board-quadgrid/#introduction","title":"Introduction","text":"<p>Quad grid object of Board system.</p> <ul> <li>Author: Rex</li> <li>Grid object of board</li> </ul>"},{"location":"board-quadgrid/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-quadgrid/#create-instance","title":"Create instance","text":"<pre><code>var grid = scene.rexBoard.add.quadGrid({\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 0,\n// dir: 4\n});\n</code></pre> <p>or</p> <pre><code>// import { QuadGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\nvar grid = new QuadGrid(config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position of tile (0, 0)</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>type</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> <li><code>dir</code> :<ul> <li><code>4</code> or <code>'4dir'</code> : Left/Down/Right/Up</li> <li><code>8</code> or <code>'8dir'</code> : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left</li> </ul> </li> </ul>"},{"location":"board-quadgrid/#world-position-of-tile-0-0","title":"World position of tile (0, 0)","text":"<ul> <li>Get     <pre><code>var worldX = grid.x;\nvar worldY = grid.y;\n</code></pre></li> <li>Set     <pre><code>grid.setOriginPosition(worldX, worldY);\n</code></pre>     or     <pre><code>grid.x = worldX;\ngrid.y = worldY;\n</code></pre></li> </ul>"},{"location":"board-quadgrid/#cell-size","title":"Cell size","text":"<ul> <li>Get     <pre><code>var width = grid.width;\nvar height = grid.height;\n</code></pre></li> <li>Set     <pre><code>grid.setCellSize(width, height);\n</code></pre>     or     <pre><code>grid.width = width;\ngrid.height = height;\n</code></pre></li> </ul>"},{"location":"board-quadgrid/#grid-type","title":"Grid type","text":"<ul> <li>Get     <pre><code>var mode = grid.mode;\n</code></pre></li> <li>Set     <pre><code>grid.setType(mode);\n</code></pre><ul> <li><code>mode</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-quadgrid/#get-world-position","title":"Get world position","text":"<pre><code>var worldXY = grid.getWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = grid.getWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board-quadgrid/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXY = grid.getTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = grid.getTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board-quadgrid/#directions","title":"Directions","text":"<ul> <li><code>0</code> : Right</li> <li><code>1</code> : Down</li> <li><code>2</code> : Left</li> <li><code>3</code> : Up</li> <li><code>4</code> : Right-down</li> <li><code>5</code> : Left-down</li> <li><code>6</code> : Left-up</li> <li><code>7</code> : Right-up</li> </ul> <pre><code>6|3|7\n-+-+-\n2|A|0\n-+-+-\n5|1|4\n</code></pre>"},{"location":"board-shape/","title":"Shape","text":""},{"location":"board-shape/#introduction","title":"Introduction","text":"<p>Grid (polygon) shape object.</p> <ul> <li>Author: Rex</li> <li>Polygon Shape Game object of Board system</li> </ul>"},{"location":"board-shape/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-shape/#install-plugin","title":"Install plugin","text":""},{"location":"board-shape/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add shape object     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n</code></pre></li> </ul>"},{"location":"board-shape/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n</code></pre></li> </ul>"},{"location":"board-shape/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Shape } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add shape object     <pre><code>var shape = new Shape(board, tileX, tileY, tileZ, fillColor);\nscene.add.existing(shape);\n</code></pre></li> </ul>"},{"location":"board-shape/#add-shape-object","title":"Add shape object","text":"<ul> <li>Create shape object and add to board     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n// var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha);\n</code></pre><ul> <li><code>board</code> : Board object</li> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>fillColor</code>, <code>fillAlpha</code> : Color of this shape object</li> </ul> </li> <li>Create shape object but not add to board     <pre><code>var shape = scene.rexBoard.add.shape(board, x, y, undefined, fillColor, fillAlpha, false);\n</code></pre><ul> <li><code>board</code> : Board object</li> <li><code>x</code>, <code>y</code> : World position</li> <li><code>fillColor</code>, <code>fillAlpha</code> : Color of this shape object</li> </ul> </li> </ul>"},{"location":"board-shape/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>polygon.setFillStyle(color, alpha)\n</code></pre></li> <li>Stroke color     <pre><code>polygon.setStrokeStyle(lineWidth, color, alpha)\n</code></pre></li> </ul> <p>No tint methods</p> <p>Uses <code>shape.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"board-shape/#other-properties","title":"Other properties","text":"<p>See polygon shape game object, game object</p>"},{"location":"board-texture/","title":"Tile texture","text":""},{"location":"board-texture/#introduction","title":"Introduction","text":"<p>Create canvas-texture of tile.</p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-texture/#live-demos","title":"Live demos","text":"<ul> <li>Tile texture</li> </ul>"},{"location":"board-texture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-texture/#install-plugin","title":"Install plugin","text":""},{"location":"board-texture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create tile texture     <pre><code>scene.rexBoard.createTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create tile texture     <pre><code>scene.rexBoard.createTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { CreateTileTexture } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create tile texture     <pre><code>CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#create-tile-texture","title":"Create tile texture","text":""},{"location":"board-texture/#hexagon","title":"Hexagon","text":"<pre><code>CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n// CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth, overlapGrid, lineJoin);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>fillStyle</code> : Fill color of tile texture.<ul> <li><code>undefined</code> : Don't fill tile texture.</li> </ul> </li> <li><code>strokeStyle</code>, <code>lineWidth</code> : Stroke color, stroke line width of tile texture.<ul> <li><code>undefined</code> : Don't stroke tile texture.</li> </ul> </li> <li><code>overlapGrid</code> : <ul> <li><code>true</code> : Overlap grid. i.e. Grid width = lineWidth. Default behavior.</li> <li><code>false</code> : Don't overlap grid. i.e. Grid width = 2 * lineWidth.</li> </ul> </li> <li><code>lineJoin</code> : Join style of stroke lines. <code>'round'</code>, <code>'bevel'</code> and <code>'miter'</code>. Default is <code>'miter'</code>.</li> </ul>"},{"location":"board-tilemap/","title":"Tilemap","text":""},{"location":"board-tilemap/#introduction","title":"Introduction","text":"<p>Create board from tilemap</p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-tilemap/#live-demos","title":"Live demos","text":"<ul> <li>Create board from tilemap</li> </ul>"},{"location":"board-tilemap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-tilemap/#install-plugin","title":"Install plugin","text":""},{"location":"board-tilemap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = scene.rexBoard.createBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = scene.rexBoard.createBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { CreateBoardFromTilemap } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = CreateBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#create-board-from-tilemap","title":"Create board from tilemap","text":"<pre><code>var board = CreateBoardFromTilemap(tilemap, layers);\n</code></pre> <ul> <li><code>tilemap</code> : Tilemap object</li> <li><code>layers</code> : Add tiles of layers into board, tileZ will be name of layer (<code>layer.name</code>)<ul> <li><code>undefined</code> : Add tiles of all layers.</li> <li>Array of TilemapLayer game object, or a TilemapLayer game object</li> <li>Array of layers' name, or a name of layer.</li> </ul> </li> <li><code>board</code> : Board object.</li> </ul>"},{"location":"board/","title":"Board","text":""},{"location":"board/#introduction","title":"Introduction","text":"<p>Core object of Board system.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"board/#live-demos","title":"Live demos","text":"<ul> <li>Touch events</li> <li>Get tileXY at direction</li> <li>Line to tileXY array</li> <li>Triangle to tileXY array</li> <li>Ellipse to tileXY array</li> <li>Bounds</li> </ul>"},{"location":"board/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board/#install-plugin","title":"Install plugin","text":""},{"location":"board/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Board, HexagonGrid, QuadGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add board object     <pre><code>var board = new Board(scene, {\ngrid: QuadGrid(gridConfig),  // or HexagonGrid(gridConfig)\n// ...\n});\n</code></pre></li> </ul>"},{"location":"board/#add-board-object","title":"Add board object","text":"<ul> <li>Quad board     <pre><code>var board = scene.rexBoard.add.board({\ngrid: {\ngridType: 'quadGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 'orthogonal'  // 'orthogonal'|'isometric'\n},\n// width: 0,\n// height: 0,\n// wrap: false,\n// infinity: false,\n});\n</code></pre></li> <li>Hexagon board     <pre><code>var board = scene.rexBoard.add.board({\ngrid: {\ngridType: 'hexagonGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\nstaggeraxis: 'x',   // 'x'|'y'\nstaggerindex: 'odd' // 'odd'|'even'\n},\n// width: 0,\n// height: 0,\n// wrap: false,\n// infinity: false,\n});\n</code></pre></li> </ul> <p>Configuration</p> <ul> <li><code>grid</code> :<ul> <li><code>gridType</code> :<ul> <li><code>'quadGrid'</code> : Quad grid</li> <li><code>'hexagonGrid'</code> : hexagon grid</li> </ul> </li> </ul> </li> <li><code>width</code> : Board width in tiles</li> <li><code>height</code> : Board height in tiles</li> <li><code>wrap</code> : Set <code>true</code> to wrap board bounds. Default value is <code>false</code>.</li> <li><code>infinity</code> : Infinity board size if set to <code>true</code>. Default value is <code>false</code>.</li> </ul>"},{"location":"board/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBoard extends RexPlugins.Board.Board {\nconstructor(scene) {\nsuper(scene, {\ngrid: {\ngridType: 'quadGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 'orthogonal'  // 'orthogonal'|'isometric'\n},\nwidth: 0,\nheight: 0\n});\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var board = new MyBoard(scene);\n</code></pre></li> </ul>"},{"location":"board/#board-size","title":"Board size","text":"<ul> <li>Width : Board width in tiles<ul> <li>Get     <pre><code>var width = board.width;\n</code></pre></li> <li>Set     <pre><code>board.setBoardWidth(width);\n</code></pre></li> </ul> </li> <li>Height : Board height in tiles<ul> <li>Get     <pre><code>var height = board.height;\n</code></pre></li> <li>Set     <pre><code>board.setBoardHeight(height);\n</code></pre></li> </ul> </li> </ul>"},{"location":"board/#add-chess","title":"Add chess","text":"<pre><code>board.addChess(chess, tileX, tileY, tileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object.</li> <li><code>tileX</code> , <code>tileY</code> , <code>tileZ</code> : Tile position.<ul> <li><code>tileX</code> , <code>tileY</code> : Number.</li> <li><code>tileZ</code> : Number or string.</li> </ul> </li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>true</code>.</li> </ul> <p>Chess and tile position</p> <ul> <li>Any chess has a (tileX, tileY, tileZ) index</li> <li>Any (tileX, tileY, tileZ) index contains only 1 chess.</li> <li>(tileX, tileY) could have more then 1 chess with different tileZ index.</li> <li>tileZ is not equal to <code>depth</code>.</li> </ul>"},{"location":"board/#kick-out-event","title":"Kick-out event","text":"<p>Board will fire <code>kickout</code> event when adding chess to an occupied grid.</p> <pre><code>board.on('kickout', function(chessToAdd, occupiedChess, tileXYZ){\n})\n</code></pre> <p><code>chessToAdd</code> kicks out <code>occupiedChess</code> at tile position <code>tileXYZ</code>(<code>{x,y,z}</code>).</p>"},{"location":"board/#remove-chess","title":"Remove chess","text":"<ul> <li>Remove chess object from board     <pre><code>board.removeChess(chess, null, null, null, destroy);\n</code></pre><ul> <li><code>chess</code> : A game object</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove chess at (tileX, tileY, tileZ) from board     <pre><code>board.removeChess(null, tileX, tileY, tileZ, destroy);\n</code></pre><ul> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove all chess     <pre><code>board.removeAllChess(destroy);\n</code></pre><ul> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> </ul>"},{"location":"board/#move-chess","title":"Move chess","text":"<pre><code>board.moveChess(chess, toTileX, toTileY, toTileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>toTileX</code>, <code>toTileY</code>, <code>toTileZ</code> : Target tile position</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>true</code>.</li> </ul> <p>Do nothing if chess is not at this board.</p>"},{"location":"board/#set-tilez-of-chess","title":"Set tileZ of chess","text":"<pre><code>board.setChessTileZ(chess, toTileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>toTileZ</code> : Target tileZ</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>false</code>.</li> </ul>"},{"location":"board/#swap-chess","title":"Swap chess","text":"<pre><code>board.swapChess(chessA, chessB, align);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Game objects</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY).</li> </ul>"},{"location":"board/#chess-tile-position","title":"Chess -&gt; tile position","text":"<pre><code>var tileXYZ = board.chessToTileXYZ(chess);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>tileXYZ</code> : <code>{x,y,z}</code> or <code>null</code> if chess is not added to board.</li> </ul>"},{"location":"board/#tile-position-chess","title":"Tile position -&gt; chess","text":"<ul> <li>Get chess at (tileX, tileY, tileZ)     <pre><code>var chess = board.tileXYZToChess(tileX, tileY, tileZ);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> <li>Get chess at (tileX, tileY)     <pre><code>var out = board.tileXYToChessArray(tileX, tileY);\n// var out = board.tileXYToChessArray(tileX, tileY, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess at tileZ     <pre><code>var out = board.tileZToChessArray(tileZ);\n// var out = board.tileZToChessArray(tileZ, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess from array of (tileX, tileY)     <pre><code>var out = board.tileXYArrayToChessArray(tileXYArray);\n// var out = board.tileXYArrayToChessArray(tileXYArray, out);\n</code></pre>     or     <pre><code>var out = board.tileXYArrayToChessArray(tileXYArray, tileZ);\n// var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out);\n</code></pre><ul> <li><code>tileXYArray</code> : An array of tileXY <code>{x, y}</code></li> <li><code>out</code> : An array of chess</li> </ul> </li> </ul>"},{"location":"board/#world-position-chess","title":"World position -&gt; chess","text":"<ul> <li>Get chess at (worldX, worldY)     <pre><code>var out = board.worldXYToChessArray(worldX, worldY);\n// var out = board.worldXYToChessArray(worldX, worldY, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess at (worldX, worldY), tileZ     <pre><code>var chess = board.worldXYToChess(worldX, worldY, tileZ);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> <li>Get chess at (worldX, worldY)     <pre><code>var chess = board.worldXYToChess(worldX, worldY);\n</code></pre><ul> <li><code>chess</code> : A game object at a tileZ.</li> </ul> </li> </ul>"},{"location":"board/#contains","title":"Contains","text":"<ul> <li>Is (tileX, tileY) inside board?     <pre><code>var isTileInBoard = board.contains(tileX, tileY);\n</code></pre></li> <li>Does (tileX, tileY, tileZ) have chess?     <pre><code>var isTileInBoard = board.contains(tileX, tileY, tileZ);\n</code></pre></li> <li>Is chess inside board?     <pre><code>var isChessInBoard = board.exists(chess);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> </ul>"},{"location":"board/#for-each-tile","title":"For each tile","text":"<pre><code>board.forEachTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope);\n</code></pre> <p>Iteration order :</p> <pre><code>board.forEachTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n\n// return isBreak;\n}, scope, order);\n</code></pre> <ul> <li><code>order</code> :<ul> <li><code>0</code>, or <code>'x+'</code> : Increasing x, increasing y.</li> <li><code>1</code>, or <code>'x-'</code> : Decreasing x, increasing y.</li> <li><code>2</code>, or <code>'y+'</code> : Increasing y, increasing x.</li> <li><code>3</code>, or <code>'y-'</code> : Decreasing y, increasing x.</li> </ul> </li> </ul> <p>Or using for-loop</p> <pre><code>for (var tileY = 0; tileY &lt; board.height; tileY++) {\nfor (var tileX = 0; tileX &lt; board.width; tileX++) {\n// ...\n}\n}\n</code></pre> <ul> <li><code>board.width</code> , <code>board.height</code> : Board width/height in tiles.</li> </ul>"},{"location":"board/#for-each-tile-in-viewport-of-a-camera","title":"For each tile in viewport of a camera","text":"<pre><code>board.forEachCullTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope);\n</code></pre> <pre><code>board.forEachCullTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope, {\ncamera: board.scene.cameras.main,\npaddingX: 1,\npaddingY: 1,\norder: 0,\n});\n</code></pre> <ul> <li><code>camera</code> : Camera of scene. Default value is the main camera.</li> <li><code>paddingX</code> , <code>paddingY</code> : Padding space of camera's viewport</li> <li><code>order</code> :<ul> <li><code>0</code>, or <code>'x+'</code> : Increasing x, increasing y.</li> <li><code>1</code>, or <code>'x-'</code> : Decreasing x, increasing y.</li> <li><code>2</code>, or <code>'y+'</code> : Increasing y, increasing x.</li> <li><code>3</code>, or <code>'y-'</code> : Decreasing y, increasing x.</li> </ul> </li> </ul>"},{"location":"board/#tile-position-world-position","title":"Tile position -&gt; world position","text":"<pre><code>var worldXY = board.tileXYToWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = board.tileXYToWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board/#world-position-tile-position","title":"World position -&gt; tile position","text":"<pre><code>var tileXY = board.worldXYToTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = board.worldXYToTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board/#world-position-grid-world-position","title":"World position -&gt; Grid world position","text":"<pre><code>var gridWorldXY = board.worldXYSnapToGrid(worldX, worldY);\n// var out = board.worldXYSnapToGrid(worldX, worldY, out);\n</code></pre>"},{"location":"board/#grid-distance","title":"Grid distance","text":"<pre><code>var distance = board.getDistance(tileA, tileB);\n</code></pre> <ul> <li><code>tileA</code>, <code>tileB</code> : Chess object, or tileXY <code>{x, y}</code>. </li> </ul>"},{"location":"board/#ring-tile-position","title":"Ring -&gt; tile position","text":"<ul> <li>Get array of tile position around a ring.     <pre><code>var out = board.ringToTileXYArray(centerTileXY, radius);\n// var out = board.ringToTileXYArray(centerTileXY, radius, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> </ul> </li> <li>Get array of tile position within a filled ring. <code>centerTileXY</code> will be included.     <pre><code>var out = board.filledRingToTileXYArray(centerTileXY, radius);\nvar out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, out);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>nearToFar</code> : From near ring to far ring. Default value is <code>true</code>.</li> </ul> </li> </ul>"},{"location":"board/#ring-chess","title":"Ring -&gt; chess","text":"<ul> <li>Get array of chess around a ring.     <pre><code>var out = board.ringToChessArray(centerTileXY, radius, tileZ);\n// var out = board.ringToChessArray(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> </ul> </li> <li>Get array of chess within a filled ring. Chess at <code>centerTileXY</code> will be included.     <pre><code>var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ);\nvar out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, nearToFar);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, out);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, nearToFar, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> </ul> </li> </ul>"},{"location":"board/#shape-tile-position","title":"Shape -&gt; tile position","text":""},{"location":"board/#line-tile-position","title":"Line -&gt; tile position","text":"<p>Get array of tile position along a line defined via (<code>startWorldX</code>, <code>startWorldY</code>) to (<code>endWorldX</code>, <code>endWorldY</code>)</p> <pre><code>var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY);\n// var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out);\n</code></pre> <ul> <li><code>startWorldX</code>, <code>startWorldY</code>, <code>endWorldX</code>, <code>endWorldY</code> : Start and end pointer of a line</li> <li><code>out</code> : An array of tile position</li> </ul> <p>or</p> <pre><code>var out = board.lineToTileXYArray(line);\n// var out = board.lineToTileXYArray(line, out);\n</code></pre> <ul> <li><code>line</code> : Line object</li> </ul>"},{"location":"board/#circle-tile-position","title":"Circle -&gt; tile position","text":"<p>Get array of tile position inside a circle shape</p> <pre><code>var out = board.circleToTileXYArray(circle);\n// var out = board.circleToTileXYArray(circle, out);\n// var out = board.circleToTileXYArray(circle, testMode, out);\n</code></pre> <ul> <li><code>circle</code> : Circle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#rectangle-tile-position","title":"Rectangle -&gt; tile position","text":"<p>Get array of tile position inside a rectangle shape</p> <pre><code>var out = board.rectangleToTileXYArray(rectangle);\n// var out = board.rectangleToTileXYArray(rectangle, out);\n// var out = board.rectangleToTileXYArray(rectangle, testMode, out);\n</code></pre> <ul> <li><code>rectangle</code> : Rectangle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#ellipse-tile-position","title":"Ellipse -&gt; tile position","text":"<p>Get array of tile position inside a ellipse shape</p> <pre><code>var out = board.ellipseToTileXYArray(ellipse);\n// var out = board.ellipseToTileXYArray(ellipse, out);\n// var out = board.ellipseToTileXYArray(ellipse, testMode, out);\n</code></pre> <ul> <li><code>ellipse</code> : Ellipse shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#triangle-tile-position","title":"Triangle -&gt; tile position","text":"<p>Get array of tile position inside a triangle shape</p> <pre><code>var out = board.triangleToTileXYArray(triangle);\n// var out = board.triangleToTileXYArray(triangle, out);\n// var out = board.triangleToTileXYArray(triangle, testMode, out);\n</code></pre> <ul> <li><code>triangle</code> : Triangle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#polygon-tile-position","title":"Polygon -&gt; tile position","text":"<p>Get array of tile position inside a polygon shape</p> <pre><code>var out = board.polygonToTileXYArray(polygon);\n// var out = board.polygonToTileXYArray(polygon, out);\n// var out = board.polygonToTileXYArray(polygon, testMode, out);\n</code></pre> <ul> <li><code>polygon</code> : Polygon shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#angle-between-world-position-of-2-tiles","title":"Angle between world position of 2 tiles","text":"<pre><code>var radian = board.angleBetween(tileA, tileB);\n</code></pre> <ul> <li><code>tileA</code>, <code>tileB</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radian</code> : Angle between world position of 2 tiles, in radian.</li> </ul>"},{"location":"board/#is-angle-in-cone","title":"Is angle in cone","text":"<pre><code>var isInCone = board.isAngleInCone(chessA, chessB, face, cone);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Chess object, or tileXY <code>{x, y}</code>. </li> <li><code>face</code>, <code>cone</code> : Range of compared angle is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Angle in radian.</li> </ul>"},{"location":"board/#direction-between-2-tiles","title":"Direction between 2 tiles","text":"<pre><code>var direction = board.directionBetween(chessA, chessB);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : A chess object, or tile position <code>{x,y}</code>.</li> <li><code>direction</code> : Integer number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li> </ul> </li> </ul> <pre><code>var direction = board.directionBetween(chessA, chessB, false);\n</code></pre> <ul> <li><code>direction</code> : Integer number, or float number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li> </ul> </li> </ul>"},{"location":"board/#is-direction-in-cone","title":"Is direction in cone","text":"<pre><code>var isInCone = board.isDirectionInCone(chessA, chessB, face, cone);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Chess object, or tileXY <code>{x, y}</code>.</li> <li><code>face</code>, <code>cone</code> : Range of compared direction is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Integer number, or float number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, or float number between 0~1, 1~2, 2~3, 3~4.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li> </ul> </li> </ul>"},{"location":"board/#opposite-direction","title":"Opposite direction","text":"<pre><code>var direction = board.getOppositeDirection(tileX, tileY, direction);\n</code></pre> <p>or</p> <pre><code>var direction = board.getOppositeDirection(tileXY, direction);\n</code></pre> <ul> <li><code>tileXY</code> : Chess object, or tileXY <code>{x, y}</code>.</li> </ul>"},{"location":"board/#angle-snap-to-direction","title":"Angle snap to direction","text":"<pre><code>var direction = board.angleSnapToDirection(tileXY, angle);\n</code></pre> <ul> <li><code>tileXY</code> : Chess object, or tileXY <code>{x, y}</code>, or <code>undefined</code>.</li> <li><code>angle</code> : Angle in radius.</li> <li><code>direction</code> : Integer number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li> </ul> </li> </ul>"},{"location":"board/#align-world-position-to-grid","title":"Align world position to grid","text":"<ul> <li>Align one chess object     <pre><code>board.gridAlign(chess);\n</code></pre></li> <li>Align all chess     <pre><code>board.gridAlign();\n</code></pre></li> </ul>"},{"location":"board/#is-overlapping-with-world-position","title":"Is overlapping with world position","text":"<pre><code>var isOverlapping = board.isOverlappingPoint(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var isOverlapping = board.isOverlappingPoint(worldX, worldY, tileZ);\n</code></pre>"},{"location":"board/#neighbors","title":"Neighbors","text":""},{"location":"board/#neighbor-tile-position","title":"Neighbor tile position","text":"<ul> <li>Get neighbor tile position at 1 direction     <pre><code>var neighborTileXY = board.getNeighborTileXY(srcTileXY, direction);\n// var out = board.getNeighborTileXY(srcTileXY, direction, out);\n</code></pre><ul> <li><code>srcTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of source.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li> </ul> </li> <li>Get neighbor tile position at directions     <pre><code>var neighborTileXY = board.getNeighborTileXY(srcTileXY, directions);\n// var out = board.getNeighborTileXY(srcTileXY, directions, out);\n</code></pre><ul> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Tile position array of all neighbors</li> </ul> </li> <li>Get neighbor tile position at all directions     <pre><code>var out = board.getNeighborTileXY(srcTileXY, null);\n// var out = board.getNeighborTileXY(srcTileXY, null, out);\n</code></pre><ul> <li><code>out</code> : Tile position array of all neighbors</li> </ul> </li> <li>Get direction between 2 tile positions     <pre><code>var direction = board.getNeighborTileDirection(srcTile, neighborTileXY);\n</code></pre><ul> <li><code>srcTile</code>, <code>neighborTileXY</code> : Chess object, or tileXY <code>{x, y}</code>.</li> <li><code>direction</code> : Retu1rn <code>null</code> if these 2 tile positions are not neighbors.</li> </ul> </li> <li>Get neighbor tile position at angle     <pre><code>var neighborTileXY = board.getNeighborTileXYAtAngle(srcTileXY, angle);\n// var out = board.getNeighborTileXYAtAngle(srcTileXY, angle, out);\n</code></pre><ul> <li><code>srcTileXY</code> : Tile position <code>{x, y}</code> of source.</li> <li><code>angle</code> : Angle in radius.</li> <li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li> </ul> </li> </ul>"},{"location":"board/#neighbor-chess","title":"Neighbor chess","text":"<ul> <li>Get neighbor chess at 1 direction     <pre><code>var neighborChess = board.getNeighborChess(chess, direction); // neighborTileZ = tileZ of chess\n// var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x, y, z}</code>.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>neighborChess</code> : A chess object.</li> </ul> </li> <li>Get neighbor chess at directions     <pre><code>var out = board.getNeighborChess(chess, directions); // neighborTileZ = tileZ of chess\n// var out = board.getNeighborChess(chess, directions, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Chess array of neighbors.</li> </ul> </li> <li>Get neighbor chess at all directions     <pre><code>var out = board.getNeighborChess(chess, null); // neighborTileZ = tileZ of chess\n// var out = board.getNeighborChess(chess, null, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x, y, z}</code>.</li> <li><code>out</code> : Chess array of all neighbors.</li> </ul> </li> <li>Get direction between 2 chess     <pre><code>var direction = board.getNeighborChessDirection(chess, neighborChess);\n</code></pre><ul> <li><code>direction</code> : Return <code>null</code> if these 2 chess are not neighbors.</li> </ul> </li> <li>Are 2 chess neighbors?    <pre><code>var areNeighbor = board.areNeighbors(tileA, tileB);\n</code></pre></li> <li><code>tileA</code>, <code>tileB</code> : A chess object, or tile position <code>{x, y}</code>.</li> <li><code>areNeighbor</code> : Return <code>true</code> if <code>chessA</code> and <code>chessB</code> are neighbors.</li> </ul>"},{"location":"board/#map-neighbor-tile-position","title":"Map neighbor tile position","text":"<pre><code>var newArray = board.mapNeighbors(chess, function(neighborTileXY, index, neighborTileXYArray){\nreturn {};\n}, scope);\n</code></pre> <p>or</p> <pre><code>var newArray = board.mapNeighbors(chess, distance, function(neighborTileXY, index, neighborTileXYArray){\nreturn {};\n}, scope);\n</code></pre> <ul> <li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li> <li><code>neighborTileXY</code> : Neighbor tile position <code>{x,y,direction}</code></li> </ul>"},{"location":"board/#tile-at-direction","title":"Tile at direction","text":"<ul> <li>Get tile position at 1 direction     <pre><code>var out = board.getTileXYAtDirection(srcTileXY, direction, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out);\n</code></pre><ul> <li><code>srcTileXY</code> : A chess object, or tile position <code>{x, y}</code> of source.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>distance</code> : A JSON, number, or number array.<ul> <li>JSON : Range of distances. <code>{end: 3}</code> is equal to <code>[1,2,3]</code>.     <pre><code>{\nstart: 1,\nend: 1,\nstep: 1\n}\n</code></pre><ul> <li><code>start</code> : Start distance. Default value is <code>1</code>.</li> <li><code>end</code> : End distance. Default value is <code>1</code>.</li> <li><code>step</code> : Step. Default value is <code>1</code>.</li> </ul> </li> <li>Number, <code>3</code>.</li> <li>Array of numbers, <code>[2, 3, 5]</code> : Array of distances.</li> </ul> </li> <li><code>out</code> :<ul> <li>A single tile position, if <code>distance</code> is a number.</li> <li>Tile position <code>{x, y}</code> array, if <code>distance</code> is a JSON or a number array.</li> </ul> </li> </ul> </li> <li>Get tile positions at directions     <pre><code>var neighborTileXY = board.getTileXYAtDirection(srcTileXY, directions, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out);\n</code></pre><ul> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Tile position <code>{x, y}</code> array.</li> </ul> </li> <li>Get tile positions at all directions     <pre><code>var out = board.getTileXYAtDirection(srcTileXY, null, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, null, distance, out);\n</code></pre><ul> <li><code>out</code> : Tile position <code>{x, y}</code> array.</li> </ul> </li> </ul>"},{"location":"board/#empty-tile-position","title":"Empty tile position","text":"<ul> <li>Is tile empty? (TileXY is inside board, and TileXYZ has no chess)     <pre><code>var isEmpty = board.isEmptyTileXYZ(tileX, tileY, tileZ);\n</code></pre></li> <li>Get a random tile position which does not have any chess     <pre><code>var tileXY = board.getRandomEmptyTileXY(tileZ);\n// var out = board.getRandomEmptyTileXY(tileZ, out);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code>, <ul> <li><code>null</code> : All positions are occupied.</li> </ul> </li> </ul> </li> <li>Get an array of tile position which does not have any chess     <pre><code>var tileXYArray = board.getEmptyTileXYArray(tileZ);\n// var out = board.getEmptyTileXYArray(tileZ, out);\n</code></pre><ul> <li><code>tileXYArray</code> : An array of tile position</li> </ul> </li> <li>Get a random tile position of neighbor which does not have any chess     <pre><code>var tileXY = board.getRandomEmptyTileXYInRange(centerTileXY, radius, tileZ);\n// var out = board.getRandomEmptyTileXYInRange(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>tileXY</code> : Tile position <code>{x, y}</code>, <ul> <li><code>null</code> : All positions are occupied.</li> </ul> </li> </ul> </li> <li>Get an array of tile position of neighbors which does not have any chess     <pre><code>var tileXYArray = board.getEmptyTileXYArrayInRange(centerTileXY, radius, tileZ);\n// var out = board.getEmptyTileXYArrayInRange(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>tileXYArray</code> : An array of tile position</li> </ul> </li> </ul>"},{"location":"board/#get-all-chess","title":"Get all chess","text":"<pre><code>var chessArray = board.getAllChess();\n</code></pre>"},{"location":"board/#fit","title":"Fit","text":"<pre><code>var out = board.fit(tileXYArray);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x,y}</code>.</li> </ul> <p>Offset all of tile positions to <code>(0, 0)</code>, and set board size to fit these tile positions.</p>"},{"location":"board/#blocker","title":"Blocker","text":"<ul> <li>Set blocker property : See chess data</li> <li>Has blocker at tile position (tileX, tileY, tileZ)     <pre><code>var hasBlocker = board.hasBlocker(tileX, tileY, tileZ);\n// var hasBlocker = board.hasBlocker(chess);  // chess or tileXYZ\n</code></pre></li> <li>Any chess at (tileX, tileY) has <code>blocker</code> property     <pre><code>var hasBlocker = board.hasBlocker(tileX, tileY);\n// var hasBlocker = board.hasBlocker(chess);  // chess or tileXY\n</code></pre></li> </ul>"},{"location":"board/#touch-events","title":"Touch events","text":""},{"location":"board/#set-interactive","title":"Set interactive","text":"<ul> <li>Enable     <pre><code>board.setInteractive();\n// board.setInteractive({ useTouchZone: false });\n</code></pre><ul> <li><code>useTouchZone</code> : <ul> <li><code>true</code> : Detect touch input by input event of a full-screen zone game object. Default behavior.</li> <li><code>false</code> : Detect touch input by input event of scene.</li> </ul> </li> </ul> </li> <li>Disable     <pre><code>board.setInteractive(false);\n</code></pre></li> </ul>"},{"location":"board/#touch-zone","title":"Touch Zone","text":"<ul> <li>Get     <pre><code>var touchZone = board.getTouchZone();\n// var touchZone = board.touchZone;\n</code></pre><ul> <li>Return <code>null</code> if <code>useTouchZone</code> is <code>false</code>.</li> </ul> </li> <li>Set depth     <pre><code>touchZone.setDepth(depth);\n</code></pre>     or     <pre><code>scene.children.bringToTop(touchZone);\nscene.children.sendToBack(touchZone);\nscene.children.moveUp(touchZone);\nscene.children.moveDown(touchZone);\nscene.children.moveUp(touchZone);\nscene.children.moveTo(touchZone, index);\nscene.children.moveAbove(touchZone, child); // Move touchZone above child\nscene.children.moveBelow(touchZone, child); // Move touchZone below child\nscene.children.swap(touchZone, child);\n</code></pre></li> </ul>"},{"location":"board/#pointer-down","title":"Pointer down","text":"<ul> <li>Pointer down at any tile     <pre><code>board.on('tiledown', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Pointer down at chess     <pre><code>board.on('gameobjectdown', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerdown', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-up","title":"Pointer up","text":"<ul> <li>Pointer up at any tile     <pre><code>board.on('tileup', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Pointer up at chess     <pre><code>board.on('gameobjectup', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerup', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-move","title":"Pointer move","text":"<ul> <li>Pointer move to another tile     <pre><code>board.on('tilemove', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer move to another chess     <pre><code>board.on('gameobjectmove', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointermove', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-over","title":"Pointer over","text":"<ul> <li>Pointer over to another tile     <pre><code>board.on('tileover', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer over to another chess     <pre><code>board.on('gameobjectover', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerover', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-out","title":"Pointer out","text":"<ul> <li>Pointer out tile     <pre><code>board.on('tileout', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer out chess     <pre><code>board.on('gameobjectout', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerout', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at pointer-out (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#tap","title":"Tap","text":"<ul> <li>Tap at any tile     <pre><code>board.on('tiletap', function(tap, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n// var tapsCount = tap.tapsCount;\n});\n</code></pre><ul> <li><code>tap</code> : Tap behavior.<ul> <li><code>tap.tapsCount</code> : Taps count.</li> </ul> </li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>N-taps at any tile     <pre><code>board.on('tile' + tapsCount + 'tap' , function(tap, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>'tile' + tapsCount + 'tap'</code> : <code>'tile1tap'</code>, <code>'tile2tap'</code>, <code>'tile3tap'</code>, etc ...</li> <li><code>tap</code> : Tap behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Tap at chess     <pre><code>board.on('gameobjecttap', function(tap, gameObject) {\n// var tapsCount = tap.tapsCount;\n})\n</code></pre>     or     <pre><code>gameObject.on('board.tap', function(tap) {\n// var tapsCount = tap.tapsCount;\n})\n</code></pre><ul> <li><code>tap</code> : Tap behavior.<ul> <li><code>tap.tapsCount</code> : Taps count.</li> </ul> </li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> <li>N-taps at chess     <pre><code>board.on('gameobject' + tapsCount + 'tap' , function(tap, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.' + tapsCount + 'tap', function(tap) {\n})\n</code></pre><ul> <li><code>'gameobject' + tapsCount + 'tap'</code> : <code>'gameobject1tap'</code>, <code>'gameobject2tap'</code>, <code>'gameobject3tap'</code>, etc ...</li> <li><code>'board.' + tapsCount + 'tap'</code> : <code>'board.1tap'</code>, <code>'board.2tap'</code>, <code>'board.3tap'</code>, etc ...</li> <li><code>tap</code> : Tap behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#press","title":"Press","text":"<ul> <li>Press-start at any tile     <pre><code>board.on('tilepressstart', function(press, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Press-end at any tile     <pre><code>board.on('tilepressend', function(press, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Press-star at chess     <pre><code>board.on('gameobjectpressstart', function(press, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pressstart', function(press) {\n})\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> <li>Press-end at chess     <pre><code>board.on('gameobjectpressend', function(press, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pressend', function(press) {\n})\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#swipe","title":"Swipe","text":"<ul> <li>Swipe at any tile     <pre><code>board.on('tileswipe', function(swipe, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n// var direction = swipe.direction;\n});\n</code></pre><ul> <li><code>swipe</code> : Swipe behavior.<ul> <li><code>swipe.direction</code> : Integer number.<ul> <li>Quad grid : 0, 1, 2, 3, 4, 5, 6, 7.</li> <li>Hexagon grid : 0, 1, 2, 3, 4, 5.</li> </ul> </li> </ul> </li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Swipe at chess     <pre><code>board.on('gameobjectswipe', function(swipe, gameObject) {\n// var direction = swipe.direction;\n})\n</code></pre>     or     <pre><code>gameObject.on('board.swipe', function(swipe) {\n// var direction = swipe.direction;\n})\n</code></pre><ul> <li><code>swipe</code> : Swipe behavior.<ul> <li><code>swipe.direction</code> : Integer number.<ul> <li>Quad grid : 0, 1, 2, 3, 4, 5, 6, 7.</li> <li>Hexagon grid : 0, 1, 2, 3, 4, 5.</li> </ul> </li> </ul> </li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#grid-points","title":"Grid points","text":"<ul> <li>Get an array of grid points at tile position (tileX, tileY).     <pre><code>var points = board.getGridPoints(tileX, tileY);\n// var out = board.getGridPoints(tileX, tileY, out);\n// var points = board.getGridPoints(chess, out);  // chess or tileXY\n</code></pre><ul> <li><code>points</code> :\u3000Array of world position <code>{x, y}</code>.</li> </ul> </li> <li>Draw grid polygon on graphics object <pre><code>graphics.strokePoints(points, true);\n</code></pre></li> </ul>"},{"location":"board/#bounds","title":"Bounds","text":""},{"location":"board/#board-bounds","title":"Board bounds","text":"<ul> <li>Get a rectangle of all tiles     <pre><code>var rectangle = board.getBoardBounds();\n// var out = board.getGridBounds(out);\n</code></pre><ul> <li><code>rectangle</code> : Rectangle object.</li> </ul> </li> <li>Draw rectangle on graphics object <pre><code>graphics.strokeRectShape(rectangle);\n</code></pre></li> </ul>"},{"location":"board/#grid-bounds","title":"Grid bounds","text":"<ul> <li>Get a rectangle of a tile     <pre><code>var rectangle = board.getGridBounds(tileX, tileY);\n// var out = board.getGridBounds(tileX, tileY, out);\n// var rectangle = board.getGridBounds(chess, out);  // chess or tileXY\n</code></pre><ul> <li><code>rectangle</code> : Rectangle object.</li> </ul> </li> <li>Draw rectangle on graphics object <pre><code>graphics.strokeRectShape(rectangle);\n</code></pre></li> </ul>"},{"location":"board/#get-board","title":"Get Board","text":"<ul> <li> <p>Static method      <pre><code>var board = Board.GetBoard(chess);\n</code></pre></p> <ul> <li><code>GetBoard</code> is a static method of <code>Board</code> class.</li> </ul> </li> <li> <p>Member method     <pre><code>var board = board.chessToBoard(chess);\n</code></pre></p> </li> <li>Board property<ul> <li>Chess     <pre><code>var board = chess.rexChess.board;\n</code></pre></li> <li>Miniboard <pre><code>var board = miniboard.mainBoard;\n</code></pre></li> </ul> </li> </ul>"},{"location":"board/#other-properties","title":"Other properties","text":"<ul> <li>Scene     <pre><code>var scene = board.scene;\n</code></pre></li> <li>Grid object<ul> <li>Get     <pre><code>var grid = board.grid;\n</code></pre><ul> <li><code>grid</code> : Quad grid, or hexagon grid.</li> </ul> </li> <li>Set     <pre><code>board.setGrid(grid);\n</code></pre><ul> <li><code>grid</code> : Quad grid, or hexagon grid.</li> </ul> </li> </ul> </li> </ul>"},{"location":"bounds/","title":"Bounds","text":""},{"location":"bounds/#introduction","title":"Introduction","text":"<p>Clamp game object inside target bounds.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"bounds/#live-demos","title":"Live demos","text":"<ul> <li>Drag inside bounds</li> <li>Target bounds</li> </ul>"},{"location":"bounds/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bounds/#install-plugin","title":"Install plugin","text":""},{"location":"bounds/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexboundsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboundsplugin.min.js', true);\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = scene.plugins.get('rexboundsplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoundsPlugin from 'phaser3-rex-plugins/plugins/bounds-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBounds',\nplugin: BoundsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = scene.plugins.get('rexBounds').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Bounds from 'phaser3-rex-plugins/plugins/bounds.js';\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = new Bounds(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#create-instance","title":"Create instance","text":"<pre><code>var bounds = scene.plugins.get('rexBounds').add(gameObject, {\n// target: undefined,\n// bounds: undefined,\n// enable: true,\n// alignMode: 0\n});\n</code></pre> <ul> <li><code>target</code> :     <ul> <li>A game object : Update target bounds from this game object in each tick.</li> <li><code>undefined</code>, <code>null</code>, or <code>false</code> : Set target bounds in <code>bounds</code> parameter. Default behavior.</li> </ul> </li> <li><code>bounds</code> : Target bounds used when <code>target</code> is not a game object.<ul> <li>A rectangle object</li> <li>An object :     <pre><code>{\nwidth: 0, height: 0,\nx: 0, y: 0,\ncenterX: 0, centerY: 0,            }\n</code></pre><ul> <li><code>width</code>, <code>height</code> : Size of target bounds.</li> <li><code>x</code>, <code>y</code>, or <code>centerX</code>, <code>centerY</code> : Position of target bounds.</li> </ul> </li> </ul> </li> <li><code>enable</code> :<ul> <li><code>true</code> : Clamp game object at left/right/top/bottom bounds.</li> <li><code>false</code> : Don't clamp game object at any bound</li> <li>An objecct : Set <code>true</code> to clamp at a bound      <pre><code>{\nleft: true,\nright: true,\ntop: true,\nbottom: true\n}\n</code></pre></li> </ul> </li> <li><code>alignMode</code> : <ul> <li><code>0</code>, or <code>'bounds'</code> : Align bounds of game object to target bound. Default behavior.</li> <li><code>1</code>, or <code>'origin'</code> : Set position of game object to target bound.</li> </ul> </li> </ul>"},{"location":"bounds/#target-game-object","title":"Target game object","text":"<ul> <li>Set     <pre><code>bounds.setBoundsTarget(gameObject);\n// bounds.boundsTarget = gameObject;\n</code></pre></li> <li>Clear     <pre><code>bounds.setBoundsTarget();\n// bounds.boundsTarget = undefined;\n</code></pre></li> <li>Get     <pre><code>var gameObject = bounds.boundsTarget;\n</code></pre></li> </ul>"},{"location":"bounds/#target-bounds","title":"Target bounds","text":"<ul> <li>Set     <pre><code>bounds.setBounds(bounds);\n</code></pre><ul> <li><code>bounds</code> : Target bounds used when <code>target</code> is not a game object.<ul> <li>A rectangle</li> <li>An object :     <pre><code>{\nwidth: 0, height: 0,\nx: 0, y: 0,\ncenterX: 0, centerY: 0,            }\n</code></pre><ul> <li><code>width</code>, <code>height</code> : Size of target bounds.</li> <li><code>x</code>, <code>y</code>, or <code>centerX</code>, <code>centerY</code> : Position of target bounds.</li> </ul> </li> </ul> </li> </ul> </li> <li>Get     <pre><code>var rect = bounds.bounds;\n</code></pre><ul> <li><code>rect</code> : A rectangle object</li> </ul> </li> </ul>"},{"location":"bounds/#enable","title":"Enable","text":"<ul> <li>Set<ul> <li>Enable all bounds     <pre><code>bounds.setEnable();\n//  bounds.setEnable(true);\n</code></pre></li> <li>Disable all bounds     <pre><code>bounds.setEnable(false);\n</code></pre></li> <li>Enable bounds via object     <pre><code>bounds.setEnable({\nleft: true,\nright: true,\ntop: true,\nbottom: true\n});\n</code></pre></li> </ul> </li> <li>Get     <pre><code>var enable = bounds.enable;\n</code></pre><ul> <li><code>true</code> : Has any enabled bounds</li> <li><code>false</code> : All bounds are disabled.</li> </ul> </li> <li>Get enabled of a bound     <pre><code>var enableLeftBound = bounds.boundsEnable.left;\nvar enableRightBound = bounds.boundsEnable.right;\nvar enableTopBound = bounds.boundsEnable.top;\nvar enableBottomBound = bounds.boundsEnable.bottom;\n</code></pre></li> </ul>"},{"location":"bounds/#align-mond","title":"Align mond","text":"<ul> <li>Set     <pre><code>bounds.setAlignMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'bounds'</code> : Align bounds of game object to target bound.</li> <li><code>1</code>, or <code>'origin'</code> : Set position of game object to target bound.</li> </ul> </li> <li>Get     <pre><code>var alignMode = bounds.alignMode;\n</code></pre><ul> <li><code>0</code> : Align bounds of game object to target bound.</li> <li><code>1</code> : Set position of game object to target bound.</li> </ul> </li> </ul>"},{"location":"bounds/#hit-result","title":"Hit result","text":"<ul> <li>Game object is hitting any bound     <pre><code>var isHitAny = bounds.isHitAny;\n</code></pre></li> <li>Game object is hitting a bound     <pre><code>var isHitLeft = this.isHitLeft;\nvar isHitRight = this.isHitRight;\nvar isHitTop = this.isHitTop;\nvar isHitBottom = this.isHitBottom;\n</code></pre></li> </ul>"},{"location":"bounds/#event","title":"Event","text":"<ul> <li>On hit any bound     <pre><code>bounds.on('hitany', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit left bound     <pre><code>bounds.on('hitleft', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit right bound     <pre><code>bounds.on('hitright', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit top bound     <pre><code>bounds.on('hittop', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit bottom bound     <pre><code>bounds.on('hitbottom', function(gameObject, bounds) {\n\n})\n</code></pre></li> </ul>"},{"location":"bracketparser/","title":"Bracket parser","text":""},{"location":"bracketparser/#introduction","title":"Introduction","text":"<p>A lite-weight delimiter parser.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"bracketparser/#live-demoes","title":"Live demoes","text":"<ul> <li>Basic</li> <li>Markup text</li> </ul>"},{"location":"bracketparser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bracketparser/#install-plugin","title":"Install plugin","text":""},{"location":"bracketparser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbracketparserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbracketparserplugin.min.js', true);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexbracketparserplugin').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BracketParserPlugin from 'phaser3-rex-plugins/plugins/bracketparser-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBracketParser',\nplugin: BracketParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexBracketParser').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BracketParser from 'phaser3-rex-plugins/plugins/bracketparser.js';\n</code></pre></li> <li>Add parser object     <pre><code>var parser = new BracketParser(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexBracketParser').add({\n// delimiters: '&lt;&gt;', // or ['&lt;', '&gt;']\n// valueConvert: true,\n// translateTagNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>delimiters</code>: String of left-delimiter and right-delimiter.<ul> <li>A single string with 2 characters. Default value is <code>'&lt;&gt;'</code>.</li> <li>A array with 2 strings</li> </ul> </li> <li><code>valueConvert</code> : A callback to convert values.<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li><code>false</code>, or <code>null</code> : Bypass string value.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"bracketparser/#tag-and-content","title":"Tag and content","text":"<p>Assume that left-delimiter and right-delimiter is <code>'&lt;&gt;'</code></p> <ul> <li>Start-tag : <code>'&lt;TAG&gt;'</code><ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code><ul> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code></li> </ul> </li> <li>End-tag : <code>'&lt;\\TAG&gt;'</code></li> <li>Content : Any string outside of tag-start, or tag-end.</li> </ul>"},{"location":"bracketparser/#start-parsing","title":"Start parsing","text":"<pre><code>parser.start(text);\n</code></pre> <p>These events will be emitted under this method.</p>"},{"location":"bracketparser/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>parser.pause();\n</code></pre></li> <li>Pause until event     <pre><code>parser.pauseUntilEvent(eventEmitter, eventName);\n</code></pre><ul> <li>Will invoke      <pre><code>eventEmitter.once(eventName, function() {\nparser.next();\n})\n</code></pre></li> </ul> </li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"bracketparser/#resume","title":"Resume","text":"<pre><code>parser.next();\n</code></pre>"},{"location":"bracketparser/#skip-any-tag-startany-tag-end-event","title":"Skip any-tag-start/any-tag-end event","text":"<pre><code>parser.skipEvent();\n</code></pre> <p>When getting a tag-start, or a tag-end event, parser will emitts </p> <ul> <li>Start-tag : <code>'+TAG'</code>, then <code>'+'</code></li> <li>End-tag : <code>'-TAG'</code>, then <code>'-'</code></li> </ul> <p>Invoke this medthod under <code>'+TAG'</code>, or <code>'-TAG'</code> event to skip <code>'+'</code>, or <code>'-'</code> event.</p>"},{"location":"bracketparser/#status","title":"Status","text":"<ul> <li>Is parsing     <pre><code>var isRunning = parser.isRunning;\n</code></pre><ul> <li><code>true</code> : Has remainder characters</li> <li><code>false</code> : After parsing last character</li> </ul> </li> <li>Is paused     <pre><code>var isPaused = parser.isPaused;\n</code></pre></li> </ul>"},{"location":"bracketparser/#events","title":"Events","text":""},{"location":"bracketparser/#tagscontent","title":"Tags/Content","text":"<ul> <li>Get a specific tag-start<ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code> <pre><code>parser.on('+' + TagName, function(value){ /* ... */ });\n</code></pre></li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code> <pre><code>parser.on('+' + TagName, function(value0, value1, value2){ /* ... */ });\n</code></pre></li> </ul> </li> <li>Get any-tag-start<ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code> <pre><code>parser.on('+', function(tagName, value){ /* ... */ });\n</code></pre></li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code> <pre><code>parser.on('+', function(tagName, value0, value1, value2){ /* ... */ });\n</code></pre></li> </ul> </li> <li>Get a specific tag-end     <pre><code>parser.on('-' + TagName, function(){ /* ... */ });\n</code></pre></li> <li>Get a content     <pre><code>parser.on('content', function(content){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code></li> </ul> </li> <li>Get any-tag-end     <pre><code>parser.on('-', function(tagName){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code></li> <li>Previous Content : <code>parser.lastContent</code></li> </ul> </li> </ul>"},{"location":"bracketparser/#control-flow","title":"Control flow","text":"<ul> <li>Parsing start     <pre><code>parser.on('start', function(){ /* ... */ });\n</code></pre></li> <li>Parsing end     <pre><code>parser.on('complete', function(){ /* ... */ });\n</code></pre></li> <li>On pause     <pre><code>parser.on('pause', function(){ /* ... */ });\n</code></pre></li> <li>On resume     <pre><code>parser.on('resume', function(){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"bracketparser2/","title":"Bracket parser 2","text":""},{"location":"bracketparser2/#introduction","title":"Introduction","text":"<p>A lite-weight delimiter parser.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"bracketparser2/#live-demoes","title":"Live demoes","text":"<ul> <li>Basic</li> </ul>"},{"location":"bracketparser2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bracketparser2/#install-plugin","title":"Install plugin","text":""},{"location":"bracketparser2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbracketparser2plugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbracketparser2plugin.min.js', true);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexbracketparser2plugin').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BracketParserPlugin from 'phaser3-rex-plugins/plugins/bracketparser2-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBracketParser',\nplugin: BracketParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexBracketParser').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BracketParser from 'phaser3-rex-plugins/plugins/bracketparser2.js';\n</code></pre></li> <li>Add parser object     <pre><code>var parser = new BracketParser(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexBracketParser').add({\n// delimiters: '&lt;&gt;', // or ['&lt;', '&gt;']\n// valueConvert: true,\n// translateTagNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>delimiters</code>: String of left-delimiter and right-delimiter.<ul> <li>A single string with 2 characters. Default value is <code>'&lt;&gt;'</code>.</li> <li>A array with 2 strings</li> </ul> </li> <li><code>valueConvert</code> : A callback to convert values.<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li><code>false</code>, or <code>null</code> : Bypass string value.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"bracketparser2/#tag-and-content","title":"Tag and content","text":"<p>Assume that left-delimiter and right-delimiter is <code>'&lt;&gt;'</code></p> <ul> <li>Start-tag : <code>&lt;TAG&gt;</code></li> <li>Start-tag with payload :      <pre><code>&lt;TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n    TAG\n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>payload will be <code>{param0:value0, param1:value1}</code></li> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>String with <code>'...'</code>, or <code>\"...\"</code></li> <li>JSON array with <code>[...]</code></li> <li>JSON object with <code>{...}</code></li> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>End-tag : <code>&lt;\\TAG&gt;</code></li> <li>End-tag with payload     <pre><code>&lt;\\TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n    \\TAG\n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>payload will be <code>{param0:value0, param1:value1}</code></li> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>String with <code>'...'</code>, or <code>\"...\"</code></li> <li>JSON array with <code>[...]</code></li> <li>JSON object with <code>{...}</code></li> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>Content : Any string outside of tag-start, or tag-end.</li> </ul>"},{"location":"bracketparser2/#start-parsing","title":"Start parsing","text":"<pre><code>parser.start(text);\n</code></pre> <p>These events will be emitted under this method.</p>"},{"location":"bracketparser2/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>parser.pause();\n</code></pre></li> <li>Pause until event     <pre><code>parser.pauseUntilEvent(eventEmitter, eventName);\n</code></pre><ul> <li>Will invoke      <pre><code>eventEmitter.once(eventName, function() {\nparser.next();\n})\n</code></pre></li> </ul> </li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"bracketparser2/#resume","title":"Resume","text":"<pre><code>parser.next();\n</code></pre>"},{"location":"bracketparser2/#skip-any-tag-startany-tag-end-event","title":"Skip any-tag-start/any-tag-end event","text":"<pre><code>parser.skipEvent();\n</code></pre> <p>When getting a tag-start, or a tag-end event, parser will emitts </p> <ul> <li>Start-tag : <code>'+TAG'</code>, then <code>'+'</code></li> <li>End-tag : <code>'-TAG'</code>, then <code>'-'</code></li> </ul> <p>Invoke this medthod under <code>'+TAG'</code>, or <code>'-TAG'</code> event to skip <code>'+'</code>, or <code>'-'</code> event.</p>"},{"location":"bracketparser2/#status","title":"Status","text":"<ul> <li>Is parsing     <pre><code>var isRunning = parser.isRunning;\n</code></pre><ul> <li><code>true</code> : Has remainder characters</li> <li><code>false</code> : After parsing last character</li> </ul> </li> <li>Is paused     <pre><code>var isPaused = parser.isPaused;\n</code></pre></li> </ul>"},{"location":"bracketparser2/#events","title":"Events","text":""},{"location":"bracketparser2/#tagscontent","title":"Tags/Content","text":"<ul> <li>Get a specific tag-start<ul> <li>Start-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('+' + TagName, function(payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code></li> </ul> </li> </ul> </li> <li>Get any-tag-start<ul> <li>Start-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('+', function(tagName, payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code> </li> </ul> </li> </ul> </li> <li>Get a specific tag-end<ul> <li>End-tag with payload : <code>'&lt;\\TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('-' + TagName, function(payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code></li> </ul> </li> </ul> </li> <li>Get a content     <pre><code>parser.on('content', function(content){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code> <pre><code>{\nname: '',\npayload: {}\n}\n</code></pre></li> </ul> </li> <li>Get any-tag-end<ul> <li>End-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('-', function(tagName, payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code> </li> </ul> </li> <li>Previous tag-start : <code>parser.lastTagStart</code> <pre><code>{\nname: '',\npayload: {}\n}\n</code></pre></li> <li>Previous Content : <code>parser.lastContent</code></li> </ul> </li> </ul>"},{"location":"bracketparser2/#control-flow","title":"Control flow","text":"<ul> <li>Parsing start     <pre><code>parser.on('start', function(){ /* ... */ });\n</code></pre></li> <li>Parsing end     <pre><code>parser.on('complete', function(){ /* ... */ });\n</code></pre></li> <li>On pause     <pre><code>parser.on('pause', function(){ /* ... */ });\n</code></pre></li> <li>On resume     <pre><code>parser.on('resume', function(){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"bracketparser2/#compare-with-bracket-parser","title":"Compare with bracket-parser","text":"<p>Tag format in </p> <ul> <li>bracket-parser:      <pre><code>&lt;TAG=value0,value1&gt;\n</code></pre><ul> <li>Carried parameters is an array, more compactly.</li> </ul> </li> <li>bracket-parser2:      <pre><code>&lt;TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n  TAG \n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>Carried parameters is a dictionary, more clearly.</li> </ul> </li> </ul>"},{"location":"buffdata/","title":"Buff data","text":""},{"location":"buffdata/#introduction","title":"Introduction","text":"<p>Data manager with buffs, extends from built-in data manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"buffdata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"buffdata/#install-plugin","title":"Install plugin","text":""},{"location":"buffdata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuffdataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuffdataplugin.min.js', true);\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = scene.plugins.get('rexbuffdataplugin').add(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BuffDataPlugin from 'phaser3-rex-plugins/plugins/buffdata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBuffData',\nplugin: BuffDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = scene.plugins.get('rexBuffData').add(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BuffData from 'phaser3-rex-plugins/plugins/buffdata.js';\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = new BuffData(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexBuffData').add(parent);\n// var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter);\n</code></pre> <ul> <li><code>data</code> : Buff data manager</li> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"buffdata/#extend-existing-data-manager","title":"Extend existing data manager","text":"<pre><code>var data = scene.plugins.get('rexBuffData').extend(data);\n</code></pre> <ul> <li><code>data</code> : Existing data manager</li> </ul>"},{"location":"buffdata/#buff","title":"Buff","text":"<p>A value is composed of <code>baseValue</code>, and some <code>buffs</code>, clamped by <code>min</code>, <code>max</code> values.</p> <ul> <li> <p>Base value</p> <ul> <li>Set     <pre><code>data.setBaseValue(key, value);\n</code></pre></li> <li>Remove     <pre><code>data.removeBaseValue(key);\n</code></pre></li> <li>Get     <pre><code>var baseValue = data.getBaseValue(key);\n</code></pre></li> </ul> </li> <li> <p>Buffs, each value can have many buffs, or no buff.</p> <ul> <li>Add/set a buff     <pre><code>data.setBuff(key, buffKey, value);\n</code></pre><ul> <li><code>value</code> :<ul> <li>A number</li> <li>A string for percentage like <code>'10%'</code>, which means that <code>(baseValue * percentage)</code></li> </ul> </li> </ul> </li> <li>Remove a buff of a key     <pre><code>data.removeBuff(key, buffKey);\n</code></pre></li> <li>Remove all buffs of a key     <pre><code>data.removeBuff(key);\n</code></pre></li> <li>Get a buff value     <pre><code>var buffValue = data.getBuffValue(key, buffKey);\n</code></pre></li> </ul> </li> <li>Min, max bounds, optional.<ul> <li>Set     <pre><code>data.setMin(key, min);\n</code></pre> <pre><code>data.setMax(key, max);\n</code></pre> <pre><code>data.setBounds(key, min, max);\n</code></pre><ul> <li><code>min</code>, <code>max</code> : Clamp buffed result value between <code>min</code> and <code>max</code> value. Set <code>undefined</code> to ignore it.</li> </ul> </li> <li>Get     <pre><code>var min = data.getMinBound(key);\nvar max = data.getMaxBound(key);\n</code></pre></li> </ul> </li> <li>Buffed result<ul> <li>Get     <pre><code>var result = data.get(key);\n</code></pre></li> <li>Events</li> </ul> </li> </ul>"},{"location":"buildarcadeobject/","title":"Build arcade object","text":""},{"location":"buildarcadeobject/#introduction","title":"Introduction","text":"<p>Create arcade body, and inject arcade object methods.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"buildarcadeobject/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"buildarcadeobject/#install-plugin","title":"Install plugin","text":""},{"location":"buildarcadeobject/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuildarcadeobjectplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuildarcadeobjectplugin.min.js', true);\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = scene.plugins.get('rexbuildarcadeobjectplugin').build(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import BuildArcadeObjectPlugin from 'phaser3-rex-plugins/plugins/buildarcadeobject-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBuildArcadeObject',\nplugin: BuildArcadeObjectPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import BuildArcadeObject from 'phaser3-rex-plugins/plugins/buildarcadeobject.js';\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = BuildArcadeObject(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#inject-arcade-object-methods","title":"Inject arcade object methods","text":"<ul> <li>Create dynamic arcade body     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject);\n// var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects);\n</code></pre></li> <li>Create static arcade body     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject, true);\n// var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);\n</code></pre></li> </ul>"},{"location":"bullet/","title":"Bullet","text":""},{"location":"bullet/#introduction","title":"Introduction","text":"<p>Move game object toward current angle of game object, with a constant speed.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"bullet/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bullet/#install-plugin","title":"Install plugin","text":""},{"location":"bullet/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbulletplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbulletplugin.min.js', true);\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = scene.plugins.get('rexbulletplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import BulletPlugin from 'phaser3-rex-plugins/plugins/bullet-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBullet',\nplugin: BulletPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = scene.plugins.get('rexBullet').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import Bullet from 'phaser3-rex-plugins/plugins/bullet.js';\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = new Bullet(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#create-instance","title":"Create instance","text":"<pre><code>var bullet = scene.plugins.get('rexBullet').add(gameObject, {\nspeed: 200,\n// wrap: false,\n// padding: 0,\n// enable: true,\n\n// angle: undefined,\n// rotation: undefined\n});\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>false</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>angle</code>, <code>rotation</code> : <ul> <li><code>undefined</code> : Use angle of game object as angle of bullet. Default value.</li> <li>A number : Angle of bullet, in degrees or radians.</li> </ul> </li> </ul>"},{"location":"bullet/#speed","title":"Speed","text":"<ul> <li>Set     <pre><code>bullet.setSpeed(speed);\n// bullet.speed = speed;\n</code></pre></li> <li>Get     <pre><code>var speed = bullet.speed;\n</code></pre></li> </ul>"},{"location":"bullet/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>bullet.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"bullet/#angle","title":"Angle","text":"<ul> <li>Set angle     <pre><code>bullet.setAngle(degrees);\n// bullet.angle = degrees;\n</code></pre>     or     <pre><code>bullet.setRotation(radians);\n// bullet.rotation  = radians;\n</code></pre></li> <li>Use angle of game object     <pre><code>bullet.setAngle();\n// bullet.setRotation();\n</code></pre></li> </ul>"},{"location":"button/","title":"Button","text":""},{"location":"button/#introduction","title":"Introduction","text":"<p>Fires 'click' event when touch releasd after pressed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"button/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"button/#install-plugin","title":"Install plugin","text":""},{"location":"button/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuttonplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuttonplugin.min.js', true);\n</code></pre></li> <li>Add button behavior     <pre><code>var button = scene.plugins.get('rexbuttonplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ButtonPlugin from 'phaser3-rex-plugins/plugins/button-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexButton',\nplugin: ButtonPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add button behavior     <pre><code>var button = scene.plugins.get('rexButtonn').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Button from 'phaser3-rex-plugins/plugins/button.js';\n</code></pre></li> <li>Add button behavior     <pre><code>var button = new Button(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#create-instance","title":"Create instance","text":"<pre><code>var button = scene.plugins.get('rexButton').add(gameObject, {\n// enable: true,\n// mode: 1,              // 0|'press'|1|'release'\n// clickInterval: 100    // ms\n// threshold: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Clickable.</li> <li><code>mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior.</li> </ul> </li> </ul>"},{"location":"button/#events","title":"Events","text":"<ul> <li>Click     <pre><code>button.on('click', function (button, gameObject, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Enable     <pre><code>button.on('enable', function (button, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable     <pre><code>button.on('disable', function (button, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer over     <pre><code>button.on('over', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer out     <pre><code>button.on('out', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer down     <pre><code>button.on('down', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer up     <pre><code>button.on('up', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"button/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = button.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>button.setEnable(enabled);  // enabled: true, or false\n// button.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>button.toggleEnable();\n</code></pre></li> </ul>"},{"location":"button/#set-mode","title":"Set mode","text":"<pre><code>button.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> </ul>"},{"location":"button/#set-click-interval","title":"Set click interval","text":"<pre><code>button.setClickInterval(interval);  // interval in ms\n</code></pre>"},{"location":"button/#set-dragging-threshold","title":"Set dragging threshold","text":"<pre><code>button.setDragThreshold(distance);  // distance in pixels\n</code></pre>"},{"location":"camera-controllor/","title":"Controllor","text":""},{"location":"camera-controllor/#introduction","title":"Introduction","text":"<p>Scroll/zoom camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-controllor/#usage","title":"Usage","text":""},{"location":"camera-controllor/#setup","title":"Setup","text":"<ol> <li>Create controllor     <pre><code>// var cursors = scene.input.keyboard.createCursorKeys();\nvar controls = new Phaser.Cameras.Controls.SmoothedKeyControl({\ncamera: camera,\n\nleft: cursors.left,    // { isDown, isUp }\nright: cursors.right,  // { isDown, isUp }\nup: cursors.up,        // { isDown, isUp }\ndown: cursors.down,    // { isDown, isUp }\nzoomIn: null,          // { isDown, isUp }\nzoomOut: null,         // { isDown, isUp }\n\nzoomSpeed: 0.01,\nminZoom: 0.001,\nmaxZoom: 1000,\n\nacceleration: null,\n// acceleration: {\n//    x: 0,\n//    y: 0\n// }\n\ndrag: null,\n// drag: {\n//    x: 0,\n//    y: 0\n// }\n\nmaxSpeed: null\n// maxSpeed: {\n//    x: 0,\n//    y: 0\n// }\n});\n</code></pre>     or     <pre><code>var controls = new Phaser.Cameras.Controls.FixedKeyControl(config);\n</code></pre></li> <li>Update     <pre><code>scene.update = function (time, delta) {\ncontrols.update(delta);\n}\n</code></pre></li> </ol>"},{"location":"camera-controllor/#other-methods","title":"Other methods","text":"<ul> <li>Start     <pre><code>controls.start();\n</code></pre></li> <li>Stop     <pre><code>controls.stop();\n</code></pre></li> <li>Set camera     <pre><code>controls.setCamera(camera);\n</code></pre></li> </ul>"},{"location":"camera-effects/","title":"Effects","text":""},{"location":"camera-effects/#introduction","title":"Introduction","text":"<p>Effects of camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-effects/#usage","title":"Usage","text":""},{"location":"camera-effects/#fade","title":"Fade","text":"<ul> <li>Fades the Camera in, from the given color over the duration specified.     <pre><code>camera.fadeIn(duration);   // duration in ms\n// camera.fadeIn(duration, red, green, blue, callback, context);\n// red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255.\n</code></pre><ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera out, to the given color over the duration specified.     <pre><code>camera.fadeOut(duration);   // duration in ms\n// camera.fadeOut(duration, red, green, blue, callback, context);\n</code></pre><ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera, from the given color to transparent over the duration specified.     <pre><code>camera.fadeFrom(duration);   // duration in ms\n// camera.fadeFrom(duration, red, green, blue, force, callback, context);\n</code></pre><ul> <li><code>force</code> : Force the effect to start immediately, even if already running.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera, from transparent to the given color over the duration specified.     <pre><code>camera.fade(duration);   // duration in ms\n// camera.fade(duration, red, green, blue, force, callback, context);\n</code></pre><ul> <li><code>force</code> : Force the effect to start immediately, even if already running.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera-effects/#events","title":"Events","text":"<pre><code>camera.on('camerafadeincomplete', camera, fade);\n</code></pre> <pre><code>camera.on('camerafadeoutcomplete', camera, fade);\n</code></pre>"},{"location":"camera-effects/#flash","title":"Flash","text":"<pre><code>camera.flash(duration);   // duration in ms\n// camera.flash(duration, red, green, blue, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_1","title":"Events","text":"<pre><code>camera.on('cameraflashstart', camera, flash, duration, red, green, blue);\n</code></pre> <pre><code>camera.on('cameraflashcomplete', camera, flash);\n</code></pre>"},{"location":"camera-effects/#shake","title":"Shake","text":"<pre><code>camera.shake(duration);   // duration in ms\n// camera.shake(duration, intensity, force, callback, context);  // callback: invoked when completed\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_2","title":"Events","text":"<pre><code>camera.on('camerashakestart', camera, shake, duration, intensity);\n</code></pre> <pre><code>camera.on('camerashakecomplete', camera, shake);\n</code></pre>"},{"location":"camera-effects/#pan","title":"Pan","text":"<pre><code>camera.pan(x, y, duration);   // duration in ms\n// camera.pan(x, y, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The destination x/y coordinate to scroll the center of the Camera viewport to.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, x, y) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_3","title":"Events","text":"<pre><code>camera.on('camerapanstart', camera, pan, duration, x, y);\n</code></pre> <pre><code>camera.on('camerapancomplete', camera, pan);\n</code></pre>"},{"location":"camera-effects/#zoom","title":"Zoom","text":"<pre><code>camera.zoomTo(zoomValue, duration);   // duration in ms\n// camera.zoomTo(zoomValue, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, zoomValue) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_4","title":"Events","text":"<pre><code>camera.on('camerazoomstart', camera, zoom, duration, zoomValue);\n</code></pre> <pre><code>camera.on('camerazoomcomplete', camera, zoom);\n</code></pre>"},{"location":"camera-effects/#rotate-to","title":"Rotate to","text":"<pre><code>camera.rotateTo(radians, shortestPath, duration);   // duration in ms\n// camera.rotateTo(radians, shortestPath, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, angle) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_5","title":"Events","text":"<pre><code>camera.on('camerarotatestart', camera, rotateTo, duration, angle);\n</code></pre> <pre><code>camera.on('camerarotatecomplete', camera, rorotateTotate);\n</code></pre>"},{"location":"camera-effects/#mask","title":"Mask","text":"<ul> <li>Add mask     <pre><code>camera.setMask(mask);\n</code></pre></li> <li>Clear mask     <pre><code>camera.clearMask();\n</code></pre></li> </ul> <p>More detail about mask</p>"},{"location":"camera-shader-effect/","title":"Shader effect","text":""},{"location":"camera-shader-effect/#introduction","title":"Introduction","text":"<p>Shader effect of camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-shader-effect/#usage","title":"Usage","text":""},{"location":"camera-shader-effect/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import PostFxClass from 'path';\nvar config = {\n// ...\npipeline: [PostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ul> <p>Some post-fx pipelines:</p> <ul> <li>Barrel: Barrel post processing filter.</li> <li>Color replace: Replace color post processing filter.</li> <li>Cross-stitching: Cross-stitching post processing filter.</li> <li>Dissolve: Dissolve transition post processing filter.</li> <li>Fish eye: Fish-eye post processing filter.</li> <li>Glow-filter: Glow post processing filter.</li> <li>Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Gray-scale: Gray scale post processing filter.</li> <li>Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Horri-fi: 6-in-1 post processing filter.</li> <li>Inverse: Inverse color post processing filter.</li> <li>Kawase-blur: Kawase-blur post processing filter.</li> <li>Pixelation: Pixelation post processing filter.</li> <li>Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shockwave: Shockwave post processing filter.</li> <li>Split: Split image into 4 parts.</li> <li>Swirl: Swirl post processing filter.</li> <li>Warp: Warp post processing filter. </li> </ul>"},{"location":"camera-shader-effect/#add-post-fx-pipeline","title":"Add post-fx pipeline","text":"<pre><code>camera.setPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>PostFxClass</code> : Class of post-fx pipeline.</li> </ul>"},{"location":"camera-shader-effect/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<ul> <li>Remove a kind of post-fx pipeline     <pre><code>camera.removePostPipeline(PostFxClass);\n</code></pre></li> <li>Remove all post-fx pipelines     <pre><code>camera.resetPipeline(true);\n</code></pre>     or     <pre><code>camera.postPipelines = [];\ncamera.hasPostPipeline = false;\n</code></pre></li> </ul>"},{"location":"camera-shader-effect/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<pre><code>var pipelineInstance = camera.getPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>pipelineInstance</code> : <ul> <li>A pipeline instance</li> <li>An array of pipeline instances</li> </ul> </li> </ul>"},{"location":"camera-shader-effect/#add-effect-properties","title":"Add effect properties","text":"<p>See Add effect properties behavior</p>"},{"location":"camera/","title":"Camera","text":""},{"location":"camera/#introduction","title":"Introduction","text":"<p>Camera to display game objects, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera/#usage","title":"Usage","text":""},{"location":"camera/#get-camera","title":"Get camera","text":"<p>Each scene has one or more cameras.</p> <ul> <li>Main camera     <pre><code>var camera = scene.cameras.main;\n</code></pre></li> <li>Add new camera     <pre><code>var camera = scene.cameras.add();\n// var camera = scene.cameras.add(x, y, width, height);\n</code></pre></li> <li>Add existed camera     <pre><code>scene.cameras.addExisting(camera);\n</code></pre></li> </ul>"},{"location":"camera/#create-cameras-from-json","title":"Create cameras from JSON","text":"<pre><code>scene.cameras.fromJSON(config);\n// scene.cameras.fromJSON(configArray);\n</code></pre> <ul> <li><code>config</code> :     <pre><code>{\nname: '',\nx: 0,\ny: 0,\nwidth: scene.sys.scale.width,\nheight: scene.sys.scale.height,\nzoom: 1,\nrotation: 0,\nscrollX: 0,\nscrollY: 0,\nroundPixels: false,\nvisible: true,\nbackgroundColor: false,\nbounds: null, // {x, y, width, height}\n}\n</code></pre></li> </ul>"},{"location":"camera/#remove-camera","title":"Remove camera","text":"<pre><code>scene.cameras.remove(camera);\n</code></pre>"},{"location":"camera/#destroy-camera","title":"Destroy camera","text":"<pre><code>camera.destroy();\n</code></pre>"},{"location":"camera/#view-port","title":"View port","text":"<ul> <li>Set     <pre><code>camera.setViewport(top, left, width, height);\n</code></pre>     or     <pre><code>camera.setPosition(top, left);\n// camera.x = top;\n// camera.y = left;\n</code></pre> <pre><code>camera.setSize(width, height);\n// camera.width = width;\n// camera.height = height;\n</code></pre></li> <li>Get<ul> <li>Position<ul> <li>Top-left     <pre><code>var top = camera.x;\nvar left = camera.y;\n</code></pre></li> <li>Center, relative to the top-left of the game canvas.     <pre><code>var x = camera.centerX;\nvar y = camera.centerY;\n</code></pre></li> </ul> </li> <li>Width &amp; height     <pre><code>var width = camera.width;\nvar height = camera.height;\n</code></pre> <pre><code>var displayWidth = camera.displayWidth;\nvar displayHeight = camera.displayHeight;\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera/#zoom","title":"Zoom","text":"<ul> <li>Set     <pre><code>camera.setZoom(zoomValue);  // The minimum it can be is 0.001.\ncamera.zoom = zoomValue;\n</code></pre></li> <li>Get     <pre><code>var zoomValue = camera.zoom;\n</code></pre></li> </ul>"},{"location":"camera/#rotation","title":"Rotation","text":"<ul> <li>Set     <pre><code>camera.setAngle(angle);  // angle in degree\ncamera.setRotation(angle);  // angle in radians\ncamera.rotation = angle; // angle in radians\n</code></pre></li> <li>Get     <pre><code>var angle = camera.rotation;  // angle in radians\n</code></pre></li> </ul>"},{"location":"camera/#origin","title":"Origin","text":"<ul> <li>Set     <pre><code>camera.setOrigin(x, y);\n// camera.originX = 0.5;\n// camera.originY = 0.5;\n</code></pre></li> <li>Get     <pre><code>var originX = camera.originX\nvar originY = camera.originY\n</code></pre></li> </ul>"},{"location":"camera/#visible","title":"Visible","text":"<p>A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests.</p> <pre><code>camera.setVisible(value);\n// camera.visible = value\n</code></pre> <pre><code>var visible = camera.visible;\n</code></pre>"},{"location":"camera/#alpha","title":"Alpha","text":"<pre><code>camera.setAlpha(value);\n// camera.alpha = value;\n</code></pre> <pre><code>var alpha = camera.alpha;\n</code></pre>"},{"location":"camera/#scroll","title":"Scroll","text":"<pre><code>camera.setScroll(x, y)\n</code></pre> <pre><code>camera.scrollX = scrollX;\ncamera.scrollY = scrollY;\n</code></pre> <pre><code>camera.centerToBounds();\n</code></pre> <pre><code>camera.centerOn(x, y);  // centered on the given coordinates\n</code></pre> <pre><code>camera.centerOnX(x);\ncamera.centerOnY(y);\n</code></pre> <pre><code>camera.centerToSize();\n</code></pre>"},{"location":"camera/#follow-game-object","title":"Follow game object","text":"<ul> <li>Start following     <pre><code>camera.startFollow(gameObject);\n// camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY);  // \n</code></pre><ul> <li><code>roundPx</code> : set true to round the camera position to integers</li> <li><code>lerpX</code>, <code>lerpY</code> : A value between 0 and 1. <ul> <li><code>1</code> : Camera will instantly snap to the target coordinates.</li> <li><code>0.1</code> : Camera will more slowly track the target, giving a smooth transition.</li> </ul> </li> <li><code>offsetX</code>, <code>offsetY</code> : The horizontal/vertical offset from the camera follow target.x position.</li> </ul> </li> <li>Stop following     <pre><code>camera.stopFollow();\n</code></pre></li> <li>Set follow offset     <pre><code>camera.setFollowOffset(x, y);\n</code></pre></li> <li>Set lerp     <pre><code>camera.setLerp(x, y);\n</code></pre><ul> <li><code>1</code> : Camera will instantly snap to the target coordinates.</li> <li><code>0.1</code> : Camera will more slowly track the target, giving a smooth transition.</li> </ul> </li> <li>Deadzone     <pre><code>camera.setDeadzone(width, height);\n</code></pre>     If the target moves outside of this area, the camera will begin scrolling in order to follow it.<ul> <li>Boundaries     <pre><code>var left = camera.deadzone.left;\nvar right = camera.deadzone.right;\nvar top = camera.deadzone.top;\nvar bootom = camera.deadzone.bottom;\n</code></pre></li> <li>Clear deadzone     <pre><code>camera.setDeadzone();\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera/#events","title":"Events","text":"<ul> <li>Follower Update     <pre><code>camera.on('followupdate', function(camera, gameObject){ })\n</code></pre></li> </ul>"},{"location":"camera/#scroll-factor","title":"Scroll factor","text":"<p>See Scroll factor in game object.</p>"},{"location":"camera/#bounds","title":"Bounds","text":"<ul> <li>Set     <pre><code>camera.setBounds(x, y, width, height)\n</code></pre></li> <li>Get     <pre><code>var bounds = camera.getBounds();  // bounds: a rectangle object\n// var out = camera.getBounds(out);\n</code></pre></li> </ul>"},{"location":"camera/#world-coordinates","title":"World coordinates","text":"<ul> <li>World view, a rectangle object <pre><code>var worldView = camera.worldView;\nvar x = worldView.x;\nvar y = worldView.y;\nvar width = worldView.width;  // displayWidth\nvar height = worldView.height; // displayHeight\nvar left = worldView.left;  // x\nvar right = worldView.right;  // x + width\nvar top = worldView.top;  // y\nvar bottom = worldView.bottom;  // y + height\nvar centerX = worldView.centerX;\nvar centerY = worldView.centerY;\nvar isInside = worldView.contains(x, y);\nvar randPoint = worldView.getRandomPoint(point); // point: {x, y}\n</code></pre></li> <li>Middle point     <pre><code>var x = camera.midPoint.x;\nvar y = camera.midPoint.y;\n</code></pre></li> <li>Get world position     <pre><code>var out = camera.getWorldPoint(x, y);\n// var out = camera.getWorldPoint(x, y, out);\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Position of camera.</li> <li><code>out</code> : World position <code>{x, y}</code></li> </ul> </li> </ul>"},{"location":"camera/#set-background-color","title":"Set background color","text":"<pre><code>camera.setBackgroundColor(color);\n</code></pre>"},{"location":"camera/#ignore-game-object","title":"Ignore game object","text":"<p>Ignored game objects won't show at that camera.</p> <pre><code>camera.ignore(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> :<ul> <li>A game object</li> <li>An array of game objects</li> <li>A group</li> </ul> </li> </ul>"},{"location":"camera/#get-cameras-below-pointer","title":"Get cameras below pointer","text":"<pre><code>var cameras = scene.cameras.getCamerasBelowPointer(pointer);\n</code></pre> <ul> <li><code>cameras</code> : An array of cameras.</li> <li><code>pointer</code> : <code>{x, y}</code></li> </ul>"},{"location":"camera/#pause-resume","title":"Pause, resume","text":"<ul> <li>Pause     <pre><code>camera.renderToTexture = false; // Pause\n</code></pre></li> <li>Resume     <pre><code>camera.renderToTexture = true; // Resume\n</code></pre></li> </ul>"},{"location":"camera/#clear","title":"Clear","text":"<pre><code>camera.clearRenderToTexture();\n</code></pre>"},{"location":"camera/#children","title":"Children","text":""},{"location":"camera/#visible-children","title":"Visible children","text":"<ul> <li>Filter visible children     <pre><code>var visible = scene.cameras.getVisibleChildren(children, camera);\n</code></pre></li> <li>Get all visible children     <pre><code>var visible = scene.cameras.getVisibleChildren(scene.sys.displayList.list, camera);\n</code></pre></li> </ul> <p>See also: gameObject.willRender(camera)</p>"},{"location":"camera/#render-children","title":"Render children","text":"<pre><code>var children = camera.renderList;\n</code></pre> <p>Read only.</p>"},{"location":"canvas-circularprogress/","title":"Circular progres","text":""},{"location":"canvas-circularprogress/#introduction","title":"Introduction","text":"<p>Circular progress bar on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-circularprogress/#live-demos","title":"Live demos","text":"<ul> <li>Circular-progress</li> </ul>"},{"location":"canvas-circularprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-circularprogress/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-circularprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcircularprogresscanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcircularprogresscanvasplugin.min.js', true);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircularProgressCanvasPlugin from 'phaser3-rex-plugins/plugins/circularprogresscanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressCanvasPlugin',\nplugin: CircularProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircularProgressCanvas from 'phaser3-rex-plugins/plugins/circularprogresscanvas.js';\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = new CircularProgressCanvas(scene, x, y, radius, color, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressCanvasPlugin',\nplugin: CircularProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"canvas-circularprogress/#create-instance","title":"Create instance","text":"<pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, barColor, value, {\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\n// textFont: ,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\n// textFont: ,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>radius</code> : Radius of this circle. Size will be <code>(radius*2, radius*2)</code>.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>textColor</code> : Color of display text. Default is <code>undefined</code>.</li> <li><code>textStrokeColor</code>, <code>textStrokeThickness</code> : Stroke color, stroke line width of display text. Default is <code>undefined</code>.</li> <li><code>textSize</code>, <code>textFamily</code>, <code>textStyle</code> : Size, family, style of display text.</li> <li><code>textFormatCallback</code>, <code>textFormatCallbackScope</code> : Formating callback of display text. ex:     <pre><code>function(value) {\nreturn Math.floor(value * 100).toString();\n}\n</code></pre>     Default value is <code>undefined</code>.</li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, circularProgress) {\n}\n</code></pre></li> </ul> <p>Add circular-progress from JSON</p> <pre><code>var circularProgress = scene.make.rexCircularProgressCanvas({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"canvas-circularprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircularProgressCanvas extends CircularProgressCanvas {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circularProgress = new MyCircularProgressCanvas(scene, x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = circularProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = circularProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = circularProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>circularProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>circularProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>circularProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>circularProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>circularProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>circularProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>circularProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = circularProgress.radius;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setRadius(radius);\n// circularProgress.radius = radius;\n</code></pre><ul> <li>Also resize this game object to <code>(radius*2, radius*2)</code></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#circular-track","title":"Circular track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = circularProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setTrackColor(trackColor);\n// circularProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#circular-bar","title":"Circular bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = circularProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setBarColor(barColor);\n// circularProgress.barColor = barColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> <li>Start angle<ul> <li>Get     <pre><code>var startAngle = circularProgress.startAngle;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setStartAngle(startAngle);\ncircularProgress.startAngle = startAngle;\n</code></pre><ul> <li><code>startAngle</code> : Start angle of circular bar, in radians.</li> </ul> </li> </ul> </li> <li>Anticlockwise<ul> <li>Get     <pre><code>var anticlockwise = circularProgress.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAnticlockwise(anticlockwise);\n// circularProgress.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#center-circle","title":"Center circle","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var centerColor = circularProgress.centerColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setCenterColor(centerColor);\n// circularProgress.centerColor = centerColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#display-text","title":"Display text","text":"<ul> <li>Fill color     <pre><code>circularProgress.setTextColor(color);\n</code></pre></li> <li>Stroke color     <pre><code>circularProgress.setTextStrokeColor(color, thickness);\n</code></pre></li> <li>Font     <pre><code>circularProgress.setTextFont(fontSize, fontFamily, fontStyle);\n</code></pre></li> <li>Format callback     <pre><code>circularProgress.setTextFormatCallback(callback, scope);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(value) {\nreturn Math.floor(value * 100).toString(); }\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>circularProgress.on('valuechange', function(newValue, oldValue, circularProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#compare-with-circular-progress-shape","title":"Compare with Circular-progress shape","text":"<ul> <li>Circular-progress canvas creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Circular-progress canvas can draw text directly, circular progress shape can't draw any text.</li> </ul>"},{"location":"canvas-data/","title":"Canvas image data","text":""},{"location":"canvas-data/#introduction","title":"Introduction","text":"<p>Get image data from texture, or text object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"canvas-data/#live-demos","title":"Live demos","text":"<ul> <li>Text to bit-map</li> <li>Texture to color-map</li> </ul>"},{"location":"canvas-data/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-data/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-data/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasdataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasdataplugin.min.js', true);\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasData = scene.plugins.get('rexcanvasdataplugin').canvasObjectToBitmap(gameObject);\nvar canvasData = scene.plugins.get('rexcanvasdataplugin').textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasDataPlugin from 'phaser3-rex-plugins/plugins/canvasdata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasData',\nplugin: CanvasDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);\nvar canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasData from 'phaser3-rex-plugins/plugins/canvasdata.js';\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasdata = CanvasData.canvasObjectToBitmap(gameObject);\nvar canvasdata = CanvasData.textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#textcanvas-object-bitmap","title":"Text/canvas object -&gt; Bitmap","text":"<pre><code>var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);\n</code></pre> <ul> <li><code>gameObject</code> : <ul> <li>Any kind of text object : Text object, bbcode text object, or tag text object.</li> <li>Canvas object</li> </ul> </li> <li>For each pixel data     <pre><code>canvasData.forEach(function(value, x, y, canvasData){\n\n}, scope);\n</code></pre><ul> <li><code>value</code> : <code>true</code>, or <code>false</code></li> </ul> </li> </ul>"},{"location":"canvas-data/#texture-color-map","title":"Texture -&gt; Color map","text":"<ul> <li>Texture -&gt; Color map     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(textureKey, frameName, out);\n</code></pre></li> <li>Texture of game object -&gt; Color map     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(gameObject);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);\n</code></pre></li> <li>For each pixel data     <pre><code>canvasData.forEach(function(value, x, y, canvasData){\n\n}, scope);\n</code></pre><ul> <li><code>value</code> : Color32 integer = color integer + (alpha &lt;&lt; 24)<ul> <li>Get color integer (0 ~ 0xffffff)     <pre><code>var color = value &amp; 0xffffff;\n</code></pre>     or     <pre><code>var color = canvasData.color32ToColorInt(value);\n</code></pre></li> <li>Get alpha (0 ~ 0xff)     <pre><code>var alpha = value &gt;&gt;&gt; 24;\n</code></pre> <pre><code>var alpha = canvasData.color32ToAlpha(value);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"canvas-data/#canvas-data","title":"Canvas data","text":""},{"location":"canvas-data/#for-each-pixel","title":"For each pixel","text":"<ul> <li>For each pixel data     <pre><code>canvasData.forEach(callback, scope);\n</code></pre><ul> <li><code>callback</code> : Callback for each pixel     <pre><code>function(value, x, y, canvasData) {\n\n}\n</code></pre></li> </ul> </li> <li>For each non zero pixel data     <pre><code>canvasData.forEachNonZero(callback, scope);\n</code></pre></li> </ul>"},{"location":"canvas-data/#get-pixel-data","title":"Get pixel data","text":"<pre><code>var data = canvasData.get(x, y);\n</code></pre> <ul> <li><code>data</code> :<ul> <li><code>true</code>, or <code>false</code> in result of <code>canvasObjectToBitmap</code> method</li> <li>Color32 in result of <code>textureTColorMap</code> method</li> </ul> </li> </ul>"},{"location":"canvas-data/#size","title":"Size","text":"<pre><code>var width = canvasData.width;\nvar height = canvasData.height;\n</code></pre>"},{"location":"canvas-lineprogress/","title":"Line progres","text":""},{"location":"canvas-lineprogress/#introduction","title":"Introduction","text":"<p>Horizontal line progress bar filled with gradient color on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-lineprogress/#live-demos","title":"Live demos","text":"<ul> <li>Line-progress</li> </ul>"},{"location":"canvas-lineprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-lineprogress/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-lineprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineprogresscanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineprogresscanvasplugin.min.js', true);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LineProgressCanvasPlugin from 'phaser3-rex-plugins/plugins/lineprogresscanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressCanvasPlugin',\nplugin: LineProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LineProgressCanvas from 'phaser3-rex-plugins/plugins/lineprogresscanvas.js';\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = new LineProgressCanvas(scene, x, y, width, height, barColor, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressCanvasPlugin',\nplugin: LineProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"canvas-lineprogress/#create-instance","title":"Create instance","text":"<pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, {    barColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var lineProgress = scene.add.rexLineProgressCanvas({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\nbarColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>barColor</code>, <code>barColor2</code>, <code>isHorizontalGradient</code> : Fill color of line bar, in number or css string value. Assign gradient start color by <code>barColor2</code>.</li> <li><code>trackColor</code> : Fill color of line track, in number or css string value.</li> <li><code>trackStrokeColor</code> : Stroke color of track, in number or css string value.</li> <li><code>trackStrokeThickness</code> : Stroke line width of track.</li> <li><code>skewX</code> : Horizontal skew of track and bar.</li> <li><code>rtl</code> : <ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, lineProgress) {\n}\n</code></pre></li> </ul> <p>Add line-progress from JSON</p> <pre><code>var lineProgress = scene.make.rexLineProgressCanvas({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\nbarColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"canvas-lineprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLineProgressCanvas extends LineProgressCanvas {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var lineProgress = new MyLineProgressCanvas(scene, x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = lineProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = lineProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = lineProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>lineProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>lineProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>lineProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>lineProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>lineProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>lineProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>lineProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#line-track","title":"Line track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = lineProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(trackColor);\n// lineProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Stroke<ul> <li>Get     <pre><code>var trackStrokeColor = lineProgress.trackStrokeColor;\nvar trackStrokeThickness = lineProgress.trackStrokeThickness;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(color);\nlineProgress.setTrackStroke(lineWidth, color);\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#line-bar","title":"Line bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = lineProgress.barColor;\nvar barColor2 = lineProgress.barColor2;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setBarColor(barColor, barColor2);\n// lineProgress.barColor = barColor;\n// lineProgress.barColor2 = barColor2;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#horizontal-skew","title":"Horizontal skew","text":"<ul> <li>Get     <pre><code>var skewX = lineProgress.skewX;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setSkewX(skewX);\n// lineProgress.skewX = skewX;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#right-to-left","title":"Right-to-left","text":"<ul> <li>Get     <pre><code>var rtl = lineProgress.rtl;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setRTL(rtl);\n// lineProgress.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>lineProgress.on('valuechange', function(newValue, oldValue, lineProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = lineProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setAlpha(alpha);\n// lineProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#compare-with-line-progress-shape","title":"Compare with Line-progress shape","text":"<ul> <li>Line-progress canvas creates a canvas then draw on that canvas, line progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Line-progress canvas can fill gradient color, line progress shape only can fill 1 color.</li> </ul>"},{"location":"canvas-roundrectangle/","title":"Round rectangle","text":""},{"location":"canvas-roundrectangle/#introduction","title":"Introduction","text":"<p>Round rectangle on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-roundrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Round rectangle</li> </ul>"},{"location":"canvas-roundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-roundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-roundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexroundrectanglecanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexroundrectanglecanvasplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RoundRectanglePlugin from 'phaser3-rex-plugins/plugins/roundrectanglecanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRoundRectangleCanvasPlugin',\nplugin: RoundRectangleCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RoundRectangleCanvas from 'phaser3-rex-plugins/plugins/roundrectanglecanvas.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new RoundRectangleCanvas(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner            </li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>fillStyle</code> : Fill color in number or css string value, or a callback<ul> <li>Number, or css string value : Color value</li> <li>Callback :      <pre><code>function(canvas, context) {\n// Radial gradient\nvar grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);\ngrd.addColorStop(0, color0);\ngrd.addColorStop(1, color1);\nreturn grd;\n}\n</code></pre></li> </ul> </li> <li><code>strokeStyle</code> : Stroke color in number or css string value.</li> <li><code>lineWidth</code> : Stroke line width.</li> <li><code>fillColor2</code> : Gradient color in number or css string value.</li> <li><code>isHorizontalGradient</code> :<ul> <li><code>true</code> : Horizontal gradient.</li> <li><code>false</code> : Vertical gradient.</li> </ul> </li> </ul> <p>Note</p> <p>If <code>radius</code> &gt;= 0, draw convex corner, else draw concave corner</p>"},{"location":"canvas-roundrectangle/#deform","title":"Deform","text":"<ul> <li>Rectangle, set radius of 4 corners to <code>0</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, 0, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Circle, set width and height to <code>2*radius</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radius), (2*radius), radius, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Ellipse, set width and height to <code>2*radiusX</code>, <code>2*radiusY</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radiusX), (2*radiusX), {x: radiusX, y: radiusY}, fillColor, fillAlpha);\n</code></pre></li> <li>Rhombus, set width and height to <code>2*radius</code>, and assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radius), (2*radius), {\nradius: radius,\niteration: 0\n}, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Octagon, assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, {\nradius: radius,\niteration: 0\n}, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangleCanvas extends RexPlugins.GameObjects.RoundRectangleCanvas {\nconstructor(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient) {\nsuper(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangleCanvas(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var fillStyle = rect.fillStyle;\nvar fillColor2 = rect.fillColor2;\nvar isHorizontalGradient = rect.isHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(fillStyle);\n// rect.setFillStyle(fillStyle, fillColor2, isHorizontalGradient);\n</code></pre><ul> <li><code>fillStyle</code> : Fill color in number or css string value, or a callback<ul> <li>Number, or css string value : Color value</li> <li>Callback :      <pre><code>function(canvas, context) {\n// Radial gradient\nvar grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);\ngrd.addColorStop(0, color0);\ngrd.addColorStop(1, color1);\nreturn grd;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var strokeStyle = rect.strokeStyle;\nvar lineWidth = rect.lineWidth;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(strokeStyle, lineWidth);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-roundrectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#radius","title":"Radius","text":"<ul> <li>Set     <pre><code>rect.setRadius(value);\n</code></pre>     or     <pre><code>rect.radius = radius;\n</code></pre><ul> <li><code>radius</code> :<ul> <li>Number : 4 corners with the same radius.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner        </li> </ul> </li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"canvas-roundrectangle/#iteration","title":"Iteration","text":"<ul> <li>Get     <pre><code>var iteration = rect.iteration;\n</code></pre></li> <li>Set     <pre><code>rect.setIteration(value);\n</code></pre>     or     <pre><code>rect.iteration = value;\n</code></pre></li> </ul> <p>Number of interpolation points in each round corner. Default value is <code>4</code>.</p> <ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul>"},{"location":"canvas-roundrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"canvas-roundrectangle/#compare-with-shape-roundrectangle","title":"Compare with Shape-Roundrectangle","text":"<ul> <li>Gradient<ul> <li>Canvas-RoundRectangle can fill with gradient color.</li> <li>Shape-Roundrectangle can't fill gradient color.</li> </ul> </li> <li>Drawing method<ul> <li>Canvas-RoundRectangle draw shape on canvas, then map this canvas to frame buffer.</li> <li>Shape-Roundrectangle draw shape on frame buffer directly without drawing to canvas first.</li> </ul> </li> </ul>"},{"location":"canvas-texture/","title":"Canvas texture","text":""},{"location":"canvas-texture/#introduction","title":"Introduction","text":"<p>Canvas Canvas Texture stored in texture cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"canvas-texture/#usage","title":"Usage","text":""},{"location":"canvas-texture/#create-canvas-texture","title":"Create canvas texture","text":"<pre><code>var texture = scene.textures.createCanvas(key, width, height);\n</code></pre>"},{"location":"canvas-texture/#get-canvas-element","title":"Get canvas element","text":"<pre><code>var canvas = texture.getCanvas();\nvar context = texture.getContext();\n</code></pre> <p>Canvas api</p>"},{"location":"canvas-texture/#draw-frame","title":"Draw frame","text":"<pre><code>texture.drawFrame(key, frame, x, y);\n// texture.drawFrame(key, frame, x, y, update);\n</code></pre> <ul> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#draw-image","title":"Draw image","text":"<pre><code>texture.draw(x, y, source);\n// texture.draw(x, y, source, update);\n</code></pre> <ul> <li><code>source</code> : The HTML Image element, or HTML Canvas element to draw to this canvas.</li> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#clear","title":"Clear","text":"<pre><code>texture.clear();\n</code></pre> <pre><code>texture.clear(x, y, width, height);\n// // texture.clear(x, y, width, height, update);\n</code></pre> <ul> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#refresh-texture","title":"Refresh texture","text":"<pre><code>texture.refresh();\n</code></pre>"},{"location":"canvas-texture/#color","title":"Color","text":"<ul> <li>Set     <pre><code>texture.setPixel(x, y, red, green, blue);\n// texture.setPixel(x, y, red, green, blue, alpha);\n</code></pre></li> <li>Get     <pre><code>var color = texture.getPixel(x, y);\n// var color = texture.getPixel(x, y, color);\n</code></pre> <pre><code>var colors = texture.getPixels(x, y, width, height);\n</code></pre><ul> <li><code>colors</code> : <code>[{x, y, color, alpha}, ...]</code></li> </ul> </li> </ul>"},{"location":"canvas-texture/#image-data","title":"Image data","text":"<ul> <li>Set     <pre><code>texture.putData(imageData, x, y);\n</code></pre></li> <li>Get     <pre><code>var imageData = texture.getData(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas-texture/#add-frame","title":"Add frame","text":"<pre><code>texture.add(name, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>name</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code> : The x coordinate of the top-left of this Frame.</li> <li><code>y</code> : The y coordinate of the top-left of this Frame.</li> <li><code>width</code> : The width of this Frame.</li> <li><code>height</code> : The height of this Frame.</li> </ul>"},{"location":"canvas/","title":"Canvas","text":""},{"location":"canvas/#introduction","title":"Introduction","text":"<p>Drawing on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas/#live-demos","title":"Live demos","text":"<ul> <li>Kaleidoscope</li> <li>chartjs</li> </ul>"},{"location":"canvas/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas/#install-plugin","title":"Install plugin","text":""},{"location":"canvas/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasplugin.min.js', true);\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasPlugin from 'phaser3-rex-plugins/plugins/canvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasPlugin',\nplugin: CanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Canvas from 'phaser3-rex-plugins/plugins/canvas.js';\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = new Canvas(scene, x, y, width, height);\nscene.add.existing(canvas);\n</code></pre></li> </ul>"},{"location":"canvas/#create-instance","title":"Create instance","text":"<pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre> <p>Add canvas from JSON</p> <pre><code>var canvas = scene.make.rexCanvas({\nx: 0,\ny: 0,\nwidth: 256,\nheight: 256,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"canvas/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCanvas extends Canvas {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var canvas = new MyCanvas(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#clear-or-fill-canvas","title":"Clear or fill canvas","text":"<ul> <li>Clear     <pre><code>canvas.clear();\n</code></pre></li> <li>Fill color     <pre><code>canvas.fill(color);\n</code></pre></li> </ul>"},{"location":"canvas/#update-canvas","title":"Update canvas","text":"<ol> <li>Get canvas elemet     <pre><code>var canvasElem = canvas.getCanvas();\nvar context = canvas.getContext();\n</code></pre>     or     <pre><code>var canvaesElem = canvas.canvas;\nvar context = canvas.context;\n</code></pre></li> <li>Draw on context</li> </ol>"},{"location":"canvas/#update-display-texture","title":"Update display texture","text":"<ul> <li>Update texture when rendering     <pre><code>canvas.needRedraw();\n</code></pre>     or     <pre><code>canvas.dirty = true;\n</code></pre></li> <li>Update texture now     <pre><code>canvas.updateTexture();\n</code></pre>     or update canvas and texture     <pre><code>canvas.updateTexture(function(canvasElem, context) { });\n// canvas.updateTexture(callback, scope);\n</code></pre></li> </ul>"},{"location":"canvas/#load-or-save-texture","title":"Load or save texture","text":"<ul> <li>Save canvas to texuture     <pre><code>canvas.generateTexture(key);\n// canvas.generateTexture(key, x, y, width, height);\n</code></pre></li> <li>Copy canvas from texture     <pre><code>canvas.loadTexture(key, frame);\n</code></pre></li> </ul>"},{"location":"canvas/#paste-frame","title":"Paste frame","text":"<pre><code>canvas.drawFrame(key, frame);\n// canvas.drawFrame(key, frame, dx, dy, dWidth, dHeight);\n// canvas.drawFrame(key, frame, dx, dy, dWidth, dHeight, sxOffset, syOffset, sWidth, sHeight);\n</code></pre> <ul> <li><code>dx</code>, <code>dy</code> : Top-left position in this canvas. Default value is <code>0</code>, <code>0</code>.</li> <li><code>dWidth</code>, <code>dHeight</code> : The size to draw the image in this canvas. Default value is origin size of frame.</li> <li><code>sxOffset</code>, <code>syOffset</code> : Offset position of source frame.  Default value is <code>0</code>, <code>0</code></li> <li><code>sWidth</code>, <code>sHeight</code> : The size of the sub-rectangle of the source frame to draw into this canvas. Default value is origin size of frame.</li> </ul>"},{"location":"canvas/#data-url","title":"Data URL","text":"<ul> <li>Load image from URL     <pre><code>canvas.loadFromURL(url);\n// canvas.loadFromURL(url, callback);\n</code></pre>     or     <pre><code>canvas.loadFromURLPromise(url)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>url</code> : Image url/uri(base64 string)</li> <li><code>callback</code> : Load complete callback.</li> </ul> </li> <li>Get data URL of image     <pre><code>var dataURL = canvas.getDataURL();\n// var dataURL = canvas.getDataURL(type, encoderOptions);\n</code></pre><ul> <li><code>dataURL</code> : A base64 string.</li> <li><code>type</code> : A DOMString indicating the image format. The default format type is image/png.</li> <li><code>encoderOptions</code> : A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.</li> </ul> </li> </ul>"},{"location":"canvas/#file","title":"File","text":"<ul> <li>Load image from File object     <pre><code>canvas.loadFromFile(file);\n// canvas.loadFromFile(file, callback);\n</code></pre>     or     <pre><code>canvas.loadFromFilePromise(file)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>file</code> : File object</li> <li><code>callback</code> : Load complete callback.</li> </ul> </li> </ul>"},{"location":"canvas/#pixel-color","title":"Pixel color","text":"<ul> <li>Get color     <pre><code>var color = canvas.getPixel(x, y);\n</code></pre><ul> <li><code>color</code> : Color object<ul> <li><code>color.red</code>, <code>color.green</code>, <code>color.blue</code>, <code>color.alpha</code></li> </ul> </li> </ul> </li> <li>Set color     <pre><code>canvas.setPixel(x, y, r, g, b);\n// canvas.setPixel(x, y, r, g, b, a);\n</code></pre>     or     <pre><code>canvas.setPixel(x, y, color);\n</code></pre><ul> <li><code>r</code>, <code>g</code>, <code>b</code>, <code>a</code> : Integer number between 0 ~ 255.</li> <li><code>color</code> : Color object</li> </ul> </li> </ul>"},{"location":"canvas/#size","title":"Size","text":"<pre><code>canvas.setCanvasSize(width, height);\n</code></pre> <p>or</p> <pre><code>canvas.setSize(width, height);\n</code></pre> <p>or</p> <pre><code>canvas.resize(width, height);\n</code></pre>"},{"location":"canvas/#compare-with-graphics-object","title":"Compare with Graphics object","text":"<ul> <li>Drawing method<ul> <li>This canvas object draws stuff on canvas in WEBGL or CANVAS render mode.  </li> <li>Graphics object draws stuff on webgl render pipeline in WEBGL render mode.</li> </ul> </li> <li>Size<ul> <li>This canvas object has size (width, height) and origin.  </li> <li>Graphics object does not have size and origin.</li> </ul> </li> </ul>"},{"location":"canvasframemanager/","title":"Canvas frame manager","text":""},{"location":"canvasframemanager/#introduction","title":"Introduction","text":"<p>Generate bitmapfont from text game object, or bbcode text game object.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"canvasframemanager/#live-demos","title":"Live demos","text":"<ul> <li>Paste text</li> </ul>"},{"location":"canvasframemanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvasframemanager/#install-plugin","title":"Install plugin","text":""},{"location":"canvasframemanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasframemanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasframemanagerplugin.min.js', true);\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = scene.plugins.get('rexcanvasframemanagerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasFrameManagerPlugin from 'phaser3-rex-plugins/plugins/canvasframemanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasFrameManager',\nplugin: CanvasFrameManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasFrameManager from 'phaser3-rex-plugins/plugins/canvasframemanager.js';\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = new CanvasFrameManager(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#create-instance","title":"Create instance","text":"<pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, {\nkey: '',\nwidth: 4096,\nheight: 4096,\ncellWidth: 64,\ncellHeight: 64,\nfillColor: undefined\n});\n</code></pre> <ul> <li><code>key</code> : Texture key in texture manager</li> <li><code>width</code>, <code>height</code> : Size of canvas.</li> <li><code>cellWidth</code>, <code>cellHeight</code> : Maximum frame size.</li> <li><code>fillColor</code> : Fill an initial color, in css color string.<ul> <li><code>undefined</code> : Don't fill color.</li> </ul> </li> </ul> <p>or</p> <pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, key, width, height, cellWidth, cellHeight, fillColor);\n</code></pre> <p>Steps of generating bitmapfont :</p> <ol> <li>Add frames :     <pre><code>canvasFrames.paste(frameName, gameObject);\n</code></pre></li> <li>Update texture    <pre><code>canvasFrames.updateTexture();\n</code></pre></li> <li>Export frame data to bitmapfont    <pre><code>canvasFrames.addToBitmapFont();\n</code></pre></li> </ol>"},{"location":"canvasframemanager/#add-frame","title":"Add frame","text":""},{"location":"canvasframemanager/#from-game-object","title":"From game object","text":"<p>After rendering content on text, bbcode text, canvas</p> <pre><code>canvasFrames.paste(frameName, gameObject);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>gameObject</code> : text, bbcode text, or canvas.</li> </ul>"},{"location":"canvasframemanager/#custom-drawing","title":"Custom drawing","text":"<pre><code>canvasFrames.draw(frameName, callback, scope)\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>callback</code> :      <pre><code>function(canvas, context, frameSize) {\n// The maximum frame size\nvar cellWidth = frameSize.width;\nvar cellHeight = frameSize.height;\n\n// Draw content in area of (0, 0) - (cellWidth, cellHeight)\n\n// Update frame size\n// frameSize.width = ...\n// frameSize.height = ...\n}\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#empty-frame","title":"Empty frame","text":"<pre><code>canvasFrames.addEmptyFrame(frameName);\n// canvasFrames.addEmptyFrame(frameName, width, height);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>width</code> : Frame width, default value is <code>cellWidth</code></li> <li><code>height</code> : Frame height, default value is <code>cellHeight</code></li> </ul>"},{"location":"canvasframemanager/#update-texture","title":"Update texture","text":"<p>Update texture after adding frames.</p> <pre><code>canvasFrames.updateTexture();\n</code></pre>"},{"location":"canvasframemanager/#remove-frame","title":"Remove frame","text":"<pre><code>canvasFrames.remove(frameName);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> </ul>"},{"location":"canvasframemanager/#export-to-bitmapfont","title":"Export to bitmapfont","text":"<pre><code>canvasFrames.addToBitmapFont();\n</code></pre>"},{"location":"canvasframemanager/#destroy-instance","title":"Destroy instance","text":"<pre><code>canvasFrames.destroy();\n</code></pre>"},{"location":"canvasinput/","title":"Canvas input","text":""},{"location":"canvasinput/#introduction","title":"Introduction","text":"<p>An invisible Input DOM element to  receive character input and display on DynamicText.</p> <p>Inspirited from CanvasInput.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvasinput/#live-demos","title":"Live demos","text":"<ul> <li>Simple</li> <li>Text input</li> <li>Number input</li> <li>With rexui-Label</li> <li>Text area</li> </ul>"},{"location":"canvasinput/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvasinput/#install-plugin","title":"Install plugin","text":""},{"location":"canvasinput/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasinputplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasinputplugin.min.js', true);\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = scene.add.rexCanvasInput(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasInputPlugin from 'phaser3-rex-plugins/plugins/canvasinput-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasInputPlugin',\nplugin: CanvasInputPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = scene.add.rexCanvasInput(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasInput from 'phaser3-rex-plugins/plugins/canvasinput.js';\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = new CanvasInput(textGameObject, x, y, width, height, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"canvasinput/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexCanvasInput({\n// Parameters of DynamicText\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n\n// Style when focus\n// 'focus.color': ...\n// 'focus.color2': ...\n// 'focus.stroke': ...\n},\nfocusStyle: undefined,\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0,\n\n// Style when cursor move on\n// 'cursor.color': ...\n// 'cursor.backgroundColor': ...\n// 'cursor.xxx': ...\n},\ncursorStyle: undefined,\n\nchildrenInteractive: false,\n\ntext: '',\n\nwrap: {\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nlineHeight: undefined,\nuseDefaultLineHeight: true,\nmaxLines: 1,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 'center',  // For single line text input\ncharWrap: true,    // For single line text input\n},\n\ntextArea: false,\n\n// Parameters of hidden-text-editor   \n// inputType: 'text',  // 'text'|'password'|'textarea'|...                \n\n// readOnly: false,\n// maxLength: undefined,\n// minLength: undefined,\n// selectAll: false,\n\n// enterClose: true,\n\n// Callbacks\n// onOpen: function (textObject, hiddenInputText) {\n// },\n\n// onClose: function (textObject, hiddenInputText) {\n// },\n\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },   \n\n// onAddChar: function(child, index, canvasInput) {\n//    child.modifyStyle({...})\n// },\n\n// onCursorOut: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// onCursorIn: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// parseTextCallback: function(text) {\n//     return text;\n// }.\n\n});\n</code></pre> <ul> <li><code>textArea</code> : <ul> <li><code>false</code> : Single line text input. Default behavior.</li> <li><code>true</code> : Multiple lines text input.</li> </ul> </li> <li>Parameters of DynamicText...<ul> <li><code>wrap</code> : Some default value in <code>wrap</code> are changed<ul> <li><code>wrap.useDefaultLineHeight</code> : Default value is <code>true</code></li> <li><code>wrap.maxLines</code> : Default value is <code>1</code></li> <li><code>wrap.vAlign</code> : Default value is <code>'center'</code></li> </ul> </li> </ul> </li> <li>Parameters of hidden-text-editor<ul> <li><code>inputType</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, ...</li> </ul> </li> <li><code>enterClose</code> : Set <code>true</code> to close input text when enter-key was pressed. Default value is <code>true</code>.</li> <li><code>readOnly</code> : <ul> <li><code>true</code> : un-editable.</li> <li><code>false</code> : Editable. Defaule behavior.</li> </ul> </li> <li><code>maxLength</code>, <code>minLength</code> : Maximun or minimun of input characters</li> <li><code>selectAll</code> : Set to <code>true</code> to select all characters when focusing.</li> </ul> </li> <li>Callbacks<ul> <li><code>onOpen</code> : Callback invoked when focus on this hidden input text.     <pre><code>function (textObject) {\n// textObject.setInputText(txt);\n}\n</code></pre></li> <li><code>onClose</code> : Callback invoked when blur.     <pre><code>function (textObject) {            }\n</code></pre></li> <li><code>onUpdate</code> : <ul> <li>A callback invoked in each tick of editing.     <pre><code>function (text, textObject) {\n// return text;\n}\n</code></pre><ul> <li>Can return a new string for text game object displaying.</li> </ul> </li> <li><code>'number'</code> : Only output number string.</li> </ul> </li> <li><code>onAddChar</code> : Callback invoked when adding new character child <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>onCursorOut</code> : Callback invoked when cursor move out of a character child     <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>onCursorIn</code> : Callback invoked when cursor move on a character child     <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>parseTextCallback</code> : Callback of parsing text (<code>txt.text</code>) to value (<code>txt.value</code>)<ul> <li><code>undefined</code> : Bypass text to value. Default behavior.</li> <li>A function object     <pre><code>function(text) {\nreturn text;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>focusStyle</code> : Will apply this style to background when focusing.<ul> <li><code>undefined</code> : Ignore this behavior.</li> <li>A plain object     <pre><code>{\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n}\n</code></pre></li> <li>Or add these style settings in <code>background</code> parameter, with prefix <code>'focus.'</code>.</li> </ul> </li> <li><code>cursorStyle</code> : Will apply this style when cursor move on a character child.<ul> <li><code>undefined</code> : Ignore this behavior.</li> <li>A plain object     <pre><code>{\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0\n}\n</code></pre></li> <li>Or add these style settings in <code>style</code> parameter, with prefix <code>'cursor.'</code>.</li> </ul> </li> </ul>"},{"location":"canvasinput/#number-input","title":"Number input","text":"<pre><code>txt.setNumberInput();\n</code></pre>"},{"location":"canvasinput/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCanvasInput extends CanvasInput {\nconstructor(textGameObject, x, y, width, height, config)) {\nsuper(textGameObject, x, y, width, height, config)) {\n// ...            \n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyCanvasInput(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#open-editor","title":"Open editor","text":"<pre><code>txt.open();\n</code></pre> <p>or</p> <pre><code>txt.open(onCloseCallback);\n</code></pre> <ul> <li><code>onCloseCallback</code> : Callback invoked when closing text-editor</li> </ul>"},{"location":"canvasinput/#close-editor","title":"Close editor","text":"<pre><code>txt.close();\n</code></pre>"},{"location":"canvasinput/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = txt.isOpened;\n</code></pre>"},{"location":"canvasinput/#read-only","title":"Read only","text":"<ul> <li>Enable read only     <pre><code>txt.setReadOnly();\n// txt.setReadOnly(true);\n</code></pre>     or     <pre><code>txt.readOnly = true;\n</code></pre></li> <li>Disable read only     <pre><code>txt.setReadOnly(false);\n</code></pre>     or     <pre><code>txt.readOnly = false;\n</code></pre></li> <li>Get read only     <pre><code>var readOnlyEanble = txt.readOnly;\n</code></pre></li> </ul>"},{"location":"canvasinput/#text","title":"Text","text":"<ul> <li>Display text on dynamic text game object<ul> <li>Get     <pre><code>var text = txt.text;\n</code></pre>     or     <pre><code>var text = txt.displayText;\n</code></pre></li> <li>Set     <pre><code>txt.setText(text);\n</code></pre>     or      <pre><code>txt.setDisplayText(text);\n</code></pre></li> </ul> </li> <li>Input text on hidden text edit behavior<ul> <li>Get     <pre><code>var text = txt.inputText;\n</code></pre></li> <li>Set     <pre><code>var text = txt.setInputText(text);\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvasinput/#value","title":"Value","text":"<ul> <li>Get. Parse text to value.     <pre><code>var value = txt.getValue();\n// var value = txt.value;\n</code></pre><ul> <li>Set <code>parseTextCallback</code> <pre><code>txt.setParseTextCallback(callback);\n</code></pre><ul> <li><code>callback</code> : <ul> <li><code>undefined</code> : Bypass text to value. Default behavior.</li> <li>A function object     <pre><code>function(text) {\nreturn text;\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul> </li> <li>Set. Conver any type of <code>value</code> to string.     <pre><code>txt.setValue(value);\n// txt.value = value;\n</code></pre></li> </ul>"},{"location":"canvasinput/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"canvasinput/#events","title":"Events","text":"<ul> <li>On text change     <pre><code>txt.on('textchange', function(text, txt){\n})\n</code></pre></li> <li>On character child adding     <pre><code>txt.on('addchar', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On cursor moving out of a character child     <pre><code>txt.on('cursorout', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On cursor moving on a character child     <pre><code>txt.on('cursorin', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On open text-editor     <pre><code>txt.on('open', function() {\n\n})\n</code></pre></li> <li>On close text-editor     <pre><code>txt.on('close', function() {\n\n})\n</code></pre></li> <li>Not a number input     <pre><code>txt.on('nan', function(text){\n\n})\n</code></pre></li> </ul>"},{"location":"canvasinput/#select-text","title":"Select text","text":"<p>This feature does not support.</p>"},{"location":"canvasinput/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"canvasinput/#other-properties","title":"Other properties","text":"<p>See DynamicText.</p>"},{"location":"capitalizes-first/","title":"Capitalizes first","text":""},{"location":"capitalizes-first/#introduction","title":"Introduction","text":"<p>Capitalizes the first letter of a string, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"capitalizes-first/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.UppercaseFirst(str);\n</code></pre>"},{"location":"charactercache/","title":"Character cache","text":""},{"location":"charactercache/#introduction","title":"Introduction","text":"<p>Generate bitmapfont from text game object, or bbcode text game object.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"charactercache/#live-demos","title":"Live demos","text":"<ul> <li>Set text</li> <li>Textbox</li> </ul>"},{"location":"charactercache/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"charactercache/#install-plugin","title":"Install plugin","text":""},{"location":"charactercache/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcharactercacheplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcharactercacheplugin.min.js', true);\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = scene.plugins.get('rexcharactercacheplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CharacterCachePlugin from 'phaser3-rex-plugins/plugins/charactercache-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCharacterCache',\nplugin: CharacterCachePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = scene.plugins.get('rexCharacterCache').add(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CharacterCache from 'phaser3-rex-plugins/plugins/charactercache.js';\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = new CharacterCache(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#create-instance","title":"Create instance","text":"<pre><code>var characterCache = scene.plugins.get('rexCharacterCache').add(scene, {\nkey: '',  cellWidth: 32,\ncellHeight: 32,\nmaxCharacterCount: 4096,\nfreqMode: true,\n\ntextObject: textGameOject,\n\ncontent: '',\n});\n</code></pre> <ul> <li><code>key</code> : Texture key in texture manager</li> <li><code>cellWidth</code>, <code>cellHeight</code> : Maximum frame size.</li> <li><code>maxCharacterCount</code> : Maximun character count.<ul> <li>Width of texture = <code>Math.ceil(Math.sqrt(maxCharacterCount)) * cellWidth</code></li> <li>Height of texture = <code>Math.ceil(Math.sqrt(maxCharacterCount)) * cellHeight</code></li> </ul> </li> <li><code>freqMode</code> : <ul> <li><code>true</code> : Swap out un-unsed and low-frequence character.</li> <li><code>false</code> : Swap out any un-unsed character.</li> </ul> </li> <li><code>textObject</code> : Text game object, or bbcode text game object for drawing character.</li> <li><code>content</code> : Load these characters into cache.</li> </ul>"},{"location":"charactercache/#load-characters","title":"Load characters","text":"<p>Load characters into bitmap font, replace unused characters if no free character space.</p> <pre><code>characterCache.load(content);\n// characterCache.load(content, lock);\n</code></pre> <ul> <li><code>content</code> : Characters in a string.</li> <li><code>lock</code><ul> <li><code>true</code> : Lock these characters, won't be replaced out later.</li> <li><code>false</code> : Don't lock these characters, can be replaced out later. Default behavior.</li> </ul> </li> </ul> <p>Warning</p> <p>Console.warn messages if no unused character is found.</p>"},{"location":"charactercache/#events","title":"Events","text":"<ul> <li>Add a character     <pre><code>characterCache.on('add', function(character, textObject) {\n// Can change style of textObject here\n})\n</code></pre></li> <li>Swap out a character     <pre><code>characterCache.on('remove', function(character, textObject) {\n})\n</code></pre></li> </ul>"},{"location":"charactercache/#override-bitmaptext","title":"Override bitmaptext","text":"<p>Inject <code>characterCache.load(text)</code> into <code>bitmapText.setText(text)</code> method.</p> <pre><code>characterCache.overrideBitmapText(bitmapText);\n// var bitmapText = characterCache.overrideBitmapText(bitmapText);\n</code></pre> <p>Now <code>setText</code> method has <code>lock</code> parameter : <code>bitmapText.setText(text, lock)</code>.</p> <p>Or user can override <code>bitmapText.setText</code> by extending <code>Phaser.GameObjects.BitmapText</code> class.</p>"},{"location":"charactercache/#unlock-all-characters","title":"Unlock all characters","text":"<pre><code>characterCache.unlock();\n</code></pre>"},{"location":"charactercache/#get-all-cache-data","title":"Get all cache data","text":"<pre><code>var cacheData = characterCache.getAllData();\n</code></pre> <ul> <li><code>cacheData</code> : Array of cache data     <pre><code>{\ncharacter: string,\nfreq: number,\nalive: boolean,\nlock: boolean,\n}\n</code></pre></li> </ul>"},{"location":"charactercache/#destroy-instance","title":"Destroy instance","text":"<pre><code>characterCache.destroy();\n</code></pre>"},{"location":"charactercache/#properties","title":"Properties","text":"<ul> <li><code>characterCache.key</code> : Font key.</li> <li><code>characterCache.cellWidth</code>, <code>characterCache.cellHeight</code> : Cell size.</li> <li><code>characterCache.inCacheCount</code> : Amount of characters in cache.</li> </ul>"},{"location":"circlemaskimage/","title":"Circle mask image","text":""},{"location":"circlemaskimage/#introduction","title":"Introduction","text":"<p>Load a texture, then apply a circle mask. Extended from canvas plugin.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"circlemaskimage/#live-demos","title":"Live demos","text":"<ul> <li>Circle-mask-image</li> </ul>"},{"location":"circlemaskimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"circlemaskimage/#install-plugin","title":"Install plugin","text":""},{"location":"circlemaskimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcirclemaskimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcirclemaskimageplugin.min.js', true);\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircleMaskImagePlugin',\nplugin: CircleMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircleMaskImage from 'phaser3-rex-plugins/plugins/circlemaskimage.js';\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = new CircleMaskImage(scene, x, y, key, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircleMaskImagePlugin',\nplugin: CircleMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"circlemaskimage/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, {\nmaskType: 0,\n// radius: undefined,\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, {\nmaskType: 0,\n// radius: undefined,\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n});\n</code></pre> <ul> <li><code>maskType</code> : Type of mask.<ul> <li><code>null</code> : No mask.</li> <li><code>'circle'</code>, or <code>0</code> : Circle mask.</li> <li><code>'ellipse'</code>, or <code>1</code> : Ellipse mask.</li> <li><code>'roundRectangle'</code>, or <code>2</code> : Round rectangle mask.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle mask.<ul> <li><code>0</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>backgroundColor</code> : Fill background with color.<ul> <li><code>undefined</code>, or <code>null</code> : No background filling. Default behavior.</li> </ul> </li> <li><code>strokeColor</code> : Add stroke around masked image.<ul> <li><code>undefined</code>, or <code>null</code> : No stroke line. Default behavior.</li> </ul> </li> <li><code>strokeWidth</code> : Stroke line width.</li> </ul> <p>Add image from JSON</p> <pre><code>var image = scene.make.rexCircleMaskImage({\nx: 0,\ny: 0,\nkey: key,\nframe: name,\nmaskType: 0,\n// radius: undefined\n// origin: {x: 0.5, y: 0.5},\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n\nadd: true\n});\n</code></pre>"},{"location":"circlemaskimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends CircleMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n// image.setTexture(key, frame, maskType);\n</code></pre> <p>or</p> <pre><code>image.setTexture(key, frame, {\nmaskType: 0,\n// radius: undefined\n});\n</code></pre> <ul> <li><code>maskType</code> : Type of mask<ul> <li><code>null</code> : No mask.</li> <li><code>0</code>, or <code>'circle'</code> : Circle mask. Default value.</li> <li><code>1</code>, or <code>'ellipse'</code> : Ellipse mask.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle mask.<ul> <li><code>0</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"clamp/","title":"Clamp","text":""},{"location":"clamp/#introduction","title":"Introduction","text":"<p>Force a value within the boundaries by clamping it to the range <code>min</code>, <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"clamp/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Clamp(value, min, max);\n</code></pre> <ul> <li><code>value</code> : The value to be clamped.</li> </ul>"},{"location":"clickoutside/","title":"Click outside","text":""},{"location":"clickoutside/#introduction","title":"Introduction","text":"<p>Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"clickoutside/#live-demos","title":"Live demos","text":"<ul> <li>Click outside</li> </ul>"},{"location":"clickoutside/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"clickoutside/#install-plugin","title":"Install plugin","text":""},{"location":"clickoutside/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexclickoutsideplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexclickoutsideplugin.min.js', true);\n</code></pre></li> <li>Add click-outside behavior     <pre><code>var clickOutside = scene.plugins.get('rexclickoutsideplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ClickOutsidePlugin from 'phaser3-rex-plugins/plugins/clickoutside-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexClickOutsiden',\nplugin: ClickOutsidePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add click-outside behavior     <pre><code>var clickOutside = scene.plugins.get('rexClickOutsiden').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ClickOutside from 'phaser3-rex-plugins/plugins/clickoutside.js';\n</code></pre></li> <li>Add clickoutside behavior     <pre><code>var clickOutside = new ClickOutside(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#create-instance","title":"Create instance","text":"<pre><code>var clickOutside = scene.plugins.get('rexClickOutside').add(gameObject, {\n// enable: true,\n// mode: 1,              // 0|'press'|1|'release'\n// clickInterval: 100,   // ms\n// threshold: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Clickable.</li> <li><code>mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior.</li> </ul> </li> </ul>"},{"location":"clickoutside/#events","title":"Events","text":"<ul> <li>Click-outside     <pre><code>clickOutside.on('clickoutside', function (clickoutside, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable     <pre><code>clickOutside.on('enable', function (clickoutside, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable     <pre><code>clickOutside.on('disable', function (clickoutside, gameObject) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"clickoutside/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = clickOutside.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>clickOutside.setEnable(enabled);  // enabled: true, or false\n// clickOutside.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>clickOutside.toggleEnable();\n</code></pre></li> </ul>"},{"location":"clickoutside/#set-mode","title":"Set mode","text":"<pre><code>clickOutside.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> </ul>"},{"location":"clickoutside/#set-click-interval","title":"Set click interval","text":"<pre><code>clickOutside.setClickInterval(interval);  // interval in ms\n</code></pre>"},{"location":"clickoutside/#set-dragging-threshold","title":"Set dragging threshold","text":"<pre><code>clickOutside.setDragThreshold(distance);  // distance in pixels\n</code></pre>"},{"location":"clock/","title":"Clock","text":""},{"location":"clock/#introduction","title":"Introduction","text":"<p>A clock to count elapsed time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"clock/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"clock/#install-plugin","title":"Install plugin","text":""},{"location":"clock/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexclockplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexclockplugin.min.js', true);\n</code></pre></li> <li>Add clock object     <pre><code>var clock = scene.plugins.get('rexclockplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ClockPlugin from 'phaser3-rex-plugins/plugins/clock-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexClock',\nplugin: ClockPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add clock object     <pre><code>var clock = scene.plugins.get('rexClock').add(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Clock from 'phaser3-rex-plugins/plugins/clock.js';\n</code></pre></li> <li>Add clock object     <pre><code>var clock = new Clock(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#create-instance","title":"Create instance","text":"<pre><code>var clock = scene.plugins.get('rexClock').add(scene, {\n// timeScale: 1\n});\n</code></pre> <ul> <li><code>timeScale</code> : time-scale for counting elapsed time.</li> </ul>"},{"location":"clock/#start-counting","title":"Start counting","text":"<pre><code>clock.start();\n// clock.start(startAt);  // start-at time in ms\n</code></pre>"},{"location":"clock/#force-ticking","title":"Force ticking","text":"<pre><code>clock.tick(0);\n// clock.tick(delta);\n</code></pre>"},{"location":"clock/#get-elapsed-time","title":"Get elapsed time","text":"<pre><code>var now = clock.now;  // Elapsed time in ms\n</code></pre>"},{"location":"clock/#pause-resume-stop-counting","title":"Pause, Resume, stop counting","text":"<pre><code>clock.pause();\nclock.resume();\nclock.stop();\n</code></pre>"},{"location":"clock/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>clock.seek(time);   // elapsed time in ms\n</code></pre>"},{"location":"clock/#state-of-counting","title":"State of counting","text":"<pre><code>var isRunning = clock.isRunning;\n</code></pre>"},{"location":"clock/#time-scale","title":"Time-scale","text":"<ul> <li>Get     <pre><code>var timeScale = clock.timeScale;\n</code></pre></li> <li>Set     <pre><code>clock.setTimeScale(timeScale);\n// clock.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"clock/#events","title":"Events","text":"<ul> <li>On ticking     <pre><code>clock.on('update', function(now, delta){ })\n</code></pre><ul> <li><code>now</code> : Elapsed time in ms.</li> <li><code>delta</code> : Delta time in ms.</li> </ul> </li> </ul>"},{"location":"color/","title":"Color","text":""},{"location":"color/#introduction","title":"Introduction","text":"<p>Get color value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"color/#usage","title":"Usage","text":""},{"location":"color/#get-color-integer","title":"Get color integer","text":"<ul> <li>Hex string, or color integer     <pre><code>var color = Phaser.Display.Color.ValueToColor(input);\n</code></pre><ul> <li><code>input</code> : Hex string, or color integer</li> </ul> </li> <li>RGB to color     <pre><code>var color = Phaser.Display.Color.GetColor(red, green, blue);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : 0 ~ 255</li> </ul> </li> <li>RGBA to color     <pre><code>var color = Phaser.Display.Color.GetColor32(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code> : 0 ~ 255</li> </ul> </li> <li>Hex string to color     <pre><code>var color = Phaser.Display.Color.HexStringToColor(hex).color;\n</code></pre><ul> <li>hex : <code>#0033ff</code>, <code>#03f</code>, <code>0x0033ff</code>, or <code>0x03f</code></li> </ul> </li> <li>RGB string to color     <pre><code>var color = Phaser.Display.Color.RGBStringToColor(rgb);\n</code></pre><ul> <li>rgb : <code>'rgb(r,g,b)'</code>, or <code>'rgba(r,g,b,a)'</code><ul> <li>r, g, b : 0 ~ 255</li> <li>a : 0 ~ 1</li> </ul> </li> </ul> </li> <li>HSV to color     <pre><code>var color = Phaser.Display.Color.HSVToRGB(h, s, v).color;\n</code></pre><ul> <li><code>h</code>, <code>s</code>, <code>v</code> : 0 ~ 1</li> </ul> </li> </ul>"},{"location":"color/#color-integer-to-rgb","title":"Color integer to RGB","text":"<pre><code>var rgb = Phaser.Display.Color.IntegerToRGB(color);\n</code></pre> <ul> <li><code>color</code> : Color integer (<code>0xAARRGGBB</code>)</li> <li><code>rgb</code> : JSON object (<code>{r, g, b, a}</code>)</li> </ul>"},{"location":"color/#hsv-color-wheel","title":"HSV color wheel","text":"<ol> <li>Create color array     <pre><code>var colorArray = Phaser.Display.Color.HSVColorWheel(s, v);\n</code></pre></li> <li>Get color     <pre><code>var color = colorArray[i].color;  // i : 0 ~ 359\n</code></pre></li> </ol>"},{"location":"color/#color-object","title":"Color object","text":""},{"location":"color/#create-color-object","title":"Create color object","text":"<ul> <li>Create via r,g,b,a components     <pre><code>var color = new Phaser.Display.Color(red, green, blue); // alpha = 255\n// var color = new Phaser.Display.Color(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 255</li> </ul> </li> <li>Create via color integer     <pre><code>var color = Phaser.Display.Color.IntegerToColor(colorInteger);\n</code></pre><ul> <li>colorInteger : Color integer (<code>0xAARRGGBB</code>)</li> </ul> </li> </ul>"},{"location":"color/#set-color","title":"Set color","text":"<ul> <li>Set color     <pre><code>color.setTo(red, green, blue);  // alpha = 255\n// color.setTo(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 255</li> </ul> </li> <li>Set color in GL values     <pre><code>color.setGLTo(red, green, blue);  // alpha = 1\n// color.setTo(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 1</li> </ul> </li> <li>Set color from color object     <pre><code>color.setFromRGB(rgba);\n</code></pre><ul> <li>rgba :     <pre><code>{\nr: 0,\ng: 0,\nb: 0,\n// a: 0\n}\n</code></pre></li> </ul> </li> <li>Set color from HSV     <pre><code>color.setFromHSV(h, s, v);\n</code></pre></li> <li>Set to transparent ()     <pre><code>color.transparent();\n</code></pre><ul> <li>Set (red, green, blue) to <code>0</code></li> </ul> </li> <li>Set to gray color    <pre><code>color.gray(value);\n</code></pre></li> <li>Set to a random color     <pre><code>color.random();\n</code></pre>     or     <pre><code>color.random(min, max);\n</code></pre><ul> <li><code>min</code> : 0 ~ 255. Default value is 0.</li> <li><code>max</code> : 0 ~ 255. Default value is 255.</li> </ul> </li> <li>Set to random gray     <pre><code>color.randomGray();\n</code></pre>     or     <pre><code>color.randomGray(min, max);\n</code></pre></li> <li>Set red/green/blue/alpha channel : 0 ~ 255     <pre><code>color.red = value;\n// color.red += value;\ncolor.green = value;\n// color.green += value;\ncolor.blue = value;\n// color.blue += value;\ncolor.alpha = value;\n// color.alpha += value;\n</code></pre></li> <li>Set H/S/V channel : 0 ~ 1     <pre><code>color.h = value;\n// color.h += value;\ncolor.s = value;\n// color.s += value;\ncolor.v = value;\n// color.v += value;\n</code></pre></li> <li>Set normalized red, green, blue, alpha : 0 ~ 1     <pre><code>color.redGL = value;\n// color.redGL += value;\ncolor.greenGL = value;\n// color.greenGL += value;\ncolor.blueGL = value;\n// color.blueGL += value;\ncolor.alphaGL = value;\n// color.alphaGL += value;\n</code></pre></li> <li>Set brighten     <pre><code>color.brighten(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Saturate : Increase the saturation (S) of this Color by the percentage amount given.     <pre><code>color.saturate(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Desaturate : Decrease the saturation (S) of this Color by the percentage amount given.     <pre><code>color.desaturate(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Lighten : Increase the lightness (V) of this Color by the percentage amount given.     <pre><code>color.lighten(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Darken : Decrease the lightness (V) of this Color by the percentage amount given.     <pre><code>color.darken(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> </ul>"},{"location":"color/#properties","title":"Properties","text":"<ul> <li>RGB Color, not including the alpha channel     <pre><code>var c = color.color;\n</code></pre></li> <li>RGB Color, including the alpha channel.     <pre><code>var c = color.color32;\n</code></pre></li> <li>RGB color string which can be used in CSS color values.     <pre><code>var c = color.rgba;\n</code></pre></li> <li>Red, green, blue, alpha : 0 ~ 255     <pre><code>var r = color.red;\nvar g = color.green;\nvar b = color.blue;\nvar a = color.alpha;\n</code></pre></li> <li>H, S, V : 0 ~ 1     <pre><code>var h = color.h;\nvar s = color.s;\nvar v = color.v;\n</code></pre></li> <li>Normalized red, green, blue, alpha : 0 ~ 1     <pre><code>var r = color.redGL;\nvar g = color.greenGL;\nvar b = color.blueGL;\nvar a = color.alphaGL;\n</code></pre></li> </ul>"},{"location":"color/#clone","title":"Clone","text":"<pre><code>var newColor = color.clone();\n</code></pre>"},{"location":"color/#to-hex-string","title":"To hex string","text":"<pre><code>var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a);\n// var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix);\n</code></pre>"},{"location":"color/#interpolation","title":"Interpolation","text":"<p>Interpolate between 2 colors.</p> <pre><code>var colorOut = Phaser.Display.Color.Interpolate.RGBWithRGB(r1, g1, b1, r2, g2, b2, length, index);\nvar colorOut = Phaser.Display.Color.Interpolate.ColorWithColor(color1, color2, length, index);\nvar colorOut = Phaser.Display.Color.Interpolate.ColorWithRGB(color, r, g, b, length, index);\n</code></pre> <ul> <li><code>length</code>, <code>index</code> : t = <code>index/length</code> (0~1)</li> </ul>"},{"location":"conditionstable/","title":"CSV Conditions table","text":""},{"location":"conditionstable/#introduction","title":"Introduction","text":"<p>Check conditions to find passed tests listed in a csv table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"conditionstable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"conditionstable/#install-plugin","title":"Install plugin","text":""},{"location":"conditionstable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexconditionstableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexconditionstableplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexconditionstableplugin').add();\n</code></pre></li> </ul>"},{"location":"conditionstable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ConditionsTablePlugin from 'phaser3-rex-plugins/plugins/conditionstable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexConditionsTable',\nplugin: ConditionsTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexConditionsTable').add();\n</code></pre></li> </ul>"},{"location":"conditionstable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ConditionsTable from 'phaser3-rex-plugins/plugins/conditionstable.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = new ConditionsTable();\n</code></pre></li> </ul>"},{"location":"conditionstable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexConditionsTable').add();\n</code></pre>"},{"location":"conditionstable/#load-table-from-csv-string","title":"Load table from csv string","text":"<pre><code>table.loadCSV(csvString, {\n// delimiter: ','\n});\n</code></pre> <p>For exameple, csv string</p> name A A B Test1 &gt;= 10 &lt;= 20 Test2 3 <pre><code>,A,A,B\nTest1,&gt;= 10,&lt;= 20,\nTest2,,,3\n</code></pre> <p>means that:</p> <pre><code>Test1: (A&gt;=10) &amp;&amp; (A&lt;=20)\nTest2: (B==3)\n</code></pre> <p>Equations will be evaled by new Function.</p>"},{"location":"conditionstable/#test","title":"Test","text":""},{"location":"conditionstable/#get-test-results","title":"Get test results","text":"<pre><code>var results = table.getTestResults(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> <li><code>results</code> : <code>{name: boolean}</code>, use OR operation to combine result of tests with the same name.</li> </ul>"},{"location":"conditionstable/#get-first-pass-test-name","title":"Get first pass test name","text":"<pre><code>var testName = table.anyPassTest(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> </ul>"},{"location":"config-data/","title":"Configuration data","text":""},{"location":"config-data/#introduction","title":"Introduction","text":"<p>Get parameters from configuration object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"config-data/#usage","title":"Usage","text":""},{"location":"config-data/#quick-start","title":"Quick start","text":"<pre><code>const GetValue = Phaser.Utils.Objects.GetValue;\nvar myMethod = function(config) {\nvar x = GetValue(config, 'x', 0);\nvar y = GetValue(config, 'y', 0);\nvar width = GetValue(config, 'width', 0);\nvar height = GetValue(config, 'height', 0);\n// ...\n}\n</code></pre>"},{"location":"config-data/#get-value","title":"Get value","text":"<ul> <li>Retrieves a value from an object.     <pre><code>var value = Phaser.Utils.Objects.GetValue(source, key, defaultValue);\n</code></pre><ul> <li><code>source</code> : Configuration object.</li> <li><code>key</code> : The name of the property to retrieve from the object. For example,<ul> <li>Property <code>source.name</code>, key = <code>name</code></li> <li>Property <code>source.position.x</code>, key = <code>position.x</code></li> </ul> </li> <li><code>defaultValue</code> : The value to return if the <code>key</code> isn't found in the <code>source</code> object.</li> </ul> </li> <li>Finds the key within the top level of the source object, or returns <code>defaultValue</code>.     <pre><code>var value = Phaser.Utils.Objects.GetFastValue(source, key, defaultValue);\n</code></pre><ul> <li><code>key</code> : The key for the property on source. Must exist at the top level of the source object.</li> </ul> </li> <li>Retrieves a value from an object. Allows for more advanced selection options.     <pre><code>var value = Phaser.Utils.Objects.GetAdvancedValue(source, key, defaultValue);\n</code></pre><ul> <li>Implicit     <pre><code>var source = {x: 4};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = 4\n</code></pre></li> <li>From function     <pre><code>var source = {x: function(key){return 4;}};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = 4\n</code></pre><ul> <li>Pass <code>key</code> to function's 1st parameter, and get return value as final result.</li> </ul> </li> <li>Randomly pick one element from the array     <pre><code>var source = {x: [a, b, c]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random item from array [a, b, c]\n</code></pre></li> <li>Random integer between min and max     <pre><code>var source = {x: randInt: [min, max]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random int min~max\n</code></pre></li> <li>Random float between min and max     <pre><code>var source = {x: randFloat: [min, max]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random float min~max\n</code></pre></li> </ul> </li> </ul>"},{"location":"config-data/#is-plain-object","title":"Is plain object","text":"<pre><code>var isPlainObject = Phaser.Utils.Objects.IsPlainObject(object);\n</code></pre> <p>Plain object:</p> <ul> <li><code>var obj = {};</code></li> <li><code>var obj = new Object();</code></li> </ul>"},{"location":"config-data/#merge-configuration","title":"Merge configuration","text":"<pre><code>var configOut = Phaser.Utils.Objects.Merge(configIn, defaultConfig);\n</code></pre>"},{"location":"container/","title":"Container","text":""},{"location":"container/#introduction","title":"Introduction","text":"<p>Control the position and angle of children game objects, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"container/#usage","title":"Usage","text":""},{"location":"container/#container","title":"Container","text":""},{"location":"container/#add-container-object","title":"Add container object","text":"<pre><code>var container = scene.add.container(x, y);\n// var container = scene.add.container(x, y, children); // children: an array of game object\n</code></pre>"},{"location":"container/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyContainer extends Phaser.GameObjects.Container {\nconstructor(scene, x, y, children) {\nsuper(scene, x, y, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var container = new MyContainer(scene, x, y, children);\n</code></pre></li> </ul>"},{"location":"container/#destroy","title":"Destroy","text":"<pre><code>container.destroy();\n</code></pre> <p>Also destroy all children game objects.</p>"},{"location":"container/#set-properties","title":"Set properties","text":"<p>Reference game object, to set position, angle, visible, alpha, etc...</p>"},{"location":"container/#set-size","title":"Set size","text":"<pre><code>container.setSize(width, height);\n</code></pre> <p>Default size is 0x0.</p>"},{"location":"container/#set-scroll-factor","title":"Set scroll factor","text":"<pre><code>container.setScrollFactor(x, y);\n</code></pre> <p>Apply this scrollFactor to all Container children.</p> <pre><code>container.setScrollFactor(x, y, true);\n</code></pre>"},{"location":"container/#hit-area","title":"Hit area","text":"<pre><code>container.setInteractive(new Phaser.Geom.Circle(0, 0, radius), Phaser.Geom.Circle.Contains);\n// container.setInteractive(false); // disable\n</code></pre> <p>Assign hit area with a circle shape.</p>"},{"location":"container/#non-exclusive","title":"Non-exclusive","text":"<pre><code>container.setExclusive(false);\n</code></pre> <p>Allows a game object added to container many times.</p>"},{"location":"container/#children","title":"Children","text":""},{"location":"container/#add-child","title":"Add child","text":"<pre><code>container.add(child);  // child: a game object or an array of game objects\n</code></pre> <pre><code>container.addAt(child, index);\n</code></pre>"},{"location":"container/#exist","title":"Exist","text":"<pre><code>var hasChild = container.exists(child);\n</code></pre>"},{"location":"container/#get-child","title":"Get child","text":"<pre><code>var firstChild = container.first;\nvar nextChild = container.next;\nvar prevChild = container.previous;\nvar lastChild = container.last;\n</code></pre> <pre><code>var child = container.getByName(name);\n</code></pre> <pre><code>var child = container.getRandom(startIndex, length);\n</code></pre> <pre><code>var child = container.getFirst(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var children = container.getAll(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var amount = container.count(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre>"},{"location":"container/#sort-children","title":"Sort children","text":"<pre><code>container.sort(property);\n</code></pre> <pre><code>container.sort(property, function(childA, childB){\nreturn 0; // 0, 1, -1\n});\n</code></pre>"},{"location":"container/#remove-child","title":"Remove child","text":"<pre><code>container.remove(child);\n// container.remove(child, true);  // remove child object and destroy it\n</code></pre> <pre><code>container.removeAt(index);\n// container.removeAt(index, true);  // remove child object and destroy it\n</code></pre> <pre><code>container.removeBetween(startIndex, endIndex);\n// container.removeBetween(startIndex, endIndex, true);  // remove children objects and destroy them\n</code></pre> <pre><code>container.removeAll();\n// container.removeAll(true);  // remove all children objects and destroy them\n</code></pre>"},{"location":"container/#order-of-child","title":"Order of child","text":"<pre><code>container.moveTo(child, index);\n</code></pre> <pre><code>container.bringToTop(child);\n</code></pre> <pre><code>container.sendToBack(child);\n</code></pre> <pre><code>container.moveUp(child);\n</code></pre> <pre><code>container.moveDown(child);\n</code></pre> <pre><code>container.moveAbove(child1, child2);  // Move child1 above child2\n</code></pre> <pre><code>container.moveBelow(child1, child2);  // Move child1 below child2\n</code></pre> <pre><code>container.swap(child1, child2);\n</code></pre> <pre><code>container.reverse();\n</code></pre> <pre><code>container.shuffle();\n</code></pre>"},{"location":"container/#replace-child","title":"Replace child","text":"<pre><code>container.replace(oldChild, newChild);\n// container.replace(oldChild, newChild, true);  // destroy oldChild\n</code></pre>"},{"location":"container/#set-properties_1","title":"Set properties","text":"<pre><code>container.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"container/#for-each-child","title":"For each child","text":"<ul> <li>Iterate current children list     <pre><code>container.iterate(callback);\n// container.iterate(callback, context);\n// container.iterate(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> <li>Iterate a copy of current children list     <pre><code>container.each(callback);\n// container.each(callback, context);\n// container.each(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"container/#get-world-position-rotation-scale","title":"Get world position, rotation, scale","text":"<pre><code>var matrix = child.getWorldTransformMatrix();\nvar x = matrix.tx;\nvar y = matrix.ty;\nvar rotation = matrix.rotation;\nvar scaleX = matrix.scaleX;\nvar scaleY = matrix.scaleY;\n</code></pre>"},{"location":"container/#compare-with-group-object","title":"Compare with group object","text":"<ul> <li>Container and group objects are all have a children list.</li> <li>Container has position, angle, alpha, visible, ...etc, but group does not have.</li> <li>Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't.</li> <li>A game object could be added to many groups, but it only could be added to one container (<code>exclusive</code> mode).</li> </ul>"},{"location":"containerlite-perspective/","title":"Perspective","text":""},{"location":"containerlite-perspective/#introduction","title":"Introduction","text":"<p>Snapshot children of containerlite, to a perspective render texture.</p> <ul> <li>Author: Rex</li> <li>Behavior of containerlite</li> </ul>"},{"location":"containerlite-perspective/#live-demos","title":"Live demos","text":"<ul> <li>Flip ui</li> </ul>"},{"location":"containerlite-perspective/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite-perspective/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite-perspective/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = scene.plugins.get('rexperspectiveimageplugin').addContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = scene.plugins.get('rexPerspectiveImagePlugin').addContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ContainerPerspective } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = new ContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#create-instance","title":"Create instance","text":"<pre><code>var perspective = scene.plugins.get('rexPerspectiveImagePlugin').addContainerPerspective(container, {\nuseParentBounds: false,\n// hideCCW: true,\n});\n</code></pre> <ul> <li><code>useParentBounds</code> :<ul> <li><code>true</code> : Use bounds of parent container</li> <li><code>false</code> : Union all visible children's bounds</li> </ul> </li> <li><code>hideCCW</code> :<ul> <li><code>true</code> : Hide backward facing Faces. Default behavior.</li> <li><code>false</code> : Show backward facing Faces</li> </ul> </li> </ul>"},{"location":"containerlite-perspective/#perspective-mode","title":"Perspective mode","text":""},{"location":"containerlite-perspective/#enter","title":"Enter","text":"<pre><code>perspective.enter();\n</code></pre> <ol> <li>Snapshot current visible children into perspective render texture</li> <li>Set current visible children to invisible</li> <li>Set this perspective render texture to visible</li> </ol>"},{"location":"containerlite-perspective/#exit","title":"Exit","text":"<pre><code>perspective.exit();\n</code></pre> <ol> <li>Inverse visible of children and perspective render texture</li> </ol>"},{"location":"containerlite-perspective/#is-in-perspective-mode","title":"Is in perspective mode","text":"<pre><code>var isInPerspectiveMode = perspective.perspectiveState;\n</code></pre>"},{"location":"containerlite-perspective/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = perspective.angleX; // Angle in degrees\nvar angleY = perspective.angleY; // Angle in degrees\nvar angleZ = perspective.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = perspective.rotationX; // Angle in radians\nvar rotationY = perspective.rotationY; // Angle in radians\nvar rotationZ = perspective.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>perspective.angleX = angleX; // Angle in degrees\nperspective.angleY = angleY; // Angle in degrees\nperspective.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>perspective.rotationX = rotationX; // Angle in radians\nperspective.rotationY = rotationY; // Angle in radians\nperspective.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#flip","title":"Flip","text":"<pre><code>scene.tweens.add({\ntargets: perspective,\nangleY: { start: 0, to: -180}\n})\n</code></pre>"},{"location":"containerlite-perspective/#other-properties","title":"Other properties","text":"<p>See Perspective rendertexture game object.</p>"},{"location":"containerlite-skew/","title":"Skew","text":""},{"location":"containerlite-skew/#introduction","title":"Introduction","text":"<p>Snapshot children of containerlite, to a skew render texture.</p> <ul> <li>Author: Rex</li> <li>Behavior of containerlite</li> </ul>"},{"location":"containerlite-skew/#live-demos","title":"Live demos","text":"<ul> <li>Skew ui</li> </ul>"},{"location":"containerlite-skew/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite-skew/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite-skew/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = scene.plugins.get('rexquadimageplugin').addContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = scene.plugins.get('rexQuadImagePlugin').addContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ContainerSkew } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = new ContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#create-instance","title":"Create instance","text":"<pre><code>var quad = scene.plugins.get('rexQuadImagePlugin').addContainerSkew(container, {\nuseParentBounds: false\n});\n</code></pre> <ul> <li><code>useParentBounds</code> :<ul> <li><code>true</code> : Use bounds of parent container</li> <li><code>false</code> : Union all visible children's bounds</li> </ul> </li> </ul>"},{"location":"containerlite-skew/#skew-mode","title":"Skew mode","text":""},{"location":"containerlite-skew/#enter","title":"Enter","text":"<pre><code>skew.enter();\n</code></pre> <ol> <li>Snapshot current visible children into skew render texture</li> <li>Set current visible children to invisible</li> <li>Set this skew render texture to visible</li> </ol>"},{"location":"containerlite-skew/#exit","title":"Exit","text":"<pre><code>skew.exit();\n</code></pre> <ol> <li>Inverse visible of children and skew render texture</li> </ol>"},{"location":"containerlite-skew/#is-in-skew-mode","title":"Is in skew mode","text":"<pre><code>var isInSkewMode = skew.skewState;\n</code></pre>"},{"location":"containerlite-skew/#skew","title":"Skew","text":"<ul> <li>Set     <pre><code>image.setSkewX(skewXRad);\nimage.setSkewXDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkewY(skewXRad);\nimage.setSkewYDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkew(skewXRad, skewYRad);\nimage.setSkewDeg(skewXDeg, skewYDeg);\n</code></pre> <pre><code>image.skewX = skewXRad;\nimage.skewXDeg = skewXDeg;\n</code></pre> <pre><code>image.skewY = skewYRad;\nimage.skewYDeg = skewYDeg;\n</code></pre></li> <li>Get     <pre><code>var skewXRad = image.skewX;\nvar skewXDeg = image.skewXDeg;\n</code></pre> <pre><code>var skewYRad = image.skewY;\nvar skewYDeg = image.skewYDeg;\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#other-properties","title":"Other properties","text":"<p>See Skew rendertexture game object.</p>"},{"location":"containerlite/","title":"Container Lite","text":""},{"location":"containerlite/#introduction","title":"Introduction","text":"<p>Control the position and angle of children game objects.</p> <p>It is inspired from Ziao/phaser3-interim-containers.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"containerlite/#live-demos","title":"Live demos","text":"<ul> <li>Rotate, alpha</li> <li>Tween child</li> <li>Create tween config</li> <li>Timeline child</li> <li>Mix timeline</li> <li>Snapshot</li> <li>Destory</li> <li>Add to p3-container</li> </ul>"},{"location":"containerlite/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcontainerliteplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcontainerliteplugin.min.js', true);\n</code></pre></li> <li>Add container object     <pre><code>var container = scene.add.rexContainerLite(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ContainerLitePlugin from 'phaser3-rex-plugins/plugins/containerlite-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexContainerLitePlugin',\nplugin: ContainerLitePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add container object     <pre><code>var container = scene.add.rexContainerLite(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ContainerLite from 'phaser3-rex-plugins/plugins/containerlite.js';\n</code></pre></li> <li>Add container object     <pre><code>var container = new ContainerLite(scene, x, y);\nscene.add.existing(container);\n</code></pre></li> </ul>"},{"location":"containerlite/#add-container-object","title":"Add container object","text":"<pre><code>var container = scene.add.rexContainerLite(x, y);  // width = 1, height = 1\n// var container = scene.add.rexContainerLite(x, y, width, height);\n</code></pre> <p>or</p> <pre><code>var container = scene.add.rexContainerLite(x, y, children);  // width = 1, height = 1\n// var container = scene.add.rexContainerLite(x, y, width, height, children);\n</code></pre> <p>Add container from JSON</p> <pre><code>var container = scene.make.rexContainerLite({\nx: 0,\ny: 0,\nwidth: 1,\nheight: 1,\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"containerlite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyContainer extends ContainerLite {\nconstructor(scene, x, y, width, height, children) {\nsuper(scene, x, y, width, height, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var container = new MyContainer(scene, x, y, width, height, children);\n</code></pre></li> </ul>"},{"location":"containerlite/#destroy","title":"Destroy","text":"<pre><code>container.destroy();\n</code></pre> <p>Also destroy all children.</p>"},{"location":"containerlite/#other-properties","title":"Other properties","text":"<p>This container game object inherits from Zone.</p>"},{"location":"containerlite/#add-child","title":"Add child","text":""},{"location":"containerlite/#pin","title":"Pin","text":"<p>Add(pin) a game obejct to container</p> <pre><code>container.add(child);  // child: a game object\n// container.pin(child);\n</code></pre> <ul> <li><code>child</code> : A game object</li> </ul> <p>or</p> <pre><code>container.pin(child, {\n// syncPosition: true,\n// syncRotation: true,\n// syncScale : true,\n// syncAlpha: true,\n// syncScrollFactor: true,\n});\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>syncPosition</code> : <ul> <li><code>true</code> : Sync position of child, default behavior.</li> <li><code>false</code> : Don't sync position of child.</li> </ul> </li> <li><code>syncRotation</code> : <ul> <li><code>true</code> : Sync angle of child, default behavior.</li> <li><code>false</code> : Don't sync angle of child.</li> </ul> </li> <li><code>syncScale</code> : <ul> <li><code>true</code> : Sync scale of child, default behavior.</li> <li><code>false</code> : Don't sync angle of child.    </li> </ul> </li> <li><code>syncAlpha</code> : <ul> <li><code>true</code> : Sync alpha of child, default behavior.</li> <li><code>false</code> : Don't sync alpha of child. </li> </ul> </li> <li><code>syncScrollFactor</code> : <ul> <li><code>true</code> : Sync scrollFactor of child, default behavior.</li> <li><code>false</code> : Don't sync scrollFactor of child. </li> </ul> </li> </ul> <p>Or add(pin) children</p> <pre><code>container.addMultiple(children);\n// container.add(children);\n</code></pre> <ul> <li><code>children</code> : An array of game objects</li> </ul> <p>These world properties of children will be changed with container.</p> <ul> <li>Position/Angle/Scale</li> <li>Visible</li> <li>Alpha</li> <li>Scroll factor</li> <li>Mask</li> </ul> <p>Note</p> <ul> <li>Position of child is the world position, i.e. position of child won't be changed when adding to container initially.<ul> <li>For example, container-lite is at (100, 100), and child is at (110, 110), then child will be placed at (110, 110) after adding to container-lite.</li> </ul> </li> <li>This behavior is different from official container, which using related position of child when adding to container.<ul> <li>For example, official container is at (100, 100), and child is at (10, 10), then child will be placed at (110, 110) after adding to official container.</li> </ul> </li> </ul>"},{"location":"containerlite/#add-local","title":"Add local","text":"<pre><code>container.addLocal(child);\n</code></pre> <p>or</p> <pre><code>container.addLocalMultiple(children);\n</code></pre> <p>or</p> <pre><code>container.pinLocal(child, {\n// syncPosition: true,\n// syncRotation: true,\n// syncScale : true,\n// syncAlpha: true,\n});\n</code></pre> <p>Add child to container with related properties, like official container. For example, container-lite is at (100, 100), and child is at (10, 10), then child will be placed at (110, 110) after adding to container-lite.</p>"},{"location":"containerlite/#remove-child","title":"Remove child","text":"<ul> <li>Remove(unpin) a child     <pre><code>container.remove(child);\n// container.remove(child, destroyChild);\n</code></pre>     or     <pre><code>container.unpin(child);\n// container.unpin(child, destroyChild);\n</code></pre><ul> <li><code>child</code> : Game object</li> <li><code>destroyChild</code> : Set true to destroy child. Default is <code>false</code>.</li> </ul> </li> <li>Remove all children     <pre><code>container.clear();\n// container.clear(destroyChild);\n</code></pre></li> </ul>"},{"location":"containerlite/#get-child","title":"Get child","text":"<ul> <li>Get first child by name     <pre><code>var gameObject = container.getByName(name);\n// var gameObject = container.getByName(name, recursive);\n</code></pre><ul> <li><code>gameObject</code> : A child, or <code>null</code> if not found.</li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> <li>Get a random child     <pre><code>var gameObject = container.getRandom();\n// var gameObject = container.getRandom(startIndex, length);\n</code></pre></li> <li>Get children in this container-lite<ul> <li>Internal children array     <pre><code>var gameObjects = container.getChildren();\n</code></pre></li> <li>Copy of children array     <pre><code>var gameObjects = container.getChildren([]);\n// var gameObjects = container.getChildren(out);\n</code></pre></li> </ul> </li> <li>Get all children under this container-lite recursively     <pre><code>var gameObjects = container.getAllChildren();\n</code></pre><ul> <li>Put container itself and all children into Layer <pre><code>layer.add(container.getAllChildren([container]));\n</code></pre></li> <li>Draw on render texture <pre><code>rt.draw(container.getAllChildren());\n</code></pre></li> <li>Ignored in camera <pre><code>camera.ignore(container.getAllChildren());\n</code></pre></li> </ul> </li> </ul>"},{"location":"containerlite/#traversal","title":"Traversal","text":"<ul> <li>Depth-First Search     <pre><code>container.dfs(function(current) {\n// return true;  // Discard children traveraling\n})\n</code></pre><ul> <li>Return <code>true</code> to discard children traveraling</li> </ul> </li> <li>Breadth-First Search     <pre><code>container.bfs(function(current) {\n// return true;  // Discard children traveraling\n})\n</code></pre><ul> <li>Return <code>true</code> to discard children traveraling</li> </ul> </li> </ul>"},{"location":"containerlite/#exist","title":"Exist","text":"<p>Return true if child is under this container-lite (nested).</p> <pre><code>var hasChild = container.contains(child);\n</code></pre>"},{"location":"containerlite/#children","title":"Children","text":"<pre><code>var children = container.children;\n</code></pre> <ul> <li><code>children</code> : Array of child game objects.</li> </ul>"},{"location":"containerlite/#get-parent","title":"Get parent","text":"<pre><code>var parentContainer = scene.plugins.get('rexContainerLitePlugin').getParent(child);\n</code></pre> <p>or</p> <pre><code>var parentContainer = Container.GetParent(child); // Static method\n</code></pre>"},{"location":"containerlite/#set-properties-of-child","title":"Set properties of child","text":""},{"location":"containerlite/#position","title":"Position","text":"<pre><code>container.setChildPosition(child, x, y);\n</code></pre>"},{"location":"containerlite/#rotation","title":"Rotation","text":"<pre><code>container.setChildRotation(child, rotation);\n</code></pre> <ul> <li><code>rotation</code> : Angle in radians.</li> </ul>"},{"location":"containerlite/#scale","title":"Scale","text":"<pre><code>container.setChildScale(child, scaleX, scaleY);\n</code></pre> <p>or </p> <pre><code>container.setChildDisplaySize(child, width, height);\n</code></pre>"},{"location":"containerlite/#visible","title":"Visible","text":"<pre><code>container.setChildVisible(child, visible);\n</code></pre>"},{"location":"containerlite/#alpha","title":"Alpha","text":"<pre><code>container.setChildAlpha(child, alpha);\n</code></pre>"},{"location":"containerlite/#local-state-of-child","title":"Local state of child","text":"<p>Get local state</p> <pre><code>var localState = container.getLocalState(child);\n</code></pre> <p>or</p> <pre><code>var localState = child.rexContainer;\n</code></pre> <ul> <li>Properties of <code>localState</code><ul> <li><code>x</code>, <code>y</code></li> <li><code>rotation</code></li> <li><code>scaleX</code>, <code>scaleY</code></li> <li><code>visible</code></li> <li><code>alpha</code></li> </ul> </li> </ul>"},{"location":"containerlite/#change-local-state-of-child","title":"Change local state of child","text":"<ul> <li>Local position     <pre><code>container.setChildLocalPosition(child, x, y);\n</code></pre></li> <li>Local scale     <pre><code>container.setChildLocalScale(child, scaleX, scaleY);\n</code></pre></li> <li>Local alpha     <pre><code>container.setChildLocalAlpha(child, alpha);\n</code></pre></li> <li>Local visible     <pre><code>container.setChildLocalVisible(child, visible);\n</code></pre></li> </ul>"},{"location":"containerlite/#reset-local-state-of-child","title":"Reset local state of child","text":"<p>Reset local state of child according to current properties of children</p> <ul> <li>Reset local state of all properties     <pre><code>container.resetChildState(child);\n</code></pre></li> <li>Reset local state of position     <pre><code>container.resetChildPositionState(child);\n</code></pre></li> <li>Reset local state of rotation     <pre><code>container.resetChildRotationState(child);\n</code></pre></li> <li>Reset local state of scale     <pre><code>container.resetChildScaleState(child);\n</code></pre></li> <li>Reset local state of alpha     <pre><code>container.resetChildAlphaState(child);\n</code></pre></li> <li>Reset local state of visible     <pre><code>container.resetChildVisibleState(child);\n</code></pre></li> <li>Reset local state of active     <pre><code>container.resetChildActiveState(child);\n</code></pre></li> </ul>"},{"location":"containerlite/#tween-local-state","title":"Tween local state","text":"<pre><code>var tweenObj = container.tweenChild({\ntargets: child,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre> <ul> <li><code>targets</code> : A game object, or an array of game object.<ul> <li>A containerLite child, can tween its local state.</li> </ul> </li> </ul> <p>Paramters of configuration is the same as tween task.</p> <p>Supported properties :</p> <ul> <li><code>x</code>, <code>y</code>,</li> <li><code>angle</code>, <code>rotation</code></li> <li><code>scaleX</code>, <code>scaleY</code>, <code>displayWidth</code>, <code>displayHeight</code></li> <li><code>alpha</code></li> </ul>"},{"location":"containerlite/#tween-local-state-of-a-containerlite-child","title":"Tween local state of a containerlite child","text":"<pre><code>var tweenObj = containerLiteChild.tweenSelf({    // x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre> <p>Equal to</p> <pre><code>containerLiteChild.tweenChild({\ntargets: containerLiteChild,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre>"},{"location":"containerlite/#create-tween-config","title":"Create tween config","text":"<pre><code>var tweenConfig = container.createTweenChildConfig({\ntargets: child,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n});\nscene.tweens.add(tweenConfig);\n</code></pre> <ul> <li>Input of <code>targets</code> is/are game object(s), will be replaced by local state of game object(S)</li> <li>Wrap <code>onUpdate</code> callback, to update properties of child according to local state.</li> </ul>"},{"location":"containerlite/#depth","title":"Depth","text":"<ul> <li>Get depth of container     <pre><code>var depth = container.depth;\n</code></pre></li> <li>Set depth of container     <pre><code>container.setDepth(value, true);\n// container.depth = depth;\n</code></pre></li> <li>Set depth of container and all children     <pre><code>container.setDepth(value);\n</code></pre></li> <li>Bring this container and its children to top     <pre><code>container.bringToTop();\n</code></pre></li> <li>Swap depth with another container     <pre><code>containerA.swapDepth(containerB);\n</code></pre></li> <li>Increase of container and all children     <pre><code>container.incDepth(value);\n</code></pre></li> <li>Move game object below this container and all children     <pre><code>container.moveDepthBelow(gameObject);\n</code></pre></li> <li>Move game object above this container and all children     <pre><code>container.moveDepthAbove(gameObject);\n</code></pre></li> <li>Bring a child of container to top of this container     <pre><code>container.bringChildToTop(gameObject);\n</code></pre></li> <li>Send a child of container to bottom of this container     <pre><code>container.sendChildToBack(gameObject);\n</code></pre></li> </ul>"},{"location":"containerlite/#layer","title":"Layer","text":"<p>A containerLite can have a layer.  Current children and new children will draw on this layer, instead of display list of scene.</p> <ul> <li>Enable layer. Do nothing if layer is existed.     <pre><code>container.enableLayer();\n</code></pre></li> <li>Get layer game object. Will enable layer if layer is not existed.     <pre><code>var layer = container.getLayer();\n</code></pre></li> <li>Get layer game object, without enable layer.     <pre><code>var layer = container.privateRenderLayer;\n</code></pre></li> </ul>"},{"location":"containerlite/#mask","title":"Mask","text":"<ul> <li>Assign mask object to children     <pre><code>container.setMask(mask);  // container.mask = mask;\n</code></pre></li> <li>Remove mask object of children     <pre><code>container.clearMask();\n</code></pre></li> <li>Remove mask object of children, and destroy mask object     <pre><code>container.clearMask(true);\n</code></pre></li> </ul>"},{"location":"containerlite/#shader-effects","title":"Shader effects","text":"<p>Apply post-fx pipeline on layer of containerLite.</p>"},{"location":"containerlite/#snapshot","title":"Snapshot","text":"<ul> <li>Draw all visible children on a render-texture.     <pre><code>var renderTexture = container.snapshot({\nrenderTexture: undefined,\npadding: 0\n});\n</code></pre><ul> <li><code>renderTexture</code> : Draw on this render-texture<ul> <li><code>undefined</code> : Create a new render-texture</li> </ul> </li> <li><code>padding</code> : <ul> <li><code>0</code> : No extra padding space. Default value.</li> <li>A number : Add extra padding space around this render-texture.</li> </ul> </li> </ul> </li> <li>Draw all visible children on a texture     <pre><code>container.snapshot({\npadding: 0,\nsaveTexture: textureKey\n});\n</code></pre><ul> <li><code>saveTexture</code> : Save render result to texture manager.</li> </ul> </li> </ul>"},{"location":"containerlite/#draw-bounds","title":"Draw bounds","text":"<ul> <li>Draw bounds of shown game object on a graphics game object     <pre><code>container.drawBounds(graphics);\n// container.drawBounds(graphics, color);\n</code></pre>     or     <pre><code>container.drawBounds(graphics, {\n// color: 0xffffff,\n// lineWidth: 1,\n// padding: 0,\n// drawContainer: true,\n// children: undefined,\n});\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code>.</li> <li><code>lineWidth</code> : Default value is <code>1</code>.</li> <li><code>padding</code> : Extra space around bounds. Default value is <code>0</code>.</li> <li><code>drawContainer</code> : <ul> <li><code>true</code> : Draw all children game objects included containerLite. Default behavior.</li> <li><code>false</code> : Draw all children game objects excluded containerLite</li> </ul> </li> <li><code>children</code> : <ul> <li>Array of game objects : Only draw bounds of these children</li> <li><code>undefined</code> : Draw bounds of all children</li> </ul> </li> </ul> </li> </ul>"},{"location":"containerlite/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Set scroll factor to children    <pre><code>container.setScrollFactor(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#change-origin","title":"Change origin","text":"<pre><code>container.changeOrigin(originX, originY);\n</code></pre> <p>This method also will reset all local state of children.</p>"},{"location":"containerlite/#add-to-container","title":"Add to container","text":"<ul> <li>Add to built-in container <pre><code>p3Container.add(containerLite);\n</code></pre>     or     <pre><code>containerLite.addToContainer(p3Container);\n</code></pre><ul> <li><code>container</code> : Container game object.</li> </ul> </li> <li>Add to Layer <pre><code>container.addToLayer(layer);\n</code></pre><ul> <li><code>layer</code> : Layer game object.</li> </ul> </li> </ul> <p>Note</p> <p><code>container.add(containerLite)</code>, or <code>layer.add(containerLite)</code> won't add children of containerLite.</p>"},{"location":"containerlite/#compare-with-official-container","title":"Compare with Official Container","text":"<ul> <li>Position/anlge/scale of a child object :<ul> <li>Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale.</li> <li>Container-Lite : World position/anlge/scale.</li> </ul> </li> <li>Updating period<ul> <li>Container : Re-calculate position/anlge/scale of each child every render.</li> <li>Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale.</li> </ul> </li> <li>Mask<ul> <li>Container : It has mask property, and it could become a mask object.</li> <li>Container-Lite : It has mask property, but it could not become a mask object.</li> </ul> </li> </ul>"},{"location":"create-number-array/","title":"Number array","text":""},{"location":"create-number-array/#introduction","title":"Introduction","text":"<p>Create an array representing the range of numbers, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"create-number-array/#usage","title":"Usage","text":""},{"location":"create-number-array/#create-number-array","title":"Create number array","text":"<p>Create an array representing the range of numbers (usually integers), between, and inclusive of, the given <code>start</code> and <code>end</code> arguments.</p> <pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArray(2, 4);\n// arr = [2, 3, 4]\n</code></pre></p>"},{"location":"create-number-array/#create-number-array-with-step","title":"Create number array with step","text":"<p>Create an array of numbers (positive and/or negative) progressing from <code>start</code> up to but not including <code>end</code> by advancing by <code>step</code>.</p> <pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end, step);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArrayStep(0, 20, 5);\n// arr =  [0, 5, 10, 15]\n</code></pre></p>"},{"location":"create-number-array/#create-prefix-number-suffix-string-array","title":"Create prefix-number-suffix string array","text":"<pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end, prefix, suffix);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArray(5, 7, 'HD-', '.png');\n// arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']\n</code></pre></p>"},{"location":"csvscenario/","title":"CSV scenario","text":""},{"location":"csvscenario/#introduction","title":"Introduction","text":"<p>Run script in csv format. Csv could be edited by excel or google document.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"csvscenario/#live-demos","title":"Live demos","text":"<ul> <li>CSV-scenario</li> <li>With TextPlayer</li> </ul>"},{"location":"csvscenario/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvscenario/#install-plugin","title":"Install plugin","text":""},{"location":"csvscenario/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcsvscenarioplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcsvscenarioplugin.min.js', true);\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = scene.plugins.get('rexcsvscenarioplugin').add(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CsvScenarioPlugin from 'phaser3-rex-plugins/plugins/csvscenario-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCsvScenario',\nplugin: CsvScenarioPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = scene.plugins.get('rexCsvScenario').add(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CsvScenario from 'phaser3-rex-plugins/plugins/csvscenario.js';\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = new CsvScenario(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#create-instance","title":"Create instance","text":"<pre><code>var scenario = scene.plugins.get('rexCSVScenario').add(scene, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// prefix: /^#([a-zA-Z]+)/\n// argsConvert: true,\n// argsConvertScope: undefined,\n// delimiter: ','\n// translateCommandNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>csvString</code> : Commands in csv-string.</li> <li><code>scope</code> : Running commands via methods in this scope object.<ul> <li>Get scope : <code>var scope = scenario.scope</code></li> </ul> </li> <li><code>timeUnit</code>: time-unit of dt, for delay-execution<ul> <li><code>'ms'</code>, or <code>0</code> : dt in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : dt in second</li> </ul> </li> <li><code>prefix</code>: regex of picking control instructions</li> <li><code>argsConvert</code>: A callback to convert parameters of run-custom-function<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>argsConvertScope</code>: scope of argsConvert</li> <li><code>delimiter</code> : Delimiter of CSV string.</li> <li><code>translateCommandNameCallback</code> : Callback to translate custom command name<ul> <li><code>undefined</code> : Use original custom command name. Default behavior.</li> <li>A function, return new custom command name.     <pre><code>function(commandName) {\nreturn newCommandName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"csvscenario/#load-csv-script","title":"Load csv script","text":"<pre><code>scenario.load(csvString, scope, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// prefix: /^#([a-zA-Z]+)/\n// argsConvert: true,\n// argsConvertScope: undefined,\n// delimiter: ',',\n// translateCommandNameCallback: undefined,\n})\n</code></pre> <ul> <li><code>csvString</code> : Commands in csv-string.</li> <li><code>scope</code> : Running commands via methods in this scope object.<ul> <li>Get scope : <code>var scope = scenario.scope</code></li> </ul> </li> <li><code>timeUnit</code>: time-unit of dt, for delay-execution<ul> <li><code>'ms'</code>, or <code>0</code> : dt in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : dt in second</li> </ul> </li> <li><code>prefix</code>: regex of picking control instructions</li> <li><code>argsConvert</code>: A callback to convert parameters of run-custom-function<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>argsConvertScope</code>: scope of argsConvert</li> <li><code>delimiter</code> : Delimiter of CSV string.</li> </ul>"},{"location":"csvscenario/#append-csv-script","title":"Append csv script","text":"<pre><code>scenario.append(csvString);\n</code></pre>"},{"location":"csvscenario/#start-running-instructions","title":"Start running instructions","text":"<p><pre><code>scenario.start({\n// label: '',\n// offset: 0\n})\n</code></pre> <pre><code>scenario.play({\n// label: '',\n// offset: 0\n})\n</code></pre></p> <ul> <li><code>label</code> : Go to the label and execute. '' label is starting from 1st instruction</li> <li><code>offset</code> : Offset time</li> </ul> <p>or</p> <pre><code>scenario.playPromise({\n// label: '',\n// offset: 0\n})\n.then(function(){\n// On complete\n})\n</code></pre>"},{"location":"csvscenario/#events","title":"Events","text":"<ul> <li>Complete     <pre><code>scenario.on('complete', function(scope, scenario){ });\n</code></pre></li> <li>Wait event     <pre><code>scenario.on('wait.' + eventName, function(scenario){ });\n</code></pre> <pre><code>scenario.on('wait', function(eventName, scenario){ });\n</code></pre></li> <li>Label has changed     <pre><code>scenario.on('labelchange', function(lastLabel, prevLabel, scope, scenario){ });\n</code></pre></li> <li>Dump execution log     <pre><code>scenario.on('log', function(msg, scope, scenario){ });\n</code></pre></li> <li>Notify error     <pre><code>scenario.on('error', function(msg, scope, scenario){ });\n</code></pre></li> </ul>"},{"location":"csvscenario/#types-of-instructions","title":"Types of instructions","text":"<p>Each row in csv table is an instruction.</p>"},{"location":"csvscenario/#run-custom-function","title":"Run custom function","text":"<p>Run custom function of <code>scope</code>, which passed from <code>scenario.load(...)</code></p> <p>Format:</p> <pre><code>-,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: <code>-</code></li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> <li>Method name of last custom command :     <pre><code>var methodName = scenario.lastCustomCommandName;\n</code></pre></li> <li>An <code>error</code> event will be fired if <code>fnName</code> is invalid in <code>scope</code>.</li> </ul>"},{"location":"csvscenario/#delay-execution","title":"Delay execution","text":"<p>Run custom function after a delay.</p> <p>Format:</p> <pre><code>time,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: a number</li> <li>time-unit of delay is set from <code>scenario.load(...)</code></li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> </ul>"},{"location":"csvscenario/#wait-then-execution","title":"Wait then execution","text":"<p>Run custom function until <code>scenario.continue(eventName)</code></p> <p>Format:</p> <pre><code>eventName,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: not a number, not a string start from <code>#</code></li> <li>Execution will be hang until <code>scenario.continue(eventName)</code> is called</li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> </ul>"},{"location":"csvscenario/#skip-waiting","title":"Skip waiting","text":"<pre><code>scenario.continue(true);\n</code></pre>"},{"location":"csvscenario/#task","title":"Task","text":"<p>Sample code</p> <p>Scenario will be paused if custom function return an event emitter, resumed when that evnt emitter fires <code>complete</code> event.</p> <p>See also: Sequence</p>"},{"location":"csvscenario/#label","title":"Label","text":"<p>Sample code</p> <p>A label for <code>#GOTO</code> or <code>#IF</code> instructions.</p> <p>Format:</p> <pre><code>#LABEL,label\n</code></pre> <ul> <li>1st column of instruction: <code>#LABEL</code>, case insensitive.</li> <li>Label <code>''</code> is reserved, don't use <code>''</code> for label name.</li> </ul> <p>Example: A label named 'AA'</p> <pre><code>#LABEL,AA\n</code></pre> <ul> <li>Last label :     <pre><code>var label = scenario.lastLabel;\n</code></pre></li> <li>Previous label :     <pre><code>var previousLabel = scenario.previousLabel;\n</code></pre></li> </ul>"},{"location":"csvscenario/#exit","title":"Exit","text":"<p>Exit current execution.</p> <p>Format:</p> <pre><code>#EXIT\n</code></pre> <ul> <li>1st column of instruction: <code>#EXIT</code>, case insensitive.</li> </ul>"},{"location":"csvscenario/#goto","title":"Goto","text":"<p>Sample code</p> <p>Go to label and execute.</p> <p>Format:</p> <pre><code>#GOTO,label\n</code></pre> <ul> <li>1st column of instruction: <code>#GOTO</code>, case insensitive.</li> <li>An <code>error</code> event will be fired if label is not found.</li> </ul> <p>Example: Goto label 'AA'</p> <pre><code>#GOTO,AA\n</code></pre>"},{"location":"csvscenario/#if-goto","title":"If-goto","text":"<p>Sample code</p> <p>Go to trueLabel if condition is true, otherwise go to falseLabel.</p> <p>Format:</p> <pre><code>#IF,condition,trueLabel,falseLabel\n</code></pre> <ul> <li>1st column of instruction: <code>#IF</code>, case insensitive.</li> <li>conditon: boolean equation<ul> <li>this is the <code>scope</code> passed from <code>scenario.load(...)</code></li> </ul> </li> <li>trueLabel/falseLabel: go to this label if condition is true/false<ul> <li>run next instruction if label is <code>''</code></li> <li>An <code>error</code> event will be fired if label is not found.</li> </ul> </li> </ul> <p>Example: Goto label 'AA' if (this.coin &gt; 100), else run next instruction</p> <pre><code>#IF,this.coin &gt; 100,AA\n</code></pre>"},{"location":"csvscenario/#wait","title":"Wait","text":"<p>Run next instruction after a delay time, or <code>scenario.continue(eventName)</code>.</p> <p>Format:</p> <pre><code>#WAIT,time\n</code></pre> <pre><code>#WAIT,eventName\n</code></pre> <ul> <li>1st column of instruction: <code>#WAIT</code>, case insensitive.</li> <li>2nd colume of instruction:<ul> <li>a number: a delay time<ul> <li>time-unit of delay is set from <code>scenario.load(...)</code></li> </ul> </li> <li>a string: an event name for <code>scenario.continue(eventName)</code></li> </ul> </li> </ul> <p>Example: </p> <ul> <li>Wait 1 time-unit     <pre><code>#WAIT,1\n</code></pre></li> <li>Wait until 'click'     <pre><code>#WAIT,click\n</code></pre> <pre><code>scenario.continue('click');\n</code></pre></li> </ul>"},{"location":"csvscenario/#pause","title":"Pause","text":"<pre><code>scenario.pause();\n</code></pre>"},{"location":"csvscenario/#resume","title":"Resume","text":"<pre><code>scenario.resume();\n</code></pre>"},{"location":"csvscenario/#time-scale","title":"Time-scale","text":"<ul> <li>Get     <pre><code>var timeScale = scenario.timeScale;\n</code></pre></li> <li>Set     <pre><code>scenario.setTimeScale(timeScale);\n// scenario.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"csvscenario/#clear","title":"Clear","text":"<p>Stop running and clear instructions.</p> <pre><code>scenario.clear();\n</code></pre>"},{"location":"csvscenario/#states","title":"States","text":"<ul> <li>Is running     <pre><code>var isRunning = scenario.isRunning;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = scenario.isPaused;\n</code></pre></li> </ul>"},{"location":"csvtoarray/","title":"CSV to array","text":""},{"location":"csvtoarray/#introduction","title":"Introduction","text":"<p>Generate array from csv string.</p> <ul> <li>Reference: Papa Parse</li> <li>Method only</li> </ul>"},{"location":"csvtoarray/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvtoarray/#import-class","title":"Import class","text":"<pre><code>import rexCSVToArray from './plugins/csvtoarray.js';\n</code></pre>"},{"location":"csvtoarray/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CSVToArrayPlugin from 'phaser3-rex-plugins/plugins/csvtoarray-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCSVToArray',\nplugin: CSVToArrayPlugin,\nstart: true\n}\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Convert csv     <pre><code>var arr = scene.plugins.get('rexCSVToArray').convert(csvString, config);\n</code></pre></li> </ul>"},{"location":"csvtoarray/#convert-csv","title":"Convert csv","text":"<pre><code>var arr = scene.plugins.get('rexCSVToArray').convert(csvString, {\n// delimiter: ',',\n// convert: true\n});\n</code></pre> <p>Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string, if <code>convert</code> is <code>true</code>.</p>"},{"location":"csvtohashtable/","title":"CSV to hash table","text":""},{"location":"csvtohashtable/#introduction","title":"Introduction","text":"<p>Hash table indexed by (col-key, row-key) from csv string.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"csvtohashtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvtohashtable/#install-plugin","title":"Install plugin","text":""},{"location":"csvtohashtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcsvtohashtableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcsvtohashtableplugin.min.js', true);\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = scene.plugins.get('rexcsvtohashtableplugin').add();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CsvToHashTablePlugin from 'phaser3-rex-plugins/plugins/csvtohashtable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCsvToHashTable',\nplugin: CsvToHashTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = scene.plugins.get('rexCsvToHashTable').add();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CsvToHashTable from 'phaser3-rex-plugins/plugins/csvtohashtable.js';\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = new CsvToHashTable();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexCsvToHashTable').add();\n</code></pre>"},{"location":"csvtohashtable/#append-rows-from-csv-string","title":"Append rows from csv string","text":"<pre><code>table.loadCSV(csvString, {\n// delimiter: ',',\n// convert: true\n// convertScope: undefined\n});\n</code></pre> <p>For exameple, csv string</p> name hp mp Rex 100 20 Alice 300 40 <pre><code>name,hp,mp\nRex,100,20\nAlice,300,40\n</code></pre> <p>will be converted to</p> <pre><code>{\n\"Alice\": {\n\"name\": \"Alice\",\n\"hp\": 300,\n\"mp\": 40\n},\n\"Rex\": {\n\"name\": \"Rex\",\n\"hp\": 100,\n\"mp\": 20\n}\n}\n</code></pre> <p>Then get value by</p> <pre><code>var value = table.get('Rex', 'hp');\n</code></pre>"},{"location":"csvtohashtable/#convert-value-type","title":"Convert value type","text":"<p>Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string, if <code>convert</code> is <code>true</code>, or assign your convert function by <code>convert</code> and <code>convertScope</code> when loading table (<code>table.loadCSV(...)</code>).</p> <pre><code>var convertCallback = function(table, rowKey, colKey, value) {\n// value = ...\nreturn value;\n};\n</code></pre> <p>Or uses these metheds to convert columns or rows.</p> <ul> <li>convert values in column     <pre><code>table.convertCol(colKey);  // colKey: a colKey, or an array of colKeys\n// table.convertCol(colKey, convertCallback, convertCallbackScope);\n</code></pre></li> <li>convert values in row     <pre><code>table.convertRow(rowKey);  // rowKey: a rowKey, or an array of rowKeys\n// table.convertRow(rowKey, convertCallback, convertCallbackScope);\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#get-value","title":"Get value","text":"<pre><code>var val = table.get(rowKey, colKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#set-value","title":"Set value","text":"<pre><code>table.set(rowKey, colKey, value);\n</code></pre> <pre><code>table.add(rowKey, colKey, value);\n// equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#has-columnrow-key","title":"Has column/row key","text":"<pre><code>var hasRow = table.hasRowKey(rowKey);\n</code></pre> <pre><code>var hasCol = table.hasColKey(colKey);\n</code></pre> <pre><code>var hasCell = table.hasKey(rowKey, colKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#value-in-column-or-row","title":"Value in column or row","text":"<pre><code>var existed = table.isValueInRol(rowKey, value);\n</code></pre> <pre><code>var existed = table.isValueInCol(colKey, value);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#create-table","title":"Create table","text":""},{"location":"csvtohashtable/#clear-table","title":"Clear table","text":"<pre><code>table.clear();\n</code></pre>"},{"location":"csvtohashtable/#append-a-column","title":"Append a column","text":"<pre><code>table.appendCol(colKey, initValue);\n// table.appendCol(colKey, callback, scope);  // get initValue from callback\n</code></pre> <p>Callback</p> <pre><code>var callback = function (table, rowKey, colKey) { // value = ...\nreturn value;\n};\n</code></pre> <ul> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#append-a-row","title":"Append a row","text":"<pre><code>table.appendRow(rowKey, initValue);\n// table.appendRow(rowKey, callback, scope);  // get initValue from callback\n</code></pre> <p>Callback</p> <pre><code>var callback = function (table, rowKey, colKey) { // value = ...\nreturn value;\n};\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> </ul>"},{"location":"csvtohashtable/#remove-a-column","title":"Remove a column","text":"<pre><code>table.removeCol(colKey);\n</code></pre> <ul> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#remove-a-row","title":"Remove a row","text":"<pre><code>table.removeRol(rowKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> </ul>"},{"location":"csvtohashtable/#sort-column-or-row","title":"Sort column or row","text":"<pre><code>table.sortCol(colKey, mode);\n// table.sortCol(callback, scope);  // sort columns by callback\n</code></pre> <pre><code>table.sortRow(rowKey, mode);\n// table.sortRow(callback, scope);  // sort rows by callback\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul> <p>Mode:</p> <ul> <li><code>'ascending'</code>, or <code>0</code></li> <li><code>'descending'</code>, or <code>1</code></li> <li><code>'logical ascending'</code>, or <code>2</code></li> <li><code>'logical descending'</code>, or <code>3</code></li> </ul> <p>Sorting callback</p> <pre><code>var callback = function(rowKeyA, rowKeyB) {\nreturn result; // 1, -1, or 0\n};\n</code></pre>"},{"location":"csvtohashtable/#retrieve-columns-or-rows","title":"Retrieve columns or rows","text":"<pre><code>table.eachCol(rowKey, callback, scope);\n</code></pre> <pre><code>table.eachRow(colKey, callback, scope);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul> <p>Callback</p> <pre><code>var callback = function(table, rowKey, colKey, value) {\n// ...\n};\n</code></pre>"},{"location":"csvtohashtable/#json","title":"JSON","text":"<ul> <li>Table to json     <pre><code>var jsonData = table.toJSON();\n</code></pre></li> <li>Reset table by JSON     <pre><code>table.resetFromJSON(jsonData);\n</code></pre></li> </ul>"},{"location":"cursor/","title":"Cursor","text":""},{"location":"cursor/#introduction","title":"Introduction","text":"<p>Custom cursor, built-in feature of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"cursor/#usage","title":"Usage","text":"<p>References:</p> <ul> <li>Cursor</li> <li>Using URL values for the cursor property</li> </ul>"},{"location":"cursor/#set-default-cursor","title":"Set default cursor","text":"<pre><code>scene.input.setDefaultCursor(CSSString);\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre>"},{"location":"cursor/#set-cursor-of-a-game-object","title":"Set cursor of a Game Object","text":"<p>Change cursor image when cursor is over that Game Object.</p> <pre><code>gameObject.setInteractive({\ncursor: CSSString\n});\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre> <p>Set cursor image directly after <code>gameObject.setInteractive()</code>.</p> <pre><code>gameObject.input.cursor = CSSString;\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre> <p>Use pointer (hand cursor).</p> <pre><code>gameObject.setInteractive({\nuseHandCursor: true\n});\n</code></pre>"},{"location":"cursor/#change-current-cursor","title":"Change current cursor","text":"<pre><code>scene.input.manager.canvas.style.cursor = cursor;\n</code></pre> <ul> <li><code>cursor</code> : CSSString</li> </ul>"},{"location":"cursoratbound/","title":"Cursor at bound","text":""},{"location":"cursoratbound/#introduction","title":"Introduction","text":"<p>Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"cursoratbound/#live-demos","title":"Live demos","text":"<ul> <li>Camera scrolling</li> </ul>"},{"location":"cursoratbound/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"cursoratbound/#install-plugin","title":"Install plugin","text":""},{"location":"cursoratbound/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcursoratboundplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcursoratboundplugin.min.js', true);\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = scene.plugins.get('rexcursoratboundplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CursorAtBoundPlugin from 'phaser3-rex-plugins/plugins/cursoratbound-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCursorAtBound',\nplugin: CursorAtBoundPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = scene.plugins.get('rexCursorAtBound').add(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CursorAtBound from 'phaser3-rex-plugins/plugins/cursoratbound.js';\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = new CursorAtBound(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#create-instance","title":"Create instance","text":"<pre><code>var cursorAtBound = scene.plugins.get('rexCursorAtBound').add(scene, {\n// bounds: undefined,\n// sensitiveDistance: 20,\n});\n</code></pre> <ul> <li><code>bounds</code> : A rectangle object\u311d or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>sensitiveDistance</code> : A sensitive distance in pixels.</li> </ul> <p>Map position of cursor to state of cursor key</p> <ul> <li>Position x is between left bound and left bound + sensitive distance : left cursor key is pressed.</li> <li>Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed.</li> <li>Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed.</li> <li>Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed.</li> </ul>"},{"location":"cursoratbound/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = cursorAtBound.createCursorKeys();\n\nvar leftKeyDown = cursorKeys.left.isDown;\nvar rightKeyDown = cursorKeys.right.isDown;\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var leftKeyDown = cursorAtBound.left;\nvar rightKeyDown = cursorAtBound.right;\nvar upKeyDown = cursorAtBound.up;\nvar downKeyDown = cursorAtBound.down;\nvar noKeyDown = cursorAtBound.noKey;\n</code></pre>"},{"location":"cursoratbound/#destroy","title":"Destroy","text":"<pre><code>cursorAtBound.destroy();\n</code></pre>"},{"location":"curve-spiral/","title":"Spiral curve","text":""},{"location":"curve-spiral/#introduction","title":"Introduction","text":"<p>Spiral curve.</p> <ul> <li>Author: Rex</li> <li>Curve object</li> </ul>"},{"location":"curve-spiral/#live-demos","title":"Live demos","text":"<ul> <li>Spiral curve</li> <li>Particles along spiral curve</li> </ul>"},{"location":"curve-spiral/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"curve-spiral/#install-plugin","title":"Install plugin","text":""},{"location":"curve-spiral/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexspiralcurveplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspiralcurveplugin.min.js', true);\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = scene.plugins.get('rexspiralcurveplugin').add(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SpiralCurvePlugin from 'phaser3-rex-plugins/plugins/spiralcurve-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSpiralCurve',\nplugin: SpiralCurvePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import SpiralCurve from 'phaser3-rex-plugins/plugins/spiralcurve.js';\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = new SpiralCurve(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#create-shape","title":"Create shape","text":"<ul> <li>All properties     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add({\n// Origin point\n// Ease origin point\n// startX:0, endX: 0, easeX: 'Linear',\n// startY:0, endY: 0, easeY: 'Linear',\n// Fixed point\n// x, y,\n\n// x-radius\n// startXRadius: 0, endXRadius, easeXRadius: 'Linear',\n// y-radius\n// startYRadius: 0, endYRadius, easeYRadius: 'Linear',\n// start-end radius\n// startRadius, endRadiux\n\n// angle\n// startAngle: 0, endAngle: 360, easeAngle: 'Linear',\n\n// rotation: 0\n});\n</code></pre><ul> <li>Origin point<ul> <li><code>startX</code>, <code>endX</code>, <code>easeX</code>, <code>startY</code>, <code>endY</code>, <code>easeY</code> : Ease origin point.<ul> <li><code>easeX</code>, <code>easeY</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Fixed origin point, i.e. start point is equal to end point.</li> </ul> </li> <li>Radius<ul> <li><code>startXRadius</code>, <code>endXRadius</code>, <code>easeXRadius</code> : Ease x-radius.<ul> <li><code>easeXRadius</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>startYRadius</code>, <code>endYRadius</code>, <code>easeYRadius</code> : Ease y-radius.<ul> <li><code>easeYRadius</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>startRadius</code>, <code>endRadiux</code> : <ul> <li>Set <code>startXRadius</code>, and <code>startYRadius</code> to <code>startRadius</code>.</li> <li>Set <code>endXRadius</code>, and <code>endYRadius</code> to <code>endRadius</code>.</li> </ul> </li> </ul> </li> <li>Angle<ul> <li><code>startAngle</code>, <code>endAngle</code>, <code>easeAngle</code> : Ease angle, in degrees.<ul> <li><code>easeAngle</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>rotation</code> : Rotate curve.</li> </ul> </li> <li>Simple spiral curve     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add(x, y, startRadius, endRadius, startAngle, endAngle, rotation);\n</code></pre><ul> <li><code>x</code> : Set <code>startX</code>, <code>endX</code> to <code>x</code>, and <code>easeX</code> to <code>'Linear'</code>.</li> <li><code>y</code> : Set <code>startY</code>, <code>endY</code> to <code>y</code>, and <code>easeY</code> to <code>'Linear'</code>.</li> <li><code>startRadius</code> : Set <code>startXRadius</code>, <code>startYRadius</code> to <code>startRadius</code></li> <li><code>endRadius</code> : Set <code>endXRadius</code>, <code>endYRadius</code> to <code>endRadius</code>, and <code>easeXRadius</code>, <code>easeYRadius</code> to <code>Linear</code>.</li> <li>Set <code>easeAngle</code> to <code>'Linear'</code></li> </ul> </li> </ul>"},{"location":"curve-spiral/#properties","title":"Properties","text":"<ul> <li>Origin point<ul> <li>Get     <pre><code>var startX = spiral.startX;\nvar startY = spiral.startY;\nvar endX = spiral.endX;\nvar endY = spiral.endY;\n</code></pre>     or     <pre><code>var startPoint = spiral.p0; // {x, y}\nvar endPoint = spiral.p1; // {x, y}\n</code></pre></li> <li>Set     <pre><code>spiral.setStartX(x);\nspiral.setStartY(y);\nspiral.setEndX(x);\nspiral.setEndY(y);\n</code></pre>     or     <pre><code>spiral.startX = x;\nspiral.startY = y;\nspiral.endX = x;\nspiral.endY = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var startXRadius = spiral.startXRadius;\nvar startYRadius = spiral.startYRadius;\nvar endXRadius = spiral.endXRadius;\nvar endYRadius = spiral.endYRadius;\n</code></pre></li> <li>Set     <pre><code>spiral.setStartXRadius(startXRadius);\nspiral.setStartYRadius(startYRadius);\nspiral.setEndXRadius(endXRadius);\nspiral.setEndYRadius(endYRadius);\n</code></pre>     or     <pre><code>spiral.startXRadius = startXRadius;\nspiral.startYRadius = startYRadius;\nspiral.endXRadius = endXRadius;\nspiral.endYRadius = endYRadius;\n</code></pre></li> </ul> </li> <li>Angle, in degrees.<ul> <li>Get     <pre><code>var startAnlge = spiral.startAngle;\nvar endAnlge = spiral.endAngle;\n</code></pre></li> <li>Set     <pre><code>spiral.setStartAngle(startAnlge);\nspiral.setEndAngle(endAnlge);\n</code></pre> <pre><code>spiral.startAngle = startAnlge;\nspiral.endAngle = endAnlge;\n</code></pre></li> </ul> </li> </ul>"},{"location":"curve-spiral/#other-methods","title":"Other methods","text":"<p>See path</p>"},{"location":"datamanager/","title":"Built-in data","text":""},{"location":"datamanager/#introduction","title":"Introduction","text":"<p>Store data in key-value pairs, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"datamanager/#usage","title":"Usage","text":""},{"location":"datamanager/#write","title":"Write","text":""},{"location":"datamanager/#set-value","title":"Set value","text":"<ul> <li>Set value     <pre><code>parent.data.set(key, value);\n</code></pre>     or     <pre><code>parent.data.values[key] = value;\n</code></pre><ul> <li><code>key</code> : Key string.</li> </ul> </li> <li>Increase number value. If the key doesn't already exist in the Data Manager then it is increased from 0.     <pre><code>parent.data.inc(key, data);\n</code></pre>     or     <pre><code>parent.data.values[key] += value;\n</code></pre><ul> <li><code>data</code> : The value to increase. </li> </ul> </li> <li>Toggle boolean value. If the key doesn't already exist in the Data Manager then it is toggled from false.     <pre><code>parent.data.toggle(key);\n</code></pre>     or     <pre><code>parent.data.values[key] = !parent.data.values[key];\n</code></pre></li> </ul>"},{"location":"datamanager/#set-values","title":"Set values","text":"<pre><code>parent.data.set(data);    // data: {key:value, ...}\n</code></pre>"},{"location":"datamanager/#merge-values","title":"Merge values","text":"<pre><code>parent.data.merge(data);  // data: {key:value, ...}\nparent.data.merge(data, false);  // won't overwrite existed keys\n</code></pre>"},{"location":"datamanager/#events","title":"Events","text":"<p>Fires <code>setdata</code> event when a value is first set.</p> <pre><code>parent.data.events.on('setdata', function(parent, key, value){ /* ... */ });\n</code></pre> <p>Fires <code>changedata</code>, and <code>changedata- + key</code> events when a value is set that already exists.</p> <pre><code>parent.data.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>parent.data.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n</code></pre>"},{"location":"datamanager/#read","title":"Read","text":""},{"location":"datamanager/#get-value","title":"Get value","text":"<p><pre><code>var value = parent.data.get(key);\n</code></pre> or <pre><code>var value = parent.data.values[key];\n</code></pre></p>"},{"location":"datamanager/#get-values","title":"Get values","text":"<pre><code>var values = parent.data.get(keys); // values: [value, value, ...], keys: [key, key, ...]\n</code></pre>"},{"location":"datamanager/#get-all-values","title":"Get all values","text":"<pre><code>var allValues = parent.data.getAll();  // return a copy of data\n</code></pre>"},{"location":"datamanager/#query","title":"Query","text":"<p>Using string.match() to pick matched keys.</p> <pre><code>var result = parent.data.query(rgExp);\n</code></pre>"},{"location":"datamanager/#remove","title":"Remove","text":""},{"location":"datamanager/#remove-key","title":"Remove key","text":"<pre><code>parent.data.remove(key);\n</code></pre>"},{"location":"datamanager/#remove-keys","title":"Remove keys","text":"<pre><code>parent.data.remove(keys);  // keys: [key, key, ...]\n</code></pre>"},{"location":"datamanager/#pop-key","title":"Pop key","text":"<pre><code>var value = parent.data.pop(key);\n</code></pre> <p>Get and remove that key.</p>"},{"location":"datamanager/#delet-all-keys","title":"Delet all keys","text":"<p>Delete all data in this Data Manager and unfreeze it.</p> <pre><code>parent.data.reset();\n</code></pre>"},{"location":"datamanager/#events_1","title":"Events","text":"<p>Fires <code>removedata</code> event when a key is removed.</p> <pre><code>parent.data.events.on('removedata', function(parent, key, value){ /* ... */ });\n</code></pre>"},{"location":"datamanager/#freeze","title":"Freeze","text":"<pre><code>var isFrozen = parent.data.freeze;\nparent.data.freeze = true;\n</code></pre> <p>No changes can be written to it.</p>"},{"location":"datamanager/#has-key","title":"Has key","text":"<pre><code>var hasKey = parent.data.has(key);\n</code></pre>"},{"location":"datamanager/#for-each-key","title":"For each key","text":"<pre><code>parent.data.each(function(parent, key, value){\n/* ... */\n}, scope);\n</code></pre>"},{"location":"datamanager/#count-of-data","title":"Count of data","text":"<pre><code>var cnt = parent.data.count;\n</code></pre>"},{"location":"datamanager/#reset","title":"Reset","text":"<p>Reset status and clear all keys.</p> <pre><code>parent.data.reset()\n</code></pre>"},{"location":"date/","title":"Date","text":""},{"location":"date/#introduction","title":"Introduction","text":"<p>Get current date or unix-timestamp.</p> <ul> <li>Author: Built-in javascript function</li> </ul>"},{"location":"date/#usage","title":"Usage","text":"<p>Reference</p>"},{"location":"date/#create-instance","title":"Create instance","text":"<pre><code>var d = new Date();\nvar d = new Date(timestamp);\nvar d = new Date(dateString);\nvar d = new Date(year, month, day, hours, minutes, seconds, milliseconds);\n</code></pre>"},{"location":"date/#get-date","title":"Get date","text":"<pre><code>var year = d.getFullYear();    // returns the year\nvar month = d.getMonth();      // returns the month (0-11)\nvar date = d.getDate();        // returns the day of the month (1-31)\nvar day = d.getDay();          // returns the day of the week\nvar hour = d.getHours();       // returns the hour (0-23)\nvar min = d.getMinutes();      // returns the minutes (0-59)\nvar sec = d.getSeconds();      // returns the seconds (0-59)\nvar ms = d.getMilliseconds();  // returns the milliseconds (0-999)\n</code></pre>"},{"location":"date/#get-unix-timestamp","title":"Get unix-timestamp","text":"<pre><code>var timestamp = d.getTime();;   // unix-timestamp in milliseconds\n</code></pre> <p>or</p> <pre><code>var timestamp = Date.now();;    // unix-timestamp in milliseconds\n</code></pre>"},{"location":"date/#to-string","title":"To string","text":"<pre><code>var s = d.toLocaleString();   // locale conventions\nvar iso = d.toISOString();    // ISO standard\n</code></pre>"},{"location":"device/","title":"Device","text":""},{"location":"device/#introduction","title":"Introduction","text":"<p>Get information of device, built-in properties of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"device/#usage","title":"Usage","text":""},{"location":"device/#os","title":"OS","text":"<ul> <li>Platform      <pre><code>scene.sys.game.device.os.android      // Is running on android?\nscene.sys.game.device.os.chromeOS     // Is running on chromeOS?\nscene.sys.game.device.os.cordova      // Is the game running under Apache Cordova?\nscene.sys.game.device.os.crosswalk    // Is the game running under the Intel Crosswalk XDK?\nscene.sys.game.device.os.desktop      // Is running on a desktop?\nscene.sys.game.device.os.ejecta       // Is the game running under Ejecta?\nscene.sys.game.device.os.electron     // Is the game running under GitHub Electron?\nscene.sys.game.device.os.iOS          // Is running on iOS?\nscene.sys.game.device.os.iPad         // Is running on iPad?\nscene.sys.game.device.os.iPhone       // Is running on iPhone?\nscene.sys.game.device.os.kindle       // Is running on an Amazon Kindle?\nscene.sys.game.device.os.linux        // Is running on linux?\nscene.sys.game.device.os.macOS        // Is running on macOS?\nscene.sys.game.device.os.node         // Is the game running under Node.js?\nscene.sys.game.device.os.nodeWebkit   // Is the game running under Node-/Webkit?\nscene.sys.game.device.os.webApp       // Set to true if running as a WebApp, i.e. within a WebView\nscene.sys.game.device.os.windows      // Is running on windows?\nscene.sys.game.device.os.windowsPhone // Is running on a Windows Phone?\n</code></pre></li> <li>Major version number of ios     <pre><code>var version = scene.sys.game.device.os.iOSVersion;\n</code></pre></li> <li>Pixel-ratio of the host device     <pre><code>var pixelRatio = scene.sys.game.device.os.pixelRatio;\n</code></pre></li> </ul>"},{"location":"device/#browser","title":"Browser","text":"<ul> <li>Platform     <pre><code>scene.sys.game.device.browser.chrome       // Is running in Chrome?\nscene.sys.game.device.browser.edge         // Is running in Microsoft Edge browser?\nscene.sys.game.device.browser.firefox      // Is running in Firefox?\nscene.sys.game.device.browser.ie           // Is running in Internet Explorer 11 or less (not Edge)?\nscene.sys.game.device.browser.mobileSafari // Is running in Mobile Safari?\nscene.sys.game.device.browser.opera        // Is running in Opera?\nscene.sys.game.device.browser.safari       // Is running in Safari?\nscene.sys.game.device.browser.silk         // Is running in the Silk browser (as used on the Amazon Kindle)?\nscene.sys.game.device.browser.trident       // Is running a Trident version of Internet Explorer (IE11+)?\n</code></pre></li> <li>Version     <pre><code>var version = scene.sys.game.device.browser.chromeVersion;\nvar version = scene.sys.game.device.browser.firefoxVersion;\nvar version = scene.sys.game.device.browser.ieVersion;\nvar version = scene.sys.game.device.browser.safariVersion;\nvar version = scene.sys.game.device.browser.tridentVersion;\n</code></pre></li> </ul>"},{"location":"device/#audio","title":"Audio","text":"<pre><code>var flac = scene.sys.game.device.audio.flac;\nvar aac = scene.sys.game.device.audio.aac;\nvar dolby = scene.sys.game.device.audio.dolby;\nvar m4a = scene.sys.game.device.audio.m4a;\nvar mp3 = scene.sys.game.device.audio.mp3;\nvar ogg = scene.sys.game.device.audio.ogg;\nvar opus = scene.sys.game.device.audio.opus;\nvar wav = scene.sys.game.device.audio.wav;\nvar webm = scene.sys.game.device.audio.webm;\nvar webAudio = scene.sys.game.device.audio.webAudio;\nvar audioData = scene.sys.game.device.audio.audioData;\n</code></pre>"},{"location":"device/#video","title":"Video","text":"<pre><code>var h264Video = scene.sys.game.device.video.h264;  // Can this device play h264 mp4 video files?\nvar hlsVideo = scene.sys.game.device.video.hls;    // Can this device play hls video files?\nvar mp4Video = scene.sys.game.device.video.mp4;    // Can this device play h264 mp4 video files?\nvar m4vVideo = scene.sys.game.device.video.m4v;    // Can this device play m4v (typically mp4) video files?\nvar oggVideo = scene.sys.game.device.video.ogg;    // Can this device play ogg video files?\nvar vp9Video = scene.sys.game.device.video.vp9;    // Can this device play vp9 video files?\nvar webmVideo = scene.sys.game.device.video.webm;  // Can this device play webm video files?\n</code></pre>"},{"location":"dialog-quest/","title":"Dialog-quest","text":""},{"location":"dialog-quest/#introduction","title":"Introduction","text":"<p>Flow control of question manager with a dialog.</p> <ul> <li>Author: Rex</li> <li>Template</li> </ul>"},{"location":"dialog-quest/#live-demos","title":"Live demos","text":"<ul> <li>Branch</li> <li>Shuffle</li> </ul>"},{"location":"dialog-quest/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dialog-quest/#install-plugin","title":"Install plugin","text":""},{"location":"dialog-quest/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');    scene.load.script('rexdialogquest', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdialogquest.min.js');\n</code></pre></li> <li>Add dialog and quest object     <pre><code>var dialog = scene.rexUI.add.dialog(config); var quest = new rexdialogquest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nimport DialogQuest from 'phaser3-rex-plugins/templates/dialog-quest/DialogQuest.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog and quest object     <pre><code>var dialog = scene.rexUI.add.dialog(config); var quest = new DialogQuest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Dialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\nimport DialogQuest from 'phaser3-rex-plugins/templates/dialog-quest/DialogQuest.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new Dialog(scene, config);\nscene.add.existing(dialog);\nvar quest = new DialogQuest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#create-dialog-quest-object","title":"Create dialog-quest object","text":"<pre><code>var quest = new DialogQuest({\ndialog: dialog,\n\nquestions: undefined,\n// format: undefined,\n// delimiter: ',',\n// types: {\n//     question: 'q',\n//     option: '',\n// },\n// convert: true,\n\nquest: true,\n// quest: {\n//     shuffleQuestions: false,\n//     shuffleOptions: false,\n// }\n});\n</code></pre> <ul> <li><code>dialog</code> : A dialog game object.<ul> <li>UI plugin does not included in this template, install it before creating a dialog game object.</li> <li>Reuse/update dialog game object for each question.</li> <li>The number of choice buttons should be equal or larger than the maximun number of options. </li> </ul> </li> <li>Other parameters : See quest</li> </ul>"},{"location":"dialog-quest/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nStart[\"quest.start()\"] --&gt; EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)&lt;br&gt;----&lt;br&gt;Update each choice button via question.option[i]\"]\n\nEventUpdateChoice --&gt; EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)&lt;br&gt;----&lt;br&gt;Update dialog, action button via question\"]\n\nEventUpdateDialog --&gt; EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)&lt;br&gt;----&lt;br&gt;Click any choice button\"]\n\nEventClickChoice --&gt; EventClickAction[\"quest.emit('click-action', action, dialog, quest)&lt;br&gt;----&lt;br&gt;Click any action button\"]\n\nEventClickAction --&gt; IsLast{\"quest.isLast()\"}\nEventClickChoice --&gt; IsLast\n\nIsLast --&gt; |No| Next[\"quest.next()\"]\nIsLast --&gt; |Yes| Complete(\"Complete\")\n\nNext --&gt; EventUpdateChoice</code></pre>"},{"location":"dialog-quest/#events","title":"Events","text":"<ul> <li>Update dialog events<ul> <li>Update each choice button via question.option[i]     <pre><code>quest.on('update-choice', function(choice, option, quest){\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Choice button game object.<ul> <li>Unused choice button game object will be hideen.</li> </ul> </li> <li><code>option</code> : Option object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> <li>Update dialog, action buttos via question     <pre><code>quest.on('update-dialog', function(dialog, question, quest){\n}, scope);\n</code></pre><ul> <li><code>dialog</code> : Dialog game object.<ul> <li>Call <code>dialog.layout()</code> if needs.</li> </ul> </li> <li><code>question</code> : Question object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> </ul> </li> <li>Button clicking events<ul> <li>Click choice button     <pre><code>quest.on('click-choice', function(choice, dialog, quest) {\n\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Clicked choice button game object.</li> <li><code>dialog</code> : Dialog game object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> <li>Click choice button     <pre><code>quest.on('click-action', function(action, dialog, quest) {\n\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Clicked action button game object.</li> <li><code>dialog</code> : Dialog game object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"dialog-quest/#quest-methods","title":"Quest methods","text":"<ul> <li>Start quest     <pre><code>quest.start();\n</code></pre></li> <li>Next quest     <pre><code>quest.next();\n</code></pre>     or     <pre><code>quest.next(key);\n</code></pre></li> <li>Is last question     <pre><code>var isLast = quest.isLast();\n</code></pre></li> </ul>"},{"location":"dialog-quest/#private-data-methods","title":"Private data methods","text":"<ul> <li>Get data     <pre><code>var value = quest.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = quest.getData();\n</code></pre></li> <li>Set value     <pre><code>quest.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>quest.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>quest.mulData(key, mul, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>quest.clearData();\n</code></pre></li> </ul>"},{"location":"distance/","title":"Distance","text":""},{"location":"distance/#introduction","title":"Introduction","text":"<p>Get distance, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"distance/#usage","title":"Usage","text":""},{"location":"distance/#distance","title":"Distance","text":"<ul> <li>Get distance between 2 points     <pre><code>var d = Phaser.Math.Distance.Between(x1, y1, x2, y2);\n</code></pre>     or     <pre><code>var d = Phaser.Math.Distance.BetweenPoints(a, b); // a, b: {x, y}\n</code></pre></li> <li>Get squared distance     <pre><code>var d = Phaser.Math.Distance.BetweenPointsSquared(a, b); // a, b: {x, y}\n</code></pre></li> <li>Get Chebyshev distance (the maximum of the horizontal and vertical distances)     <pre><code>var d = Phaser.Math.Distance.Chebyshev(x1, y1, x2, y2);\n</code></pre></li> <li>Get snake distance(i.e. rectilinear distance, Manhattan distance, the sum of the horizontal and vertical distance)     <pre><code>var d = Phaser.Math.Distance.Snake(x1, y1, x2, y2);\n</code></pre></li> <li>Get power distance (the sum of the horizontal power distance and vertical power distance)     <pre><code>var d = Phaser.Math.Distance.Power(x1, y1, x2, y2);\n</code></pre></li> </ul>"},{"location":"distance/#speed","title":"Speed","text":"<ul> <li>Get speed     <pre><code>var d = Phaser.Math.GetSpeed(distance, time);\n</code></pre><ul> <li>distance : The distance to travel in pixels.</li> <li>time : The time, in ms, to cover the distance in.</li> </ul> </li> </ul>"},{"location":"domelement/","title":"DOM element","text":""},{"location":"domelement/#introduction","title":"Introduction","text":"<p>Carry DOM element, built-in game object of phaser.</p> <p>Limitations</p> <p>Dom elements appear above or below your game canvas. You cannot blend them into the display list, meaning you cannot have a DOM Element, then a Sprite, then another DOM Element behind it.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"domelement/#usage","title":"Usage","text":""},{"location":"domelement/#configuration","title":"Configuration","text":"<ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> <pre><code>var config = {\n// ...\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"domelement/#add-dom-element-object","title":"Add DOM element object","text":""},{"location":"domelement/#add-html-string","title":"Add html string","text":"<ol> <li>Load html string in preload stage     <pre><code>scene.load.html(key, url);\n</code></pre>     Reference: load html</li> <li>Add DOM element object with html string from cache     <pre><code>var domElement = scene.add.dom(x, y).createFromCache(key);  // elementType = 'div'\n// var domElement = scene.add.dom(x, y).createFromCache(key, elementType);\n</code></pre><ul> <li>Add DOM element object with html string     <pre><code>var domElement = scene.add.dom(x, y).createFromHTML(htmlString);  // elementType = 'div'\n// var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType);\n</code></pre><ul> <li>`elementType : The tag name of the element into which all of the html will be inserted. Defaults to a plain div tag.</li> </ul> </li> </ul> </li> </ol>"},{"location":"domelement/#create-element","title":"Create element","text":"<pre><code>scene.add.dom(x, y).createElement(tagName);\n// scene.add.dom(x, y).createElement(tagName, style, innerText);\n</code></pre> <ul> <li><code>tagName</code> : A string that specifies the type of element to be created. For example, <code>'div'</code></li> <li><code>style</code> : Either a DOMString that holds the CSS styles to be applied to the created element, or an object the styles will be readyfrom. Optional.</li> <li><code>innerText</code> : A DOMString that holds the text that will be set as the innerText of the created element. Optional.</li> </ul>"},{"location":"domelement/#add-existing-dom","title":"Add existing DOM","text":"<ol> <li>Create DOM element     <pre><code>var el = document.createElement('div');\n// el.style = '...';\n// el.innerText = '...';\n</code></pre></li> <li>Add to scene    <pre><code>var domElement = scene.add.dom(x, y, el);\n// var domElement = scene.add.dom(x, y, el, style, innerText);\n</code></pre></li> </ol>"},{"location":"domelement/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDOMElement extends Phaser.GameObjects.DOMElement {\nconstructor(scene, x, y, element, style, innerText) {\nsuper(scene, x, y, element, style, innerText);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var domElement = new MyDOMElement(scene, x, y, element);\n</code></pre></li> </ul>"},{"location":"domelement/#event-of-dom-element","title":"Event of DOM element","text":"<ul> <li>Add listener     <pre><code>domElement.addListener(eventName);\n</code></pre><ul> <li><code>eventName</code> : Event name<ul> <li>Single string. ex. <code>'click'</code></li> <li>Event name joined with <code>' '</code></li> </ul> </li> </ul> </li> <li>Add event handler     <pre><code>var callback = function(event) {\n// event.target.name\n};\ndomElement.on(eventName, callback, scope);\n// domElement.once(eventName, callback, scope);\n</code></pre>     Reference: event emitter</li> <li>Remove listener     <pre><code>domElement.removeListener(eventName);\n</code></pre><ul> <li><code>eventName</code> : Event name<ul> <li>Single string. ex. <code>'click'</code></li> <li>Event name joined with <code>' '</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"domelement/#get-child","title":"Get child","text":"<ul> <li>Get child by name     <pre><code>var child = domElement.getChildByName(name)\n</code></pre></li> <li>Get child by id     <pre><code>var child = domElement.getChildByID(id)\n</code></pre></li> <li>Get child by property     <pre><code>var child = domElement.getChildByProperty(property, value)\n</code></pre></li> </ul>"},{"location":"domelement/#set-inner-html-string","title":"Set inner html string","text":"<pre><code>scene.setHTML(html);\n</code></pre> <p>or</p> <pre><code>scene.setText(html);\n</code></pre>"},{"location":"domelement/#dom-element","title":"DOM Element","text":"<p>Each DOM element object has 1 DOM element.</p> <ul> <li>Set    <pre><code>domElement.setElement(el);\n// domElement.setElement(el, style, innerText);\n</code></pre></li> <li>Get    <pre><code>var el = domElement.node;\n</code></pre></li> </ul>"},{"location":"domelement/#depth","title":"Depth","text":"<pre><code>domElement.setDepth(value);\n</code></pre>"},{"location":"domelement/#set-size","title":"Set size","text":"<pre><code>var style = domElement.node.style;\nstyle.width = width + 'px';\nstyle.height = height + 'px';\ndomElement.updateSize();\n</code></pre>"},{"location":"domelement/#skew","title":"Skew","text":"<pre><code>domElement.setSkew(x, y);\n</code></pre> <p>or</p> <pre><code>domElement.skewX = x;\ndomElement.skewY = y;\n</code></pre>"},{"location":"domelement/#rotate-3d","title":"Rotate 3d","text":"<p>The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.</p> <pre><code>domElement.rotate3d.set(x, y, z, a);\n</code></pre> <p>or</p> <pre><code>domElement.rotate3d.x = x;\ndomElement.rotate3d.y = y;\ndomElement.rotate3d.z = z;\ndomElement.rotate3d.w = a;\n</code></pre> <p>Reference</p>"},{"location":"domelement/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<ol> <li>DOM game object always put above game canvas, i.e. DOM game object will render above any other kind of game object.</li> <li>DOM game object will receive touch event even if it is not the first touched game object.</li> <li>P3's <code>'pointerdown'</code>, <code>'pointerup'</code> events will be fired above/under DOM game object.</li> <li>P3's <code>'pointermove'</code> event won't be fired above/under DOM game object, except <ul> <li>Setting DOM game object to be invisilbe.</li> <li>Assign input.mouse.target parameter of game config.</li> </ul> </li> </ol>"},{"location":"domelement/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"drag/","title":"Drag","text":""},{"location":"drag/#introduction","title":"Introduction","text":"<p>Drag game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"drag/#live-demos","title":"Live demos","text":"<ul> <li>Try dragging</li> </ul>"},{"location":"drag/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"drag/#install-plugin","title":"Install plugin","text":""},{"location":"drag/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdragplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragplugin.min.js', true);\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = scene.plugins.get('rexdragplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragPlugin from 'phaser3-rex-plugins/plugins/drag-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDrag',\nplugin: DragPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = scene.plugins.get('rexDrag').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Drag from 'phaser3-rex-plugins/plugins/drag.js';\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = new Drag(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#create-instance","title":"Create instance","text":"<pre><code>var drag = scene.plugins.get('rexDrag').add(gameObject, {\n// enable: true,\n// axis: 0,      //0|'both'|'h&amp;v'|1|'horizontal'|'h'|2|'vertical'|'v'\n// rotation: Phaser.Math.DegToRad(45)  // axis rotation in rad\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>axis</code> :<ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> <li><code>rotation</code> : Axis rotation in rad, available in horizontal or vertical axis mode.</li> </ul>"},{"location":"drag/#events","title":"Events","text":"<p>Built-in dragging events</p> <pre><code>gameObject.on('dragstart', function(pointer, dragX, dragY){ /*...*/ });\ngameObject.on('drag', function(pointer, dragX, dragY){ /*...*/ });\ngameObject.on('dragend', function(pointer, dragX, dragY, dropped){ /*...*/ });\n</code></pre>"},{"location":"drag/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = drag.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>drag.setEnable(enable);  // enable: true, or false\n// drag.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>drag.toggleEnable();\n</code></pre></li> </ul>"},{"location":"drag/#get-dragging-state","title":"Get dragging state","text":"<pre><code>var isDragging = drag.isDragging;\n</code></pre>"},{"location":"drag/#set-rotation-of-axis","title":"Set rotation of axis","text":"<pre><code>drag.setAxisRotation(rad);\n// drag.axisRotation = rad;\n</code></pre>"},{"location":"drag/#set-axis-mode","title":"Set axis mode","text":"<pre><code>drag.setAxisMode(axis);\n</code></pre> <ul> <li><code>axis</code> : <ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"drag/#try-drag","title":"Try drag","text":"<p>Game object will be dragged if there is any point above it.</p> <pre><code>drag.drag();\n</code></pre>"},{"location":"drag/#drop","title":"Drop","text":"<p>Game object will be dropped(dragend) manually.</p> <pre><code>drag.dragend();\n</code></pre>"},{"location":"dragrotate/","title":"Drag rotate","text":""},{"location":"dragrotate/#introduction","title":"Introduction","text":"<p>Get dragging angle around a specific point.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"dragrotate/#live-demos","title":"Live demos","text":"<ul> <li>Spin-button</li> </ul>"},{"location":"dragrotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dragrotate/#install-plugin","title":"Install plugin","text":""},{"location":"dragrotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdragrotateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragrotateplugin.min.js', true);\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = scene.plugins.get('rexdragrotateplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragRotatePlugin from 'phaser3-rex-plugins/plugins/dragrotate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDragRotate',\nplugin: DragRotatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = scene.plugins.get('rexDragRotate').add(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DragRotate from 'phaser3-rex-plugins/plugins/dragrotate.js';\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = new DragRotate(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#create-instance","title":"Create instance","text":"<pre><code>var dragRotate = scene.plugins.get('rexDragRotate').add(scene, {\nx: 0,\ny: 0,\nmaxRadius: 100\nminRadius: 0,\n// enable: true,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Orgin point, in world position.</li> <li><code>maxRadius</code>, <code>minRadius</code> : Dragging is valid when distance between touch pointer and origin position is larger then <code>minRadius</code> and less then <code>maxRadius</code>.</li> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> </ul>"},{"location":"dragrotate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = dragRotate.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>dragRotate.setEnable(enable);  // enable: true, or false\n// dragRotate.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>dragRotate.toggleEnable();\n</code></pre></li> </ul>"},{"location":"dragrotate/#origin-point","title":"Origin point","text":"<ul> <li>Get     <pre><code>var x = dragRotate.x;\nvar y = dragRotate.y;\n</code></pre></li> <li>Set     <pre><code>dragRotate.setOrigin(x, y);\n</code></pre>     or     <pre><code>dragRotate.setOrigin(pointer); // pointer: {x, y}\n</code></pre></li> </ul> <p>Note</p> <p>Parameter <code>(x,y)</code> is world position, not camera position.</p>"},{"location":"dragrotate/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var maxRadius = dragRotate.maxRadius;\nvar minRadius = dragRotate.minRadius;\n</code></pre></li> <li>Set     <pre><code>dragRotate.setRadius(maxRadius, minRadius);\n</code></pre></li> </ul>"},{"location":"dragrotate/#get-dragging-state","title":"Get dragging state","text":"<pre><code>var state = dragRotate.state;\n</code></pre> <ul> <li><code>0</code> : No touch pointer</li> <li><code>1</code> : Catch touch pointer<ul> <li>Fire <code>'dragstart'</code> event when catching touch pointers.</li> <li>Fire <code>'drag'</code> event when any catched touch pointer moved.</li> <li>Fire <code>'dragend'</code> event when releasing catched touch pointer.</li> </ul> </li> </ul>"},{"location":"dragrotate/#is-drag","title":"Is drag","text":"<pre><code>var isDrag = dragRotate.isDrag;\n</code></pre> <p>Return <code>true</code> if <code>(dragRotate.state === 1)</code> and catched touch pointer just moved.</p>"},{"location":"dragrotate/#drag-cancel","title":"Drag cancel","text":"<pre><code>dragRotate.dragCancel();\n</code></pre>"},{"location":"dragrotate/#events","title":"Events","text":""},{"location":"dragrotate/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging     <pre><code>dragRotate.on('drag', function(dragRotate) {\n// gameObject.rotation += dragRotate.deltaRotation;\n}, scope);\n</code></pre><ul> <li><code>dragRotate.deltaRotation</code> : Dragging angle around origin position, in radians.<ul> <li>Add to <code>gameObject.rotation</code> to spin target game object.     <pre><code>gameObject.rotation += dragRotate.deltaRotation;\n</code></pre></li> </ul> </li> <li><code>dragRotate.deltaAngle</code> : Dragging angle around origin position, in degrees.<ul> <li>Add to <code>gameObject.angle</code> to spin target game object.     <pre><code>gameObject.angle += dragRotate.deltAangle;\n</code></pre></li> </ul> </li> <li><code>dragRotate.cw</code> : Return <code>true</code> if dragging is dragrotate-wise.</li> <li><code>dragRotate.ccw</code> : Return <code>true</code> if dragging is counter-dragrotate-wise.</li> </ul> </li> </ul>"},{"location":"dragrotate/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag touch pointer start, fired when catching touch pointer.     <pre><code>dragRotate.on('dragstart', function(dragRotate) {\n\n}, scope);\n</code></pre></li> <li>On drag touch pointer end, fired when releasing the catched touch pointer.     <pre><code>dragRotate.on('dragend', function(dragRotate) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"dragrotate/#catched-touch-pointer","title":"Catched touch pointer","text":"<ul> <li>Pointer, available when state is <code>1</code> <pre><code>var pointer = dragRotate.pointer;\n</code></pre><ul> <li>World position of pointer     <pre><code>var x = pointer.worldX;\nvar y = pointer.worldY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"dropdown/","title":"Drop down","text":""},{"location":"dropdown/#introduction","title":"Introduction","text":"<p>Drop down game object below another target game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"dropdown/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down</li> </ul>"},{"location":"dropdown/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dropdown/#install-plugin","title":"Install plugin","text":""},{"location":"dropdown/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdropdownplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdropdownplugin.min.js', true);\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = scene.plugins.get('rexdropdownplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = scene.plugins.get('rexDropDown').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DropDownBehavoir from 'phaser3-rex-plugins/plugins/dropdown.js';\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = new DropDownBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#create-instance","title":"Create instance","text":"<pre><code>var dropDown = scene.plugins.get('rexDropDown').add(gameObject, {        // expandDirection: 0,\n// alignTargetX: \n// alignTargetY: \n// alignOffsetX: \n// alignOffsetY: \n// bounds:\n\n// When to close dropdown dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n\n// duration: {\n//     in: 200,\n//     out: 200\n// }\n\n// transitIn: undefined,\n// transitOut: undefined,\n\n// destroy: true\n});\n</code></pre> <ul> <li><code>expandDirection</code> : Expand direction<ul> <li><code>0</code>, <code>'down'</code> : Expand game object down. i.e. game object will put below target game object. Defatut behavior.</li> <li><code>1</code>, <code>'up'</code> : Expand game object up. i.e. game object will put above target game object.</li> </ul> </li> <li><code>alignTargetX</code> : Align left side game object to left side of target game object</li> <li><code>alignTargetY</code> : Required parameter<ul> <li>Align top side game object to bottom side of target game object, if <code>expandDirection</code> is <code>0</code>(<code>'down'</code>).</li> <li>Align bottom side game object to top side of target game object, if <code>expandDirection</code> is <code>1</code>(<code>'up'</code>).</li> </ul> </li> <li><code>alignOffsetX</code>, <code>alignOffsetY</code> : Extra position offset. Default value ares <code>0</code>, <code>0</code>.</li> <li><code>bounds</code> : Put game object below target game object if bottom of game object is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>touchOutsideClose</code> : Set to <code>true</code> to close dropdown dialog when clicking out side of gameObject. <ul> <li>Default value is <code>false</code>.  Will be set to <code>false</code> if <code>anyTouchClose</code> is set to <code>true</code>.</li> </ul> </li> <li><code>anyTouchClose</code> : Set to <code>true</code> to close dropdown dialog when any clicking. <ul> <li>Default value is <code>false</code>.</li> </ul> </li> <li><code>duration</code> : Duration of transition-in, hold, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.</li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog).<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Tween behavior of opening dialog. Default behavior is scale up the height of game object.       <ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog. Default behavior is scale down the height of game <ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>destroy</code><ul> <li><code>true</code> : Destroy dialog when closing completed. Default behavior.</li> <li><code>fasle</code> : Don't destroy dialog.</li> </ul> </li> </ul>"},{"location":"dropdown/#close","title":"Close","text":"<pre><code>dropDown.requestClose();\n// dropDown.requestClose();\n</code></pre>"},{"location":"dropdown/#events","title":"Events","text":"<ul> <li>On opened dialog     <pre><code>dropDown.on('open', function(gameObject, dropdown) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>dropDown.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"dynamic-texture/","title":"Dynamic texture","text":""},{"location":"dynamic-texture/#introduction","title":"Introduction","text":"<p>Canvas Dynamic Texture stored in texture cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"dynamic-texture/#usage","title":"Usage","text":""},{"location":"dynamic-texture/#create-dynamic-texture","title":"Create dynamic texture","text":"<pre><code>var texture = scene.textures.addDynamicTexture(key, width, height);\n</code></pre> <p>Disable <code>texture.isSpriteTexture</code> if this texture is not a base texture for Sprite Game Objects.</p> <pre><code>texture.setIsSpriteTexture(false);\n// texture.isSpriteTexture = false;\n</code></pre>"},{"location":"dynamic-texture/#set-size","title":"Set size","text":"<pre><code>texture.setSize(width, height);\n</code></pre>"},{"location":"dynamic-texture/#fill-color","title":"Fill color","text":"<pre><code>texture.fill(rgb);\n// texture.fill(rgb, alpha, x, y, width, height);\n</code></pre> <ul> <li><code>rgb</code> : The number color to fill this Dynamic Texture with.</li> <li><code>alpha</code> : The alpha value used by the fill. Default value is <code>1</code>.</li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : The area of the fill rectangle. Default behavior is filling whole size.</li> </ul>"},{"location":"dynamic-texture/#clear","title":"Clear","text":"<pre><code>texture.clear();\n</code></pre> <pre><code>texture.clear(x, y, width, height);\n</code></pre>"},{"location":"dynamic-texture/#draw-game-object","title":"Draw game object","text":"<pre><code>texture.draw(entries);\n// texture.draw(entries,x, y);\n// texture.draw(entries, x, y, alpha, tint);\n</code></pre> <ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The x/y position to draw the Frame at, or the offset applied to the object.<ul> <li>If the object is a Group, Container or Display List, the coordinates are added to the positions of the children.</li> <li>For all other types of object, the coordinates are exact.</li> </ul> </li> <li><code>alpha</code>, <code>tint</code> : Only used by Texture Frames.<ul> <li>Game Objects use their own alpha and tint values when being drawn.</li> </ul> </li> </ul>"},{"location":"dynamic-texture/#erase-game-object","title":"Erase game object","text":"<pre><code>texture.erase(entries);\n// texture.erase(entries, x, y);\n</code></pre> <ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The x/y position to draw the Frame at, or the offset applied to the object.<ul> <li>If the object is a Group, Container or Display List, the coordinates are added to the positions of the children.</li> <li>For all other types of object, the coordinates are exact.</li> </ul> </li> </ul>"},{"location":"dynamic-texture/#draw-frame","title":"Draw frame","text":"<pre><code>texture.drawFrame(key, frame, x, y);\n// texture.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Top-left position</li> </ul> <p>or</p> <pre><code>texture.stamp(key, frame, x, y, {\nalpha: 1,\ntint: 0xffffff,\nangle: 0,\nrotation: 0,\nscale: 1,\nscaleX: 1,\nscaleY: 1,\noriginX: 0.5,\noriginY: 0.5,\nblendMode: 0,\nerase: false,\nskipBatch: false\n})\n</code></pre>"},{"location":"dynamic-texture/#draw-repeat-frames","title":"Draw repeat frames","text":"<ul> <li>Repeat frames full of size     <pre><code>texture.repeat(key, frame);\n</code></pre></li> <li>Repeat in an area     <pre><code>texture.repeat(key, frame, x, y, width, height);\n// texture.repeat(key, frame, x, y, width, height, alpha, tint, skipBatch);\n</code></pre></li> </ul>"},{"location":"dynamic-texture/#draw-frame_1","title":"Draw frame","text":"<pre><code>texture.add(name, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>name</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code> : The x coordinate of the top-left of this Frame.</li> <li><code>y</code> : The y coordinate of the top-left of this Frame.</li> <li><code>width</code> : The width of this Frame.</li> <li><code>height</code> : The height of this Frame.</li> </ul>"},{"location":"dynamic-texture/#batch-draw","title":"Batch draw","text":"<ol> <li>Begin     <pre><code>texture.beginDraw();\n</code></pre></li> <li>Draw<ul> <li>Draw game object     <pre><code>texture.batchDraw(entries, x, y, alpha, tint);\n</code></pre><ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> </ul> </li> <li>Draw frame     <pre><code>texture.batchDrawFrame(key, frame, x, y, alpha, tint);\n</code></pre></li> <li>Draw image     <pre><code>texture.stamp(key, frame, x, y, {\n// ...\nskipBatch: true\n})\n</code></pre></li> <li>Draw repeat images     <pre><code>texture.repeat(key, frame, x, y, width, height, alpha, tint, true);\n</code></pre></li> </ul> </li> <li>End     <pre><code>texture.endDraw();\n</code></pre></li> </ol>"},{"location":"dynamic-texture/#snapshot","title":"Snapshot","text":""},{"location":"dynamic-texture/#snapshot-area","title":"Snapshot area","text":"<pre><code>texture.snapshot(callback);\n// texture.snapshot(callback, type, encoderOptions);\n</code></pre> <p>or</p> <pre><code>texture.snapshotArea(x, y, width, height, callback, type, encoderOptions);\n</code></pre> <ul> <li><code>callback</code> : The Function to invoke after the snapshot image is created.     <pre><code>function(imageElement) {\n}\n</code></pre><ul> <li><code>imageElement</code> : HTMLImageElement.</li> </ul> </li> <li><code>type</code> : The format of the image to create, usually <code>'image/png'</code> or <code>'image/jpeg'</code>. Default value is <code>'image/png'</code>.</li> <li><code>encoderOptions</code> : The image quality, between <code>0</code> and <code>1</code>. Used for image formats with lossy compression, such as <code>'image/jpeg'</code>. Default value is <code>0.92</code>.</li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : Snapshot area.</li> </ul>"},{"location":"dynamic-texture/#get-color-of-a-pixel","title":"Get color of a pixel","text":"<pre><code>texture.snapshotPixel(x, y, callback);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The x/y coordinate of the pixel to get.</li> <li><code>callback</code> : The Function to invoke after the snapshot image is created.     <pre><code>function(color) {        }\n</code></pre><ul> <li><code>color</code> : Color object.</li> </ul> </li> </ul>"},{"location":"dynamicbitmaptext/","title":"Dynamic bitmap text","text":""},{"location":"dynamicbitmaptext/#introduction","title":"Introduction","text":"<p>Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"dynamicbitmaptext/#usage","title":"Usage","text":""},{"location":"dynamicbitmaptext/#load-bitmap-font","title":"Load bitmap font","text":"<p>Reference: load bitmap font</p>"},{"location":"dynamicbitmaptext/#add-bitmap-text-object","title":"Add bitmap text object","text":"<pre><code>var txt = scene.add.dynamicBitmapText(x, y, key, text);\n// var txt = scene.add.dynamicBitmapText(x, y, key, text, size, align);\n</code></pre> <ul> <li><code>size</code> : The size of the font</li> <li><code>align</code> : The alignment of the text in a multi-line BitmapText object.<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul> <p>Add text from JSON</p> <pre><code>var txt = scene.make.dynamicBitmapText({\nx: 0,\ny: 0,\ntext: 'Text\\nGame Object\\nCreated from config',\nfont: '',\nsize: false,\nalign: 0,\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"dynamicbitmaptext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.DynamicBitmapText {\nconstructor(scene, x, y, key, text, size, align) {\nsuper(scene, x, y, key, text, size, align);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, key, text);\n</code></pre></li> </ul>"},{"location":"dynamicbitmaptext/#set-callback","title":"Set callback","text":"<pre><code>var callback = function(data) {\n// input\n// data.index, data.charCode\n// data.x, data.y, data.scale, data.rotation\n// data.data\n// data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight    \n\n// modify input `data` then return it\n// ...\n// offset: data.y += 2\n// set tint: data.color = tint\nreturn data;\n}\ntxt.setDisplayCallback(callback);\n</code></pre>"},{"location":"dynamicbitmaptext/#set-text","title":"Set text","text":"<pre><code>txt.setText('...');\n</code></pre> <p>or</p> <pre><code>txt.text = '...';\n</code></pre>"},{"location":"dynamicbitmaptext/#crop","title":"Crop","text":"<ul> <li>Set size     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.cropWidth = width;\ntxt.cropHeight = height;\n</code></pre></li> <li>Set offset     <pre><code>txt.setScrollX(scrollX);\ntxt.setScrollY(scrollY);\n</code></pre>     or     <pre><code>this.scrollX = scrollX;\nthis.scrollY = scrollY;\n</code></pre></li> </ul>"},{"location":"dynamicbitmaptext/#other-properties","title":"Other properties","text":"<p>This dynamic bitmap text class is extended from bitmap text</p>"},{"location":"dynamictext/","title":"Dynamic text","text":""},{"location":"dynamictext/#introduction","title":"Introduction","text":"<p>Control position, angle of each character drawn on a canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"dynamictext/#live-demos","title":"Live demos","text":"<ul> <li>Page typing</li> <li>Align, rotation, drawBelowCallback</li> <li>Vertical wrap</li> <li>Character's world position</li> <li>Child input event</li> </ul>"},{"location":"dynamictext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dynamictext/#install-plugin","title":"Install plugin","text":""},{"location":"dynamictext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdynamictextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdynamictextplugin.min.js', true);\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DynamicTextPlugin from 'phaser3-rex-plugins/plugins/dynamictext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDynamicTextPlugin',\nplugin: DynamicTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DynamicText from 'phaser3-rex-plugins/plugins/dynamictext.js';\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = new DynamicText(scene, x, y, width, height, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"dynamictext/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexDynamicText({\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\n\nchildrenInteractive: false,\n\ntext: '',\n\nwrap: undefined,\n\ntestString: '|M\u00c9qgy',\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this dynamic-text game object.</li> <li><code>width</code> : Fixed width.<ul> <li>A number : Width of this dynamic-text game object. <ul> <li>Wrap-width is <code>width - padding.left - padding.right</code>.</li> </ul> </li> <li><code>undefined</code> : Width of this dynamic-text game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>height</code> : Fixed height.<ul> <li>A number : Height of this dynamic-text game object. </li> <li><code>undefined</code> : Height of this dynamic-text game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>padding</code> : Padding of bounds.<ul> <li>A number </li> <li><code>padding.left</code>, <code>padding.right</code>, <code>padding.top</code>, <code>padding.bottom</code></li> </ul> </li> <li><code>background</code> : Properties of background round-rectangle.<ul> <li><code>background.color</code> : Fill color, number or string.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>background.color2</code> : Gradient fill color, number or string.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>background.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>background.stroke</code> : Stroke color, number or string.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>background.strokeThickness</code> : Line width of stroke.</li> <li><code>background.cornerRadius</code> : Corner-radius of round rectangle.</li> <li><code>background.cornerIteration</code> : Iteration of corner-radius.<ul> <li><code>null</code> : Draw corner-radius via arc directly.</li> <li>A number : Draw corner-radius via lines</li> </ul> </li> </ul> </li> <li><code>innerBounds</code> : Properties of inner-bounds.<ul> <li><code>innerBounds.color</code> : Fill color, number or string.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>innerBounds.color2</code> : Gradient fill color, number or string.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>innerBounds.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>innerBounds.stroke</code> : Stroke color, number or string.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>innerBounds.strokeThickness</code> : Line width of stroke.</li> </ul> </li> <li><code>style</code> : Initial text-style.<ul> <li><code>style.bold</code> : Bold</li> <li><code>style.italic</code> : Italic</li> <li><code>style.fontSize</code> : Font size, number or string.</li> <li><code>style.fontFamily</code> : Font family</li> <li><code>style.color</code> : Fill color, number or string.</li> <li><code>style.stroke</code> : Stroke color, number or string.</li> <li><code>style.strokeThickness</code> : Line width of stroke.</li> <li><code>style.shadowColor</code> : Shadow color, number or string.<ul> <li><code>null</code> : No shadow.</li> </ul> </li> <li><code>style.shadowOffsetX</code> : OffsetX of shadow.</li> <li><code>style.shadowOffsetY</code> : OffsetY of shadow.</li> <li><code>style.shadowBlur</code> : Blur of shadow.</li> <li><code>style.backgroundColor</code> : Background color of a character.</li> <li><code>style.backgroundHeight</code>, <code>style.backgroundBottomY</code> : Background position and height of a character.<ul> <li><code>undefined</code>, or <code>null</code> : Use height of character as background height. Default behavior.</li> </ul> </li> <li><code>style.offsetX</code> : OffsetX.</li> <li><code>style.offsetY</code> : OffsetY.</li> <li><code>style.align</code> : Override default line-alignment setting.<ul> <li><code>0</code>, <code>'left'</code>, <code>'top'</code> : Align remainder lines to left/top.</li> <li><code>1</code>, <code>'center'</code> : Align remainder lines to center.</li> <li><code>2</code>, <code>'right'</code>, <code>'bottom'</code> : Align remainder lines to right/bottom.</li> <li><code>undefined</code> : Use default line-alignment setting.</li> </ul> </li> </ul> </li> <li><code>childrenInteractive</code> :<ul> <li><code>true</code> : Fire input events (<code>'child.pointerdown'</code>, <code>'child.pointerup'</code>, <code>'child.pointerover'</code>, <code>'child.pointerout'</code>) of any child after <code>text.setInteractive()</code>.</li> <li><code>false</code> : Won't fire any input events of child. Default behavior.</li> </ul> </li> <li><code>text</code> : Content of text.</li> <li><code>wrap</code> : Default configuration Horizontal/Vertical wrapping.</li> <li><code>testString</code> : Test string to get text ascent and text height with default text style.</li> </ul> <p>or</p> <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexDynamicText(x, y, config);\n</code></pre> <p>Add dynamictext from JSON</p> <pre><code>var txt = scene.make.rexDynamicText({\nx: 0,\ny: 0,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"dynamictext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDynamicText extends DynamicText {\nconstructor(scene, x, y, width, height, config)) {\nsuper(scene, x, y, width, height, config));\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyDynamicText(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#clear-content","title":"Clear content","text":"<pre><code>txt.clearContent();\n</code></pre>"},{"location":"dynamictext/#text","title":"Text","text":""},{"location":"dynamictext/#append-text","title":"Append text","text":"<pre><code>txt.appendText(text);\n</code></pre> <p>or</p> <pre><code>txt.appendText(text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre> <p>To overwrite some properties of text-style.</p> <p>Each character will be placed at position (0,0), without rotation.  Uses word-wrap method to rearrange position of characters. </p>"},{"location":"dynamictext/#set-text","title":"Set text","text":"<pre><code>txt.setText(text);\n</code></pre> <p>or</p> <pre><code>txt.setText(text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre>"},{"location":"dynamictext/#insert-text","title":"Insert text","text":"<p><pre><code>txt.insertText(index, text);\n</code></pre> or</p> <pre><code>txt.insertText(index, text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre>"},{"location":"dynamictext/#remove-text","title":"Remove text","text":"<pre><code>txt.removeText(index);\n</code></pre>"},{"location":"dynamictext/#get-text","title":"Get text","text":"<ul> <li>Get active characters     <pre><code>var text = txt.text;\n</code></pre>     or     <pre><code>var text = txt.getText();\n</code></pre></li> <li>Get all characters     <pre><code>var text = txt.getText(false);\n</code></pre></li> </ul>"},{"location":"dynamictext/#image","title":"Image","text":""},{"location":"dynamictext/#append-image","title":"Append image","text":"<pre><code>txt.appendImage(key, frame, {\n// width\n// height\n// scaleX\n// scaleY\n})\n</code></pre> <ul> <li><code>width</code> : Scaled-width. Aspect-ratio will be keep if no <code>height</code>, or <code>scaleY</code> is set.</li> <li><code>height</code> : Scaled-height. Aspect-ratio will be keep if no <code>width</code>, or <code>scaleX</code> is set.</li> </ul>"},{"location":"dynamictext/#background","title":"Background","text":"<ul> <li>Fill style     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre></li> <li>Stroke style     <pre><code>txt.setBackgroundStroke(color, lineWidth);\n</code></pre></li> <li>Corner radius     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration)\n</code></pre></li> </ul>"},{"location":"dynamictext/#inner-bounds","title":"Inner bounds","text":"<ul> <li>Fill style     <pre><code>txt.setInnerBoundsColor(color);\n// txt.setInnerBoundsColor(color, color2, isHorizontalGradient);\n</code></pre></li> <li>Stroke style     <pre><code>txt.setInnerBoundsStroke(color, lineWidth);\n</code></pre></li> </ul>"},{"location":"dynamictext/#wrap","title":"Wrap","text":"<p>Control characters :</p> <ul> <li><code>'\\n'</code> : New line</li> <li><code>'\\f'</code> : Page break</li> </ul>"},{"location":"dynamictext/#horizontal-wrap","title":"Horizontal wrap","text":"<pre><code>var result = txt.runWordWrap({\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nascent: undefined,\nlineHeight: undefined,\nuseDefaultTextHeight: false,\nmaxLines: undefined,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 0,\ncharWrap: false\n});\n</code></pre> <ul> <li><code>padding</code> :<ul> <li><code>padding.top</code>, <code>padding.bottom</code>, <code>padding.left</code>, <code>padding.right</code> : Extra space around lines.</li> </ul> </li> <li><code>ascent</code>, <code>lineHeight</code> : Height of first line and remainder lines<ul> <li><code>ascent</code> will set to <code>lineHeight</code> if <code>ascent</code> is <code>undefined</code> but <code>lineHeight</code> is not <code>undefined</code> (backward compatible)</li> <li>Get <code>ascent</code>, <code>lineHeight</code> from default text style and test string, if <code>ascent</code>, <code>lineHeight</code> are both <code>undefined</code></li> </ul> </li> <li><code>useDefaultTextHeight</code> : If parameter <code>lineHeight</code> is not given,<ul> <li><code>false</code> : Set line height to (total line height / maxLines), if parameter <code>maxLines</code> is larger than <code>0</code>. Default behavior.</li> <li><code>true</code> : Set line height to default text height.</li> </ul> </li> <li><code>maxLines</code> : Lines number of this page. <ul> <li><code>0</code> : Wrapping whole content.</li> <li><code>undefined</code> : It will be set if <code>lineHeight</code> and <code>height</code> is given</li> </ul> </li> <li><code>wrapWidth</code> : Width of wrapping</li> <li><code>letterSpacing</code> : Space between each character.</li> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound.</li> </ul> </li> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> <li><code>charWrap</code><ul> <li><code>false</code> : Word wrap. Default behavior.</li> <li><code>true</code> : Character wrap.</li> </ul> </li> </ul>"},{"location":"dynamictext/#align","title":"Align","text":"<ul> <li>Set vertical align mode     <pre><code>txt.setVAlign(vAlign);\n</code></pre><ul> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> </ul> </li> <li>Set horizontal align mode     <pre><code>txt.setHAlign(hAlign);\n</code></pre><ul> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound.</li> </ul> </li> </ul> </li> </ul>"},{"location":"dynamictext/#test-string","title":"Test string","text":"<pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"dynamictext/#vertical-wrap","title":"Vertical wrap","text":"<pre><code>var result = txt.runVerticalWrap({\npadding: {\ntop: 0,\nleft: 0,\nright: 0,\nbottom: 0\n},\nlineWidth: undefined,\nmaxLines: undefined,\nfixedChildHeight: undefined,\ncharPerLine: undefined,\nwrapHeight: undefined,\nletterSpacing: 0,\nrtl: true,\nhAlign: 0,\nvAlign: 0,\n});\n</code></pre> <ul> <li><code>padding</code> :<ul> <li><code>padding.top</code>, <code>padding.bottom</code>, <code>padding.left</code>, <code>padding.right</code> : Extra space around lines.</li> </ul> </li> <li><code>lineWidth</code> : Line width. <ul> <li><code>undefined</code> : It will be set if <code>maxLines</code> and <code>fixedWidth</code> is given.</li> </ul> </li> <li><code>maxLines</code> : Lines number of this page. <ul> <li><code>0</code> : Wrapping whole content.</li> <li><code>undefined</code> : It will be set if <code>lineWidth</code> and <code>fixedWidth</code> is given.</li> </ul> </li> <li><code>fixedChildHeight</code> : Each character has the same fixed height.<ul> <li><code>undefined</code> : Get <code>fixedChildHeight</code> according to <code>charPerLine</code> parameter. Or use height of each character if <code>fixedChildHeight</code> and <code>charPerLine</code> parameters are <code>undefined</code>.</li> </ul> </li> <li><code>charPerLine</code> : Amount of characters in each line, to get <code>fixedChildHeight</code>.</li> <li><code>wrapHeight</code> : Height of wrapping</li> <li><code>letterSpacing</code> : Space between each character.</li> <li><code>rtl</code> : <ul> <li><code>true</code> : Place lines from right to left.</li> <li><code>false</code> : Place lines from left to right.</li> </ul> </li> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound. Default value if <code>rtl</code> is set to <code>false</code>. </li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound. Default value if <code>rtl</code> is set to <code>true</code>.</li> </ul> </li> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> </ul>"},{"location":"dynamictext/#result","title":"Result","text":"<pre><code>{\nchildren: [],\nlines: [],\nisLastPage: false\n}\n</code></pre> <ul> <li><code>children</code> : Character/Image data in this page.</li> <li><code>lines</code> : Array of line data. A line data contains     <pre><code>{\nchildren: [],\nwidth: 0,     // Horizontal-wrapping\nheight: 0,    // Vertical-wrapping.        \n}\n</code></pre><ul> <li><code>children</code> : Character/Image data in this line.</li> <li><code>width</code> : Width of this line, in result of horizontal-wrapping.</li> <li><code>height</code> : Height of this line, in result of vertical-wrapping.</li> </ul> </li> <li><code>isLastPage</code> : <ul> <li><code>false</code> : Run <code>txt.runWordWrap(result)</code>/<code>txt.runVerticalWrap(result)</code> to get next page of word-wrapping result.</li> <li><code>true</code> : No remainder of characters.</li> </ul> </li> </ul>"},{"location":"dynamictext/#wrap-next-page","title":"Wrap next page","text":"<pre><code>var result = txt.runWordWrap(prevResult);\n</code></pre> <ul> <li><code>prevResult</code> : Result of previous word-wraping.</li> <li><code>result</code> : Current result of word-wraping.</li> </ul>"},{"location":"dynamictext/#default-configuration-of-wrapping","title":"Default configuration of wrapping","text":"<pre><code>txt.setWrapConfig(config);\n</code></pre> <ul> <li><code>config</code> : Default configuration Horizontal/Vertical wrapping.</li> </ul>"},{"location":"dynamictext/#child","title":"Child","text":""},{"location":"dynamictext/#general-properties","title":"General properties","text":"<ul> <li>Visible :<ul> <li>Get     <pre><code>var visible = child.visible;\n</code></pre></li> <li>Set     <pre><code>child.setVisible();\n// child.visible = true;\n</code></pre>     or     <pre><code>child.setVisible(false);  // Set to invisible\n// child.visible = false;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = child.alpha;\n</code></pre></li> <li>Set     <pre><code>child.setAlpha(alpha);\n// child.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Position :<ul> <li>Get     <pre><code>var x = child.x;\nvar y = child.y;\n</code></pre></li> <li>Set     <pre><code>child.setPosition(x, y);\n// child.x = x;\n// child.y = y;\n</code></pre></li> </ul> </li> <li>Angle :<ul> <li>Get     <pre><code>var degrees = child.angle;\n// var radians = child.rotation;\n</code></pre></li> <li>Set     <pre><code>child.setAngle(degrees);\nchild.setRotation(radians);\n// child.angle = degrees;\n// child.rotation = radians;\n</code></pre></li> </ul> </li> <li>Scale<ul> <li>Get     <pre><code>var scaleX = child.scaleX;\nvar scaleY = child.scaleY;\n</code></pre></li> <li>Set     <pre><code>child.setScale(scaleX, scaleY);\n// child.scaleX = scaleX;\n// child.scaleY = scaleY;\n</code></pre></li> </ul> </li> <li>Draw callbacks<ul> <li>Set     <pre><code>child.setDrawBelowCallback(callback);\nchild.setDrawAboveCallback(callback);\n</code></pre><ul> <li><code>callback</code> :     <pre><code>function(child) {\nvar text = child.text;                var context = child.context;\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>World position     <pre><code>var worldXY = child.getWorldPosition();\n// out = child.getWorldPosition(out);\n</code></pre>     or     <pre><code>var worldXY = txt.getCharWorldPosition(char);\n// out = txt.getCharWorldPosition(char, out);\n</code></pre></li> </ul>"},{"location":"dynamictext/#character","title":"Character","text":""},{"location":"dynamictext/#text-style","title":"Text-style","text":"<ul> <li>Get     <pre><code>var bold = char.style.bold;\nvar italic = char.style.italic;\nvar fontSize = char.style.fontSize;\nvar fontFamily = char.style.fontFamily;\nvar color = char.style.color;\nvar stroke = char.style.stroke;\nvar strokeThickness = char.style.strokeThickness;\nvar shaodwColor = char.style.shadowColor;\nvar shadowBlur = char.style.shadowBlur;\nvar shadowOffsetX = char.style.shadowOffsetX;\nvar shadowOffsetY = char.style.shadowOffsetY;\nvar backgroundColor = char.style.backgroundColor;\nvar backgroundHeight = char.style.backgroundHeight;\nvar backgroundBottomY = char.style.backgroundBottomY;\nvar xOffset = char.style.x;\nvar yOffset = char.style.y;\n</code></pre></li> <li>Set     <pre><code>char.modifyStyle({\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shaodwColor: null,\n// shadowBlur: 0,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetX: 0,\n// offsetY: 0\n})\n</code></pre>     or     <pre><code>char.setBold();\n// char.setBold(false);\n</code></pre> <pre><code>char.setItalic();\n// char.setItalic(false);\n</code></pre> <pre><code>char.setFontSize(fontSize); // number, string\n</code></pre> <pre><code>char.setFontFamily(fontFamily);\n</code></pre> <pre><code>char.setColor(color); // number, string\n// char.setColor(); // No filling color\n</code></pre> <pre><code>char.setStrokeStyle(color, thickness);\n// char.setStrokeStyle();  // No stroke\n</code></pre> <pre><code>char.setShadowColor(color);\n// char.setShadowColor();  // No shadow\n</code></pre> <pre><code>char.setShadowOffset(offsetX, offsetY);\n</code></pre> <pre><code>char.setShadowBlur(blur);\n</code></pre> <pre><code>char.setBackgroundColor(color);\n// char.setBackgroundColor();  // No shadow\n</code></pre> <pre><code>char.setOffsetX(offsetX);\nchar.setOffsetY(offsetY);\n</code></pre></li> </ul>"},{"location":"dynamictext/#image_1","title":"Image","text":"<ul> <li>Size<ul> <li>Get     <pre><code>var width = image.width;\nvar height = image.height;\n</code></pre></li> <li>Set     <pre><code>image.setWidth(width);\n// image.setWidth(width, true);  // Resize and keep aspect- ratio\nimage.setHeight(height);\n// image.setHeight(height, true);  // Resize and keep aspect- ratio\n</code></pre></li> </ul> </li> </ul>"},{"location":"dynamictext/#for-each-child","title":"For each child","text":"<ul> <li>Any child<ul> <li>For each active child     <pre><code>txt.forEachChild(function(child, childIndex){\n}, scope)\n</code></pre></li> <li>For each character child     <pre><code>txt.forEachChild(function(child, childIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> <li>Renderable child<ul> <li>For each active renderable child     <pre><code>txt.forEachRenderableChild(function(child, charIndex){\n}, scope)\n</code></pre></li> <li>For each renderable child     <pre><code>txt.forEachRenderableChild(function(child, charIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> <li>Character child<ul> <li>For each active character child     <pre><code>txt.forEachCharChild(function(child, charIndex){\n}, scope)\n</code></pre></li> <li>For each character child     <pre><code>txt.forEachCharChild(function(child, charIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"dynamictext/#get-children","title":"Get children","text":"<ul> <li>Get all children     <pre><code>var children = txt.getChildren();\n</code></pre></li> <li>Get last appended children     <pre><code>var children = txt.getLastAppendedChildren();\n</code></pre></li> <li>Get active children, after wrapping     <pre><code>var children = txt.getActiveChildren();\n</code></pre></li> </ul>"},{"location":"dynamictext/#get-character-children","title":"Get character children","text":"<ul> <li>Get active character children     <pre><code>var children = txt.getCharChildren();\n</code></pre></li> <li>Get all character children     <pre><code>var children = txt.getCharChildren(false);\n</code></pre></li> <li>Get character child by character index     <pre><code>var child = txt.getCharChild(charIndex);\n</code></pre></li> </ul>"},{"location":"dynamictext/#move-child","title":"Move child","text":"<ul> <li>Move child to fist     <pre><code>txt.moveChildToFist(child);\n</code></pre></li> <li>Move child to last     <pre><code>txt.moveChildToLast(child);\n</code></pre></li> <li>Move child up     <pre><code>txt.movechildUp(child);\n</code></pre></li> <li>Move child to down     <pre><code>txt.movechildDown(child);\n</code></pre></li> <li>Move child above another child     <pre><code>txt.movechildAbove(child, baseChild);\n</code></pre></li> <li>Move child below another child     <pre><code>txt.movechildBelow(child, baseChild);\n</code></pre></li> </ul>"},{"location":"dynamictext/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"dynamictext/#input-events-of-child","title":"Input events of child","text":"<ul> <li>Enable input events of child on config of constructor, or via method     <pre><code>txt.setChildrenInteractiveEnable();\n</code></pre></li> <li>Pointer down/up on child     <pre><code>txt.on('child.pointerdown', function(child, pointer, localX, localY, event) {        })\n</code></pre> <pre><code>txt.on('child.pointerup', function(child, pointer, localX, localY, event) {        })\n</code></pre><ul> <li><code>child</code> : Any Character or Image child</li> </ul> </li> <li>Pointer over/out on child     <pre><code>txt.on('child.pointerover', function(child, pointer, localX, localY, event) {        })\n</code></pre> <pre><code>txt.on('child.pointerout', function(child, pointer, localX, localY, event) {        })\n</code></pre><ul> <li><code>child</code> : Any Character or Image child</li> </ul> </li> </ul>"},{"location":"dynamictext/#compare-with-other-kinds-of-text-game-object","title":"Compare with other kinds of text game object","text":"<ul> <li>Built-in text: <ul> <li>Single color per game object.</li> <li>Draw content line by line.</li> <li>Best render performance.</li> </ul> </li> <li>BBCode text: <ul> <li>Multiple colors, multiple font size per gaem object.</li> <li>Draw content segment by segment.</li> <li>Slower than built-in text game object.</li> </ul> </li> <li>Dynamic text:<ul> <li>Multiple colors, multiple font size per gaem object.</li> <li>Draw content character by character.</li> <li>Slower than bbcode text game object.</li> </ul> </li> </ul>"},{"location":"ease-function/","title":"Ease","text":""},{"location":"ease-function/#introduction","title":"Introduction","text":"<p>Ease functions, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"ease-function/#usage","title":"Usage","text":""},{"location":"ease-function/#ease-functions","title":"Ease functions","text":"<ul> <li>Linear : <code>Phaser.Math.Easing.Linear</code></li> <li>Quadratic, Power1<ul> <li>Quadratic ease-out : <code>Phaser.Math.Easing.Quadratic.Out</code></li> <li>Quadratic ease-in : <code>Phaser.Math.Easing.Quadratic.In</code></li> <li>Quadratic ease-in/out : <code>Phaser.Math.Easing.Quadratic.InOut</code></li> </ul> </li> <li>Cubic, Power2<ul> <li>Cubic ease-out : <code>Phaser.Math.Easing.Cubic.Out</code></li> <li>Cubic ease-in : <code>Phaser.Math.Easing.Cubic.In</code></li> <li>Cubic ease-in/out : <code>Phaser.Math.Easing.Cubic.InOut</code></li> </ul> </li> <li>Quartic, Power3<ul> <li>Quartic ease-out : <code>Phaser.Math.Easing.Quartic.Out</code></li> <li>Quartic ease-in : <code>Phaser.Math.Easing.Quartic.In</code></li> <li>Quartic ease-in/out : <code>Phaser.Math.Easing.Quartic.InOut</code></li> </ul> </li> <li>Quintic, Power4<ul> <li>Quintic ease-out : <code>Phaser.Math.Easing.Quintic.Out</code></li> <li>Quintic ease-in : <code>Phaser.Math.Easing.Quintic.In</code></li> <li>Quintic ease-in/out : <code>Phaser.Math.Easing.Quintic.InOut</code></li> </ul> </li> <li>Sinusoidal<ul> <li>Sinusoidal ease-out : <code>Phaser.Math.Easing.Sine.Out</code></li> <li>Sinusoidal ease-in : <code>Phaser.Math.Easing.Sine.In</code></li> <li>Sinusoidal ease-in/out : <code>Phaser.Math.Easing.Sine.InOut</code></li> </ul> </li> <li>Exponential<ul> <li>Exponential ease-out : <code>Phaser.Math.Easing.Expo.Out</code></li> <li>Exponential ease-in : <code>Phaser.Math.Easing.Expo.In</code></li> <li>Exponential ease-in/out : <code>Phaser.Math.Easing.Expo.InOut</code></li> </ul> </li> <li>Circular<ul> <li>Circular ease-out : <code>Phaser.Math.Easing.Circular.Out</code></li> <li>Circular ease-in : <code>Phaser.Math.Easing.Circular.In</code></li> <li>Circular ease-in/out : <code>Phaser.Math.Easing.Circular.InOut</code></li> </ul> </li> <li>Elastic<ul> <li>Elastic ease-out : <code>Phaser.Math.Easing.Elastic.Out</code></li> <li>Elastic ease-in : <code>Phaser.Math.Easing.Elastic.In</code></li> <li>Elastic ease-in/out : <code>Phaser.Math.Easing.Elastic.InOut</code></li> </ul> </li> <li>Bounce<ul> <li>Bounce ease-out : <code>Phaser.Math.Easing.Bounce.Out</code></li> <li>Bounce ease-in : <code>Phaser.Math.Easing.Bounce.In</code></li> <li>Bounce ease-in/out : <code>Phaser.Math.Easing.Bounce.InOut</code></li> </ul> </li> <li>Back<ul> <li>Back ease-out : <code>Phaser.Math.Easing.Back.Out</code></li> <li>Back ease-in : <code>Phaser.Math.Easing.Back.In</code></li> <li>Back ease-in/out : <code>Phaser.Math.Easing.Back.InOut</code></li> </ul> </li> <li>Stepped : <code>Phaser.Math.Easing.Stepped(v, step)</code></li> </ul>"},{"location":"ease-function/#get-ease-function-via-string","title":"Get ease function via string","text":"<pre><code>var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease);\n// var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams);\n</code></pre> <ul> <li><code>ease</code> : <ul> <li>A string : <ul> <li><code>Power0</code> : Linear</li> <li><code>Power1</code> : Quadratic.Out</li> <li><code>Power2</code> : Cubic.Out</li> <li><code>Power3</code> : Quartic.Out</li> <li><code>Power4</code> : Quintic.Out</li> <li><code>Linear</code></li> <li><code>Quad</code> : Quadratic.Out</li> <li><code>Cubic</code> : Cubic.Out</li> <li><code>Quart</code> : Quartic.Out</li> <li><code>Quint</code> : Quintic.Out</li> <li><code>Sine</code> : Sine.Out</li> <li><code>Expo</code> : Expo.Out</li> <li><code>Circ</code> : Circular.Out</li> <li><code>Elastic</code> : Elastic.Out</li> <li><code>Back</code> : Back.Out</li> <li><code>Bounce</code> : Bounce.Out</li> <li><code>Stepped</code></li> <li><code>Quad.easeIn</code></li> <li><code>Cubic.easeIn</code></li> <li><code>Quart.easeIn</code></li> <li><code>Quint.easeIn</code></li> <li><code>Sine.easeIn</code></li> <li><code>Expo.easeIn</code></li> <li><code>Circ.easeIn</code></li> <li><code>Back.easeIn</code></li> <li><code>Bounce.easeIn</code></li> <li><code>Quad.easeOut</code></li> <li><code>Cubic.easeOut</code></li> <li><code>Quart.easeOut</code></li> <li><code>Quint.easeOut</code></li> <li><code>Sine.easeOut</code></li> <li><code>Expo.easeOut</code></li> <li><code>Circ.easeOut</code></li> <li><code>Back.easeOut</code></li> <li><code>Bounce.easeOut</code></li> <li><code>Quad.easeInOut</code></li> <li><code>Cubic.easeInOut</code></li> <li><code>Quart.easeInOut</code></li> <li><code>Quint.easeInOut</code></li> <li><code>Sine.easeInOut</code></li> <li><code>Expo.easeInOut</code></li> <li><code>Circ.easeInOut</code></li> <li><code>Back.easeInOut</code></li> <li><code>Bounce.easeInOut</code></li> </ul> </li> <li>A custom function     <pre><code>function(v) {\nreturn v;\n}\n</code></pre> <pre><code>function(v, param0, param1, ...) {\nreturn v;\n}\n</code></pre><ul> <li><code>v</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"ease-function/#get-result","title":"Get result","text":"<pre><code>var result = easeFunction(t);\n</code></pre> <ul> <li><code>t</code> : <code>0</code> ~ <code>1</code></li> </ul>"},{"location":"easedata/","title":"Ease-data","text":""},{"location":"easedata/#introduction","title":"Introduction","text":"<p>Easing data value of game object's data-manager.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"easedata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"easedata/#install-plugin","title":"Install plugin","text":""},{"location":"easedata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeasedataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeasedataplugin.min.js', true);\n</code></pre></li> <li>Add ease-data behavior     <pre><code>var easedata = scene.plugins.get('rexeasedataplugin').add(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EaseDataPlugin from 'phaser3-rex-plugins/plugins/easedata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEaseData',\nplugin: EaseDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add ease-data behavior     <pre><code>var easedata = scene.plugins.get('rexEaseData').add(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import { EaseData } from 'phaser3-rex-plugins/plugins/easedata.js';\n</code></pre></li> <li>EaseData-out-destroy     <pre><code>var easedata = new EaseData(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#create-instance","title":"Create instance","text":"<pre><code>var easedata = scene.plugins.get('rexEaseData').add(gameObject);\n</code></pre>"},{"location":"easedata/#ease-data","title":"Ease data","text":"<ul> <li>Start     <pre><code>easedata.easeTo(key, value, duration);\n// easedata.easeTo(key, value, duration, ease);\n</code></pre>     or     <pre><code>easedata.easeTo({\nkey:key,\nvalue:value,\nduration:1000,\nease:'Linear'\n});\n</code></pre>     or     <pre><code>easedata.easeTo({\nkey:key,\nvalue:value,\nspeed: 10,    // value changing rate, per second\nease:'Linear'\n});\n</code></pre></li> <li>Stop     <pre><code>easedata.stopEase(key);           // Set to end value\n// easedata.stopEase(key, false); // Stop at current value\n</code></pre>     or     <pre><code>easedata.stopAll();           // Set to end value\n// easedata.stopAll(false);   // Stop at current value\n</code></pre></li> </ul>"},{"location":"easedata/#events","title":"Events","text":"<ul> <li>Easing complete     <pre><code>easedata.on('complete-' + key, function(gameObject, easedata){\n\n}, scope);\n</code></pre> <pre><code>easedata.on('complete', function(key, gameObject, easedata){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"easemove/","title":"Ease-move","text":""},{"location":"easemove/#introduction","title":"Introduction","text":"<p>Ease-move game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"easemove/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"easemove/#install-plugin","title":"Install plugin","text":""},{"location":"easemove/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeasemoveplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeasemoveplugin.min.js', true);\n</code></pre></li> <li>Ease-move to/from     <pre><code>var easemove = scene.plugins.get('rexeasemoveplugin').moveTo(gameObject, duration, x, y, ease);\nvar easemove = scene.plugins.get('rexeasemoveplugin').moveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EaseMovePlugin from 'phaser3-rex-plugins/plugins/easemove-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEaseMove',\nplugin: EaseMovePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Ease-move to/from     <pre><code>var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease);\nvar easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import { EaseMoveTo, EaseMoveFrom } from 'phaser3-rex-plugins/plugins/easemove.js';\n</code></pre></li> <li>EaseMove-out-destroy     <pre><code>var easemove = EaseMoveTo(gameObject, duration, x, y, ease);\nvar easemove = EaseMoveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#move-to","title":"Move to","text":"<pre><code>var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y);\n// var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease);\n// easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease, easemove);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : End position.<ul> <li>Number : End position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Don't move along x/y axis.</li> </ul> </li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> <li><code>easemove</code> : Ease-move behavior.</li> </ul>"},{"location":"easemove/#move-from","title":"Move from","text":"<pre><code>var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y);\n// var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);\n// easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease, easemove);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Start position.<ul> <li>Number : Start position x/y.</li> <li>String(<code>-=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Don't move along x/y axis.</li> </ul> </li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> <li><code>easemove</code> : Ease-move behavior.</li> </ul>"},{"location":"easemove/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Move completes or is stopped.     <pre><code>easemove.on('complete', function(gameObject, easemove){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"effect-properties/","title":"Effect properties","text":""},{"location":"effect-properties/#introduction","title":"Introduction","text":"<p>Attach properties to a game object or camera, to add/remove/control builtin preFX or postFX effects.</p> <ul> <li>Author: Rex</li> <li>Method only</li> <li>Pre-fx, and Post-fx shader effects</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"effect-properties/#live-demos","title":"Live demos","text":"<ul> <li>Color effects</li> <li>Reveal</li> <li>Interactive</li> <li>Camera</li> </ul>"},{"location":"effect-properties/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"effect-properties/#install-plugin","title":"Install plugin","text":""},{"location":"effect-properties/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeffectpropertiesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeffectpropertiesplugin.min.js', true);\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>scene.plugins.get('rexeffectpropertiesplugin').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexeffectpropertiesplugin').add(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EffectPropertiesPlugin from 'phaser3-rex-plugins/plugins/effectproperties-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEffectProperties',\nplugin: EffectPropertiesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexEffectProperties').add(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddEffectPropertiesProperties from 'phaser3-rex-plugins/plugins/effectproperties.js';\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>AddEffectPropertiesProperties(gameObject);\n</code></pre> <pre><code>AddEffectPropertiesProperties(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#attach-properties","title":"Attach properties","text":"<p>Supported effects are <code>barrel</code>, <code>blackWhite</code>, <code>bloom</code>, <code>blur</code>, <code>bokeh</code>, <code>brightness</code>, <code>brown</code>, <code>circle</code>, <code>contrast</code>,  <code>desaturate</code>, <code>desaturateLuminance</code>, <code>displacement</code>,  <code>glow</code>, <code>gradient</code>, <code>grayscale</code>, <code>hue</code>, <code>kodachrome</code>, <code>lsd</code>, <code>negative</code>, <code>pixelate</code>, <code>polaroid</code>,  <code>reveal</code>, <code>saturate</code>, <code>sepia</code>, <code>shadow</code>, <code>shiftToBGR</code>, <code>shine</code>, <code>technicolor</code>, <code>tiltShift</code>,  <code>vignette</code>, <code>vintagePinhole</code>, <code>wipe</code>.</p> <ul> <li>Attatch properties of all effects to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexEffectProperties').add(camera);\n</code></pre></li> <li>Attatch properties of some preFX/postFX effects to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, {\nbarrel: true,\nblackWhite: true,\nbloom: true,\nblur: true,\nbokeh: true,\nbrightness: true,\nbrown: true,\ncircle: true,\ncontrast: true,\ndesaturate: true,\ndesaturateLuminance: true,\ndisplacement: true,\nglow: true,\ngradient: true,\ngrayscale: true,\nhue: true,\nkodachrome: true,\nlsd: true,\nnegative: true,\npixelate: true,\npolaroid: true,\nreveal: true,\nsaturate: true,\nsepia: true,\nshadow: true,\nshiftToBGR: true,\nshine: true,\ntechnicolor: true,\ntiltShift: true,\nvignette: true,\nvintagePinhole: true,\nwipe: true,\n});\n</code></pre>     or     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, [\n'barrel', 'blackWhite', 'bloom', 'blur', 'bokeh', 'brightness', 'brown',\n'circle', 'contrast',\n'desaturate', 'desaturateLuminance', 'displacement',\n'glow', 'gradient', 'grayscale',\n'hue',\n'kodachrome',\n'lsd',\n'negative',\n'pixelate', 'polaroid',\n'reveal',\n'saturate', 'sepia', 'shadow', 'shiftToBGR', 'shine',\n'technicolor', 'tiltShift',\n'vignette', 'vintagePinhole',\n'wipe'\n]);\n</code></pre>     or     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, effectName);\n</code></pre><ul> <li>A plain object with effect names.</li> <li>A list of effect name string.</li> <li>A effect name string.</li> </ul> </li> </ul>"},{"location":"effect-properties/#effect-properties","title":"Effect properties","text":"<p>Will try to create preFX effect if gameObject has preFX, otherwise, try to create postFX effect.</p>"},{"location":"effect-properties/#barrel","title":"Barrel","text":"<ul> <li><code>barrel</code> : <ul> <li>A number : Enable this effect and set intensity of barrel (1: origin).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#blackwhite","title":"BlackWhite","text":"<ul> <li><code>blackWhite</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#bloom","title":"Bloom","text":"<ul> <li><code>bloomColor</code> : <ul> <li>A number : Enable this effect and set color of bloom (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>bloomOffsetX</code>, <code>bloomOffsetY</code>, <code>bloomBlurStrength</code>, <code>bloomStrength</code>, <code>bloomSteps</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#blur","title":"Blur","text":"<ul> <li><code>blurColor</code> : <ul> <li>A number : Enable this effect and set color of blur (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>blurQuality</code>, <code>blurX</code>, <code>blurY</code>, <code>blurStrength</code>, <code>blurSteps</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#bokeh","title":"Bokeh","text":"<ul> <li><code>bokehRadius</code> : <ul> <li>A number : Enable this effect and set radius of bokeh (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>bokehAmount</code>, <code>bokehContrast</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#brightness","title":"Brightness","text":"<ul> <li><code>brightness</code> : <ul> <li>A number : Enable this effect and set brightness (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#brown","title":"Brown","text":"<ul> <li><code>brown</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#circle","title":"Circle","text":"<ul> <li><code>circleColor</code> : <ul> <li>A number : Enable this effect and set color of circle (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>circleThickness</code>, <code>circleBackgroundColor</code>, <code>circleBackgroundAlpha</code>, <code>circleScale</code>, <code>circleFeather</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#contrast","title":"Contrast","text":"<ul> <li><code>contrast</code> : <ul> <li>A number : Enable this effect and set contrast (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#desaturate","title":"Desaturate","text":"<ul> <li><code>desaturate</code> : <ul> <li>A number : Enable this effect and set desaturate (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#desaturateluminance","title":"DesaturateLuminance","text":"<ul> <li><code>desaturateLuminance</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#displacement","title":"Displacement","text":"<ul> <li><code>displacementKey</code> : <ul> <li>A string : Enable this effect and set displacement reference texture.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>displacementX</code>, <code>displacementY</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#glow","title":"Glow","text":"<ul> <li><code>glowColor</code> : <ul> <li>A number : Enable this effect and set color of glow (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>glowOuterStrength</code>, <code>glowInnerStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#gradient","title":"Gradient","text":"<ul> <li><code>gradientColor</code> : <ul> <li><code>[number, number]</code> : Enable this effect and set gradient color1 and gradient color2 (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>gradientAlpha</code>, <code>gradientFromX</code>, <code>gradientFromY</code>, <code>gradientToX</code>, <code>gradientToY</code>, <code>gradientSize</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#grayscale","title":"Grayscale","text":"<ul> <li><code>grayscale</code> : <ul> <li>A number : Enable this effect and set intensity of grayscale (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#hue","title":"Hue","text":"<ul> <li><code>hue</code> : <ul> <li>A number : Enable this effect and set hue rotation, in degrees.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#kodachrome","title":"Kodachrome","text":"<ul> <li><code>kodachrome</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#lsd","title":"Lsd","text":"<ul> <li><code>lsd</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#negative","title":"Negative","text":"<ul> <li><code>negative</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#pixelate","title":"Pixelate","text":"<ul> <li><code>pixelate</code> : <ul> <li>A number : Enable this effect and set size of pixelate, in pixels.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#polaroid","title":"Polaroid","text":"<ul> <li><code>polaroid</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#reveal","title":"Reveal","text":"<ul> <li><code>revealLeft</code>, <code>revealRight</code>, <code>revealUp</code>, or <code>revealDown</code> :<ul> <li>A number : Enable this effect with specific reveal direction and set progress (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>revealWidth</code> :<ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#saturate","title":"Saturate","text":"<ul> <li><code>saturate</code> : <ul> <li>A number : Enable this effect and set saturate (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#sepia","title":"Sepia","text":"<ul> <li><code>sepia</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#shadow","title":"Shadow","text":"<ul> <li><code>shadowColor</code> : <ul> <li>A number : Enable this effect and set color of shadow (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>shadowX</code>, <code>shadowY</code>, <code>shadowDecay</code>, <code>shadowPower</code>, <code>shadowSamples</code>, <code>shadowIntensity</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#shifttobgr","title":"ShiftToBGR","text":"<ul> <li><code>shiftToBGR</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#shine","title":"Shine","text":"<ul> <li><code>shineSpeed</code> : <ul> <li>A number : Enable this effect and set speed of shine, in seconds.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>shineLineWidth</code>, <code>shineGradient</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#technicolor","title":"Technicolor","text":"<ul> <li><code>technicolor</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#tiltshift","title":"TiltShift","text":"<ul> <li><code>tiltShiftRadius</code> : <ul> <li>A number : Enable this effect and set radius of tiltShift (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>tiltShiftAmount</code>, <code>tiltShiftContrast</code>, <code>tiltShiftBlurX</code>, <code>tiltShiftBlurY</code>, <code>tiltShiftStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#vignette","title":"Vignette","text":"<ul> <li><code>vignetteRadius</code> : <ul> <li>A number : Enable this effect and set radius of vignette (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>vignetteX</code>, <code>vignetteY</code>, <code>vignetteStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#vintagepinhole","title":"VintagePinhole","text":"<ul> <li><code>vintagePinhole</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#wipe","title":"Wipe","text":"<ul> <li><code>wipeLeft</code>, <code>wipeRight</code>, <code>wipeUp</code>, or <code>wipeDown</code> :<ul> <li>A number : Enable this effect with specific wipe direction and set progress (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>wipeWidth</code> :<ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#clear-all-effects","title":"Clear all effects","text":"<pre><code>gameObject.clearAllEffects();\n</code></pre>"},{"location":"effectlayer-outline/","title":"Effectlayer outline","text":""},{"location":"effectlayer-outline/#introduction","title":"Introduction","text":"<p>Draw outline of target game objects.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"effectlayer-outline/#live-demos","title":"Live demos","text":"<ul> <li>Outline</li> </ul>"},{"location":"effectlayer-outline/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"effectlayer-outline/#install-plugin","title":"Install plugin","text":""},{"location":"effectlayer-outline/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexoutlineeffectlayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexoutlineeffectlayerplugin.min.js', true);\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = scene.add.rexOutlineEffectLayer(config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import OutlineEffectLayerPlugin from 'phaser3-rex-plugins/plugins/outlineeffectlayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexOutlineEffectLayerPlugin',\nplugin: OutlineEffectLayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = scene.add.rexOutlineEffectLayer(config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import OutlineEffectLayer from 'phaser3-rex-plugins/plugins/outlineeffectlayer.js';\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = new OutlineEffectLayer(scene, config);\nscene.add.existing(effectLayer);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#create-instance","title":"Create instance","text":"<pre><code>var effectLayer = scene.add.rexOutlineEffectLayer({\n// knockout: false,\n// thickness: 3,\n// outlineColor: 0x000000\n});\n</code></pre> <ul> <li><code>knockout</code> :<ul> <li><code>true</code> : Draw outline only.</li> <li><code>false</code> : Draw source texture and outline both.</li> </ul> </li> <li><code>thickness</code> : Thickness of outline.</li> <li><code>outlineColor</code> : Color of outline.</li> </ul>"},{"location":"effectlayer-outline/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyOutlineEffectLayer extends OutlineEffectLayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var effectLayer = new MyOutlineEffectLayer(scene, config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#thickness","title":"Thickness","text":"<ul> <li>Get     <pre><code>var thickness = effectLayer.thickness;\n</code></pre></li> <li>Set     <pre><code>effectLayer.thickness = thickness;\n// effectLayer.thickness += value;\n</code></pre>     or     <pre><code>effectLayer.setThickness(value);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#outline-color","title":"Outline color","text":"<ul> <li>Get     <pre><code>var color = effectLayer.outlineColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>effectLayer.setOutlineColor(value);\n</code></pre> <pre><code>effectLayer.outlineColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"effectlayer-outline/#target-game-objects","title":"Target game objects","text":"<p>Draw outline of added target game objects.</p> <ul> <li>Add     <pre><code>effectLayer.add(gameObject);\n</code></pre></li> <li>Remove     <pre><code>effectLayer.remove(gameObject);\n</code></pre></li> <li>Clear     <pre><code>effectLayer.clear();\n</code></pre></li> <li>Contains     <pre><code>var hasGameObject = effectLayer.contains(gameObject);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#limitation","title":"Limitation","text":"<ul> <li> <p>Can't support if <code>camera.zoom</code> is less then 1</p> </li> <li> <p>Can't support if <code>camera.startFollow(gameObject)</code>, i.e.    please scroll camera before target game objects draw on effect layer game object.</p> </li> </ul>"},{"location":"eightdirection/","title":"8 direction","text":""},{"location":"eightdirection/#introduction","title":"Introduction","text":"<p>Move game object by cursor keys, with a constant speed.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"eightdirection/#live-demos","title":"Live demos","text":"<ul> <li>Virtual-joyStick + Eight-direction</li> </ul>"},{"location":"eightdirection/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"eightdirection/#install-plugin","title":"Install plugin","text":""},{"location":"eightdirection/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeightdirectionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeightdirectionplugin.min.js', true);\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = scene.plugins.get('rexeightdirectionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import EightDirectionPlugin from 'phaser3-rex-plugins/plugins/eightdirection-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEightDirection',\nplugin: EightDirectionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import EightDirection from 'phaser3-rex-plugins/plugins/eightdirection.js';\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = new EightDirection(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#create-instance","title":"Create instance","text":"<pre><code>var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, {\nspeed: 200,\n// dir: '8dir',     // 0|'up&amp;down'|1|'left&amp;right'|2|'4dir'|3|'8dir'\n// rotateToDirection: false,\n// wrap: false,\n// padding: 0,\n// enable: true,\n// cursorKeys: scene.input.keyboard.createCursorKeys()\n});\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li><code>dir</code> :<ul> <li><code>'up&amp;down'</code>, or <code>0</code> :Aaccept up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Aaccept left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Aaccept up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> <li><code>rotateToDirection</code> : Set true to change angle towards moving direction.</li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>false</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>cursorKeys</code> : CursorKey object, using keyboard's cursorKeys by default.</li> </ul>"},{"location":"eightdirection/#set-speed","title":"Set speed","text":"<pre><code>eightDirection.setSpeed(speed);\n// eightDirection.speed = speed;\n</code></pre>"},{"location":"eightdirection/#set-rotate-to-direction","title":"Set rotate-to-direction","text":"<pre><code>eightDirection.setRotateToDirection(rotateToDirection);\n</code></pre> <ul> <li><code>rotateToDirection</code> : Set true to change angle towards moving direction</li> </ul>"},{"location":"eightdirection/#set-direction-mode","title":"Set direction mode","text":"<pre><code>eightDirection.setDirMode(dir);\n</code></pre> <ul> <li><code>dir</code> :<ul> <li><code>'up&amp;down'</code>, or <code>0</code> :Aaccept up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Aaccept left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Aaccept up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> </ul>"},{"location":"eightdirection/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>ship.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"eventemitter3/","title":"Event emitter","text":""},{"location":"eventemitter3/#introduction","title":"Introduction","text":"<p>Event emitter.</p>"},{"location":"eventemitter3/#usage","title":"Usage","text":""},{"location":"eventemitter3/#get-event-emitter","title":"Get event emitter","text":"<ul> <li>Scene:      <pre><code>var ee = scene.events;\n</code></pre></li> <li>Game object:     <pre><code>var ee = gameObject;\n</code></pre></li> </ul>"},{"location":"eventemitter3/#attach-listener","title":"Attach listener","text":"<pre><code>ee.on(eventName, callback, scope);\nee.once(eventName, callback, scope);  // only fire listeners one time\n</code></pre> <p>Alias</p> <pre><code>ee.addListener(eventName, callback, scope);\nee.addListener(eventName, callback, scope, true);  // only fire listeners one time\n</code></pre>"},{"location":"eventemitter3/#fire-event","title":"Fire event","text":"<pre><code>ee.emit(eventName, parameter0, ...);\n</code></pre>"},{"location":"eventemitter3/#remove-listeners","title":"Remove listeners","text":"<ul> <li>Remove a linstener     <pre><code>ee.off(eventName, callback, scope);\nee.off(eventName, callback, scope, true);   // only remove one-time listeners\n</code></pre>     or     <pre><code>ee.removeListener(eventName, callback, scope); ee.removeListener(eventName, callback, scope, true);  // only remove one-time listeners\n</code></pre></li> <li>Remove listeners of an event     <pre><code>ee.off(eventName);\n</code></pre>     or     <pre><code>ee.removeListener(eventName); </code></pre></li> <li>Remove listeners of all events     <pre><code>ee.removeAllListeners();\n</code></pre></li> </ul>"},{"location":"eventemitter3/#get-listeners-count","title":"Get listeners count","text":"<pre><code>var count = ee.listenerCount(eventName);\n//var noListener = (ee.listenerCount(eventName) === 0);\n</code></pre>"},{"location":"eventemitter3/#get-listeners","title":"Get listeners","text":"<pre><code>var listeners = ee.listeners(eventName);\n</code></pre>"},{"location":"eventemitter3/#get-event-names","title":"Get event names","text":"<pre><code>var names = ee.eventNames();\n</code></pre>"},{"location":"eventemitter3/#listener","title":"Listener","text":"<pre><code>{\nfn: callback,\ncontext: scope,\nonce: once\n}\n</code></pre>"},{"location":"eventemitter3/#custom-event-emitter-class","title":"Custom event emitter class","text":"<pre><code>class MyEventEmitter extends Phaser.Events.EventEmitter {\n// construct() {\n//     super();\n// }\n\n// destroy() {\n//     super.destroy();\n// }\n}\n</code></pre>"},{"location":"eventpromise/","title":"Event promise","text":""},{"location":"eventpromise/#introduction","title":"Introduction","text":"<p>Return a promise of an event.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"eventpromise/#live-demos","title":"Live demos","text":"<ul> <li>Wait complete</li> </ul>"},{"location":"eventpromise/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"eventpromise/#install-plugin","title":"Install plugin","text":""},{"location":"eventpromise/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeventpromiseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeventpromiseplugin.min.js', true);\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = scene.plugins.get('rexeventpromiseplugin').waitEvent(eventEmitter, eventName);\n// var promoise = scene.plugins.get('rexeventpromiseplugin').waitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EventPromisePlugin from 'phaser3-rex-plugins/plugins/eventpromise-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEventPromise',\nplugin: EventPromisePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = scene.plugins.get('rexEventPromise').waitEvent(eventEmitter, eventName);\n// var promoise = scene.plugins.get('rexEventPromise').waitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { WaitEvent, WaitComplete } from 'phaser3-rex-plugins/plugins/eventpromise.js';\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = WaitEvent(eventEmitter, eventName);\n// var promoise = WaitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#get-event-promise","title":"Get event promise","text":"<pre><code>var promoise = scene.plugins.get('rexEventPromise').waitEvent(eventEmitter, eventName)\n.then(function() {\n\n})\n</code></pre> <ul> <li><code>eventEmitter</code> : Any kind of event emitter. for example, game object, or tween task, or scene event</li> </ul>"},{"location":"eventpromise/#get-complete-event-promise","title":"Get complete event promise","text":"<pre><code>var promoise = scene.plugins.get('rexEventPromise').waitComplete(eventEmitter)\n.then(function() {\n\n})\n</code></pre> <ul> <li><code>eventEmitter</code> : Event emitter which will fire <code>'complete'</code> event, for example, tween task.</li> </ul>"},{"location":"expression-parser/","title":"Expression parser","text":""},{"location":"expression-parser/#introduction","title":"Introduction","text":"<p>Parse expression string into function. Parser is generated from jison</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"expression-parser/#live-demos","title":"Live demos","text":"<ul> <li>Dot-notation</li> <li>Custom method</li> <li>Proxy as context</li> </ul>"},{"location":"expression-parser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"expression-parser/#install-plugin","title":"Install plugin","text":""},{"location":"expression-parser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexexpressionparserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexexpressionparserplugin.min.js', true);\n</code></pre></li> <li>Add parser     <pre><code>var parser = scene.plugins.get('rexexpressionparserplugin').add();\n</code></pre></li> <li>Or, parse expression to function object.     <pre><code>var f = scene.plugins.get('rexexpressionparserplugin').compile(expressionString);\n// var value = f(context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ExpressionParserPlugin from 'phaser3-rex-plugins/plugins/expressionparser-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexExpressionParserPlugin',\nplugin: ExpressionParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser     <pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\n</code></pre></li> <li>Or, parse expression to function object.     <pre><code>var f = scene.plugins.get('rexExpressionParserPlugin').compile(expressionString);\n// var value = f(context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ExpressionParser from 'phaser3-rex-plugins/plugins/expressionparser.js';\n</code></pre></li> <li>Add parser     <pre><code>var parser = new ExpressionParser();\n</code></pre></li> </ul>"},{"location":"expression-parser/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\n</code></pre>"},{"location":"expression-parser/#execute","title":"Execute","text":""},{"location":"expression-parser/#compile-then-execute","title":"Compile then execute","text":"<ol> <li>Compile expression string into function     <pre><code>var f = parser.compile(expressionString);\n</code></pre>     or     <pre><code>var f = scene.plugins.get('rexExpressionParserPlugin').compile(expressionString);\n</code></pre><ul> <li><code>expressionString</code> :<ul> <li>Number : <code>1</code>, <code>1.5</code>, <code>0xf</code>.</li> <li>Variable : <code>a</code>, <code>$a</code>, <code>_a</code>, <code>a.$b._c_</code>, <code>a['b'].c</code></li> <li>Arithmetic : <code>+</code>, <code>-</code>, <code>*</code>, <code>\\</code>, <code>%</code>, <code>(</code>, <code>)</code>, ex : <code>'(a + b.c) * 3 + (2 % 3)'</code>.</li> <li>Boolean : <code>&gt;</code>, <code>&lt;</code>, <code>&gt;=</code>, <code>&lt;=</code>, <code>==</code>, <code>!=</code>, <code>&amp;&amp;</code>, <code>||</code>, ex <code>'(a &gt; 10) &amp;&amp; (a &lt; 30) || (b.c &gt; c)'</code>.</li> <li>Condition : <code>(cond)? v0:v1</code>, ex<code>'(a &gt; b.c)? a:b.c'</code>.</li> <li>Custom method : <code>randomInt(a, b.c)</code>.</li> <li>String concat : <code>'Hello ' + name</code>.</li> </ul> </li> </ul> </li> <li>Invoke function     <pre><code>var value = f(context);\n</code></pre><ul> <li><code>f</code> : Function object from compiled result.</li> <li><code>context</code> : Varables used in expression.     <pre><code>{\na: 10,  // Number\nb: {c: 10},  // Objet with number property\nc: 20,\nrandomInt(a, b) {  // Custom method\nreturn Math.floor(Math.random()*(b-a)+a);\n}\n}\n</code></pre></li> </ul> </li> </ol>"},{"location":"expression-parser/#execute-directly","title":"Execute directly","text":"<pre><code>var value = parser.exec(expressionString, context);\n</code></pre> <p>or</p> <pre><code>var value = parser.exec(f, context);\n</code></pre>"},{"location":"expression-parser/#custom-method","title":"Custom method","text":"<ul> <li>Add method into parser instance     <pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\nparser.randomInt = function(a, b) {\nreturn Math.floor(Math.random()*(b-a)+a); }\n// var value = parser.exec('randomInt(a, b)', {a:10, b:20});\n</code></pre></li> <li>Declare method into class of parser     <pre><code>class MyParser extends ExpressionParser {\nrandomInt(a, b) {\nreturn Math.floor(Math.random()*(b-a)+a); }\n}\nvar parser = new MyParser();\n// var value = parser.exec('randomInt(a, b)', {a:10, b:20});\n</code></pre></li> <li>Add method into context     <pre><code>var context = {\na: 10,\nb: 20,\nrandomInt(a, b) {  // Custom method\nreturn Math.floor(Math.random()*(b-a)+a);\n}\n}\nvar value = parser.exec('randomInt(a, b)', context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#proxy-as-context","title":"Proxy as context","text":"<p>Proxy  with <code>has</code> and <code>get</code> handlers could be a context.</p> <p>For example, proxy scene data :</p> <pre><code>var context = new Proxy({}, {\nhas(target, key) {\nreturn scene.data.has(key);\n},\nget(target, prop) {\nreturn scene.data.get(prop);\n}\n})\n</code></pre> <p>or</p> <pre><code>var context = scene.plugins.get('rexExpressionParserPlugin').createProxyContext({\nhas(target, key) {\n// return boolean\n},\nget(target, prop) {\n// return any;\n}\n})\n</code></pre>"},{"location":"fadeoutdestroy/","title":"Fade out destroy","text":""},{"location":"fadeoutdestroy/#introduction","title":"Introduction","text":"<p>Fade out game object then destroy it.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"fadeoutdestroy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fadeoutdestroy/#install-plugin","title":"Install plugin","text":""},{"location":"fadeoutdestroy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfadeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfadeplugin.min.js', true);\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = scene.plugins.get('rexfadeplugin').fadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FadePlugin from 'phaser3-rex-plugins/plugins/fade-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFade',\nplugin: FadePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = scene.plugins.get('rexFade').fadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import FadeOutDestroy from 'phaser3-rex-plugins/plugins/fade-out-destroy.js';\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = FadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#fade-out-destroy","title":"Fade-out-destroy","text":"<pre><code>var fade = scene.plugins.get('rexFade').fadeOutDestroy(gameObject, duration);\n</code></pre>"},{"location":"fadeoutdestroy/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>fade.on('complete', function(gameObject, fade){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"fadevolume/","title":"Volume fading","text":""},{"location":"fadevolume/#introduction","title":"Introduction","text":"<p>Fade-in/fade-out volume of sound.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"fadevolume/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fadevolume/#install-plugin","title":"Install plugin","text":""},{"location":"fadevolume/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsoundfadeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsoundfadeplugin.min.js', true);\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = scene.plugins.get('rexsoundfadeplugin').fadeIn(sound, duration);\nvar sound = scene.plugins.get('rexsoundfadeplugin').fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SoundFadePlugin from 'phaser3-rex-plugins/plugins/soundfade-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSoundFade',\nplugin: SoundFadePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration);\nvar sound = scene.plugins.get('rexSoundFade').fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import SoundFade from 'phaser3-rex-plugins/plugins/soundfade.js';\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = SoundFade.fadeIn(sound, duration);\nvar sound = SoundFade.fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#fade-in","title":"Fade in","text":"<ul> <li>Play and fade in voluem.     <pre><code>var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration);\n// var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration, endVolume, startVolume);\n</code></pre><ul> <li><code>sound</code> : Sound instance, or a key of audio cache.</li> </ul> </li> </ul>"},{"location":"fadevolume/#fade-out","title":"Fade out","text":"<ul> <li>Fade out volume then destroy it     <pre><code>scene.plugins.get('rexSoundFade').fadeOut(sound, duration);\n</code></pre><ul> <li><code>sound</code> : Sound instance.</li> </ul> </li> <li>Fade out volume then stop it     <pre><code>scene.plugins.get('rexSoundFade').fadeOut(sound, duration, false);\n</code></pre><ul> <li><code>sound</code> : Sound instance.</li> </ul> </li> </ul>"},{"location":"filechooser/","title":"File chooser","text":""},{"location":"filechooser/#introduction","title":"Introduction","text":"<p>Create a transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>).</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"filechooser/#live-demos","title":"Live demos","text":"<ul> <li>File chooser button</li> <li>Open file chooser dialog</li> </ul>"},{"location":"filechooser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"filechooser/#install-plugin","title":"Install plugin","text":""},{"location":"filechooser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfilechooserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfilechooserplugin.min.js', true);\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = scene.add.rexFileChooser(config);\n</code></pre></li> </ul>"},{"location":"filechooser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileChooserPlugin from 'phaser3-rex-plugins/plugins/filechooser-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFileChooser',\nplugin: FileChooserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = scene.add.rexFileChooser(config);\n</code></pre></li> </ul>"},{"location":"filechooser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileChooser } from 'phaser3-rex-plugins/plugins/filechooser.js';\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = new FileChooser(config);\nscene.add.existing(fileChooser);\n</code></pre></li> </ul>"},{"location":"filechooser/#add-file-chooser-object","title":"Add file chooser object","text":"<pre><code>var fileChooser = scene.add.rexFileChooser({\naccept: '',\nmultiple: false\n});\n// var fileChooser = scene.add.rexFileChooser(x, y, width, height, config);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> </ul>"},{"location":"filechooser/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFlieChooser extends FileChooser {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var fileChooser = new MyFlieChooser(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"filechooser/#sync","title":"Sync","text":"<p>Sync position, size and origin to another game object.</p> <pre><code>fileChooser.syncTo(gameObject);\n</code></pre>"},{"location":"filechooser/#selected-files","title":"Selected files","text":"<pre><code>var files = fileChooser.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"filechooser/#set-accept-filter","title":"Set accept filter","text":"<pre><code>fileChooser.setAccept(accept);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> </ul>"},{"location":"filechooser/#multiple-files","title":"Multiple files","text":"<ul> <li>Enable     <pre><code>fileChooser.setMultiple();\n</code></pre></li> <li>Disable     <pre><code>fileChooser.setMultiple(false);\n</code></pre></li> </ul>"},{"location":"filechooser/#events","title":"Events","text":"<ul> <li>Selected file(s) changed     <pre><code>fileChooser.on('change', function(fileChooser) {\nvar files = fileChooser.files;\nif (files.length === 0) { // No selected file\nreturn;\n}\n\nvar file = files[0];\nvar url = URL.createObjectURL(file);\n// ...\n})\n</code></pre></li> </ul>"},{"location":"filechooser/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileChooser.loadFile(file, loaderType, key);\n// fileChooser.loadFile(file, loaderType, key, cahceType);\n</code></pre> <p>or</p> <pre><code>fileChooser.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"filechooser/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.revokeObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"filechooser/#open-file-chooser","title":"Open file chooser","text":"<p>Failure</p> <p>This method can't run at ipad.</p> <p>Note</p> <p>Open a file chooser dialog under any touch event. i.e. User can't open file chooser dialog directly.</p> <pre><code>scene.plugins.get('rexFileChooser').open({\n// accept: '',\n// multiple: false,\n// closeDelay: 200\n})\n.then(function(result) {\n// var files = result.files;\n})\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> <li><code>delay</code> : Add a small delay to detect dialog canceled after game focus.<ul> <li>File chooser dialog dose not have <code>cancel</code> event.</li> </ul> </li> <li><code>files</code> : Array of selected files.     <ul> <li>Each file object (<code>files[i]</code>) has properties<ul> <li><code>file.name</code> : File name with file extension.</li> <li><code>file.type</code> : File type. (ex. <code>'image/jpeg'</code>)</li> <li><code>file.size</code> : File size in bytes.</li> <li><code>file.lastModified</code> : Timestamp of last-modified time.</li> <li><code>file.lastModifiedDate</code> : Date object of last-modified time. Equal to <code>new Data(lastModified)</code>.</li> <li>Get object url :     <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> </ul> </li> <li>Length <code>files</code> is 0 : User cancels file chooser dialog.</li> </ul> </li> </ul>"},{"location":"filechooser/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"filedropzone/","title":"File drop zone","text":""},{"location":"filedropzone/#introduction","title":"Introduction","text":"<p>Create a div element for dropping file(s).</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"filedropzone/#live-demos","title":"Live demos","text":"<ul> <li>Drop text file</li> <li>Drop image file</li> <li>Interactve with other game objects</li> </ul>"},{"location":"filedropzone/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"filedropzone/#install-plugin","title":"Install plugin","text":""},{"location":"filedropzone/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfiledropzoneplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfiledropzoneplugin.min.js', true);\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = scene.add.rexFileDropZone(config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileDropZonePlugin from 'phaser3-rex-plugins/plugins/filedropzone-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n}, // ...\nplugins: {\nglobal: [{\nkey: 'rexFileDropZone',\nplugin: FileDropZonePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = scene.add.rexFileDropZone(config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileDropZone } from 'phaser3-rex-plugins/plugins/filedropzone.js';\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = new FileDropZone(config);\nscene.add.existing(fileDropZone);\n</code></pre></li> </ul>"},{"location":"filedropzone/#add-file-drop-zone-object","title":"Add file-drop-zone object","text":"<pre><code>var fileDropZone = scene.add.rexFileDropZone({\n// style: { },\n\n// dropEnable: true,\n// filters: { filterType: (file, files) =&gt; boolean }\n});\n// var fileDropZone = scene.add.rexFileDropZone(x, y, width, height, config);\n</code></pre> <ul> <li><code>style</code> : CSS style of div element.</li> <li><code>dropEnable</code> :<ul> <li><code>true</code> : Fire drop events when dropping files. Default behavior.</li> <li><code>false</code> : Won't fire drop events.</li> </ul> </li> <li><code>filters</code> : Filter methods, optional. For example, image files filter, will fire <code>'drop.image'</code> event     <pre><code>{\nimage: function(file, files) { return file.name.match(/\\.(jpg|jpeg|png|gif)$/i)\n}\n}\n</code></pre></li> </ul>"},{"location":"filedropzone/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFileDropZone extends FileDropZone {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var fileDropZone = new MyFileDropZone(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#sync","title":"Sync","text":"<p>Sync position, size and origin to another game object.</p> <pre><code>fileDropZone.syncTo(gameObject);\n</code></pre>"},{"location":"filedropzone/#dropped-files","title":"Dropped files","text":"<pre><code>var files = fileDropZone.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"filedropzone/#events","title":"Events","text":"<ul> <li>Drop files     <pre><code>fileDropZone.on('drop', function(fileDropZone) {\nvar files = fileDropZone.files;\n})\n</code></pre></li> <li>Drop filtered files     <pre><code>fileDropZone.on('drop.' + filterType, function(files) {\n})\n</code></pre></li> <li>Drag-enter/drag-leave/drag-over file(s)     <pre><code>fileDropZone.on('dragenter', function(fileDropZone) {\n})\n</code></pre> <pre><code>fileDropZone.on('dragleave', function(fileDropZone) {\n})\n</code></pre> <pre><code>fileDropZone.on('dragover', function(fileDropZone) {\n})\n</code></pre></li> </ul> <p>Warning</p> <p>Game objects under this file drop zone can't receive touch input events.</p>"},{"location":"filedropzone/#enable-drop-events","title":"Enable drop events","text":"<ul> <li>Enable     <pre><code>fileDropZone.setDropEnable();\n// fileDropZone.setDropEnable(true);\n</code></pre></li> <li>Disable     <pre><code>fileDropZone.setDropEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>fileDropZone.toggleDropEnable();\n</code></pre></li> </ul>"},{"location":"filedropzone/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileDropZone.loadFile(file, loaderType, key);\n// fileDropZone.loadFile(file, loaderType, key, cahceType, onComplete);\n</code></pre> <p>or</p> <pre><code>fileDropZone.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>onComplete</code> : Callback invoked when file loaded to cache.</li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"filedropzone/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.revokeObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"filedropzone/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"firebase-auth/","title":"Authentication","text":""},{"location":"firebase-auth/#introduction","title":"Introduction","text":"<p>It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-auth/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-auth/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/auth';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\n</code></pre></li> </ol>"},{"location":"firebase-auth/#on-sign-insign-out","title":"On sign-in/sign-out","text":"<pre><code>firebaseApp.auth().onAuthStateChanged(function (user) {\nif (user) {\n// User is signed in.\nvar displayName = user.displayName;\nvar email = user.email;\nvar emailVerified = user.emailVerified;\nvar photoURL = user.photoURL;\nvar isAnonymous = user.isAnonymous;\nvar uid = user.uid;\nvar providerData = user.providerData;\n// ...\n} else {\n// User is signed out.\n// ...\n}\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-facebook","title":"Sign-in with facebook","text":"<pre><code>var provider = new firebase.auth.FacebookAuthProvider();\nfirebaseApp.auth().signInWithPopup(provider).then(function (result) {\n// This gives you a Facebook Access Token. You can use it to access the Facebook API.\nvar token = result.credential.accessToken;\n// The signed-in user info.\nvar user = result.user;\n// ...\n}).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n// The email of the user's account used.\nvar email = error.email;\n// The firebase.auth.AuthCredential type that was used.\nvar credential = error.credential;\n// ...\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-google","title":"Sign-in with Google","text":"<pre><code>var provider = new firebase.auth.GoogleAuthProvider();\nfirebaseApp.auth().signInWithPopup(provider).then(function (result) {\n// This gives you a Google Access Token. You can use it to access the Google API.\nvar token = result.credential.accessToken;\n// The signed-in user info.\nvar user = result.user;\n// ...\nconsole.log(user);\n}).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n// The email of the user's account used.\nvar email = error.email;\n// The firebase.auth.AuthCredential type that was used.\nvar credential = error.credential;\n// ...\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-password","title":"Sign-in with password","text":"<ul> <li>Create new user     <pre><code>firebaseApp.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n});\n</code></pre></li> <li>Sign-in     <pre><code>firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n});\n</code></pre></li> </ul>"},{"location":"firebase-auth/#sign-out","title":"Sign-out","text":"<pre><code>firebaseApp.auth().signOut();\n</code></pre>"},{"location":"firebase-auth/#current-sign-in-user","title":"Current sign-in user","text":"<pre><code>var user = firebaseApp.auth().currentUser;\nif (user != null) {\nvar name = user.displayName;\nvar email = user.email;\nvar photoUrl = user.photoURL;\nvar emailVerified = user.emailVerified;\nvar uid = user.uid;\n}\n</code></pre>"},{"location":"firebase-auth/#update-email","title":"Update email","text":"<pre><code>user.updateEmail('...').then(function() {\n// Update successful.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-auth/#update-profile","title":"Update profile","text":"<pre><code>user.updateProfile({\ndisplayName: '...',\nphotoURL: '...'\n}).then(function() {\n// Update successful.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-auth/#send-a-verification-email","title":"Send a verification email","text":"<pre><code>user.sendEmailVerification().then(function() {\n// Email sent.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-broadcast/","title":"Broadcast","text":""},{"location":"firebase-broadcast/#introduction","title":"Introduction","text":"<p>Broadcast real-time messages, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-broadcast/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-broadcast/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-broadcast/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add messager object     <pre><code>var messager = scene.plugins.get('rexfirebaseplugin').add.broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add messager object     <pre><code>var messager = scene.plugins.get('rexFirebase').add.broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Broadcast } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add messager object     <pre><code>var messager = new Broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#create-instance","title":"Create instance","text":"<pre><code>var messager = scene.plugins.get('rexFirebase').add.broadcast({\nroot: '',\n// senderID: '',\n// senderName: '',\n// receiverID: '',\n// history: 0\n});\n</code></pre> <ul> <li><code>root</code> : Path of this messager.</li> <li><code>senderID</code> : ID of sender.</li> <li><code>senderName</code> : Name of sender.</li> <li><code>receiverID</code> : ID of receiver/channel.</li> <li><code>history</code> : Stored received (history)  messages in client side.<ul> <li><code>0</code>, or <code>false</code> : No history message stored.</li> <li><code>-1</code>, or <code>true</code> : Infinity history message stored. i.e. store all messages from starting updating.</li> <li>A number larger then <code>0</code> : Length of stored history message.</li> </ul> </li> </ul>"},{"location":"firebase-broadcast/#send-message","title":"Send message","text":"<ol> <li>Set sender in config, or <code>setSender</code> method.     <pre><code>messager.setSender(userID, userName);\n</code></pre>     or     <pre><code>messager.setSender({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID of sender.</li> <li><code>userName</code> : Display name of sender.</li> </ul> </li> <li>Set receiver in config, or <code>setReceiver</code> method.     <pre><code>messager.setReceiver(receiverID);\n</code></pre><ul> <li><code>receiverID</code> : ID of receiver/channel.</li> </ul> </li> <li>Send message to receiverID.     <pre><code>messager.send(message)\n// .then(function() { })\n// .catch(function() { })\n</code></pre><ul> <li><code>message</code> : A string message, or a JSON data.</li> </ul> </li> </ol>"},{"location":"firebase-broadcast/#receive-messages","title":"Receive messages","text":"<ol> <li>Register receive event     <pre><code>messager.on('receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> <li>Set receiver in config, or <code>setReceiver</code> method     <pre><code>messager.setReceiver(receiverID);\n</code></pre><ul> <li><code>receiverID</code> : ID of receiver/channel.</li> </ul> </li> <li>Start receiving     <pre><code>messager.startReceiving();\n</code></pre></li> <li>Stop receive     <pre><code>messager.stopReceiving();\n</code></pre></li> </ol> <p>Only receive messages after invoking <code>startReceiving</code> method. Previous messages won't be got anymore.</p>"},{"location":"firebase-broadcast/#received-messages","title":"Received messages","text":"<p>Received messages will be saved in client side.</p> <ul> <li>Get received (history) messages.     <pre><code>var messages = messager.getHistory();\n</code></pre></li> <li>Clear history messages.     <pre><code>messager.clearHistory();\n</code></pre></li> </ul>"},{"location":"firebase-files/","title":"Files","text":""},{"location":"firebase-files/#introduction","title":"Introduction","text":"<p>Save JSON data, using firebase-firestore.</p> <p>Each owner has several files, each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-files/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-files/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-files/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = scene.plugins.get('rexfirebaseplugin').add.files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = scene.plugins.get('rexFirebase').add.files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Files } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = new Files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#create-instance","title":"Create instance","text":"<pre><code>var fileManager = scene.plugins.get('rexFirebase').add.files({\nroot: ''\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of these files.</li> </ul>"},{"location":"firebase-files/#save-file","title":"Save file","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre>     or     <pre><code>fileManager.setOwner({\nuserID: userID\n});\n</code></pre><ul> <li><code>userID</code> : User ID of file owner.</li> </ul> </li> <li>Save header and content data.<ul> <li>Overwrite     <pre><code>fileManager.save(fileID, header, content);\n</code></pre><ul> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>header</code> : Header data for indexing, a JSON object.<ul> <li>Reserve keys : <code>userID</code>, <code>fileID</code>, <code>type</code>, <code>contentDocID</code>. (i.e. don't use these keys)</li> </ul> </li> <li><code>content</code> : Content/body, a JSON object.<ul> <li>Reserve keys : <code>userID</code>, <code>fileID</code>, <code>type</code>. (i.e. don't use these keys)</li> </ul> </li> </ul> </li> <li>Update     <pre><code>fileManager.save(fileID, header, content, true);\n</code></pre></li> </ul> </li> </ol>"},{"location":"firebase-files/#load-headers","title":"Load headers","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre></li> <li>Load all headers of this file owner.     <pre><code>fileManager.loadHeaders()\n.then(function(result) { // var headers = result.headers;\n// var userID = result.userID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var userID = result.userID;\n})\n</code></pre><ul> <li><code>headers</code> : Get header by <code>headers[fileID]</code>, each header contains<ul> <li><code>header.fileID</code> : Unique ID of this file.</li> <li><code>header.userID</code> : User ID of file owner.        </li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-files/#load-file","title":"Load file","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre></li> <li>Load file.     <pre><code>fileManager.load(fileID)\n.then(function(result) { // var header = result.header;\n// var content = result.content;\n// var fileID = result.fileID;\n// var userID = result.userID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var fileID = result.fileID;\n// var userID = result.userID;\n})\n</code></pre><ul> <li><code>header</code>, <code>content</code> : Header/content of this file.</li> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>userID</code> : User ID of file owner.</li> </ul> </li> </ol>"},{"location":"firebase-firestore/","title":"Firestore","text":""},{"location":"firebase-firestore/#introduction","title":"Introduction","text":"<p>Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-firestore/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-firestore/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/firestore';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\nvar db = firebaseApp.firestore();\ndb.settings({\ntimestampsInSnapshots: true\n})\n</code></pre></li> </ol>"},{"location":"firebase-firestore/#references","title":"References","text":"<ul> <li>Reference of collection     <pre><code>var collectionRef = db.collection(collectionName);\n</code></pre></li> <li>Reference of document     <pre><code>var docRef = db.collection(collectionName).doc(docName);\n</code></pre></li> </ul>"},{"location":"firebase-firestore/#save","title":"Save","text":"<ul> <li>Add document     <pre><code>db.collection(collectionName).add(doc)      // doc: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Maximum size for a document : 1 MiB (1,048,576 bytes)</li> <li>Set document     <pre><code>db.collection(collectionName).doc(docName).set(keyValues)  // keyValues: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Overwrite document</li> <li>Update data     <pre><code>db.collection(collectionName).doc(docName).update(keyValues)  // keyValues: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Batched writes     <pre><code>// Get a new write batch\nvar batch = db.batch();\n\nbatch.set(db.collection(collectionName).doc(docName), keyValues);\nbatch.update(db.collection(collectionName).doc(docName), keyValues);\nbatch.delete(db.collection(collectionName).doc(docName));\n// ...\n\n// Commit the batch\nbatch.commit()\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Maximum document writting in a commit : 500</li> <li>Delete a document     <pre><code>db.collection(collectionName).doc(docName).delete()\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Delete a field     <pre><code>db.collection(collectionName).doc(docName).update({\nkey: firebase.firestore.FieldValue.delete()\n})\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Transaction     <pre><code>var docRef = db.collection(collectionName).doc(docName);\ndb.runTransaction(function(transaction) {\n// read-modify-write\n// This code may get re-run multiple times if there are conflicts.\nreturn transaction.get(docRef).then(function(doc) {\n// doc.exists\ntransaction.update(docRef, keyValues);\n});\n})\n.then(function() {\n//console.log(\"Transaction successfully committed!\");\n})\n.catch(function(error) {\n//console.log(\"Transaction failed: \", error);\n});\n</code></pre></li> </ul> <p>Limitation: Writes and transactions section</p>"},{"location":"firebase-firestore/#server-timestamp","title":"Server timestamp","text":"<pre><code>firebase.firestore.FieldValue.serverTimestamp()\n</code></pre>"},{"location":"firebase-firestore/#load","title":"Load","text":"<ul> <li>Get a document     <pre><code>db.collection(collectionName).doc(docName).get()\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre><ul> <li>doc<ul> <li><code>doc.id</code></li> <li><code>doc.data()</code></li> </ul> </li> </ul> </li> <li>Get all documents     <pre><code>db.collection(collectionName).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li>querySnapshot <ul> <li><code>querySnapshot.docs</code></li> <li><code>querySnapshot.forEach(callback, thisArg)</code></li> <li><code>querySnapshot.empty</code></li> <li><code>querySnapshot.size</code></li> </ul> </li> </ul> </li> <li>Simple queries     <pre><code>db.collection(collectionName).where(key, op, value).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>op</code> : <code>'&gt;'</code>, <code>'=='</code>, <code>'&lt;'</code>, <code>'&gt;='</code>, <code>'&lt;='</code><ul> <li><code>!=</code> : <code>where(key,'&gt;', value).where(key, '&lt;', value)</code></li> </ul> </li> </ul> </li> <li>Compound queries     <pre><code>db.collection(collectionName).where(key0, op0, value0).where(key1, op1, value1).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li>Range filters (<code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>) on only one field</li> </ul> </li> </ul>"},{"location":"firebase-firestore/#paginate","title":"Paginate","text":"<ul> <li>Order, limit     <pre><code>db.collection(collectionName).orderBy(key).limit(count)\n</code></pre><ul> <li>Descending order : <code>orderBy(key, 'desc')</code></li> <li>Order by multiple fields : <code>orderBy(key0).orderBy(key1)</code></li> </ul> </li> <li>Query, order, limit     <pre><code>db.collection(collectionName).where(key, op, value).orderBy(key).limit(count)\n</code></pre><ul> <li>Key of first order must be equal to range comparison (<code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>)</li> </ul> </li> <li>Page<ol> <li>Start at     <pre><code>db.collection(collectionName).orderBy(key).startAt(value).limit(count).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>endAt(value)</code></li> </ul> </li> <li>Next page     <pre><code>var lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];\ndb.collection(collectionName).orderBy(key).startAfter(lastDoc).limit(count).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>endBefore(lastDoc)</code></li> </ul> </li> </ol> </li> </ul>"},{"location":"firebase-firestore/#get-realtime-updates","title":"Get realtime updates","text":"<ul> <li>Get updates of a document     <pre><code>var unsubscribe = db.collection(collectionName).doc(docName)\n.onSnapshot(function(doc) { /* ... */ });\n</code></pre></li> <li>Get updates of documents     <pre><code>var unsubscribe = db.collection(collectionName).where(key, op, value)\n.onSnapshot(function(querySnapshot) { /* ... */ });\n</code></pre><ul> <li>Changes     <pre><code>var changes = querySnapshot.docChanges();  // [change]\n</code></pre><ul> <li>Change<ul> <li><code>change.type</code> : <code>'added'</code>, <code>'modified'</code>, <code>'removed'</code></li> <li><code>change.newIndex</code></li> <li><code>change.oldIndex</code></li> </ul> </li> </ul> </li> </ul> </li> <li>Detach a listener     <pre><code>unsubscribe();\n</code></pre></li> <li>Events for metadata changes     <pre><code>var unsubscribe = db.collection(collectionName).doc(docName)\n.onSnapshot({\nincludeMetadataChanges: true    // Listen for document metadata changes\n},\nfunction(doc) { /* ... */ } );\n</code></pre></li> </ul>"},{"location":"firebase-firestore/#indexing","title":"Indexing","text":"<p>Reference</p>"},{"location":"firebase-idalias/","title":"ID-alias","text":""},{"location":"firebase-idalias/#introduction","title":"Introduction","text":"<p>Map an unique ID to another unique ID (alias), using firebase-firestore.</p> <p>Each owner has several files, each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-idalias/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-idalias/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-idalias/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = scene.plugins.get('rexfirebaseplugin').add.idAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = scene.plugins.get('rexFirebase').add.idAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { IdAlias } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = new IdAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#create-instance","title":"Create instance","text":"<pre><code>var idAlias = scene.plugins.get('rexFirebase').add.idAlias({\nroot: ''\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this id-alias.</li> </ul>"},{"location":"firebase-idalias/#random-alias","title":"Random alias","text":"<p>Get alias of an id, or register an alias from a random word.</p> <pre><code>idAlias.getRandomAlias(id, {\ndigits: 10,\ncandidates: '0123456789',\nretry: 1000\n})\n.then(function(result) { // var alias = result.alias;\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre> <ul> <li><code>id</code> : An unique ID.</li> <li><code>digits</code> : String length of alias.</li> <li><code>candidates</code> : Candidate characters.</li> <li><code>retry</code> : Max retry count.</li> </ul>"},{"location":"firebase-idalias/#specific-alias","title":"Specific alias","text":"<ul> <li>Add a specific alias     <pre><code>idAlias.add(id, alias)\n.then(function(result) { // var alias = result.alias;\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre><ul> <li><code>id</code> : An unique ID.</li> <li><code>alias</code> : Another unique ID.</li> </ul> </li> <li>Get ID from alias     <pre><code>idAlias.getId(alias)\n.then(function(result) { // var alias = result.alias;\n// var id = result.id; // Return undefined if alias is not existed.\n})\n.catch(function(error) { })\n</code></pre></li> <li>Get alias from ID     <pre><code>idAlias.getAlias(id)\n.then(function(result) { // var alias = result.alias; // Return undefined if id is not existed.\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/","title":"Item table","text":""},{"location":"firebase-itemtable/#introduction","title":"Introduction","text":"<p>1d/2d/3d table, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-itemtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-itemtable/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-itemtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.plugins.get('rexfirebaseplugin').add.itemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.plugins.get('rexFirebase').add.itemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { ItemTable } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new ItemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexFirebase').add.itemTable({\nroot: '',\ntype: 3\n});\n</code></pre> <ul> <li><code>root</code> : Path of this item table.</li> <li><code>type</code> : Table type.<ul> <li><code>1</code>, or <code>'1d'</code> : 1d table, indexing by (key0)</li> <li><code>2</code>, or <code>'2d'</code> : 2d table, indexing by (key0, key1)</li> <li><code>3</code>, or <code>'3d'</code> : 3d table, indexing by (key0, key1, key2)</li> </ul> </li> </ul>"},{"location":"firebase-itemtable/#write","title":"Write","text":"<ul> <li>Set data     <pre><code>table.setData(key0, value)\n// table.setData(key0, key1, value)\n// table.setData(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })\n</code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>value</code> : Number, string, or JSON data.</li> </ul> </li> <li>Increase value     <pre><code>table.incValue(key0, value)\n// table.incValue(key0, key1, value)\n// table.incValue(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>value</code> : Number.</li> </ul> </li> <li>Remove key     <pre><code>table.removeData(key0)\n// table.removeData(key0, key1)\n// table.inremoveDatacValue(key0, key1, key2)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> </ul> </li> <li>Batch writing specific values at key pathes     <pre><code>table.updateData({\n`${key0}` : value0,\n`${key0}/${key1}` : value1,\n`${key0}/${key1}/${key2}` : value2,\n...\n})\n.then(function() { })\n.catch(function() { })    </code></pre></li> <li>Transaction, write new value according to latest value     <pre><code>table.transaction(key0, callback)\n// table.transaction(key0, key1, callback)\n// table.transaction(key0, key1, key2, callback)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>callback</code> : Write new value according to latest value.     <pre><code>function(preValue) { return newValue; }\n</code></pre></li> </ul> </li> <li>Remove key when current user disconnect     <pre><code>table.removeDataOnDisconnect(key0)\n// table.removeDataOnDisconnect(key0, key1)\n// table.removeDataOnDisconnect(key0, key1, key2)\n.then(function() { })\n.catch(function() { })        </code></pre></li> <li>Set value when current user disconnect     <pre><code>table.setDataOnDisconnect(key0, value)\n// table.setDataOnDisconnect(key0, key1, value)\n// table.setDataOnDisconnect(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })        </code></pre></li> </ul>"},{"location":"firebase-itemtable/#read","title":"Read","text":"<ul> <li>Start updating     <pre><code>table.startUpdate();\n</code></pre><ul> <li>Trigger <code>'init'</code> event when all data read back.</li> <li><code>table.initialFlag</code> : Return <code>true</code> when all data read back.</li> </ul> </li> <li>Stop updating     <pre><code>table.stopUpdate();\n</code></pre></li> <li>Read data stored in client     <pre><code>var data = table.getData(key0);\n// var data = table.getData(key0, key1);\n// var data = table.getData(key0, key1, key2);\n</code></pre><ul> <li><code>data</code> : Number, string, or JSON data.</li> </ul> </li> <li>Read all data stored in client     <pre><code>var data = table.getData();\n</code></pre><ul> <li><code>data</code> : JSON data.</li> </ul> </li> <li>Clone data stored in client     <pre><code>var data = table.cloneData(key0);\n// var data = table.cloneData(key0, key1);\n// var data = table.cloneData(key0, key1, key2);    \n</code></pre></li> <li>Clone all data stored in client     <pre><code>var data = table.cloneData();\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#events","title":"Events","text":"<ul> <li>Initialize, read all data back after start updating     <pre><code>table.on('init', function(data) { })\n</code></pre><ul> <li><code>data</code> : Table data.</li> <li><code>table.initialFlag</code> will be set to <code>true</code>.</li> </ul> </li> <li>Any value updated     <pre><code>table.on('update', function(data) { })\n</code></pre><ul> <li><code>data</code> : Table data.</li> </ul> </li> </ul>"},{"location":"firebase-itemtable/#1d-table","title":"1d table","text":"<p>1d table, indexing by (key0)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On change key0     <pre><code>table.on('changekey0', function(key0, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#2d-table","title":"2d table","text":"<p>2d table, indexing by (key0, key1)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On add key1     <pre><code>table.on('addkey1', function(key0, key1, value) {  });\n</code></pre></li> <li>On remove key1     <pre><code>table.on('removekey1', function(key0, key1) {  });\n</code></pre></li> <li>On change key1     <pre><code>table.on('changekey1', function(key0, key1, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#3d-table","title":"3d table","text":"<p>3d table, indexing by (key0, key1, key2)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On add key1     <pre><code>table.on('addkey1', function(key0, key1, value) {  });\n</code></pre></li> <li>On remove key1     <pre><code>table.on('removekey1', function(key0, key1) {  });\n</code></pre></li> <li>On add key2     <pre><code>table.on('addkey2', function(key0, key1, key2, value) {  });\n</code></pre></li> <li>On remove key2     <pre><code>table.on('removekey2', function(key0, key1, key2) {  });\n</code></pre></li> <li>On change key2     <pre><code>table.on('changekey2', function(key0, key1, key2, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/","title":"Leaderboard","text":""},{"location":"firebase-leaderboard/#introduction","title":"Introduction","text":"<p>Descending sort scores, using firebase-firestore.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-leaderboard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-leaderboard/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-leaderboard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = scene.plugins.get('rexfirebaseplugin').add.leaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { LeaderBoard } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = new LeaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#create-instance","title":"Create instance","text":"<pre><code>var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard({\nroot: '',\n// timeFilters: false,\n// timeFilterType: 'year',\n// pageItemCount: 100,\n// userID: '',\n// userName: '',\n// boardID: undefined,\n// tag: undefined\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this leaderboard.</li> <li><code>timeFilters</code> : Time filter of day/week/month/year.<ul> <li><code>false</code> : Don't use any time filter.</li> <li><code>true</code> : Enable all time filters.</li> <li>JSON object, enable some time filters.     <pre><code>{\nday: true,\nweek: true,\nmonth: true,\nyear: true,\nall: true\n}\n</code></pre></li> </ul> </li> <li><code>timeFilterType</code> : Type of time filter.<ul> <li><code>'day'</code>, or <code>'d'</code> : Filter scores by current day.</li> <li><code>'week'</code>, or <code>'w'</code> : Filter scores by current week. </li> <li><code>'month'</code>, <code>'m'</code> : Filter scores by current month.</li> <li><code>'year'</code>, <code>'y'</code> : Filter scores by current year. Default value.</li> <li><code>'all'</code>, <code>'a'</code> : No time filter to track all scores.</li> </ul> </li> <li><code>pageItemCount</code> : Item count of a page, default value is <code>100</code></li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> <li><code>boardID</code> : Board ID, optional.</li> <li><code>tag</code> : Custom tag, optional.</li> </ul> <p>Time filter enabled</p> <p>Add indexes if time filter is enabled. - <code>tagD</code>(ascending), <code>scoreD</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagW</code>(ascending), <code>scoreW</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagM</code>(ascending), <code>scoreM</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagY</code>(ascending), <code>scoreY</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagA</code>(ascending), <code>scoreA</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending)  </p>"},{"location":"firebase-leaderboard/#post-score","title":"Post score","text":"<ol> <li>Set user.     <pre><code>leaderBoard.setUser(userID, userName);\n</code></pre>     or     <pre><code>leaderBoard.setUser({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name of user, optional.</li> </ul> </li> <li>Set board property, optional.<ul> <li>Board ID     <pre><code>leaderBoard.setBoardID(boardID);\n</code></pre></li> <li>Custom tag     <pre><code>leaderBoard.setTag(tag);\n</code></pre></li> </ul> </li> <li>Post score     <pre><code>leaderBoard.post(score)\n// leaderBoard.post(score, extraData)\n// leaderBoard.post(score, extraData, timestamp)\n.then(function(record) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>score</code> : A number, scores will be sorted descend.</li> <li><code>extraData</code> : Extra data in JSON format.</li> <li><code>timestamp</code> : Timestamp of posting.<ul> <li><code>undefined</code> : Current time.</li> <li>A number : For debug usage.</li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-leaderboard/#get-my-score","title":"Get my score","text":"<pre><code>leaderBoard.getScore()\n// leaderBoard.getScore(userID)\n.then(function(score) { })\n.catch(function(error) { })\n</code></pre> <ul> <li><code>userID</code> : User ID, optional.<ul> <li><code>undefined</code> : Current user ID.</li> </ul> </li> <li><code>score</code> : Score object.<ul> <li>Time filter enabled :  <code>{userID, scoreD, scoreW, scoreM, scoreY, tagD, tagW, tagM, tagY, tagA}</code><ul> <li><code>scoreD</code>, <code>scoreW</code>, <code>scoreM</code>, <code>scoreY</code>, <code>scoreA</code> : Score of day/week/month/year/all-time.</li> <li><code>tagD</code>, <code>tagW</code>, <code>tagM</code>, <code>tagY</code>, <code>tagA</code> : Time tag of day/week/month/year/all-time.</li> </ul> </li> <li>Time filter disabled : <code>{userID, score}</code></li> </ul> </li> </ul>"},{"location":"firebase-leaderboard/#get-my-rank","title":"Get my rank","text":"<pre><code>leaderBoard.getRank()\n// leaderBoard.getRank(userID)\n.then(function(rank) { })\n.catch(function(error) { })\n</code></pre> <ul> <li><code>userID</code> : User ID, optional.<ul> <li><code>undefined</code> : Current user ID.</li> </ul> </li> <li><code>rank</code> : Rank object. <code>{userID, rank}</code></li> </ul>"},{"location":"firebase-leaderboard/#get-scores","title":"Get scores","text":"<ol> <li>Set board property, optional.<ul> <li>Board ID     <pre><code>leaderBoard.setBoardID(boardID);\n</code></pre></li> <li>Custom tag     <pre><code>leaderBoard.setTag(tag);\n</code></pre></li> </ul> </li> <li>Set time filter, optional.     <pre><code>leaderBoard.setTimeFilterType(type);\n</code></pre><ul> <li><code>type</code> : <ul> <li><code>'day'</code>, or <code>'d'</code> : Filter scores by current day.</li> <li><code>'week'</code>, or <code>'w'</code> : Filter scores by current week.</li> <li><code>'month'</code>, <code>'m'</code> : Filter scores by current month.</li> <li><code>'year'</code>, <code>'y'</code> : Filter scores by current year.</li> <li><code>'all'</code>, <code>'a'</code> : No time filter to track all scores.</li> </ul> </li> </ul> </li> <li>Load scores page by page.<ul> <li>Load first page.     <pre><code>leaderBoard.loadFirstPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Load next page.     <pre><code>leaderBoard.loadNextPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Load previous page.     <pre><code>leaderBoard.loadPreviousPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Reload current page.     <pre><code>leaderBoard.loadCurrentPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-leaderboard/#page-index","title":"Page index","text":"<ul> <li>Current page index     <pre><code>var pageIndex = leaderBoard.pageIndex;\n</code></pre></li> <li>Is first page     <pre><code>var isFirstPage = leaderBoard.isFirstPage;\n</code></pre></li> <li>Is last page     <pre><code>var isLastPage = leaderBoard.isLastPage;\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#delete","title":"Delete","text":"<ul> <li>Delete user     <pre><code>leaderBoard.deleteUserScore(userID)\n.then(function(){ })\n.catch(function(){ })\n</code></pre></li> <li>Delete board     <pre><code>leaderBoard.deleteBoard(boardID, tag)\n.then(function(){ })\n.catch(function(){ })\n</code></pre></li> </ul>"},{"location":"firebase-messages/","title":"Messages","text":""},{"location":"firebase-messages/#introduction","title":"Introduction","text":"<p>Store messages in firebase-firestore.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-messages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-messages/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-messages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = scene.plugins.get('rexfirebaseplugin').add.messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = scene.plugins.get('rexFirebase').add.messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Messages } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = new Messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#create-instance","title":"Create instance","text":"<pre><code>var messages = scene.plugins.get('rexFirebase').add.messages({\nroot: '',\n// pageItemCount: 100,\n\n// senderID: '',\n// senderName: '',\n// receiverID: undefined,\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this messages.</li> <li><code>pageItemCount</code> : Item count of a page, default value is <code>100</code></li> <li><code>senderID</code> : ID of sender.</li> <li><code>senderName</code> : Name of sender, optional.</li> <li><code>receiverID</code> : ID of receiver, optional.</li> </ul>"},{"location":"firebase-messages/#send-message","title":"Send message","text":"<ol> <li>Set sender.     <pre><code>messages.setSender(userID, userName);\n</code></pre>     or     <pre><code>messages.setSender({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name of user, optional.</li> </ul> </li> <li>Set receiver, optional.     <pre><code>messages.setReceiver(userID);\n</code></pre><ul> <li><code>userID</code> : User ID.</li> </ul> </li> <li>Send message     <pre><code>messages.send(message)    .then(function() { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>message</code> : String, number, or JSON object.</li> </ul> </li> </ol>"},{"location":"firebase-messages/#receive-messages","title":"Receive messages","text":"<ol> <li>Set receiverID, optional.     <pre><code>messages.setReceiver(userID)\n</code></pre><ul> <li><code>userID</code> : User ID.</li> </ul> </li> <li>Load previous messages, optional.     <pre><code>messages.loadPreviousMessages()\n.then(function(messageObjs) { })\n.catch(function(error) { })    </code></pre><ul> <li><code>messageObjs</code> : Array of Received message objects<ul> <li><code>messageObj.senderID</code>, <code>messageObj.senderName</code> : Sernder ID and name.</li> <li><code>messageObj.receiverID</code> : Receiver ID, optional.</li> <li><code>messageObj.message</code> : Sent message, a string, number, or JSON object.</li> <li><code>messageObj.timestamp</code> : Server-timestamp.</li> </ul> </li> </ul> </li> <li>Add <code>'receiver'</code> event.     <pre><code>messages.on('receive', function(messageObj) {\n// var senderID = messageObj.senderID;\n// var senderName = messageObj.senderName;\n// var receiverID = messageObj.receiverID;\n// var message = messageObj.message;\n// var timestamp = messageObj.timestamp;\n})\n</code></pre><ul> <li><code>messageObj</code> : Received message object.</li> </ul> </li> <li>Start receiving     <pre><code>messages.startReceiving();\n</code></pre></li> <li>Stop receiving     <pre><code>messages.stopReceiving();\n</code></pre></li> </ol> <p>Received messages will be stored in <code>messages.cacheMessages</code></p>"},{"location":"firebase-onlineuserlist/","title":"Online user list","text":""},{"location":"firebase-onlineuserlist/#introduction","title":"Introduction","text":"<p>Online user list, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-onlineuserlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-onlineuserlist/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-onlineuserlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = scene.plugins.get('rexfirebaseplugin').add.onlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = scene.plugins.get('rexFirebase').add.onlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { OnlineUserList } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = new OnlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#create-instance","title":"Create instance","text":"<pre><code>var userList = scene.plugins.get('rexFirebase').add.onlineUserList({\nroot: '',\n// maxUsers: 0,\n\n// userID: '',\n// userName: '',\n});\n</code></pre> <ul> <li><code>root</code> : Path of this online user list.</li> <li><code>maxUsers</code>: Maximum users in this list. Set to <code>0</code> to have infinity users.</li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> </ul>"},{"location":"firebase-onlineuserlist/#join","title":"Join","text":"<ol> <li>Set userID and user name.     <pre><code>userList.setUser(userID, userName);\n</code></pre>     or     <pre><code>userList.setUser({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name.</li> </ul> </li> <li>Join list.     <pre><code>userList.join()\n// .then(function() { })\n// .catch(function() { })\n</code></pre></li> </ol>"},{"location":"firebase-onlineuserlist/#leave","title":"Leave","text":"<pre><code>userList.leave()\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#kick-user","title":"Kick user","text":"<pre><code>userList.leave(userID)\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#change-user-name","title":"Change user name","text":"<pre><code>userList.changeUserName(newUserName)\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#user-list","title":"User list","text":"<ul> <li>Get users in user list     <pre><code>var users = userList.getUsers();\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>Is first user in user list?     <pre><code>var isFirstUser = userList.isFirstUser(userID);\n// var isFirstUser = userList.isFirstUser();  // Current user is first user\n</code></pre></li> <li>User list is full     <pre><code>var isFull = userList.isFull();\n</code></pre></li> <li>Maximun users setting value     <pre><code>var maxUsers = userList.maxUsers;\n</code></pre></li> <li>Current user is in list     <pre><code>var isInList = userList.isInList;\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#events","title":"Events","text":"<ul> <li>Any user join     <pre><code>userList.on('join', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>Any user leave     <pre><code>userList.on('leave', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>User list updated, includes user join, user leave, and user name changed     <pre><code>userList.on('update', users);\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>User name is changed     <pre><code>userList.on('changename', userID, userName, prevUserName);\n</code></pre></li> </ul>"},{"location":"firebase-overview/","title":"Firebase overview","text":""},{"location":"firebase-overview/#introduction","title":"Introduction","text":"<ul> <li>Home page</li> <li>Available libraries</li> </ul>"},{"location":"firebase-overview/#usage","title":"Usage","text":""},{"location":"firebase-overview/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;        \n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Get firebase plugin     <pre><code>var rexFireBase = scene.plugins.get('rexfirebaseplugin');\n</code></pre></li> </ul>"},{"location":"firebase-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Get firebase plugin     <pre><code>var rexFireBase = scene.plugins.get('rexFirebase');\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/","title":"Single room","text":""},{"location":"firebase-singleroom/#introduction","title":"Introduction","text":"<p>Chat room, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-singleroom/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-singleroom/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-singleroom/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add single-room object     <pre><code>var room = scene.plugins.get('rexfirebaseplugin').add.singleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add single-room object     <pre><code>var room = scene.plugins.get('rexFirebase').add.singleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { SingleRoom } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add single-room object     <pre><code>var room = new SingleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#create-instance","title":"Create instance","text":"<pre><code>var room = scene.plugins.get('rexFirebase').add.singleRoom({\nroot: '',\n// maxUsers: 0,\n// userID: '',\n// userName: '',\n// broadcast: true,\n// tables: undefined,\n\n});\n</code></pre> <ul> <li><code>root</code> : Path of this room.</li> <li><code>maxUsers</code>: Maximum users in this list. Set to <code>0</code> to have infinity users.</li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> <li><code>broadcast</code> : Broadcast chat messages.<ul> <li><code>true</code> : Enable broadcasting, without storing received (history) messages. Default behavior.</li> <li><code>false</code> : Disable broadcasting.</li> <li>A JSON object :     <pre><code>{\nhistory: 0\n}\n</code></pre><ul> <li><code>history</code> : Stored received (history) messages in client side.<ul> <li><code>0</code>, or <code>false</code> : No history message stored.</li> <li><code>-1</code>, or <code>true</code> : Infinity history message stored. i.e. store all messages from starting updating.</li> <li>A number larger then <code>0</code> : Length of stored history message.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>tables</code> : Configuration of tables.<ul> <li><code>undefined</code> : No table.</li> <li>Array of table-config JSON object for each table.     <pre><code>[\n{\nkey: tableKey,\ntype: '1d'\n},\n{\n...\n}\n]\n</code></pre><ul> <li><code>key</code> : Unique name of this table.</li> <li><code>type</code> : Table type.<ul> <li><code>1</code>, or <code>'1d'</code> : 1d table, indexing by (key0)</li> <li><code>2</code>, or <code>'2d'</code> : 2d table, indexing by (key0, key1)</li> <li><code>3</code>, or <code>'3d'</code> : 3d table, indexing by (key0, key1, key2)</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"firebase-singleroom/#join-room","title":"Join room","text":"<ol> <li>Set userID and user name.     <pre><code>room.setUser(userID, userName);\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name.</li> </ul> </li> <li>Join room.     <pre><code>room.joinRoom();\n</code></pre></li> </ol>"},{"location":"firebase-singleroom/#leave-room","title":"Leave room","text":"<pre><code>room.leaveRoom();\n</code></pre>"},{"location":"firebase-singleroom/#kick-user","title":"Kick user","text":"<pre><code>room.kickUser(userID);\n</code></pre>"},{"location":"firebase-singleroom/#user-list","title":"User list","text":"<ul> <li>Get users in room(user list)     <pre><code>var users = room.getUsers();\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>Is first user in room(user list)?     <pre><code>var isFirstUser = room.isFirstUser(userID);\n// var isFirstUser = room.isFirstUser();  // Current user is first user\n</code></pre></li> <li>Room(user list) is full     <pre><code>var isFull = room.isFull();\n</code></pre></li> <li>Maximun users setting value     <pre><code>var maxUsers = room.maxUsers;\n</code></pre></li> <li>Current user is in room(user list)     <pre><code>var isInRoom = room.isInRoom();\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#send-message","title":"Send message","text":"<pre><code>room.broadcast.send(message);\n</code></pre> <ul> <li><code>message</code> : A string message, or a JSON data.</li> </ul>"},{"location":"firebase-singleroom/#receive-messages","title":"Receive messages","text":"<ol> <li>Register receive event     <pre><code>room.on('broadcast.receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> </ol> <p>Only receive messages after joined room. Previous messages won't be got anymore.</p>"},{"location":"firebase-singleroom/#received-messages","title":"Received messages","text":"<p>Received messages will be saved in client side.</p> <ul> <li>Get received (history) messages.     <pre><code>var messages = room.broadcast.getHistory();\n</code></pre></li> <li>Clear history messages.     <pre><code>room.broadcast.clearHistory();\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#change-user-name","title":"Change user name","text":"<pre><code>room.changeUserName(newUserName);\n</code></pre>"},{"location":"firebase-singleroom/#tables","title":"Tables","text":"<ul> <li>Get table     <pre><code>var table = room.getTable(key);\n</code></pre><ul> <li><code>key</code> : Unique name of this table.</li> </ul> </li> </ul>"},{"location":"firebase-singleroom/#write","title":"Write","text":"<p>See here</p>"},{"location":"firebase-singleroom/#read","title":"Read","text":"<p>See here</p>"},{"location":"firebase-singleroom/#events","title":"Events","text":""},{"location":"firebase-singleroom/#user-list-events","title":"User list events","text":"<ul> <li>Any user join     <pre><code>room.on('userlist.join', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>Any user leave     <pre><code>room.on('userlist.leave', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>User list updated, includes user join, user leave, and user name changed     <pre><code>room.on('userlist.update', users);\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>User name is changed     <pre><code>room.on('userlist.changename', userID, userName, prevUserName);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#broadcast-events","title":"Broadcast events","text":"<ul> <li>Receive message     <pre><code>room.on('broadcast.receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#table-events","title":"Table events","text":"<p>Event names of each table indexed by key</p> <ul> <li><code>init</code> : <code>tables.${key}.init</code></li> <li><code>update</code> : <code>tables.${key}.update</code></li> <li><code>addkey0</code> : <code>tables.${key}.addkey0</code></li> <li><code>removekey0</code> : <code>tables.${key}.removekey0</code></li> <li><code>changekey0</code> : <code>tables.${key}.changekey0</code></li> <li><code>addkey1</code> : <code>tables.${key}.addkey1</code></li> <li><code>removekey1</code> : <code>tables.${key}.removekey1</code></li> <li><code>changekey1</code> : <code>tables.${key}.changekey1</code></li> <li><code>addkey2</code> : <code>tables.${key}.addkey2</code></li> <li><code>removekey2</code> : <code>tables.${key}.removekey2</code></li> <li><code>changekey2</code> : <code>tables.${key}.changekey2</code></li> </ul>"},{"location":"firebase-storage/","title":"Storage","text":""},{"location":"firebase-storage/#introduction","title":"Introduction","text":"<p>It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-storage/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-storage/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/storage';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\nvar storageRef = firebaseApp.storage().ref();\n</code></pre></li> </ol>"},{"location":"firebase-storage/#upload-string","title":"Upload string","text":"<ul> <li>Upload string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content)\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload base64 formatted string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'base64')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload base64url formatted string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'base64url')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload data URL string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'data_url')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> </ul>"},{"location":"firebase-storage/#upload-image","title":"Upload image","text":"<ol> <li>Get image from image texture <pre><code>var image = scene.textures.get(key).getSourceImage();\n</code></pre></li> <li>Copy image to canvas    <pre><code>var canvas = CanvasPool.create(scene, image.width, image.height);\nvar ctx = canvas.getContext('2d');\nctx.drawImage(image, 0, 0, image.width, image.height);\n</code></pre></li> <li>Get blob from canvas, then upload this blob.     <pre><code>var uploadTask;\ncanvasToBlob(canvas)\n.then(function(blob) {\nvar metadata = {\ncontentType: 'image/jpeg',\n};        var fileRef = storageRef.child('path/to/filename');\nuploadTask = fileRef.put(blob, metadata);\nreturn uploadTask;\n})\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre>     Reference: canvasToBlob</li> <li>Free canvas    <pre><code>CanvasPool.remove(canvas);\n</code></pre></li> </ol>"},{"location":"firebase-storage/#upload-task","title":"Upload task","text":"<ul> <li>Pause task     <pre><code>uploadTask.pause();\n</code></pre></li> <li>Resume task     <pre><code>uploadTask.resume();\n</code></pre></li> <li>Cancel task     <pre><code>uploadTask.cancel();\n</code></pre></li> <li>Monitor progress     <pre><code>uploadTask.on('state_changed', function(snapshot){\n// Observe state change events such as progress, pause, and resume\nvar progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;\nswitch (snapshot.state) {\ncase firebase.storage.TaskState.PAUSED: // or 'paused'\nconsole.log('Upload is paused');\nbreak;\ncase firebase.storage.TaskState.RUNNING: // or 'running'\nconsole.log('Upload is running');\nbreak;\n}\n},\nfunction(error) {\n// Handle unsuccessful uploads\n// https://firebase.google.com/docs/storage/web/handle-errors\nswitch (error.code) {\ncase 'storage/unauthorized':\n// User doesn't have permission to access the object\nbreak;\ncase 'storage/canceled':\n// User canceled the upload\nbreak;\ncase 'storage/unknown':\n// Unknown error occurred, inspect error.serverResponse\nbreak;\n}\n},\nfunction() {\n// Handle successful uploads on complete\n// Get download url\nuploadTask.snapshot.ref.getDownloadURL()\n.then(function(url) {\nconsole.log('File available at', url);\n})\n.catch(function (error) {});\n}\n);\n</code></pre></li> </ul>"},{"location":"firebase-storage/#download-file","title":"Download file","text":"<ol> <li>Get download url     <pre><code>var fileRef = storageRef.child('path/to/filename');\nfileRef.getDownloadURL()\n.then(function(url) {})\n.catch(function (error) {});\n</code></pre></li> <li>Download file by loader</li> </ol>"},{"location":"firebase-storage/#delete-file","title":"Delete file","text":"<pre><code>var fileRef = storageRef.child('path/to/filename');\nfileRef.delete()\n.then(function() {})\n.catch(function(error) {});\n</code></pre>"},{"location":"flash/","title":"Flash","text":""},{"location":"flash/#introduction","title":"Introduction","text":"<p>Flashing (set invisible then visible) game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"flash/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"flash/#install-plugin","title":"Install plugin","text":""},{"location":"flash/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexflashplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexflashplugin.min.js', true);\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = scene.plugins.get('rexflashplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FlashPlugin from 'phaser3-rex-plugins/plugins/flash-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFlash',\nplugin: FlashPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = scene.plugins.get('rexFlash').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Flash from 'phaser3-rex-plugins/plugins/flash.js';\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = new Flash(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#create-instance","title":"Create instance","text":"<pre><code>var flash = scene.plugins.get('rexFlash').add(gameObject, {\n// duration: 500,\n// repeat: 2\n});\n</code></pre> <ul> <li><code>duration</code> : Duration of invisible(50%) and visible(50%), in millisecond.</li> <li><code>repeat</code> : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once)</li> </ul>"},{"location":"flash/#start-flashing","title":"Start flashing","text":"<pre><code>flash.flash();\n// flash.flash(duration, repeat);\n</code></pre> <p>or</p> <pre><code>flash.flash({\nduration: 500,\nrepeat: 2\n});\n</code></pre>"},{"location":"flash/#stop-flashing","title":"Stop flashing","text":"<pre><code>flash.stop();\n</code></pre>"},{"location":"flash/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>flash.setEnable();\n</code></pre>     or     <pre><code>flash.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>flash.setEnable(false);\n</code></pre>     or     <pre><code>flash.enable = false;\n</code></pre></li> </ul>"},{"location":"flash/#set-duration","title":"Set duration","text":"<pre><code>flash.setDuration(duration);\n// flash.duration = duration;\n</code></pre>"},{"location":"flash/#set-repeat","title":"Set repeat","text":"<pre><code>flash.setRepeat(repeat);\n// flash.repeat = repeat;\n</code></pre>"},{"location":"flash/#events","title":"Events","text":"<ul> <li>On reached target     <pre><code>flash.on('complete', function(flash, gameObject){});\n</code></pre></li> </ul>"},{"location":"flash/#status","title":"Status","text":"<ul> <li>Is flashing     <pre><code>var isRunning = flash.isRunning;\n</code></pre></li> </ul>"},{"location":"flip/","title":"Flip","text":""},{"location":"flip/#introduction","title":"Introduction","text":"<p>Flipping game object to another face by scaling width/height.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"flip/#live-demos","title":"Live demos","text":"<ul> <li>Flip image</li> <li>Flip ui</li> </ul>"},{"location":"flip/#usage","title":"Usage","text":"<p>Sample code, Sample code-2</p>"},{"location":"flip/#install-plugin","title":"Install plugin","text":""},{"location":"flip/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexflipplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexflipplugin.min.js', true);\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = scene.plugins.get('rexflipplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FlipPlugin from 'phaser3-rex-plugins/plugins/flip-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFlip',\nplugin: FlipPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = scene.plugins.get('rexFlip').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Flip from 'phaser3-rex-plugins/plugins/flip.js';\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = new Flip(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#create-instance","title":"Create instance","text":"<pre><code>var flip = scene.plugins.get('rexFlip').add(gameObject, {\nface: 'back',\nfront: { key, frame }, // key, or callback\nback: { key, frame },  // key, or callback\n\n// orientation: 0, // 0|'x'|1|'y'\n// duration: 500,\n// delay: 0,\n// ease: 'Sine',\n});\n</code></pre> <ul> <li><code>face</code> : Initial face.<ul> <li><code>0</code>, <code>'front'</code> : Front face.</li> <li><code>1</code>, <code>'back'</code> : Back face.</li> </ul> </li> <li><code>front</code>, <code>back</code> : Texture of front/back face.<ul> <li><code>undefined</code> : Use current texture key, or frame name</li> <li><code>key</code> : A string for texture key.</li> <li><code>{key, frame}</code>, or <code>{frame}</code> : A texture key and frame name</li> <li><code>callback</code> : Configure game object via callback.     <pre><code>function(gameObject) {\n}\n</code></pre></li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>0</code>, <code>'x'</code>, or <code>'horizontal'</code> : Horizontal flipping.</li> <li><code>1</code>, <code>'y'</code>, or <code>'vertical'</code> : Vertical flipping.</li> </ul> </li> <li><code>duration</code> : Duration of flipping, in millisecond.</li> <li><code>delay</code> : Initial delay</li> <li><code>ease</code> Ease function. Default value is <code>'Sine'</code>.</li> </ul>"},{"location":"flip/#start-flipping","title":"Start flipping","text":"<pre><code>flip.flip();\n// flip.flip(duration);\n</code></pre>"},{"location":"flip/#stop-flipping","title":"Stop flipping","text":"<pre><code>flip.stop();\n</code></pre>"},{"location":"flip/#set-duration","title":"Set duration","text":"<pre><code>flip.setDuration(duration);\n// flip.duration = duration;\n</code></pre>"},{"location":"flip/#set-ease","title":"Set ease","text":"<pre><code>flip.setEase(ease);\n// flip.ease = ease;\n</code></pre>"},{"location":"flip/#faces","title":"Faces","text":""},{"location":"flip/#current-face","title":"Current face","text":"<ul> <li>Get     <pre><code>var face = flip.face;\n</code></pre><ul> <li><code>0</code> : Front face</li> <li><code>1</code> : Back face</li> </ul> </li> <li>Set     <pre><code>flip.setFace(face);\n// flip.face = face;\n</code></pre><ul> <li><code>0</code>, <code>'front'</code> : Front face.</li> <li><code>1</code>, <code>'back'</code> : Back face.</li> </ul> </li> <li>Toggle face     <pre><code>flip.toggleFace();\n</code></pre></li> </ul>"},{"location":"flip/#set-texture-of-face","title":"Set texture of face","text":"<ul> <li>Front face     <pre><code>flip.setFrontFace(key, frame);\n</code></pre>     or     <pre><code>flip.setFrontFace(callback);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(gameObject) {\n// ...\n}\n</code></pre></li> </ul> </li> <li>Back face     <pre><code>flip.setBackFace(key, frame);\n</code></pre>     or     <pre><code>flip.setBackFace(callback);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(gameObject) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"flip/#events","title":"Events","text":"<ul> <li>On flipping complete     <pre><code>flip.on('complete', function(gameObject, flip){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"flip/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = flip.isRunning;\n</code></pre></li> </ul>"},{"location":"format/","title":"Format","text":""},{"location":"format/#introduction","title":"Introduction","text":"<p>Format string with variables, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"format/#usage","title":"Usage","text":"<p>Replace <code>%x</code> from an array. <code>x</code> starts from <code>1</code>.</p> <pre><code>// const Format = Phaser.Utils.String.Format;\nvar template = 'hello, %1';\nvar view = ['rex'];\nvar result = Format(template, view);\n</code></pre>"},{"location":"fsm/","title":"FSM","text":""},{"location":"fsm/#introduction","title":"Introduction","text":"<p>Finite state machine.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"fsm/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fsm/#install-plugin","title":"Install plugin","text":""},{"location":"fsm/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfsmplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfsmplugin.min.js', true);\n</code></pre></li> <li>Add FSM object     <pre><code>var states = scene.plugins.get('rexfsmplugin').add(config);\n</code></pre></li> </ul>"},{"location":"fsm/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FSMPlugin from 'phaser3-rex-plugins/plugins/fsm-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFSM',\nplugin: FSMPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add FSM object     <pre><code>var states = scene.plugins.get('rexFSM').add(config);\n</code></pre></li> </ul>"},{"location":"fsm/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import FSM from 'phaser3-rex-plugins/plugins/fsm.js';\n</code></pre></li> <li>Add FSM object     <pre><code>var states = new FSM(config);\n</code></pre></li> </ul>"},{"location":"fsm/#create-instance","title":"Create instance","text":""},{"location":"fsm/#create-by-config","title":"Create by config","text":"<pre><code>var states = scene.plugins.get('rexFSM').add({\nstart: 'A',   // default: undefined\nstates: {\nA: {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n},\ninit: function() {},\nextend: {\ni: 0,\nname: 'abc'\n// ...\n},\nenable: true,\nscene: undefined,\neventEmitter: undefined\n});\n</code></pre> <ul> <li><code>start</code>: Initial state.</li> <li><code>states</code>: Define states.<ul> <li>stateName<ul> <li><code>next</code>: String of next state, or a callback to get next state.</li> <li><code>enter</code>: Callback when enter state.</li> <li><code>exit</code>: Callback when exit state.</li> <li><code>update</code>, <code>preupdate</code>, <code>postupdate</code> : Callback invoked by scene's <code>'update'</code>, <code>'preupdate'</code>, <code>'postupdate'</code> events.</li> </ul> </li> </ul> </li> <li><code>init</code>: Initial callback when creating instance.</li> <li><code>extend</code>: Inject key-value pairs into instance.</li> <li><code>enable</code>: Set <code>false</code> to block any state changing.</li> <li><code>scene</code> : Scene object for startUpdate, startPreUpdate, startPostUpdate method. Optional.</li> <li><code>eventEmitter</code><ul> <li><code>undefined</code> : Create a private event emitter, default value.</li> <li><code>false</code> : Don't add any event emitter, i.e. no event will be fired.</li> <li>Event emitter object : Fire event through this event emitter.</li> </ul> </li> </ul>"},{"location":"fsm/#inheritance","title":"Inheritance","text":"<ol> <li>Create new class     <pre><code>class State extends FSM {\nconstructor() {\nsuper();\n}\n\nnext_A() { return 'B' }\n\nenter_A() { /* ... */ }\n\nexit_A() { /* ... */ }\n}\n</code></pre>     Members:         - <code>next_</code> + stateName: Callback to get next state.         - <code>enter_</code> + stateName: Callback when enter state.         - <code>exit_</code> + stateName: Callback when exit state.</li> <li>Create instance     <pre><code>var states = new State();\n</code></pre></li> </ol>"},{"location":"fsm/#read-state","title":"Read state","text":"<ul> <li>Current state     <pre><code>var curState = states.state;\n</code></pre></li> <li>Previous state     <pre><code>var preState = states.prevState;\n</code></pre></li> </ul>"},{"location":"fsm/#start-at-state","title":"Start at state","text":"<pre><code>states.start(newState);\n</code></pre> <p>Note</p> <p>Set new state without triggering any state-changing callbacks or events.</p>"},{"location":"fsm/#next-state","title":"Next state","text":"<pre><code>graph TB\n\nnext[\"states.next()\"] --&gt; next_A[\"states.next_A()&lt;br&gt;return 'B'\"]\n\nnext_A --&gt; eventStateChange[\"states.emit('statechange', states)&lt;br&gt;states.prevState -&gt; states.state\"]\n\nsubgraph State changing\n\neventStateChange --&gt; exit_A[\"states.exit_A()\"]\nexit_A --&gt; eventExitA[\"states.emit('exit_A', states)\"]\n\neventExitA --&gt; enter_B[\"states.enter_B()\"]\nenter_B --&gt; eventEnterB[\"states.emit('enter_B', states)\"]\n\nsubgraph Exit\nexit_A\neventExitA\nend\n\nsubgraph Enter\nenter_B\neventEnterB\nend\n\nend\n\ngoto[\"states.goto('B')\"] --&gt; eventStateChange\n\nsubgraph Request\n\nsubgraph Next\nnext\nnext_A\nend\n\nsubgraph Goto\ngoto\nend\n\nend</code></pre>"},{"location":"fsm/#request","title":"Request","text":"<ul> <li>Get next state by callback     <pre><code>states.next();    // nextState = states.next_A()    \n</code></pre></li> <li>Goto state     <pre><code>states.goto(nextState);\n// states.state = nextState;\n</code></pre></li> </ul>"},{"location":"fsm/#state-changing","title":"State-changing","text":"<p>These callbacks or events will be triggered if state is changing.</p> <p>For example, state is changing from 'A' to 'B'.</p> <ol> <li>event <code>statechange</code> <pre><code>states.on('statechange', function(states) {\nconsole.log( states.prevState + '-&gt;' + states.state );\n});\n</code></pre></li> <li>callback <code>states.exit_A</code></li> <li>event <code>exit_A</code> <pre><code>states.on('exit_A', function(states) {\n/*...*/\n});\n</code></pre></li> <li>callback <code>states.enter_B</code></li> <li>event <code>enter_B</code> <pre><code>states.on('enter_B', function(states) {\n/*...*/\n});\n</code></pre></li> </ol>"},{"location":"fsm/#enable","title":"Enable","text":"<pre><code>states.setEnable();\n// states.setEnable(false); // disable\n</code></pre> <p>or</p> <pre><code>states.toggleEnable();\n</code></pre> <p><code>states.next()</code> and <code>states.goto()</code> will be ignored if disabled.</p>"},{"location":"fsm/#update","title":"Update","text":"<ul> <li>Start     <pre><code>states.startUpdate();\nstates.startPreUpdate();\nstates.startPostUpdate();\n// Assume that `scene` is assigned in config of constructor\n</code></pre>     or     <pre><code>states.startUpdate(scene);\nstates.startPreUpdate(scene);\nstates.startPostUpdate(scene);\n</code></pre><ul> <li><code>scene</code> : Scene object</li> </ul> </li> <li>Stop     <pre><code>states.stopUpdate();\nstates.stopPreUpdate();\nstates.stopPostUpdate();\n</code></pre></li> </ul>"},{"location":"fsm/#add-new-state","title":"Add new state","text":"<p><pre><code>states.addState(name, {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n})\n</code></pre> <pre><code>states.addState({\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n})\n</code></pre></p> <p>or</p> <p><pre><code>states.addStates({\n'A' : {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n})\n</code></pre> <pre><code>states.addStates([\n{\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n]);\n</code></pre></p>"},{"location":"fullscreen/","title":"Full screen","text":""},{"location":"fullscreen/#introduction","title":"Introduction","text":"<p>Enable or disable full screen mode, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"fullscreen/#usage","title":"Usage","text":""},{"location":"fullscreen/#enabledisable","title":"Enable/disable","text":"<p>Under any input event (touch or keyboard)</p> <pre><code>gameObject.setInteractive().on('pointerdown', function() {\nif (scene.scale.isFullscreen) {\nscene.scale.stopFullscreen();\n// On stop fulll screen\n} else {\nscene.scale.startFullscreen();\n// On start fulll screen\n}\n});\n</code></pre> <p>Fire one of these events</p> <ul> <li><code>'fullscreenunsupported'</code> : Tried to enter fullscreen mode, but it is unsupported by the browser.</li> <li><code>'enterfullscreen'</code> : Entered fullscreen mode successfully.</li> <li><code>'fullscreenfailed'</code> : Tried to enter fullscreen mode but failed.</li> </ul>"},{"location":"fullscreen/#toggle","title":"Toggle","text":"<p>Under any input event (touch or keyboard)</p> <pre><code>gameObject.setInteractive().on('pointerdown', function() {\nscene.scale.toggleFullscreen();\nif (scene.scale.isFullscreen) {\n// On start fulll screen\n} else {\n// On stop fulll screen\n}\n});\n</code></pre> <ul> <li>Fire <code>'fullscreenunsupported'</code> or <code>'enterfullscreen'</code> event.</li> </ul>"},{"location":"fullscreen/#state","title":"State","text":"<ul> <li>Is in full screen mode     <pre><code>var isFullScreen = scene.scale.isFullscreen;\n</code></pre></li> <li>Support full screen     <pre><code>var supported = Phaser.Device.Fullscreen.available;\n</code></pre></li> </ul>"},{"location":"fullscreen/#events","title":"Events","text":"<ul> <li>Full screen mode unsupported     <pre><code>scene.scale.on('fullscreenunsupported', function() {});\n</code></pre></li> <li>Enter full screen mode     <pre><code>scene.scale.on('enterfullscreen', function() {});\n</code></pre></li> </ul>"},{"location":"fullscreen/#with-dom-game-object","title":"With DOM game object","text":"<p>Set <code>gameConfig.fullscreenTarget</code> to parent id.</p> <pre><code>var config = {\nparent: parentDivID,\nfullscreenTarget: parentDivID\n};\n\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"fuzzy/","title":"Fuzzy","text":""},{"location":"fuzzy/#introduction","title":"Introduction","text":"<p>A wrap of fuzzy logic (MIT license).</p> <ul> <li>Author of wrap : Rex , Core API : Michael Herzog</li> <li>Member of scene, or game object</li> </ul>"},{"location":"fuzzy/#live-demos","title":"Live demos","text":"<ul> <li>Fuzzy</li> </ul>"},{"location":"fuzzy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fuzzy/#install-plugin","title":"Install plugin","text":""},{"location":"fuzzy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfuzzyplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfuzzyplugin.min.js', true);\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = scene.plugins.get('rexfuzzyplugin').add(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GashaponPlugin from 'phaser3-rex-plugins/plugins/fuzzy-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGashapon',\nplugin: GashaponPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = scene.plugins.get('rexFuzzy').add(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BuildFuzzyModule from 'phaser3-rex-plugins/plugins/fuzzy.js';\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = BuildFuzzyModule(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#create-instance","title":"Create instance","text":"<pre><code>var fuzzyModule = scene.plugins.get('rexFuzzy').add(`\n// Declare fuzzy sets\nFuzzySetName : left, middle, right, setType\nFuzzySetName : left, middle, right\nFuzzySetName : left, right\n\n// Declare rules\nFuzzySetNameA =&gt; FuzzySetNameT\nFuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT\nFuzzySetNameA or FuzzySetNameB =&gt; FuzzySetNameT\nFuzzySetNameA or (FuzzySetNameA and FuzzySetNameB) =&gt; FuzzySetNameT\n\n// More comment lines...\n`);\n</code></pre> <ul> <li><code>config</code> can be a multiple lines string, or a plain object<ul> <li>A multiple lines string contains<ul> <li><code>FuzzySetName : left, middle, right, setType</code> : A line with ':', declare a fuzzy set.<ul> <li><code>FuzzySetName</code> : Fuzzy set name in one of these format<ul> <li>Variable name with postfix <code>'+'</code>, or <code>'-'</code>. For example, <code>HP-</code>, <code>HP</code>, <code>HP+</code>, <code>HP--</code>, <code>HP++</code>, the variable name is <code>HP</code>.</li> <li><code>variableName.setName</code>. For example, <code>DIST.near</code>, <code>DIST.middle</code>, <code>DIST.far</code>, the variable name is <code>DIST</code>.<ul> <li>Variable name and set name are composed of number(0-9) or English characters (A-Za-z).</li> </ul> </li> </ul> </li> <li><code>left</code>, <code>middle</code>, <code>right</code> : Left, middle, right point of fuzzy set, in numbers.<ul> <li><code>left</code>, <code>right</code> : Two numbers for left and right point, middle point is the average of (left + right).</li> </ul> </li> <li><code>setType</code> : <ul> <li>Can be one of these string, or none.<ul> <li>Left part : <code>leftShoulder</code>, <code>leftSCurve</code>.<ul> <li>Default value is <code>leftShoulder</code> for first fuzzy set of a variable.</li> </ul> </li> <li>Right part : <code>rightShoulder</code>, <code>rightSCurve</code>.<ul> <li>Default value is <code>rightShoulder</code> for last fuzzy set of a variable.</li> </ul> </li> <li>Middle parts : <code>triangular</code>, <code>singleton</code>, <code>normal</code>.<ul> <li>Default value is <code>triangular</code> for other fuzzy sets of a variable.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>FuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT</code> : A line with '=&gt;', declare a fuzzy rule.</li> <li><code>// ...</code> : Comment lines</li> </ul> </li> <li>A plain object     <pre><code>{\nvariables: {\nVariableName: [\n{\nname: leftSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n{\nname: middleSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n{\nname: rightSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n],\n// ....\n},\n\nrules: [\n'FuzzySetNameA =&gt; FuzzySetNameT',\n'FuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT',\n'FuzzySetNameA or FuzzySetNameB =&gt; FuzzySetNameT',\n// ...\n]\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"fuzzy/#set-input","title":"Set input","text":"<pre><code>fuzzyModule.fuzzify(variableName, value);\n</code></pre> <ul> <li><code>variableName</code> : An antecedent variable name string.</li> <li><code>value</code> : A number.</li> </ul> <p>or</p> <pre><code>fuzzyModule.fuzzify({\nvarName: value,\n});\n</code></pre>"},{"location":"fuzzy/#get-result","title":"Get result","text":"<pre><code>var result = fuzzyModule.defuzzify(variableName);\n</code></pre> <ul> <li><code>variableName</code> : A consequence variable name string.</li> </ul> <p>or</p> <pre><code>var result = fuzzyModule.defuzzify([varName0, varName1, ...]);\n</code></pre> <ul> <li><code>result</code> : <code>{varName0: value0, varName1, value1, ...}</code></li> </ul> <p>or</p> <pre><code>var result = fuzzyModule.defuzzify();\n</code></pre> <ul> <li><code>result</code> : <code>{varName0: value0, varName1, value1, ...}</code><ul> <li>Grab variable names from all consequence of rules.</li> </ul> </li> </ul>"},{"location":"game/","title":"Game","text":""},{"location":"game/#boot","title":"Boot","text":"<pre><code>var config = {\ntype: Phaser.AUTO,\nparent: null,\nwidth: 1024,\nheight: 768,\nscale: {\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH\n},\n\nscene: null\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"game/#configuration","title":"Configuration","text":"<p>Reference</p> <pre><code>{\ntype: Phaser.AUTO,\nparent: 'phaser-example',\nwidth: 800,\nheight: 600,\nscale: {\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH\n},\ndom: {\ncreateContainer: false,\n},\nscene: null,\nbackgroundColor: 0x333333\n}\n</code></pre> <p>or</p> <pre><code>{\ntype: Phaser.AUTO,\nparent: null,\nwidth: 800,\nheight: 600,\nscale: {\nmode: Phaser.Scale.NONE,\nautoCenter: Phaser.Scale.NO_CENTER\n},\nautoRound: false,\ncanvas: null,\ncanvasStyle: null,\n\nscene: null,\n\ncallbacks: {\npreBoot: NOOP,\npostBoot: NOOP\n},\n\nseed: [ (Date.now() * Math.random()).toString() ],\n\ntitle: '',\nurl: 'https://phaser.io',\nversion: '',\n\ninput: {\nkeyboard: {\ntarget: window\n},\nmouse: {\ntarget: null,\ncapture: true\n},\nactivePointers: 1,\ntouch: {\ntarget: null,\ncapture: true\n},\nsmoothFactor: 0,\ngamepad: false,\nwindowEvents: true,\n},\ndisableContextMenu: false,\n\nbackgroundColor: 0,\n\nrender: {\nantialias: true,\nantialiasGL: true,\ndesynchronized: false,\npixelArt: false,\nroundPixels: false,\ntransparent: false,\nclearBeforeRender: true,\npreserveDrawingBuffer: false,\npremultipliedAlpha: true,\nfailIfMajorPerformanceCaveat: false,\npowerPreference: 'default', // 'high-performance', 'low-power' or 'default'\nbatchSize: 4096,\nmaxLights: 10,\nmaxTextures: -1,\nmipmapFilter: 'LINEAR', // 'NEAREST', 'LINEAR', 'NEAREST_MIPMAP_NEAREST', 'LINEAR_MIPMAP_NEAREST', 'NEAREST_MIPMAP_LINEAR', 'LINEAR_MIPMAP_LINEAR'\nautoMobilePipeline: true,\ndefaultPipeline: 'MultiPipeline',\npipeline:[]\n},\n\nphysics: {\ndefault: false  // no physics system enabled\n},\n\nloader:{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nwithCredentials: false,\nimageLoadType: 'XHR',    // 'HTMLImageElement' \nlocalScheme: [ 'file://', 'capacitor://' ]\n},\n\nimages: {\ndefault: 'data:image/png;base64....',\nmissing: 'data:image/png;base64....'\n},\n\ndom: {\ncreateContainer: false,\nbehindCanvas: false,\n},\n\nplugins: {\nglobal: [\n//{key, plugin, start}\n],\nscene: [\n// ...\n]\n},\n\npipeline: { key:PipelineClass },\n\nfps: {\nmin: 10,\ntarget: 60,\nforceSetTimeOut: false,\ndeltaHistory: 10\n},\n\ndisableContextMenu: false,\nbanner: {\nhidePhaser: false,\ntext: '#ffffff',\nbackground: [\n'#ff0000',\n'#ffff00',\n'#00ff00',\n'#00ffff',\n'#000000'\n]\n},\n\nstableSort: -1\n}\n</code></pre>"},{"location":"game/#destroy","title":"Destroy","text":"<pre><code>game.destroy();\n// game.destroy(removeCanvas, noReturn);\n</code></pre> <ul> <li><code>removeCanvas</code> : Set to <code>true</code> if you would like the parent canvas element removed from the DOM, or <code>false</code> to leave it in place.</li> <li><code>noReturn</code> : If <code>true</code> all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this.</li> </ul>"},{"location":"game/#global-members","title":"Global members","text":""},{"location":"game/#scene-manager","title":"Scene manager","text":"<p>Global scene manager in <code>game.scene</code>, or <code>scene.scene</code> in each scene.</p>"},{"location":"game/#global-data","title":"Global data","text":"<p>Instance of data manager in <code>game.registry</code>, or <code>scene.registry</code> in each scene.</p> <ul> <li>Get     <pre><code>var value = scene.registry.get(key);\n// var value = game.registry.get(key);\n</code></pre></li> <li>Set     <pre><code>scene.registry.set(key, value);\n// game.registry.set(key, value);\n</code></pre></li> <li>Event<ul> <li>Set data event     <pre><code>scene.registry.events.on('setdata', function(parent, key, value){ /* ... */ });\n// game.registry.events.on('setdata', function(parent, key, value){ /* ... */ })\n</code></pre></li> <li>Change data event     <pre><code>scene.registry.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ });\n// game.registry.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ })\n</code></pre> <pre><code>scene.registry.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n// game.registry.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul>"},{"location":"game/#game-time","title":"Game time","text":"<ul> <li>The time that the current game step started at.     <pre><code>var time = game.getTime();\n// var time = scene.game.getTime();\n</code></pre></li> <li>The current game frame.     <pre><code>var frameCount = game.getFrame();\n// var frameCount = scene.game.getFrame();\n</code></pre></li> <li>The delta time, since the last game step. This is a clamped and smoothed average value.     <pre><code>var delta = game.loop.delta;\n// var delta = scene.game.loop.delta;\n</code></pre></li> </ul>"},{"location":"game/#game-config","title":"Game config","text":"<pre><code>var config = game.config;\n// var config = scene.game.config;\n</code></pre>"},{"location":"game/#window-size","title":"Window size","text":"<ul> <li>Width     <pre><code>var width = game.config.width;\n// var width = scene.game.config.width;\n</code></pre></li> <li>Height     <pre><code>var height = game.config.height;\n// var height = scene.game.config.height;\n</code></pre></li> </ul>"},{"location":"game/#pause-resume","title":"Pause / Resume","text":"<ul> <li>Pause the entire game and emit a <code>PAUSE</code> event.     <pre><code>game.pause();\n</code></pre></li> <li>Resume the entire game and emit a <code>RESUME</code> event.     <pre><code>game.resume();\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = game.isPaused;\n</code></pre></li> </ul>"},{"location":"game/#events","title":"Events","text":"<ul> <li>Pause(window is invisible)/Resume(window is visible)     <pre><code>game.events.on('pause', function() {});\n</code></pre> <pre><code>game.events.on('resume', function() {});\n</code></pre></li> <li>Destroy event, triggered by <code>game.destroy()</code> <pre><code>game.events.on('destroy', function() {})\n</code></pre></li> <li>On window focused/blurred     <pre><code>game.events.on('focus', function() {})\n</code></pre> <pre><code>game.events.on('blur', function(){ })\n</code></pre></li> </ul>"},{"location":"gameobject/","title":"Game object","text":""},{"location":"gameobject/#introduction","title":"Introduction","text":"<p>Base class of all game object in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"gameobject/#usage","title":"Usage","text":""},{"location":"gameobject/#destroy","title":"Destroy","text":"<ul> <li>Destroy game object     <pre><code>gameObject.destroy();\n</code></pre></li> <li>Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list.</li> <li>Event     <pre><code>gameObject.once('destroy', function(gameObject, fromScene) {\n\n}, scope);\n</code></pre><ul> <li><code>fromScene</code> : <code>true</code> if game object is destroyed during scene is shutdown. When scene is shutdown, all game objects will be destroyed.</li> </ul> </li> </ul>"},{"location":"gameobject/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var x = gameObject.x;\nvar y = gameObject.y;\n</code></pre></li> <li>Set     <pre><code>gameObject.x = 0;\ngameObject.y = 0;\ngameObject.setPosition(x,y);\ngameObject.setX(x);\ngameObject.setY(y);\n</code></pre><ul> <li>Set random     <pre><code>gameObject.setRandomPosition(x, y, width, height);\n// gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#local-point","title":"Local point","text":"<p>Transfer world point to local point</p> <p><pre><code>var point = gameObject.getLocalPoint(x, y);  // point : {x, y}\n// var out = gameObject.getLocalPoint(x, y, out);\n</code></pre> or <pre><code>var out = gameObject.getLocalPoint(x, y, out, camera);\n</code></pre></p>"},{"location":"gameobject/#angle","title":"Angle","text":"<ul> <li>Get     <pre><code>var angle = gameObject.angle;\nvar radians = gameObject.rotation;  // angle in radians\n</code></pre></li> <li>Set     <pre><code>gameObject.angle = degrees;\ngameObject.rotation = radians;\ngameObject.setAngle(degrees);\ngameObject.setRotation(radians);\n</code></pre></li> </ul>"},{"location":"gameobject/#visible","title":"Visible","text":"<ul> <li>Get     <pre><code>var visible = gameObject.visible; // visible: true/false\n</code></pre></li> <li>Set     <pre><code>gameObject.visible = visible;\ngameObject.setVisible(visible);\n</code></pre></li> </ul>"},{"location":"gameobject/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = gameObject.alpha;  // 0~1\n</code></pre></li> <li>Set     <pre><code>gameObject.setAlpha(alpha);\n// gameObject.alpha = alpha;\n</code></pre>     or     <pre><code>gameObject.setAlpha(topLeft, topRight, bottomLeft, bottomRight);\n// gameObject.alphaTopLeft = alpha;\n// gameObject.alphaTopRight = alpha;\n// gameObject.alphaBottomLeft = alpha;\n// gameObject.alphaBottomRight = alpha;\n</code></pre></li> <li>Clear (set to <code>1</code>)     <pre><code>gameObject.clearAlpha();\n</code></pre></li> </ul>"},{"location":"gameobject/#flipx-flipy","title":"FlipX, FlipY","text":"<ul> <li>Get     <pre><code>var flip = gameObject.flipX;  // flip: true/false\nvar flip = gameObject.flipY;  // flip: true/false\n</code></pre></li> <li>Set     <pre><code>gameObject.flipX = flip;\ngameObject.flipY = flip;\ngameObject.setFlipX(flip);\ngameObject.setFlipY(flip);\ngameObject.setFlip(flipX, flipY);\ngameObject.toggleFlipX();\ngameObject.toggleFlipY();\ngameObject.resetFlip();  // equal to gameObject.setFlip(false, false);\n</code></pre></li> </ul>"},{"location":"gameobject/#order-of-rendering","title":"Order of rendering","text":""},{"location":"gameobject/#depth-z-index","title":"Depth (z-index)","text":"<p>The depth starts from zero (the default value) and increases from that point. A game object with a higher depth value will always render in front of one with a lower value.</p> <ul> <li>Get     <pre><code>var depth = gameObject.depth;\n</code></pre></li> <li>Set     <pre><code>gameObject.depth = value;\ngameObject.setDepth(value);\n</code></pre></li> </ul>"},{"location":"gameobject/#display-list","title":"Display list","text":"<pre><code>scene.children.bringToTop(child);\nscene.children.sendToBack(child);\nscene.children.moveUp(child);\nscene.children.moveDown(child);\nscene.children.moveAbove(child1, child2);  // Move child1 above child2\nscene.children.moveBelow(child1, child2);  // Move child1 below child2\nscene.children.moveTo(child, index);\nscene.children.swap(child1, child2);\n</code></pre>"},{"location":"gameobject/#layer-game-object","title":"Layer game object","text":"<p>Place game object into Layer game object</p>"},{"location":"gameobject/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Get     <pre><code>var scrollFactorX = gameObject.scrollFactorX;\nvar scrollFactorY = gameObject.scrollFactorY;\n</code></pre></li> <li>Set     <pre><code>gameObject.setScrollFactor(scrollFactor);\ngameObject.setScrollFactor(scrollFactorX, scrollFactorY);\n</code></pre></li> </ul> <p>Scroll factor: 0~1</p> <ul> <li>0= fixed to camera</li> <li>0.25= quarter the speed of the camera</li> <li>0.5= half the speed of the camera</li> </ul>"},{"location":"gameobject/#bounds","title":"Bounds","text":"<pre><code>var output = gameObject.getTopLeft(output);     // output: {x, y}\nvar output = gameObject.getTopCenter(output);     // output: {x, y}\nvar output = gameObject.getTopRight(output);    // output: {x, y}\nvar output = gameObject.getLeftCenter(output);    // output: {x, y}\nvar output = gameObject.getRightCenter(output);    // output: {x, y}\nvar output = gameObject.getBottomLeft(output);  // output: {x, y}\nvar output = gameObject.getBottomCenter(output);     // output: {x, y}\nvar output = gameObject.getBottomRight(output); // output: {x, y}\nvar output = gameObject.getCenter(output);      // output: {x, y}\nvar output = gameObject.getBounds(output);      // output: {x, y, width, height}\n</code></pre>"},{"location":"gameobject/#origin","title":"Origin","text":"<ul> <li>Get     <pre><code>var originX = gameObject.originX;\nvar originY = gameObject.originY;\n</code></pre></li> <li>Set     <pre><code>gameObject.setOrigin(x, y);\n// gameObject.setOrigin(x); // y = x\n</code></pre><ul> <li>Set to top-left     <pre><code>gameObject.setOrigin(0);\n</code></pre></li> <li>Set to center     <pre><code>gameObject.setOrigin(0.5);\n</code></pre></li> <li>Set to bottom-right     <pre><code>gameObject.setOrigin(1);\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#tint","title":"Tint","text":"<ul> <li>Get     <pre><code>var color = gameObject.tintTopLeft;     // color: 0xRRGGBB\nvar color = gameObject.tintTopRight;\nvar color = gameObject.tintBottomLeft;\nvar color = gameObject.tintBottomRight;\nvar isTinted = gameObject.isTinted;\n</code></pre></li> <li>Set     <pre><code>gameObject.tint = color;\ngameObject.setTint(color);  // multiply color value\ngameObject.setTint(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);\ngameObject.setTintFill(color);  // replace color value\ngameObject.setTintFill(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);    gameObject.clearTint();     // equal to `gameObject.setTint(0xffffff)`\n</code></pre></li> </ul>"},{"location":"gameobject/#blend-mode","title":"Blend mode","text":"<ul> <li>Get     <pre><code>var blendMode = gameObject.blendMode;\n</code></pre></li> <li>Set     <pre><code>gameObject.blendMode = blendMode;\ngameObject.setBlendMode(blendMode);\n</code></pre><ul> <li><code>blendMode</code> : Blend mode</li> </ul> </li> </ul>"},{"location":"gameobject/#mask","title":"Mask","text":"<p>See Mask.</p>"},{"location":"gameobject/#built-in-shader-effects","title":"Built-in shader effects","text":"<p>See built-in shader effects</p>"},{"location":"gameobject/#post-fx-pipeline","title":"Post-fx pipeline","text":""},{"location":"gameobject/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import PostFxClass from 'path';\nvar config = {\n// ...\npipeline: [PostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ul> <p>Some post-fx pipelines:</p> <ul> <li>Barrel: Barrel post processing filter.</li> <li>Color replace: Replace color post processing filter.</li> <li>Cross-stitching: Cross-stitching post processing filter.</li> <li>Dissolve: Dissolve transition post processing filter.</li> <li>Fish eye: Fish-eye post processing filter.</li> <li>Glow-filter: Glow post processing filter.</li> <li>Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Gray-scale: Gray scale post processing filter.</li> <li>Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Horri-fi: 6-in-1 post processing filter.</li> <li>Inverse: Inverse color post processing filter.</li> <li>Kawase-blur: Kawase-blur post processing filter.</li> <li>Pixelation: Pixelation post processing filter.</li> <li>Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shockwave: Shockwave post processing filter.</li> <li>Split: Split image into 4 parts.</li> <li>Swirl: Swirl post processing filter.</li> <li>Warp: Warp post processing filter. </li> </ul>"},{"location":"gameobject/#add-post-fx-pipeline","title":"Add post-fx pipeline","text":"<pre><code>gameObject.setPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>PostFxClass</code> : Class of post-fx pipeline.</li> </ul>"},{"location":"gameobject/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<ul> <li>Remove a post-fx pipeline     <pre><code>gameObject.removePostPipeline(PostFxClass);\n</code></pre></li> <li>Remove all post-fx pipelines     <pre><code>gameObject.resetPipeline(true);\n</code></pre>     or     <pre><code>gameObject.postPipelines = [];\ngameObject.hasPostPipeline = false;\n</code></pre></li> </ul>"},{"location":"gameobject/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<pre><code>var pipelineInstance = gameObject.getPostPipeline(PostFxClass);\n</code></pre>"},{"location":"gameobject/#size","title":"Size","text":"<ul> <li>Native (un-scaled) size<ul> <li>Get     <pre><code>var width = gameObject.width;\nvar height = gameObject.height;\n</code></pre></li> <li>Set     <pre><code>gameObject.setSize(width, height);\n</code></pre>     or     <pre><code>gameObject.width = width;\ngameObject.height = height;\n</code></pre></li> </ul> </li> <li>Display size<ul> <li>Get     <pre><code>var displayWidth = gameObject.displayWidth;\nvar displayHeight = gameObject.displayHeight;\n</code></pre></li> <li>Set     <pre><code>gameObject.setDisplaySize(displayWidth, displayHeight);\n</code></pre>     or     <pre><code>gameObject.displayWidth = displayWidth;\ngameObject.displayHeight = displayHeight;\n</code></pre></li> </ul> </li> <li>Scale<ul> <li>Get     <pre><code>var scaleX = gameObject.scaleX;\nvar scaleY = gameObject.scaleY;\n</code></pre>     or     <pre><code>var scale = gameObject.scale;  // Return (scaleX + scaleY)/2\n</code></pre></li> <li>Set     <pre><code>gameObject.setScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>gameObject.scaleX = scaleX;\ngameObject.scaleY = scaleY;\n</code></pre>     or     <pre><code>gameObject.scale = scale;  // Set scaleX, scaleY to scale\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#click","title":"Click","text":"<pre><code>gameObject.setInteractive().on('pointerdown', function(pointer, localX, localY, event){\n// ...\n});\n</code></pre> <p>See touch event</p>"},{"location":"gameobject/#state","title":"State","text":"<ul> <li>Get     <pre><code>var state = gameObject.state;\n</code></pre></li> <li>Set     <pre><code>gameObject.setState(state);\n</code></pre></li> </ul>"},{"location":"gameobject/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = gameObject.getData(key);\nvar values = gameObject.getData(keys); // keys: an array of keys\nvar value = gameObject.data.values[key];\n</code></pre></li> <li>Set     <pre><code>gameObject.setData(key, value);\ngameObject.incData(key, value);    gameObject.setData(obj); // obj: {key0:value0, key1:value1, ...}\ngameObject.data.values[key] = value;\ngameObject.data.values[key] += inc;\n</code></pre>     or     <pre><code>gameObject.toggleData(key);\n</code></pre></li> <li>Enable     <pre><code>gameObject.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>gameObject.on('setdata', function(gameObject, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>gameObject.on('changedata', function(gameObject, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>gameObject.on('changedata-' + key, function(gameObject, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"gameobject/#texture","title":"Texture","text":"<ul> <li>Set texture via key string     <pre><code>gameObject.setTexture(key);\n// gameObject.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>gameObject.setTexture(texture);\n// gameObject.setTexture(texture, frame);\n</code></pre><ul> <li><code>texture</code> : Texture object, or canvas texture object</li> </ul> </li> <li>Set frame     <pre><code>gameObject.setFrame(frame);\ngameObject.setFrame(frame, updateSize, updateOrigin);\n</code></pre><ul> <li><code>frame</code> :\u3000The name or index of the frame within the Texture.</li> <li><code>updateSize</code> : Should this call adjust the size of the Game Object?</li> <li><code>updateOrigin</code> : Should this call adjust the origin of the Game Object?</li> </ul> </li> <li>Set frame by frame object     <pre><code>gameObject.setFrame(frameObject);\ngameObject.setFrame(frameObject, updateSize, updateOrigin);\n</code></pre></li> <li>Applies a crop to a texture     <pre><code>gameObject.setCrop(x, y, width, height);\n</code></pre>     The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left.<ul> <li>Reset crop     <pre><code>gameObject.setCrop();\n// gameObject.isCropped = false;\n</code></pre></li> </ul> </li> <li>Get texture, frame.     <pre><code>var texture = gameObject.texture;\nvar frame = gameObject.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = gameObject.texture.key;\nvar frameName = gameObject.frame.name;\n</code></pre></li> </ul>"},{"location":"gameobject/#name","title":"Name","text":"<ul> <li>Get     <pre><code>var name = gameObject.name;\n</code></pre></li> <li>Set     <pre><code>gameObject.setName(name);\ngameObject.name = name;\n</code></pre></li> </ul>"},{"location":"gameobject/#will-render","title":"Will render","text":"<ul> <li>Test render flag and camera filter.     <pre><code>var willRennder = gameObject.willRender(camera);\n</code></pre></li> <li>Test render flag only     <pre><code>var willRender = (gameObject.renderFlags === Phaser.GameObjects.GameObject.RENDER_MASK);\n</code></pre><ul> <li><code>Phaser.GameObjects.GameObject.RENDER_MASK</code> : 15 (Visible, Alpha, Transform and Texture)</li> </ul> </li> </ul>"},{"location":"gameobject/#add-to-scenecontainer","title":"Add to scene/container","text":""},{"location":"gameobject/#add","title":"Add","text":"<p>Trigger <code>'addedtoscene'</code> event, which invoke <code>gameObject.addedToScene()</code></p> <ul> <li>Register <code>'addedtoscene'</code> event     <pre><code>gameObject.on('addedtoscene', function(gameObject, scene){});\n</code></pre></li> <li>Or, override <code>addedToScene</code> method     <pre><code>class MyClass extends BaseClass {\n// ...\naddedtoscene() {\nsuper.addedtoscene();\n// ...\n}\n}\n</code></pre></li> </ul>"},{"location":"gameobject/#remove","title":"Remove","text":"<p>Trigger <code>'removedfromscene'</code> event, which invoke <code>gameObject.removedFromScene()</code></p> <ul> <li>Register <code>'removedfromscene'</code> event     <pre><code>gameObject.on('removedfromscene', function(gameObject, scene){});\n</code></pre></li> <li>Or, override <code>removedFromScene</code> method     <pre><code>class MyClass extends BaseClass {\n// ...\nremovedFromScene() {\nsuper.removedFromScene();\n// ...\n}\n}\n</code></pre></li> </ul>"},{"location":"gameobject/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyClass extends BaseClass {\nconstructor(scene, x, y) {\nsuper(scene, x, y);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     if (super.preUpdate) {\n//         super.preUpdate(time, delta);\n//     }\n// }\n\n// destroy(fromScene) {\n//     //  This Game Object has already been destroyed\n//     if (!this.scene) {\n//         return;\n//     }\n//     super.destroy(fromScene);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.<ul> <li>Some kinds of game object like Sprite, Dom-element has <code>preUpdate</code> method already.</li> </ul> </li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyClass(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"gamepad/","title":"Gamepad","text":""},{"location":"gamepad/#introduction","title":"Introduction","text":"<p>Gamepad's state of buttons, or axis.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"gamepad/#usage","title":"Usage","text":""},{"location":"gamepad/#get-gamepad","title":"Get gamepad","text":"<ul> <li>Get all currently connected Gamepads.     <pre><code>var gamepads = scene.input.gamepad.getAll();\n</code></pre></li> <li>Get gamepad by index     <pre><code>var gamepad = scene.input.gamepad.getPad(0);\n// var gamepad = scene.input.gamepad.getPad(index);\n</code></pre></li> <li>Get gamepad when button-down.     <pre><code>scene.input.gamepad.once('down', function (gamepad, button, value) {\n}\n</code></pre><ul> <li><code>gamepad</code> : A reference to the Gamepad on which the button was released. See Properties of gamepad</li> <li><code>button</code> : A reference to the Button which was released.</li> <li><code>value</code> : The value of the button at the time it was released. Between 0 and 1. Some Gamepads have pressure-sensitive buttons.</li> </ul> </li> </ul>"},{"location":"gamepad/#events","title":"Events","text":"<ul> <li>Button down     <pre><code>scene.input.gamepad.on('down', function (gamepad, button, value) {\n}\n</code></pre>     or     <pre><code>gamepad.on('down', function(buttonIndex, value, button) {\n})\n</code></pre></li> <li>Button up     <pre><code>scene.input.gamepad.on('up', function (gamepad, button, value) {\n}\n</code></pre>     or     <pre><code>gamepad.on('up', function(buttonIndex, value, button) {\n})\n</code></pre></li> <li>Gamepad connected     <pre><code>scene.input.gamepad.on('connected', function (gamepad, event) {\n}\n</code></pre></li> <li>Gamepad disconnected     <pre><code>scene.input.gamepad.on('disconnected', function (gamepad, event) {\n}\n</code></pre></li> </ul>"},{"location":"gamepad/#gamepad","title":"Gamepad","text":""},{"location":"gamepad/#buttons","title":"Buttons","text":"<ul> <li>Cursor buttons     <pre><code>var isLeftDown = gamepad.left;\nvar isRightftDown = gamepad.right;\nvar isUpDown = gamepad.up;\nvar isDownDown = gamepad.down;\n</code></pre></li> <li>Right buttons cluster     <pre><code>var isADown = gamepad.A;  // Dual Shock controller: X button\nvar isYDown = gamepad.Y;  // Dual Shock controller: Triangle button\nvar isXDown = gamepad.X;  // Dual Shock controller: Square button.\nvar isBDown = gamepad.B;  // Dual Shock controller: Circle button\n</code></pre></li> <li>Shoulder buttons     <pre><code>var isL1Down = gamepad.L1; // XBox controller: LB button\nvar isL2Down = gamepad.L2; // XBox controller: LT button\nvar isR1Down = gamepad.R1; // XBox controller: RB button\nvar isR2Down = gamepad.R2; // XBox controller: RT button\n</code></pre></li> </ul>"},{"location":"gamepad/#axis-sticks","title":"Axis sticks","text":"<ul> <li>Left sticks, right sticks     <pre><code>var leftStick = gamepad.leftStick;\nvar rightStick = gamepad.rightStick;\n</code></pre><ul> <li><code>leftStick</code>, <code>rightStick</code> : Read only vector2.<ul> <li>Angle : <code>leftStick.angle()</code></li> <li>Length : <code>leftStick.length()</code></li> <li>x, y : <code>leftStick.x</code> , <code>leftStick.y</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"gamepad/#properties","title":"Properties","text":"<ul> <li><code>gamepad.index</code> : An integer that is unique for each Gamepad currently connected to the system.     This can be used to distinguish multiple controllers.      Note that disconnecting a device and then connecting a new device may reuse the previous index.</li> <li><code>gamepad.id</code> : A string containing some information about the controller.</li> <li><code>gamepad.buttons</code> : An array of Gamepad Button objects, corresponding to the different buttons available on the Gamepad.</li> <li><code>gamepad.axes</code> : An array of Gamepad Axis objects, corresponding to the different axes available on the Gamepad, if any.</li> </ul>"},{"location":"gashapon/","title":"Gashapon","text":""},{"location":"gashapon/#introduction","title":"Introduction","text":"<p>Pick random item from box.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"gashapon/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gashapon/#install-plugin","title":"Install plugin","text":""},{"location":"gashapon/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgashaponplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgashaponplugin.min.js', true);\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = scene.plugins.get('rexgashaponplugin').add(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GashaponPlugin from 'phaser3-rex-plugins/plugins/gashapon-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGashapon',\nplugin: GashaponPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = scene.plugins.get('rexGashapon').add(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Gashapon from 'phaser3-rex-plugins/plugins/gashapon.js';\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = new Gashapon(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#create-instance","title":"Create instance","text":"<pre><code>var gashapon = scene.plugins.get('rexGashapon').add({\nmode: 'shuffle',  // 0|'shuffle'|1|'random\nitems: {  // name:count\na:1, b:2, c:3 },\nreload: true,     // true|false\nrnd: undefined,\n});\n</code></pre> <ul> <li><code>mode</code> : <ul> <li><code>'shuffle'</code>, or <code>0</code> : pick item from box without put it back.</li> <li><code>'random'</code>, or <code>1</code> : pick item from box then put it back.</li> </ul> </li> <li><code>reload</code> : set <code>true</code> to reload items when box is empty for <code>shuffle</code> mode.</li> <li><code>items</code> : initial items <code>{ name:count }</code> in box.</li> <li><code>rnd</code> : Use random data generator to generate result.<ul> <li><code>undefined</code> : Use <code>Math.random()</code> to generate result.</li> <li><code>Phaser.Math.RND</code> : Use pre-defined random data generator.</li> </ul> </li> </ul>"},{"location":"gashapon/#pick-item","title":"Pick item","text":"<ul> <li>Pick a random item     <pre><code>var item = gashapon.next();\n</code></pre><ul> <li>return <code>null</code> if pick nothing</li> </ul> </li> <li>Pick specific item     <pre><code>var item = gashapon.next(name);\n</code></pre><ul> <li>return <code>null</code> if pick nothing</li> </ul> </li> <li>Last picked item     <pre><code>var item = gashapon.result;\n</code></pre></li> </ul>"},{"location":"gashapon/#set-item","title":"Set item","text":"<ul> <li>Set item     <pre><code>gashapon.setItem(name, count);\n</code></pre></li> <li>Add item     <pre><code>gashapon.addItem(name, count);\n</code></pre></li> <li>Put item back     <pre><code>gashapon.putItemBack(name, count);\n</code></pre></li> </ul>"},{"location":"gashapon/#remove-item","title":"Remove item","text":"<ul> <li>Remove item     <pre><code>gashapon.removeItem(name);\n</code></pre></li> <li>Remove all items     <pre><code>gashapon.removeAllItems();\n</code></pre></li> </ul>"},{"location":"gashapon/#current-status","title":"Current status","text":"<ul> <li>Get current status     <pre><code>var status = gashapon.toJSON();\n</code></pre></li> <li>Clone object     <pre><code>var state = gashapon.toJSON();\nvar gashapon2 = new Gashapon(state);\n</code></pre></li> <li>Overwrite current status     <pre><code>var status = gashapon.toJSON();\n// gashapon.next()...\ngashapon.resetFromJSON(status);\n</code></pre></li> </ul>"},{"location":"gashapon/#get-items","title":"Get items","text":"<ul> <li>Get initial items     <pre><code>var items = gashapon.getItems();\n</code></pre></li> <li>Get remainder items     <pre><code>var items = gashapon.getRemain();\n</code></pre></li> <li>Get initial item count     <pre><code>var count = gashapon.getItemCount(name);\n</code></pre></li> <li>Get remainder item count     <pre><code>var count = gashapon.getRemainCount(name);\n</code></pre></li> <li>For each initial item     <pre><code>gashapon.forEachItem(function(name, count) {\n\n}, scope);\n</code></pre></li> <li>For each remainder item     <pre><code>gashapon.forEachRemain(function(name, count) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gashapon/#set-random-generator","title":"Set random generator","text":"<pre><code>gashapon.setRND(rnd);\n</code></pre> <ul> <li><code>rnd</code> : Use random data generator to generate result.<ul> <li><code>undefined</code>, or <code>null</code> : Use <code>Math.random()</code> to generate result.</li> <li><code>Phaser.Math.RND</code> : Use pre-defined random data generator.</li> </ul> </li> </ul>"},{"location":"geom-circle/","title":"Circle","text":""},{"location":"geom-circle/#introduction","title":"Introduction","text":"<p>Circle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-circle/#usage","title":"Usage","text":""},{"location":"geom-circle/#create-shape","title":"Create shape","text":"<pre><code>var circle = new Phaser.Geom.Circle(x, y, radius);\n</code></pre>"},{"location":"geom-circle/#clone-shape","title":"Clone shape","text":"<pre><code>var circle1 = Phaser.Geom.Circle.Clone(circle0);\n</code></pre>"},{"location":"geom-circle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillCircleShape(circle);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeCircleShape(circle);\n</code></pre></li> </ul> <p>Note</p> <p>Negative radius will be treated as positive radius. i.e. <code>Math.abs(radius)</code></p>"},{"location":"geom-circle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>circle.setTo(x, y, radius);\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>circle.setPosition(x, y);\n</code></pre>     or     <pre><code>circle.x = 0;\ncircle.y = 0;\n</code></pre>     or     <pre><code>circle.left = 0;       // circle.x\ncircle.top = 0;        // circle.y\n// circle.right = 0;   // circle.x\n// circle.bottom = 0;  // circle.y\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.Offset(circle, dx, dy); // circle.x += dx, circle.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.OffsetPoint(circle, point); // circle.x += point.x, circle.y += point.y\n</code></pre></li> <li>Radius     <pre><code>circle.radius = radius;\n</code></pre>     or     <pre><code>circle.diameter = diameter;  // diameter = 2 * radius\n</code></pre></li> </ul>"},{"location":"geom-circle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = circle.x;\nvar y = circle.y;\nvar top = circle.top;\nvar left = circle.left;\nvar right = circle.right;\nvar bottom = circle.bottom;\n</code></pre></li> <li>Radius     <pre><code>var radius = circle.radius;\n// var diameter = circle.diameter;\n</code></pre></li> <li>Bound     <pre><code>var bound = Phaser.Geom.Circle.GetBounds(circle);\n// var bound = Phaser.Geom.Circle.GetBounds(circle, bound);  // push bound\n</code></pre><ul> <li><code>bound</code> : A Rectangle shape object</li> </ul> </li> <li>Area     <pre><code>var area = Phaser.Geom.Circle.Area(circle);\n</code></pre></li> <li>Circumference     <pre><code>var circumference = Phaser.Geom.Circle.Circumference(circle);\n</code></pre></li> <li>Type:     <pre><code>var type = circle.type; // 0\n</code></pre></li> </ul>"},{"location":"geom-circle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = circle.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = circle.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle);  // angle in degrees\n// var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = circle.getRandomPoint();\n// var point = circle.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = circle.getPoints(quantity);\n// var points = circle.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = circle.getPoints(false, step);\n// var points = circle.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = circle.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Circle.ContainsPoint(circle, point);\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Circle.ContainsRect(circle, rect);  // rect : 4 points\n</code></pre></li> </ul>"},{"location":"geom-circle/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>circle.setEmpty();     // circle.radius = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = circle.isEmpty();   // circle.radius &lt;= 0\n</code></pre></li> </ul>"},{"location":"geom-circle/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Circle.Equals(circle0, circle1);\n</code></pre> <p>Position and radius are equal.</p>"},{"location":"geom-circle/#intersection","title":"Intersection","text":""},{"location":"geom-circle/#circle-to-circle","title":"Circle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToCircle(circleA, circleB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB);\n// var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-rectangle","title":"Circle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToRectangle(circle, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect);\n// var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-triangle","title":"Circle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToCircle(triangle, circle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle);\n// var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-line","title":"Circle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToCircle(line, circle);\n// var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest);\n</code></pre><ul> <li><code>nearest</code> : Nearest point on line.</li> </ul> </li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToCircle(line, circle);\n// var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-ellipse/","title":"Ellipse","text":""},{"location":"geom-ellipse/#introduction","title":"Introduction","text":"<p>Ellipse shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-ellipse/#usage","title":"Usage","text":""},{"location":"geom-ellipse/#create-shape","title":"Create shape","text":"<pre><code>var ellipse = new Phaser.Geom.Ellipse(x, y, width, height);\n</code></pre>"},{"location":"geom-ellipse/#clone-shape","title":"Clone shape","text":"<pre><code>var ellipse1 = Phaser.Geom.Ellipse.Clone(ellipse0);\n</code></pre>"},{"location":"geom-ellipse/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillEllipseShape(ellipse);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeEllipseShape(ellipse);\n</code></pre></li> </ul> <p>Note</p> <p>Negative width, height will be treated as positive width, height. i.e. <code>Math.abs(width)</code>, <code>Math.abs(height)</code></p>"},{"location":"geom-ellipse/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>ellipse.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>ellipse.setPosition(x, y);\n</code></pre>     or     <pre><code>ellipse.x = 0;\nellipse.y = 0;\n</code></pre>     or     <pre><code>ellipse.left = 0;       // ellipse.x\nellipse.top = 0;        // ellipse.y\n// ellipse.right = 0;   // ellipse.x\n// ellipse.bottom = 0;  // ellipse.y\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.Offset(ellipse, dx, dy); // ellipse.x += dx, ellipse.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.OffsetPoint(ellipse, point); // ellipse.x += point.x, ellipse.y += point.y\n</code></pre></li> <li>Width, height     <pre><code>ellipse.width = width;\nellipse.height = height;\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = ellipse.x;\nvar y = ellipse.y;\nvar top = ellipse.top;\nvar left = ellipse.left;\nvar right = ellipse.right;\nvar bottom = ellipse.bottom;\n</code></pre></li> <li>Width, height     <pre><code>var width = ellipse.width;\nvar height = ellipse.height;\n</code></pre></li> <li>Bound     <pre><code>var bound = Phaser.Geom.Ellipse.GetBounds(ellipse);\n// var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound);  // push bound\n</code></pre><ul> <li><code>bound</code> : A Rectangle shape object</li> </ul> </li> <li>Area     <pre><code>var area = Phaser.Geom.Ellipse.Area(ellipse);\n</code></pre></li> <li>Circumference     <pre><code>var circumference = Phaser.Geom.Ellipse.Circumference(ellipse);\n</code></pre></li> <li>Type:     <pre><code>var type = ellipse.type; // 1\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = ellipse.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = ellipse.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle);  // angle in degrees\n// var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = ellipse.getRandomPoint();\n// var point = ellipse.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = ellipse.getPoints(quantity);\n// var points = ellipse.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = ellipse.getPoints(false, step);\n// var points = ellipse.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = ellipse.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Ellipse.ContainsPoint(ellipse, point);\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Ellipse.ContainsRect(ellipse, rect);  // rect : 4 points\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>ellipse.setEmpty();     // ellipse.width = 0, ellipse.height = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = ellipse.isEmpty();   // ellipse.width &lt;= 0 || ellipse.height &lt;= 0\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Ellipse.Equals(ellipse0, ellipse1);\n</code></pre> <p>Position and width, height are equal.</p>"},{"location":"geom-hexagon/","title":"Hexagon","text":""},{"location":"geom-hexagon/#introduction","title":"Introduction","text":"<p>Hexagon shape and methods, extends from Polygon geometry object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"geom-hexagon/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"geom-hexagon/#install-plugin","title":"Install plugin","text":""},{"location":"geom-hexagon/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhexagonplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhexagonplugin.min.js', true);\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = scene.plugins.get('rexhexagonplugin').add(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HexagonPlugin from 'phaser3-rex-plugins/plugins/hexagon-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHexagon',\nplugin: HexagonPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Hexagon from 'phaser3-rex-plugins/plugins/hexagon.js';\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = new Hexagon(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#create-shape","title":"Create shape","text":"<p><pre><code>var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);\n</code></pre> or <pre><code>var hexagon = scene.plugins.get('rexHexagon').add({\nx: 0,\ny: 0,\nsize: 20,\norientationType: 0     // 0|'flat'|'vertical'|1|'pointy'|'horizontal'\n});\n</code></pre> or <pre><code>var hexagon = new Phaser.Geom.rexHexagon(x, y, size, orientationType);\n</code></pre></p> <ul> <li><code>x</code> : Center X.</li> <li><code>y</code> : Center Y.</li> <li><code>size</code> : Distance between center to each corner.</li> <li><code>orientationType</code> : See here<ul> <li><code>0</code>, <code>'flat'</code>, or <code>'y'</code></li> <li><code>1</code>, <code>'pointy'</code> or ,<code>'x'</code></li> </ul> </li> </ul>"},{"location":"geom-hexagon/#draw-on-graphics","title":"Draw on graphics","text":"<p>See Polygon shape.</p>"},{"location":"geom-hexagon/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>hexagon.setTo(x, y, size, orientationType);\n</code></pre></li> <li>Position     <pre><code>hexagon.setPosition(x, y);\n</code></pre>     or     <pre><code>hexagon.x = 0;\nhexagon.y = 0;\n</code></pre>     or     <pre><code>hexagon.centerX = 0;  // equal to hexagon.x\nhexagon.centerY = 0;  // equal to hexagon.y\n</code></pre>     or     <pre><code>hexagon.left = 0;       // hexagon.x\nhexagon.top = 0;        // hexagon.y\nhexagon.right = 0;      // hexagon.x\nhexagon.bottom = 0;     // hexagon.y\n</code></pre></li> <li>Size     <pre><code>hexagon.setSize(size);\n</code></pre>     or     <pre><code>hexagon.size = size;\n</code></pre></li> <li>Orientation type     <pre><code>hexagon.setType(orientationType);\n</code></pre>     or     <pre><code>hexagon.orientationType = orientationType;\n</code></pre><ul> <li><code>orientationType</code> : See here<ul> <li><code>0</code>, <code>'flat'</code>, or <code>'y'</code></li> <li><code>1</code>, <code>'pointy'</code> or ,<code>'x'</code> </li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-hexagon/#get-properties","title":"Get properties","text":"<p>See Polygon shape.</p> <ul> <li>Position<ul> <li>Center     <pre><code>var centerX = hexagon.centerX;\nvar centerY = hexagon.centerY;\n</code></pre>     or     <pre><code>var centerX = hexagon.x;\nvar centerY = hexagon.y;\n</code></pre></li> <li>Bound     <pre><code>var top = hexagon.top;\nvar left = hexagon.left;\nvar right = hexagon.right;\nvar bottom = hexagon.bottom;\n</code></pre></li> </ul> </li> <li>Width     <pre><code>var width = hexagon.width;\n</code></pre></li> <li>Height     <pre><code>var width = hexagon.height;\n</code></pre></li> <li>Lines around hexagon     <pre><code>var edge01 = hexagon.getLineA();\nvar edge12 = hexagon.getLineB();\nvar edge23 = hexagon.getLineC();\nvar edge34 = hexagon.getLineD();\nvar edge45 = hexagon.getLineE();\nvar edge50 = hexagon.getLineF();\n// var out = hexagon.getLineF(out);\n</code></pre>     or     <pre><code>var edge = hexagon.getEdge(edgeIdx);\n// var out = hexagon.getEdge(edgeIdx, out);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#points-shape","title":"Point(s) &amp; shape","text":"<p>See Polygon shape.</p>"},{"location":"geom-line/","title":"Line","text":""},{"location":"geom-line/#introduction","title":"Introduction","text":"<p>Line shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-line/#usage","title":"Usage","text":""},{"location":"geom-line/#create-shape","title":"Create shape","text":"<pre><code>var line = new Phaser.Geom.Line(x1, y1, x2, y2);\n</code></pre>"},{"location":"geom-line/#clone-shape","title":"Clone shape","text":"<pre><code>var line1 = Phaser.Geom.Line.Clone(line0);\n</code></pre>"},{"location":"geom-line/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeLineShape(line);\n</code></pre>"},{"location":"geom-line/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>line.setTo(x1, y1, x2, y2);\n</code></pre>     or     <pre><code>Phaser.Geom.Line.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>line.x1 = 0;\nline.y1 = 0;\nline.x2 = 0;\nline.y2 = 0;\n</code></pre>     or     <pre><code>line.left = 0;    // min(x1, x2)\nline.top = 0;     // min(y1, y2)\nline.right = 0;   // max(x1, x2)\nline.bottom = 0;  // max(y1, y2)\n</code></pre><ul> <li>Offset start, end     <pre><code>var line = Phaser.Geom.Line.Offset(line, dx, dy); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy\n</code></pre></li> <li>Set center position     <pre><code>var line = Phaser.Geom.Line.CenterOn(line, x, y);\n</code></pre></li> </ul> </li> <li>Start point, angle, length     <pre><code>var line = Phaser.Geom.Line.SetToAngle(line, x, y, angle, length);\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>x</code> , <code>y</code> : start point</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> <li><code>length</code> :\u3000The length of the line</li> </ul> </li> <li>Rotate<ul> <li>Rotate around midpoint <pre><code>var line = Phaser.Geom.Line.Rotate(line, angle)\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> </ul> </li> <li>Rotate around point     <pre><code>var line = Phaser.Geom.Line.RotateAroundPoint(line, point, angle);\n</code></pre>     or     <pre><code>var line = Phaser.Geom.Line.RotateAroundXY(line, x, y, angle);\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> </ul> </li> </ul> </li> <li>Extend     <pre><code>var line = Phaser.Geom.Line.Extend(line, left, right);\n</code></pre></li> </ul>"},{"location":"geom-line/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x1 = line.x1;\nvar y1 = line.y1;\nvar x2 = line.x2;\nvar y2 = line.y2;\nvar top = line.top;       // min(x1, x2)\nvar left = line.left;     // min(y1, y2)\nvar right = line.right;   // max(x1, x2)\nvar bottom = line.bottom; // max(y1, y2)\n</code></pre><ul> <li>Start point    <pre><code>var start = line.getPointA();  // start: {x, y}\nvar start = line.getPointA(start);  // push start\n</code></pre></li> <li>End point    <pre><code>var end = line.getPointB();  // end: {x, y}\nvar end = line.getPointB(end);  // push end\n</code></pre></li> <li>Middle point     <pre><code>var middle = Phaser.Geom.Line.GetMidPoint(line);  // middle: {x, y}\n// var middle = Phaser.Geom.Line.GetMidPoint(line, middle);\n</code></pre></li> </ul> </li> <li>Length     <pre><code>var length = Phaser.Geom.Line.Length(line);\n</code></pre><ul> <li>Width : Abs(x1 - x2)     <pre><code>var width = Phaser.Geom.Line.Width(line);\n</code></pre></li> <li>Height : Abs(y1 - y2)     <pre><code>var width = Phaser.Geom.Line.Height(line);\n</code></pre></li> </ul> </li> <li>Slope<ul> <li>Slope : (y2 - y1) / (x2 - x1)     <pre><code>var slope = Phaser.Geom.Line.Slope(line);\n</code></pre></li> <li>Perpendicular slope : -((x2 - x1) / (y2 - y1))     <pre><code>var perpSlope = Phaser.Geom.Line.PerpSlope(line);\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Angle     <pre><code>var angle = Phaser.Geom.Line.Angle(line);\n</code></pre><ul> <li><code>angle</code> : The angle of the line in radians <pre><code>var deg = Phaser.Math.RadToDeg(rad);  // deg : -180 ~ 180\n</code></pre></li> </ul> </li> <li>Normal angle (angle - 90 degrees)<ul> <li>Normal angle     <pre><code>var normalAngle = Phaser.Geom.Line.NormalAngle(line);\n</code></pre></li> <li>Normal vector     <pre><code>var normal = Phaser.Geom.Line.GetNormal(line);  // normal: {x, y}\n// var normal = Phaser.Geom.Line.GetNormal(line, normal);  // push normal\n</code></pre>     or     <pre><code>var normalX = Phaser.Geom.Line.NormalX(line);\nvar normalY = Phaser.Geom.Line.NormalY(line);\n</code></pre></li> </ul> </li> <li>Reflect angle     <pre><code>var reflectAngle = Phaser.Geom.Line.ReflectAngle(aimLine, reflectingLine);\n</code></pre></li> </ul> </li> <li>Type:     <pre><code>var type = line.type; // 2\n</code></pre></li> </ul>"},{"location":"geom-line/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = line.getPoint(t);  // t : 0 ~ 1. 0=start, 0.5=middle, 1=end\n// var point = line.getPoint(t, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = line.getRandomPoint();\n// var point = line.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = line.getPoints(quantity);\n// var points = line.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = line.getPoints(false, step);\n// var points = line.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Get points using Bresenham's line algorithm     <pre><code>var points = Phaser.Geom.Line.BresenhamPoints(line, step);\n// var points = Phaser.Geom.Line.BresenhamPoints(line, step, points);  // push points\n</code></pre></li> <li>Get points using easing function     <pre><code>var points = Phaser.Geom.Line.GetEasedPoints(line, ease, quantity);\n// var points = Phaser.Geom.Line.GetEasedPoints(line, ease, quantity, collinearThreshold, easeParams);\n</code></pre><ul> <li><code>ease</code> : String of ease function, or a custom function (<code>function (t) { return value}</code>).</li> <li><code>quantity</code> : The number of points to return.</li> <li><code>collinearThreshold</code> : Each point is spaced out at least this distance apart. This helps reduce clustering in noisey eases.</li> <li><code>easeParams</code> : Array of ease parameters to go with the ease.</li> </ul> </li> <li>Get the nearest point on a line perpendicular to the given point.     <pre><code>var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn);\n// var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point);\n</code></pre></li> <li>Get the shortest distance from a Line to the given Point.     <pre><code>var distance = Phaser.Geom.Line.GetShortestDistance(line, point);\n</code></pre></li> </ul>"},{"location":"geom-line/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Line.Equals(line0, line1);\n</code></pre> <p>x1, y2, x2, y2 are equal.</p>"},{"location":"geom-line/#intersection","title":"Intersection","text":""},{"location":"geom-line/#line-to-circle","title":"Line to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToCircle(line, circle);\n// var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest);\n</code></pre><ul> <li><code>nearest</code> : Nearest point on line.</li> </ul> </li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToCircle(line, circle);\n// var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-rectangle","title":"Line to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToRectangle(line, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToRectangle(line, rect);\n// var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-triangle","title":"Line to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToLine(triangle, line);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line);\n// var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-line","title":"Line to line","text":"<ul> <li>Is intersection     <pre><code>var isIntersection = Phaser.Geom.Intersects.LineToLine(line1, line2);\n</code></pre><ul> <li><code>isIntersection</code> : Return <code>true</code> if line1 and line2 are intersectioned</li> </ul> </li> <li>Get intersection point     <pre><code>var isIntersection = Phaser.Geom.Intersects.LineToLine(line1, line2, out);\n</code></pre><ul> <li><code>isIntersection</code> : Return <code>true</code> if line1 and line2 are intersectioned</li> <li><code>out</code> : intersected point</li> </ul> </li> </ul>"},{"location":"geom-point/","title":"Point","text":""},{"location":"geom-point/#introduction","title":"Introduction","text":"<p>Point shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-point/#usage","title":"Usage","text":""},{"location":"geom-point/#create-shape","title":"Create shape","text":"<pre><code>var point = new Phaser.Geom.Point(x, y);\n</code></pre>"},{"location":"geom-point/#clone-shape","title":"Clone shape","text":"<pre><code>var point1 = Phaser.Geom.Point.Clone(point0);\n</code></pre>"},{"location":"geom-point/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillPointShape(point, size);\n</code></pre>"},{"location":"geom-point/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>point.setTo(x, y);\n</code></pre>     or     <pre><code>Phaser.Geom.Point.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>point.x = 0;\npoint.y = 0;\n</code></pre></li> <li>Round<ul> <li>Ceil : Apply <code>Math.ceil()</code> to each coordinate of the given Point     <pre><code>var point = Phaser.Geom.Point.Ceil(point)\n</code></pre></li> <li>Floor : Apply <code>Math.floor()</code> to each coordinate of the given Point.     <pre><code>var point = Phaser.Geom.Point.Floor(point)\n</code></pre></li> </ul> </li> </ul>"},{"location":"geom-point/#symmetry","title":"Symmetry","text":"<ul> <li>Invert : x = y, y = x     <pre><code>var point = Phaser.Geom.Point.Invert(point);\n</code></pre></li> <li>Negative : x = -x, y = -y     <pre><code>var out = Phaser.Geom.Point.Negative(point);\n// var out = Phaser.Geom.Point.Negative(point, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-point/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = point.x;\nvar y = point.y;\n</code></pre></li> <li>Type:     <pre><code>var type = point.type; // 3\n</code></pre></li> </ul>"},{"location":"geom-point/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Point.Equals(point0, point1);\n</code></pre> <p>x, y are equal.</p>"},{"location":"geom-point/#points","title":"Points","text":"<ul> <li>Centroid : center-point over some points     <pre><code>var out = Phaser.Geom.Point.GetCentroid(points);\n// var out = Phaser.Geom.Point.GetCentroid(points, out);  // modify out\n</code></pre></li> <li>Calculates the Axis Aligned Bounding Box (or aabb) from an array of points (rectangle)     <pre><code>var rect = Phaser.Geom.Point.GetRectangleFromPoints(points);\n// var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect);  // modify rect\n</code></pre></li> <li>Interpolate     <pre><code>var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t);  // out : point\n// var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-point/#intersection","title":"Intersection","text":"<ul> <li>Point to line <pre><code>var result = Phaser.Geom.Intersects.PointToLine(point, line);\n// var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness);\n</code></pre> <pre><code>var result = Phaser.Geom.Intersects.PointToLineSegment(point, line);\n</code></pre></li> </ul>"},{"location":"geom-point/#point-as-vector","title":"Point as Vector","text":"<p>Vector starting at (0,0)</p> <ul> <li>Magnitude : sqrt( (x * x) + (y * y) )     <pre><code>var magnitude = Phaser.Geom.Point.GetMagnitude(point);\n</code></pre>     or     <pre><code>var magnitudeSq = Phaser.Geom.Point.GetMagnitudeSq(point);\n</code></pre></li> <li>Project     <pre><code>var out = Phaser.Geom.Point.Project(from, to);\n// var out = Phaser.Geom.Point.Project(from, to, out);  // modify out\n</code></pre>     or     <pre><code>var out = Phaser.Geom.Point.ProjectUnit(from, to);  // vector `from` and `to` are unit vector (length = 1)\n// var out = Phaser.Geom.Point.ProjectUnit(from, to, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-polygon/","title":"Polygon","text":""},{"location":"geom-polygon/#introduction","title":"Introduction","text":"<p>Polygon shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-polygon/#usage","title":"Usage","text":""},{"location":"geom-polygon/#create-shape","title":"Create shape","text":"<pre><code>var polygon = new Phaser.Geom.Polygon(points);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>An array of number : <code>[x0, y0, x1, y1, ...]</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> </ul> </li> </ul>"},{"location":"geom-polygon/#clone-shape","title":"Clone shape","text":"<pre><code>var polygon1 = Phaser.Geom.Polygon.Clone(polygon0);\n</code></pre>"},{"location":"geom-polygon/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillPoints(polygon.points, true);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokePoints(polygon.points, true);\n</code></pre></li> </ul>"},{"location":"geom-polygon/#set-properties","title":"Set properties","text":"<pre><code>polygon.setTo(points);\n// points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...]\n</code></pre>"},{"location":"geom-polygon/#get-properties","title":"Get properties","text":"<ul> <li>Points     <pre><code>var points = polygon.points;    // array of points {x,y}\n</code></pre></li> <li>Area     <pre><code>var area = polygon.area;\n</code></pre></li> <li>Number array     <pre><code>var out = Phaser.Geom.Polygon.GetNumberArray(polygon);\n// var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out);  // modify out\n</code></pre><ul> <li><code>arr</code> : [x0, y0, x1, y1, x2, y2, ...]</li> </ul> </li> <li>AABB (A minimum rectangle to cover this polygon)     <pre><code>var out = Phaser.Geom.Polygon.GetAABB(polygon);\n// var out = Phaser.Geom.Polygon.GetAABB(polygon, out);\n</code></pre><ul> <li><code>out</code> : A rectangle object</li> </ul> </li> <li>Type:     <pre><code>var type = polygon.type; // 4\n</code></pre></li> </ul>"},{"location":"geom-polygon/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Point is inside shape     <pre><code>var isInside = polygon.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Polygon.ContainsPoint(polygon, point);\n</code></pre></li> <li>Translate : Shift points.     <pre><code>Phaser.Geom.Polygon.Translate(polygon, x, y);\n</code></pre></li> <li>Reverse the order of points.     <pre><code>var polygon = Phaser.Geom.Polygon.Reverse(polygon);\n</code></pre></li> <li>Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points.     <pre><code>Phaser.Geom.Polygon.Smooth(polygon)\n</code></pre></li> <li>Simplify : Simplifies the points by running them through a combination of    Douglas-Peucker and Radial Distance algorithms. Simplification dramatically    reduces the number of points in a polygon while retaining its shape, giving    a huge performance boost when processing it and also reducing visual noise.     <pre><code>var polygon = Phaser.Geom.Polygon.Simplify(polygon);\n// var polygon = Phaser.Geom.Polygon.Simplify(polygon, tolerance, highestQuality);\n</code></pre></li> </ul>"},{"location":"geom-polygon/#vector-to-polygon","title":"Vector to polygon","text":"<ul> <li>Get closest point of intersection between a vector and an array of polygons     <pre><code>var result = Phaser.Geom.Intersects.GetLineToPolygon(line, polygons);\n// var out = Phaser.Geom.Intersects.GetLineToPolygon(line, polygons, isRay, out);\n</code></pre><ul> <li><code>line</code> : Vector of line object</li> <li><code>polygons</code> : A single polygon, or array of polygons</li> <li><code>isRay</code> : Is <code>line</code> a ray or a line segment?</li> <li><code>out</code> :<ul> <li><code>out.x</code>, <code>out.y</code> : Intersection point</li> <li><code>out.z</code> : Closest intersection distance</li> <li><code>out.w</code> : Index of the polygon</li> </ul> </li> </ul> </li> <li>Projects rays out from the given point to each line segment of the polygons.     <pre><code>var out = Phaser.Geom.Intersects.GetRaysFromPointToPolygon(x, y, polygons);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The point to project the rays from.</li> <li><code>polygons</code> : A single polygon, or array of polygons</li> <li><code>out</code> : An array containing all intersections<ul> <li><code>out[i].x</code>, <code>out[i].y</code> : Intersection point</li> <li><code>out[i].z</code> : Angle of intersection</li> <li><code>out[i].w</code> : Index of the polygon</li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-rectangle/","title":"Rectangle","text":""},{"location":"geom-rectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-rectangle/#usage","title":"Usage","text":""},{"location":"geom-rectangle/#create-shape","title":"Create shape","text":"<pre><code>var rect = new Phaser.Geom.Rectangle(x, y, width, height);\n</code></pre>"},{"location":"geom-rectangle/#create-from-points","title":"Create from points","text":"<p>All of the given points are on or within its bounds.</p> <pre><code>var rect = Phaser.Geom.Rectangle.FromPoints(points);\n// var rect = Phaser.Geom.Rectangle.FromPoints(points, rect);  // push rect\n</code></pre> <ul> <li><code>points</code> : an array with 4 points. <code>[x, y]</code>, or <code>{x:0, y:0}</code></li> </ul> <p>or</p> <pre><code>var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2);\n// var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2, rect);  // push rect\n</code></pre>"},{"location":"geom-rectangle/#clone-shape","title":"Clone shape","text":"<pre><code>var rect1 = Phaser.Geom.Rectangle.Clone(rect0);\n</code></pre>"},{"location":"geom-rectangle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillRectShape(rect);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeRectShape(rect);\n</code></pre></li> </ul> <p>Note</p> <p><code>x</code> with positive/negative width is left/right bound <code>y</code> with positive/negative height is top/bottom bound</p>"},{"location":"geom-rectangle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>rect.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>rect.setPosition(x, y);\n</code></pre>     or     <pre><code>rect.x = 0;\nrect.y = 0;\n</code></pre>     or     <pre><code>rect.left = 0;       // rect.x, rect.width\nrect.top = 0;        // rect.y, rect.height\n// rect.right = 0;   // rect.x, rect.width\n// rect.bottom = 0;  // rect.y, rect.height\nrect.centerX = 0;    // rect.x\nrect.centerY = 0;    // rect.y\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.Offset(rect, dx, dy); // rect.x += dx, rect.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.OffsetPoint(rect, point); // rect.x += point.x, rect.y += point.y\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.CenterOn(rect, x, y);  // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2)\n</code></pre></li> <li>Size     <pre><code>rect.setSize(width, height);\n// rect.setSize(width);   // height = width\n</code></pre>     or     <pre><code>rect.width = 0;\nrect.height = 0;\n</code></pre><ul> <li>Scale     <pre><code>Phaser.Geom.Rectangle.Scale(rect, x, y); // rect.width *= x, rect.height *= y;\n// Phaser.Geom.Rectangle.Scale(rect, x);   // y = x\n</code></pre></li> <li>Extend size to include points     <pre><code>Phaser.Geom.Rectangle.MergePoints(rect, points);\n</code></pre><ul> <li><code>points</code> : an array of points. <code>[x, y]</code>, or <code>{x:0, y:0}</code></li> </ul> </li> <li>Extend size to include another rectangle     <pre><code>Phaser.Geom.Rectangle.MergeRect(target, source);\n</code></pre></li> </ul> </li> <li>Inflate     <pre><code>Phaser.Geom.Rectangle.Inflate(rect, x, y);\n</code></pre><ol> <li>change size to <code>width += x*2, height += y*2</code></li> <li>center on previous position</li> </ol> </li> <li>Fits the target rectangle into the source rectangle     <pre><code>Phaser.Geom.Rectangle.FitInside(target, source);\n</code></pre>     Preserves aspect ratio, scales and centers the target rectangle to the source rectangle</li> <li>Fits the target rectangle around the source rectangle     <pre><code>Phaser.Geom.Rectangle.FitOutside(target, source);\n</code></pre>     Preserves aspect ratio, scales and centers the target rectangle to the source rectangle</li> <li>Ceil     <pre><code>Phaser.Geom.Rectangle.Ceil(rect);  // ceil x, y\n</code></pre> <pre><code>Phaser.Geom.Rectangle.CeilAll(rect);  // ceil x, y, width, height\n</code></pre></li> <li>Floor     <pre><code>Phaser.Geom.Rectangle.Floor(rect);  // floor x, y\n</code></pre> <pre><code>Phaser.Geom.Rectangle.FloorAll(rect);  // floor x, y, width, height\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = rect.x;\nvar y = rect.y;\n</code></pre><ul> <li>Bound     <pre><code>var top = rect.top;\nvar left = rect.left;\nvar right = rect.right;\nvar bottom = rect.bottom;\n</code></pre>     or     <pre><code>var points = Phaser.Geom.Rectangle.Decompose(rect);\n// var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points\n</code></pre><ul> <li><code>points</code> : top-left, top-right, bottom-right, bottom-left</li> </ul> </li> <li>Center     <pre><code>var centerX = rect.centerX;\nvar centerY = rect.centerY;\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.GetCenter(rect);\n// var point = Phaser.Geom.Rectangle.GetCenter(rect, point);\n</code></pre></li> </ul> </li> <li>Size     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.GetSize(rect); // {x: rect.width, y: rect.height}\n</code></pre></li> <li>Area     <pre><code>var area = Phaser.Geom.Rectangle.Area(rect);\n</code></pre></li> <li>Perimeter     <pre><code>var perimeter = Phaser.Geom.Rectangle.Perimeter(rect);  // 2 * (rect.width + rect.height)\n</code></pre></li> <li>Aspect ratio     <pre><code>var aspectRatio = Phaser.Geom.Rectangle.GetAspectRatio(rect);  // rect.width / rect.height\n</code></pre></li> <li>Lines around rectangle     <pre><code>var topLine = rect.getLineA();  // top line of this rectangle\nvar rightLine = rect.getLineB();  // right line of this rectangle\nvar bottomLine = rect.getLineC();  // bottom line of this rectangle\nvar leftLine = rect.getLineD();  // left line of this rectangle\n// var out = rect.getLineA(out);  // top line of this rectangle\n</code></pre></li> <li>Type:     <pre><code>var type = rect.type; // 5\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = rect.getPoint(t);  // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left)\n// var point = rect.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle);  // angle in degrees\n// var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point);  // push point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = rect.getPoints(quantity);\n// var points = rect.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = rect.getPoints(false, step);\n// var points = rect.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>step</code> : width of each step, in pixels. <code>quantity = Perimeter(rectangle) / step;</code></li> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = rect.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Rectangle.ContainsPoint(rect, point);\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = rect.getRandomPoint();\n// var point = rect.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get a random point outside shape     <pre><code>var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner);\n// var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Rectangle.ContainsRect(rectA, rectB);  // rectB is inside rectA\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangles","title":"Rectangles","text":"<ul> <li>Is overlapping     <pre><code>var isOverlapping = Phaser.Geom.Rectangle.Overlaps(rectA, rectB);\n</code></pre></li> <li>Get intersection rectangle     <pre><code>var rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB);\nvar rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB, rect);  // push rect\n</code></pre></li> <li>Get union rectangle     <pre><code>var rect = Phaser.Geom.Rectangle.Union(rectA, rectB);\nvar rect = Phaser.Geom.Rectangle.Union(rectA, rectB, rect);  // push rect\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>rect.setEmpty();     // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = rect.isEmpty();   // rect.radius &lt;= 0;\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#equal","title":"Equal","text":"<ul> <li>Position, width, and height are the same     <pre><code>var isEqual = Phaser.Geom.Rectangle.Equals(rect0, rect1);\n</code></pre></li> <li>Width and height are the same     <pre><code>var isEqual = Phaser.Geom.Rectangle.SameDimensions(rect0, rect1);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#intersection","title":"Intersection","text":""},{"location":"geom-rectangle/#rectangle-to-circle","title":"Rectangle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToRectangle(circle, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect);\n// var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-rectangle","title":"Rectangle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToRectangle(rectA, rectB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB);\n// var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-triangle","title":"Rectangle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToTriangle(rect, triangle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle);\n// var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-line","title":"Rectangle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToRectangle(line, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToRectangle(line, rect);\n// var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/","title":"Rhombus","text":""},{"location":"geom-rhombus/#introduction","title":"Introduction","text":"<p>Rhombus shape and methods, extends from Polygon geometry object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"geom-rhombus/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"geom-rhombus/#install-plugin","title":"Install plugin","text":""},{"location":"geom-rhombus/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrhombusplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrhombusplugin.min.js', true);\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = scene.plugins.get('rexrhombusplugin').add(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RhombusPlugin from 'phaser3-rex-plugins/plugins/rhombus-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRhombus',\nplugin: RhombusPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = scene.plugins.get('rexRhombus').add(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Rhombus from 'phaser3-rex-plugins/plugins/rhombus.js';\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = new Rhombus(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#create-shape","title":"Create shape","text":"<p><pre><code>var rhombus = scene.plugins.get('rexRhombus').add(x, y, width, height);\n</code></pre> or <pre><code>var rhombus = scene.plugins.get('rexRhombus').add({\nx: 0,\ny: 0,\nwidth: 40,\nheight: 20\n});\n</code></pre> or <pre><code>var rhombus = new rexRhombus(x, y, width, height);\n// var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height);\n</code></pre></p> <ul> <li><code>x</code> : Top X.</li> <li><code>y</code> : Left Y.</li> </ul>"},{"location":"geom-rhombus/#draw-on-graphics","title":"Draw on graphics","text":"<p>See Polygon shape.</p>"},{"location":"geom-rhombus/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>rhombus.setTo(x, y, width, height);\n</code></pre></li> <li>Position     <pre><code>rhombus.setPosition(x, y);\n</code></pre>     or     <pre><code>rhombus.x = 0;\nrhombus.y = 0;\n</code></pre>     or     <pre><code>rhombus.left = 0;       // rhombus.x\nrhombus.top = 0;        // rhombus.y\nrhombus.right = 0;      // rhombus.x\nrhombus.bottom = 0;     // rhombus.y\n</code></pre></li> <li>Size     <pre><code>rhombus.setSize(width, height);\n</code></pre>     or     <pre><code>rhombus.width = width;\nrhombus.height = height;\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#get-properties","title":"Get properties","text":"<p>See Polygon shape.</p> <ul> <li>Position<ul> <li>Center     <pre><code>var centerX = rhombus.centerX;\nvar centerY = rhombus.centerY;\n</code></pre></li> <li>Bound     <pre><code>var top = rhombus.top;\nvar left = rhombus.left;\nvar right = rhombus.right;\nvar bottom = rhombus.bottom;\n</code></pre></li> </ul> </li> <li>Width     <pre><code>var width = rhombus.width;\n</code></pre></li> <li>Height     <pre><code>var width = rhombus.height;\n</code></pre></li> <li>Lines around rhombus     <pre><code>var edge01 = rhombus.getLineA();\nvar edge12 = rhombus.getLineB();\nvar edge23 = rhombus.getLineC();\nvar edge34 = rhombus.getLineD();\n</code></pre>     or     <pre><code>var edge = rhombus.getEdge(edgeIdx);\n// var out = rhombus.getEdge(edgeIdx, out);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#points-shape","title":"Point(s) &amp; shape","text":"<p>See Polygon shape.</p>"},{"location":"geom-triangle/","title":"Triangle","text":""},{"location":"geom-triangle/#introduction","title":"Introduction","text":"<p>Triangle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-triangle/#usage","title":"Usage","text":""},{"location":"geom-triangle/#create-shape","title":"Create shape","text":"<pre><code>var triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"geom-triangle/#clone-shape","title":"Clone shape","text":"<pre><code>var triangle1 = Phaser.Geom.Triangle.Clone(triangle0);\n</code></pre>"},{"location":"geom-triangle/#equilateral-triangle","title":"Equilateral triangle","text":"<pre><code>var triangle = Phaser.Geom.Triangle.BuildEquilateral(x1, y1, length);\n</code></pre>"},{"location":"geom-triangle/#right-triangle","title":"Right triangle","text":"<pre><code>var triangle = Phaser.Geom.Triangle.BuildRight(x1, y1, width, height);\n</code></pre>"},{"location":"geom-triangle/#polygon-to-triangles","title":"Polygon to triangles","text":"<pre><code>var out = Phaser.Geom.Triangle.BuildFromPolygon(data);\n// var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY);\n// out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out);\n</code></pre> <ul> <li><code>data</code> : A flat array of vertice coordinates like <code>[x0,y0, x1,y1, x2,y2, ...]</code></li> <li><code>out</code> : Array of triangles</li> </ul>"},{"location":"geom-triangle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillTriangleShape(triangle);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeTriangleShape(triangle);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>triangle.setTo(x1, y1, x2, y2, x3, y3);\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>triangle.x1 = 0;\ntriangle.y1 = 0;\ntriangle.x2 = 0;\ntriangle.y2 = 0;\ntriangle.x3 = 0;\ntriangle.y3 = 0;\n</code></pre>     or     <pre><code>triangle.left = 0;       // triangle.x1, triangle.x2, triangle.x3\ntriangle.top = 0;        // triangle.y1, triangle.y2, triangle.y3\n// triangle.right = 0;   // triangle.x1, triangle.x2, triangle.x3\n// triangle.bottom = 0;  // triangle.y1, triangle.y2, triangle.y3\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.Offset(triangle, dx, dy); // triangle.x += dx, triangle.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.CenterOn(triangle, x, y);\n</code></pre></li> <li>Rotate<ul> <li>Rotate around center (incenter)     <pre><code>var triangle = Phaser.Geom.Triangle.Rotate(triangle, angle);\n</code></pre><ul> <li><code>angle</code> : Radian</li> </ul> </li> <li>Rotate around point     <pre><code>var triangle = Phaser.Geom.Triangle.RotateAroundPoint(triangle, point, angle);\n</code></pre><ul> <li><code>point</code> : <code>{x, y}</code></li> <li><code>angle</code> : Radian</li> </ul> </li> <li>Rotate around (x,y)     <pre><code>var triangle = Phaser.Geom.Triangle.RotateAroundXY(triangle, x, y, angle);\n</code></pre><ul> <li><code>angle</code> : Radian    </li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-triangle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x1 = triangle.x1;\nvar y1 = triangle.y1;\nvar x2 = triangle.x2;\nvar y2 = triangle.y2;\nvar x3 = triangle.x3;\nvar y3 = triangle.y3;\nvar top = triangle.top;\nvar left = triangle.left;\nvar right = triangle.right;\nvar bottom = triangle.bottom;\n</code></pre>     or     <pre><code>var out = Phaser.Geom.Triangle.Decompose(triangle);  // out: [{x1,y1}, {x2,y2}, {x3,y3}]\n// var out = Phaser.Geom.Triangle.Decompose(triangle, out);\n</code></pre></li> <li>Perimeter     <pre><code>var perimeter = Phaser.Geom.Triangle.Perimeter(triangle);\n</code></pre></li> <li>Area     <pre><code>var area = Phaser.Geom.Triangle.Area(triangle);\n</code></pre></li> <li>Lines around triangle     <pre><code>var line12 = rect.getLineA();     // line from (x1, y1) to (x2, y2)\nvar line23 = rect.getLineB();     // line from (x2, y2) to (x3, y3)\nvar line31 = rect.getLineC();     // line from (x3, y3) to (x1, y1)\n</code></pre></li> <li>Centroid     <pre><code>var out = Phaser.Geom.Triangle.Centroid(triangle);  // out: {x,y}\n</code></pre></li> <li>Incenter     <pre><code>var out = Phaser.Geom.Triangle.InCenter(triangle);  // out: {x,y}\n// var out = Phaser.Geom.Triangle.InCenter(triangle, out);\n</code></pre></li> <li>Circumcenter     <pre><code>var out = Phaser.Geom.Triangle.CircumCenter(triangle);  // out: {x,y}\n// var out = Phaser.Geom.Triangle.CircumCenter(triangle, out);\n</code></pre></li> <li>Circumcircle     <pre><code>var out = Phaser.Geom.Triangle.CircumCircle(triangle);  // out: a circle object\n// var out = Phaser.Geom.Triangle.CircumCircle(triangle, out);\n</code></pre></li> <li>Type:     <pre><code>var type = triangle.type; // 6\n</code></pre></li> </ul>"},{"location":"geom-triangle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = triangle.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = triangle.getPoint(t, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = triangle.getRandomPoint();\n// var point = triangle.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = triangle.getPoints(quantity);\n// var points = triangle.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = triangle.getPoints(false, step);\n// var points = triangle.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = triangle.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Triangle.ContainsPoint(triangle, point);\n</code></pre><ul> <li>Points inside shape     <pre><code>var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst);\n// var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out);\n</code></pre><ul> <li><code>out</code> : Points inside triangle</li> <li><code>returnFirst</code> : True to get fist matched point</li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-triangle/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Triangle.Equals(triangle0, triangle1);\n</code></pre> <p>Position and radius are equal.</p>"},{"location":"geom-triangle/#intersection","title":"Intersection","text":""},{"location":"geom-triangle/#triangle-to-circle","title":"Triangle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToCircle(triangle, circle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle);\n// var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-rectangle","title":"Triangle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToTriangle(rect, triangle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle);\n// var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-triangle","title":"Triangle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToTriangle(triangleA, triangleB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB);\n// var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-line","title":"Triangle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToLine(triangle, line);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line);\n// var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);\n</code></pre></li> </ul>"},{"location":"gesture-overview/","title":"Overview","text":""},{"location":"gesture-overview/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Object factories : <code>scene.rexGestures.add.xxx(config)</code></li> </ul>"},{"location":"gesture-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Object factories : <code>scene.rexGestures.add.xxx(config)</code></li> </ul>"},{"location":"gesture-overview/#list-of-gesture-plugins","title":"List of gesture plugins","text":""},{"location":"gesture-overview/#one-pointer-gesture","title":"One pointer gesture","text":"<ul> <li>Tap</li> <li>Press</li> <li>Swipe</li> <li>Pan</li> </ul>"},{"location":"gesture-overview/#two-pointers-gesture","title":"Two pointers gesture","text":"<ul> <li>Pinch</li> <li>Rotate</li> </ul>"},{"location":"gesture-pan/","title":"Pan","text":""},{"location":"gesture-pan/#introduction","title":"Introduction","text":"<p>Get pan events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-pan/#live-demos","title":"Live demos","text":"<ul> <li>Pan &amp; rotate</li> </ul>"},{"location":"gesture-pan/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-pan/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-pan/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add pan input     <pre><code>var pan = scene.rexGestures.add.pan(config);\n// var pan = scene.rexGestures.add.pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pan input     <pre><code>var pan = scene.rexGestures.add.pan(config);\n// var pan = scene.rexGestures.add.pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pan } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add pan input     <pre><code>var pan = new Pan(scene, config);\n// var pan = new Pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#create-instance","title":"Create instance","text":"<ul> <li>Pan input     <pre><code>var pan = scene.rexGestures.add.pan({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 10,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> </ul> </li> <li>Pan behavior of game object     <pre><code>var pan = scene.rexGestures.add.pan(gameObject, {\n// enable: true,\n\n// threshold: 10,\n});\n</code></pre></li> </ul>"},{"location":"gesture-pan/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = pan.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>pan.setEnable(enable);  // enable: true, or false\n// pan.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>pan.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-pan/#events","title":"Events","text":""},{"location":"gesture-pan/#pan","title":"Pan","text":"<pre><code>pan.on('pan', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.dx</code>, <code>pan.dy</code> : Vector from previous pointer to current pointer.</li> <li><code>pan.worldX</code>, <code>pan.worldY</code> : World position of current pointer.</li> <li><code>pan.x</code>, <code>pan.y</code> : Scene position of current pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#pan-start","title":"Pan start","text":"<pre><code>pan.on('panstart', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.startWorldX</code>, <code>pan.startWorldY</code> : World position of pan-start pointer.</li> <li><code>pan.startX</code>, <code>pan.startY</code> : Scene position of pan-start pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#pan-end","title":"Pan end","text":"<pre><code>pan.on('panend', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.endWorldX</code>, <code>pan.endWorldY</code> : World position of pan-end pointer.</li> <li><code>pan.endX</code>, <code>pan.endY</code> : Scene position of pan-end pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#is-panned","title":"Is panned","text":"<pre><code>var isPanned = pan.isPanned;\n</code></pre> <p>Return <code>true</code> if panned.</p>"},{"location":"gesture-pan/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = pan.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>pan.setDragThreshold(dragThreshold);\n// pan.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = pan.bounds;\n</code></pre></li> <li>Set     <pre><code>pan.setDetectBounds(bounds);\n// pan.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-pinch/","title":"Pinch","text":""},{"location":"gesture-pinch/#introduction","title":"Introduction","text":"<p>Get scale factor from 2 dragging touch pointers.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"gesture-pinch/#live-demos","title":"Live demos","text":"<p>Pinch-zoom</p>"},{"location":"gesture-pinch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-pinch/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-pinch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = scene.rexGestures.add.pinch(config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = scene.rexGestures.add.pinch(config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pinch } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = new Pinch(scene, config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#create-instance","title":"Create instance","text":"<pre><code>var pinch = scene.rexGestures.add.pinch({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 0,\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : A rectangle object or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>threshold</code> : Fire pinch events after dragging distances of catched pointers are larger than this threshold.</li> </ul>"},{"location":"gesture-pinch/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = pinch.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>pinch.setEnable(enable);  // enable: true, or false\n// pinch.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>pinch.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#events","title":"Events","text":""},{"location":"gesture-pinch/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging 1st touch pointer, fired when 1st touch pointer is moving     <pre><code>pinch.on('drag1', function(pinch) {\n// var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y}\n}, scope);\n</code></pre><ul> <li><code>pinch.drag1Vector</code> : Drag vector from prevoius touch position to current touch position of 1st catched touch pointer.</li> </ul> </li> <li>On dragging 2 touch pointers, fired when any catched touch pointer moved.     <pre><code>pinch.on('pinch', function(pinch) {\n// var scaleFactor = pinch.scaleFactor;\n// gameObject.scaleX *= scaleFactor;\n// gameObject.scaleY *= scaleFactor;\n}, scope);\n</code></pre><ul> <li><code>pinch.scaleFactor</code> : Rate of distance change between 2 catched touch pointers.</li> </ul> </li> </ul>"},{"location":"gesture-pinch/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag 1 touch pointer start, fired when catching 1st touch pointer.     <pre><code>pinch.on('drag1start', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 1 touch pointer end, fired when releasing the last one catched touch pointer.     <pre><code>pinch.on('drag1end', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers start, fired when catching 2 touch pointers.     <pre><code>pinch.on('pinchstart', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers end, fired when releasing any catched touch pointer.     <pre><code>pinch.on('pinchend', function(pinch) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#scale-factor","title":"Scale factor","text":"<pre><code>var scaleFactor = pinch.scaleFactor;\n</code></pre> <p>Rate of distance change between 2 catched touch pointers.  (i.e current distance between 2 catched touch pointers / previous distance ).</p>"},{"location":"gesture-pinch/#drag-vector-of-1st-touch-pointer","title":"Drag vector of 1st touch pointer","text":"<pre><code>var drag1Vector = pinch.drag1Vector; // {x, y}\n</code></pre>"},{"location":"gesture-pinch/#catched-touch-pointers","title":"Catched touch pointers","text":"<ul> <li>Pointer 0, available when state is <code>1</code> <pre><code>var pointer0 = pinch.pointers[0];\n</code></pre><ul> <li>Position of pointer     <pre><code>var x = pointer0.x;\nvar y = pointer0.y;\nvar worldX = pointer0.worldX;\nvar worldY = pointer0.worldY;\n</code></pre></li> </ul> </li> <li>Pointer 1, available when state is <code>2</code> <pre><code>var pointer0 = pinch.pointers[1];\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#is-pinched","title":"Is pinched","text":"<pre><code>var isPinched = pinch.isPinched;\n</code></pre> <p>Return <code>true</code> if pinched.</p>"},{"location":"gesture-pinch/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = pinch.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>pinch.setDragThreshold(dragThreshold);\n// pinch.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = pinch.bounds;\n</code></pre></li> <li>Set     <pre><code>pinch.setDetectBounds(bounds);\n// pinch.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-press/","title":"Press","text":""},{"location":"gesture-press/#introduction","title":"Introduction","text":"<p>Get press events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-press/#live-demos","title":"Live demos","text":"<ul> <li>Press object</li> </ul>"},{"location":"gesture-press/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-press/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-press/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add press input     <pre><code>var press = scene.rexGestures.add.press(config);\n// var press = scene.rexGestures.add.press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add press input     <pre><code>var press = scene.rexGestures.add.press(config);\n// var press = scene.rexGestures.add.press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Press } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add press input     <pre><code>var press = new Press(scene, config);\n// var press = new Press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#create-instance","title":"Create instance","text":"<ul> <li>Press input     <pre><code>var press = scene.rexGestures.add.press({\n// enable: true,\n// bounds: undefined,\n\n// time: 251,\n// threshold: 9,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Minimal time of the pointer to be pressed.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> </ul> </li> <li>Press behavior of game object     <pre><code>var press = scene.rexGestures.add.press(gameObject, {\n// enable: true,\n\n// time: 251,\n// threshold: 9,\n});\n</code></pre></li> </ul>"},{"location":"gesture-press/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = press.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>press.setEnable(enable);  // enable: true, or false\n// press.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>press.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-press/#events","title":"Events","text":""},{"location":"gesture-press/#pressing-start","title":"Pressing start","text":"<pre><code>press.on('pressstart', function(press, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>press.gameObject</code> : Parent gameobject of this press behavior.</li> <li><code>press.worldX</code>, <code>press.worldY</code> : World position of pressing start.</li> <li><code>press.x</code>, <code>press.y</code> : Scene position of pressing start.</li> <li><code>gameObject</code>, <code>press.gameObject</code> : Parent gameobject of this press behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-press/#pressing-end","title":"Pressing end","text":"<pre><code>press.on('pressend', function(press, gameObject, lastPointer){\n}, scope);\n</code></pre>"},{"location":"gesture-press/#is-pressed","title":"Is pressed","text":"<pre><code>var isPressed = press.isPressed;\n</code></pre> <p>Return <code>true</code> if pressed.</p>"},{"location":"gesture-press/#other-properties","title":"Other properties","text":"<ul> <li>Hold time<ul> <li>Get     <pre><code>var holdTime = press.holdTime;\n</code></pre></li> <li>Set     <pre><code>press.setHoldTime(holdTime);\n// press.holdTime = holdTime;\n</code></pre></li> </ul> </li> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = press.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>press.setDragThreshold(dragThreshold);\n// press.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = press.bounds;\n</code></pre></li> <li>Set     <pre><code>press.setDetectBounds(bounds);\n// press.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-rotate/","title":"Rotate","text":""},{"location":"gesture-rotate/#introduction","title":"Introduction","text":"<p>Get spin angle from 2 dragging touch pointers.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"gesture-rotate/#live-demos","title":"Live demos","text":"<ul> <li>Rotate &amp; rotate</li> </ul>"},{"location":"gesture-rotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-rotate/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-rotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = scene.rexGestures.add.rotate(config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = scene.rexGestures.add.rotate(config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Rotate } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = new Rotate(scene, config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#create-instance","title":"Create instance","text":"<pre><code>var rotate = scene.rexGestures.add.rotate({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 0,\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : A rectangle object or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>threshold</code> : Fire rotate events after dragging distances of catched pointers are larger than this threshold.</li> </ul>"},{"location":"gesture-rotate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = rotate.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>rotate.setEnable(enable);  // enable: true, or false\n// rotate.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>rotate.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#events","title":"Events","text":""},{"location":"gesture-rotate/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging 1st touch pointer, fired when 1st touch pointer is moving     <pre><code>rotate.on('drag1', function(rotate) {\n// var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y}\n}, scope);\n</code></pre><ul> <li><code>rotate.drag1Vector</code> : Drag vector from prevoius touch position to current touch position of 1st catched touch pointer.</li> </ul> </li> <li>On dragging 2 touch pointers, fired when any catched touch pointer moved.     <pre><code>rotate.on('rotate', function(rotate) {\n// rotate.spinObject(gameObejects);\n// var angle = rotate.rotation;\n}, scope);\n</code></pre><ul> <li><code>rotate.spinObject(gameObejects)</code> : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers.</li> <li><code>rotate.rotation</code> : Return spin angle of 2 dragging pointers, in radius.</li> </ul> </li> </ul>"},{"location":"gesture-rotate/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag 1 touch pointer start, fired when catching 1st touch pointer.     <pre><code>rotate.on('drag1start', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 1 touch pointer end, fired when releasing the last one catched touch pointer.     <pre><code>rotate.on('drag1end', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers start, fired when catching 2 touch pointers.     <pre><code>rotate.on('rotatestart', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers end, fired when releasing any catched touch pointer.     <pre><code>rotate.on('rotateend', function(rotate) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#spin-game-object","title":"Spin game object","text":"<pre><code>rotate.spinObject(gameObejects);\n</code></pre> <p>Drag and spin game objects around current center of 2 dragging pointers. Uses this function under <code>'rotate'</code> event.</p> <ul> <li><code>gameObejects</code> : An array of game object, or a game object.</li> </ul>"},{"location":"gesture-rotate/#spin-angle","title":"Spin angle","text":"<pre><code>var angle = rotate.rotation;\n</code></pre> <p>Spin angle of 2 dragging pointers, in radius.</p>"},{"location":"gesture-rotate/#drag-vector-of-1st-touch-pointer","title":"Drag vector of 1st touch pointer","text":"<pre><code>var drag1Vector = rotate.drag1Vector; // {x, y}\n</code></pre>"},{"location":"gesture-rotate/#catched-touch-pointers","title":"Catched touch pointers","text":"<ul> <li>Pointer 0, available when state is <code>1</code> <pre><code>var pointer0 = rotate.pointers[0];\n</code></pre><ul> <li>Position of pointer     <pre><code>var x = pointer0.x;\nvar y = pointer0.y;\nvar worldX = pointer0.worldX;\nvar worldY = pointer0.worldY;\n</code></pre></li> </ul> </li> <li>Pointer 1, available when state is <code>2</code> <pre><code>var pointer0 = rotate.pointers[1];\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#is-rotated","title":"Is rotated","text":"<pre><code>var isRotated = rotate.isRotated;\n</code></pre> <p>Return <code>true</code> if pinched.</p>"},{"location":"gesture-rotate/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = rotate.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>rotate.setDragThreshold(dragThreshold);\n// rotate.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = rotate.bounds;\n</code></pre></li> <li>Set     <pre><code>rotate.setDetectBounds(bounds);\n// rotate.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-swipe/","title":"Swipe","text":""},{"location":"gesture-swipe/#introduction","title":"Introduction","text":"<p>Get swipe events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-swipe/#live-demos","title":"Live demos","text":"<ul> <li>Swipe</li> </ul>"},{"location":"gesture-swipe/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-swipe/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-swipe/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe(config);\n// var swipe = scene.rexGestures.add.swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe(config);\n// var swipe = scene.rexGestures.add.swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Swipe } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = new Swipe(scene, config);\n// var swipe = new Swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#create-instance","title":"Create instance","text":"<ul> <li>Swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 10,\n// velocityThreshold: 1000,\n// dir: '8dir',\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Max time of the pointer to be down.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> <li><code>velocityThreshold</code> : Minimal dragging speed.</li> <li><code>dir</code> : <ul> <li><code>'up&amp;down'</code>, or <code>0</code> : Get <code>up</code> or <code>down</code> state only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Get <code>left</code> or <code>right</code> state only.</li> <li><code>'4dir'</code>, or <code>2</code> : Get <code>up</code>, <code>down</code>, <code>left</code> or <code>right</code> state.</li> <li><code>'8dir'</code>, or <code>3</code> : Get <code>up</code>, <code>up</code>/<code>left</code>, <code>up</code>/<code>right</code>, <code>down</code>, <code>down</code>/<code>left</code>, <code>down</code>/<code>right</code>, <code>left</code>, or <code>right</code> state.</li> </ul> </li> </ul> </li> <li>Swipe behavior of game object     <pre><code>var swipe = scene.rexGestures.add.swipe(gameObject, {\n// enable: true,\n\n// threshold: 10,\n// velocityThreshold: 1000,\n// direction: '8dir',\n});\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = swipe.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>swipe.setEnable(enable);  // enable: true, or false\n// swipe.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>swipe.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#events","title":"Events","text":""},{"location":"gesture-swipe/#swipe","title":"Swipe","text":"<pre><code>swipe.on('swipe', function(swipe, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>swipe.left</code>, <code>swipe.right</code>, <code>swipe.up</code>, <code>swipe.down</code> : Swipe direction states.</li> <li><code>swipe.worldX</code>, <code>swipe.worldY</code> : World position of swiping start.</li> <li><code>swipe.x</code>, <code>swipe.y</code> : Scene position of swiping start.</li> <li><code>swipe.dragVelocity</code> : Velocity of dragging.</li> <li><code>gameObject</code>, <code>swipe.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-swipe/#is-swiped","title":"Is swiped","text":"<pre><code>var isSwiped = swipe.isSwiped;\n</code></pre> <p>Return <code>true</code> if panning.</p>"},{"location":"gesture-swipe/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = swipe.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>swipe.setDragThreshold(dragThreshold);\n// swipe.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Velocity threshold<ul> <li>Get     <pre><code>var velocityThreshold = swipe.velocityThreshold;\n</code></pre></li> <li>Set     <pre><code>swipe.setVelocityThreshold(velocityThreshold);\n// swipe.velocityThreshold = velocityThreshold;\n</code></pre></li> </ul> </li> <li>Direction mode<ul> <li>Get     <pre><code>var dirMode = swipe.dirMode;  // 0,1,2,3\n</code></pre></li> <li>Set     <pre><code>swipe.setDirectionMode(dirMode);  // 0,1,2,3,'up&amp;down','left&amp;right','4dir','8dir'\n// swipe.dirMode = dirMode;  // 0,1,2,3\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = swipe.bounds;\n</code></pre></li> <li>Set     <pre><code>swipe.setDetectBounds(bounds);\n// swipe.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-tap/","title":"Tap","text":""},{"location":"gesture-tap/#introduction","title":"Introduction","text":"<p>Get tap/multi-taps events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-tap/#live-demos","title":"Live demos","text":"<ul> <li>Tap object</li> </ul>"},{"location":"gesture-tap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-tap/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-tap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add tap input     <pre><code>var tap = scene.rexGestures.add.tap(config);\n// var tap = scene.rexGestures.add.tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tap input     <pre><code>var tap = scene.rexGestures.add.tap(config);\n// var tap = scene.rexGestures.add.tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tap } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add tap input     <pre><code>var tap = new Tap(scene, config);\n// var tap = new Tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#create-instance","title":"Create instance","text":"<ul> <li>Tap input     <pre><code>var tap = scene.rexGestures.add.tap({\n// enable: true,\n// bounds: undefined,\n\n// time: 250,\n// tapInterval: 200,\n// threshold: 9,\n// tapOffset: 10,\n\n// taps: undefined,\n// minTaps: undefined,\n// maxTaps: undefined,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Max time of the pointer to be down.</li> <li><code>tapInterval</code> : Max time between the multi-tap taps.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> <li><code>tapOffset</code> : A multi-tap can be a bit off the initial position.</li> <li><code>taps</code> : Fire <code>tap</code> event only when taps count reaches this value.<ul> <li><code>undefined</code> : Fire <code>tap</code> event only when tapped end. i.e pointer-up time exceeds <code>tapInterval</code>.</li> </ul> </li> <li><code>minTaps</code> : Fire <code>tap</code> event only when taps count is larger than this value.<ul> <li><code>undefined</code> : Don't check taps count.</li> </ul> </li> <li><code>maxTaps</code> : Fire <code>tap</code> event only when taps count is less than this value.<ul> <li><code>undefined</code> : Don't check taps count.</li> </ul> </li> </ul> </li> <li>Tap behavior of game object     <pre><code>var tap = scene.rexGestures.add.tap(gameObject, {\n// enable: true,\n\n// time: 250,\n// tapInterval: 200,\n// threshold: 9,\n// tapOffset: 10,\n\n// taps: undefined,\n// minTaps: undefined,\n// maxTaps: undefined,\n});\n</code></pre></li> </ul>"},{"location":"gesture-tap/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = tap.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>tap.setEnable(enable);  // enable: true, or false\n// tap.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>tap.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-tap/#events","title":"Events","text":""},{"location":"gesture-tap/#tap","title":"Tap","text":"<pre><code>tap.on('tap', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>tap.tapsCount</code> : Taps count.</li> <li><code>gameObject</code>, <code>tap.gameObject</code> : Parent gameobject of this tap behavior.</li> <li><code>tap.worldX</code>, <code>tap.worldY</code> : World position of first tapping.</li> <li><code>tap.x</code>, <code>tap.y</code> : Scene position of first tapping.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul> <pre><code>tap.on(tapsCount + 'tap', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>tapsCount + 'tap'</code> : <code>1tap</code>, <code>2tap</code>, <code>3tap</code>, etc ...</li> </ul>"},{"location":"gesture-tap/#tapping-start","title":"Tapping start","text":"<p>Each pointer-down will increase taps count and fire <code>tappingstart</code> event.</p> <pre><code>tap.on('tappingstart', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre>"},{"location":"gesture-tap/#is-tapped","title":"Is tapped","text":"<pre><code>var isTapped = tap.isTapped;\n</code></pre> <p>Return <code>true</code> if tapped end.</p>"},{"location":"gesture-tap/#other-properties","title":"Other properties","text":"<ul> <li>Hold time<ul> <li>Get     <pre><code>var holdTime = tap.holdTime;\n</code></pre></li> <li>Set     <pre><code>tap.setHoldTime(holdTime);\n// tap.holdTime = holdTime;\n</code></pre></li> </ul> </li> <li>Tap interval<ul> <li>Get     <pre><code>var tapInterval = tap.tapInterval;\n</code></pre></li> <li>Set     <pre><code>tap.setTapInterval(tapInterval);\n// tap.tapInterval = tapInterval;\n</code></pre></li> </ul> </li> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = tap.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>tap.setDragThreshold(dragThreshold);\n// tap.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Tap offset<ul> <li>Get     <pre><code>var tapOffset = tap.tapOffset;\n</code></pre></li> <li>Set     <pre><code>tap.setTapOffset(tapOffset);\n// tap.tapOffset = tapOffset;\n</code></pre></li> </ul> </li> <li>Max taps<ul> <li>Get     <pre><code>var maxTaps = tap.maxTaps;\n</code></pre></li> <li>Set     <pre><code>tap.setMaxTaps(maxTaps);\n// tap.maxTaps = maxTaps;\n</code></pre></li> </ul> </li> <li>Min taps<ul> <li>Get     <pre><code>var minTaps = tap.minTaps;\n</code></pre></li> <li>Set     <pre><code>tap.setMinTaps(minTaps);\n// tap.minTaps = minTaps;\n</code></pre></li> </ul> </li> <li>Taps     <pre><code>taps.setTaps(taps);\n// taps.setTaps(minTaps, maxTaps);\n</code></pre></li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = taps.bounds;\n</code></pre></li> <li>Set     <pre><code>taps.setDetectBounds(bounds);\n// taps.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"graphics/","title":"Graphics","text":""},{"location":"graphics/#introduction","title":"Introduction","text":"<p>Drawing on webgl or canvas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"graphics/#usage","title":"Usage","text":""},{"location":"graphics/#add-graphics-object","title":"Add graphics object","text":"<pre><code>var graphics = scene.add.graphics();\n</code></pre> <p>or</p> <pre><code>var graphics = scene.add.graphics({\nx: 0,\ny: 0,\n\n// lineStyle: {\n//     width: 1,\n//     color: 0xffffff,\n//     alpha: 1\n// },\n// fillStyle: {\n//     color: 0xffffff,\n//     alpha: 1\n// },\n\nadd: true\n});\n</code></pre>"},{"location":"graphics/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGraphics extends Phaser.GameObjects.Graphics {\nconstructor(scene, options) {\nsuper(scene, options);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var graphics = new MyGraphics(scene, options);\n</code></pre></li> </ul>"},{"location":"graphics/#drawing-commands","title":"Drawing commands","text":""},{"location":"graphics/#set-style","title":"Set style","text":"<ul> <li>Set default line style and fill style     <pre><code>graphics.setDefaultStyles({\nlineStyle: {\nwidth: 1,\ncolor: 0xffffff,\nalpha: 1\n},\nfillStyle: {\ncolor: 0xffffff,\nalpha: 1\n}\n});\n</code></pre></li> <li>Set line style     <pre><code>graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\n</code></pre></li> <li>Set fill style<ul> <li>Fill color     <pre><code>graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\n</code></pre></li> <li>Fill gradient color (WebGL only)     <pre><code>graphics.fillGradientStyle(topLeft, topRight, bottomLeft, bottomRight, alpha);  // alpha= 1\n// graphics.fillGradientStyle(topLeft, topRight, bottomLeft, bottomRight, alphaTopLeft, alphaTopRight, alphaBottomLeft, alphaBottomRight);\n</code></pre><ul> <li><code>topLeft</code> : The tint being applied to the top-left of the Game Object.</li> <li><code>topRight</code> : The tint being applied to the top-right of the Game Object.</li> <li><code>bottomLeft</code> : The tint being applied to the bottom-left of the Game Object.</li> <li><code>bottomRight</code> : The tint being applied to the bottom-right of the Game Object.</li> <li><code>alphaTopLeft</code> : The top left alpha value.</li> <li><code>alphaTopRight</code> : The top right alpha value.</li> <li><code>alphaBottomLeft</code> : The bottom left alpha value.</li> <li><code>alphaBottomRight</code> : The bottom right alpha value.</li> </ul> </li> </ul> </li> </ul>"},{"location":"graphics/#clear","title":"Clear","text":"<pre><code>graphics.clear();\n</code></pre>"},{"location":"graphics/#path","title":"Path","text":"<pre><code>graphics.beginPath();\ngraphics.closePath();\ngraphics.fillPath(); // = graphics.fill()\ngraphics.strokePath(); // = graphics.stroke()\n</code></pre>"},{"location":"graphics/#rectangle","title":"Rectangle","text":"<pre><code>graphics.fillRectShape(rect); // rect: {x, y, width, height}\ngraphics.fillRect(x, y, width, height);\ngraphics.strokeRectShape(rect);  // rect: {x, y, width, height}\ngraphics.strokeRect(x, y, width, height);\n</code></pre>"},{"location":"graphics/#rounded-rectangle","title":"Rounded rectangle","text":"<pre><code>graphics.fillRoundedRect(x, y, width, height, radius);\ngraphics.strokeRoundedRect(x, y, width, height, radius);\n</code></pre> <ul> <li><code>radius</code> : number or an object <code>{tl, tr, bl, br}</code>, <ul> <li>Positive value : Convex corner.</li> <li>Negative value : Concave corner.</li> </ul> </li> </ul>"},{"location":"graphics/#triangle","title":"Triangle","text":"<pre><code>graphics.fillTriangleShape(triangle); // triangle: {x1, y1, x2, y2, x3, y3}\ngraphics.fillTriangle(x1, y1, x2, y2, x3, y3);\ngraphics.strokeTriangleShape(triangle); // triangle: {x1, y1, x2, y2, x3, y3}\ngraphics.strokeTriangle(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"graphics/#point","title":"Point","text":"<pre><code>graphics.fillPointShape(point, size); // point: {x, y}\ngraphics.fillPoint(x, y, size);\n</code></pre>"},{"location":"graphics/#line","title":"Line","text":"<pre><code>graphics.strokeLineShape(line); // line: {x1, y1, x2, y2}\ngraphics.lineBetween(x1, y1, x2, y2);\ngraphics.lineTo(x, y);\ngraphics.moveTo(x, y);\n</code></pre>"},{"location":"graphics/#lines","title":"Lines","text":"<pre><code>graphics.strokePoints(points, closeShape, closePath, endIndex);  // points: [{x, y}, ...]\ngraphics.fillPoints(points, closeShape, closePath, endIndex);  // points: [{x, y}, ...]\n</code></pre> <ul> <li><code>points</code> : Array of <code>{x, y}</code></li> <li><code>closeShape</code> : When <code>true</code>, the shape is closed by joining the last point to the first point.</li> <li><code>closePath</code> : When <code>true</code>, the path is closed before being stroked.</li> <li><code>endIndex</code> : The index of <code>points</code> to stop drawing at. Defaults to <code>points.length</code>.</li> </ul>"},{"location":"graphics/#circle","title":"Circle","text":"<pre><code>graphics.fillCircleShape(circle); // circle: {x, y, radius}\ngraphics.fillCircle(x, y, radius);\ngraphics.strokeCircleShape(circle);  // circle: {x, y, radius}\ngraphics.strokeCircle(x, y, radius);\n</code></pre> <p>Draw or fill circle shape by points.</p>"},{"location":"graphics/#ellipse","title":"Ellipse","text":"<pre><code>graphics.strokeEllipseShape(ellipse, smoothness);   // ellipse: Phaser.Geom.Ellipse\ngraphics.strokeEllipse(x, y, width, height, smoothness);\ngraphics.fillEllipseShape(ellipse, smoothness);    // ellipse: Phaser.Geom.Ellipse\ngraphics.fillEllipse(x, y, width, height, smoothness);\n</code></pre> <p>Draw or fill ellipse shape by points.</p>"},{"location":"graphics/#arc","title":"Arc","text":"<pre><code>graphics.arc(x, y, radius, startAngle, endAngle, anticlockwise);\ngraphics.arc(x, y, radius, startAngle, endAngle, anticlockwise, overshoot);\n</code></pre> <p>Draw arc curve by points.</p>"},{"location":"graphics/#pie-chart-slice","title":"Pie-chart slice","text":"<pre><code>graphics.slice(x, y, radius, startAngle, endAngle, anticlockwise);\ngraphics.slice(x, y, radius, startAngle, endAngle, anticlockwise, overshoot);\n</code></pre> <p>Draw pie-chart slice shape by points.</p> <p>Fill this shape</p> <pre><code>graphics.fillPath();\n</code></pre>"},{"location":"graphics/#clear-pattern","title":"Clear pattern","text":"<pre><code>graphics.setTexture();\n</code></pre>"},{"location":"graphics/#transfer","title":"Transfer","text":"<pre><code>graphics.save();\ngraphics.restore();\ngraphics.translateCanvas(x, y);\ngraphics.scaleCanvas(x, y);\ngraphics.rotateCanvas(radians);\n</code></pre>"},{"location":"graphics/#generate-texture","title":"Generate texture","text":"<pre><code>graphics.generateTexture(key, width, height);  // key: texture key\n</code></pre>"},{"location":"graphics/#create-mask","title":"Create mask","text":"<pre><code>var mask = graphics.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"gridalign/","title":"Quad/Hexagon grid align","text":""},{"location":"gridalign/#introduction","title":"Introduction","text":"<p>Align objects on quadrilateral or hexagon grid. </p> <p>See also built-in grid-align.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"gridalign/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridalign/#install-plugin","title":"Install plugin","text":""},{"location":"gridalign/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridalignplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridalignplugin.min.js', true);\n</code></pre></li> <li>Grid-align objects     <pre><code>scene.plugins.get('rexgridalignplugin').quad(gameObjects, config);\nscene.plugins.get('rexgridalignplugin').hexagon(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridAlignPlugin from 'phaser3-rex-plugins/plugins/gridalign-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridAlign',\nplugin: GridAlignPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Grid-align objects     <pre><code>scene.plugins.get('rexGridAlign').quad(gameObjects, config);\nscene.plugins.get('rexGridAlign').hexagon(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadGridAlign, HexagonGridAlign } from 'phaser3-rex-plugins/plugins/gridalign.js';\n</code></pre></li> <li>Grid-align objects     <pre><code>QuadGridAlign(gameObjects, config);\nHexagonGridAlign(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#quadrilateral-grid","title":"Quadrilateral grid","text":"<pre><code>scene.plugins.get('rexGridAlign').quad(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\ntype: 0,\nposition: Phaser.Display.Align.CENTER,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>type</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code></li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"gridalign/#hexagon-grid","title":"Hexagon grid","text":"<pre><code>scene.plugins.get('rexGridAlign').hexagon(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\nstaggeraxis: 'x',\nstaggerindex: 'odd',\nposition: Phaser.Display.Align.CENTER,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code></li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"gridalign/#types-of-hexagon-grid","title":"Types of hexagon grid","text":"<p>Reference</p> <ul> <li><code>odd-r</code> : staggeraxis = <code>x</code>, staggerindex = <code>odd</code></li> <li><code>even-r</code> : staggeraxis = <code>x</code>, staggerindex = <code>even</code></li> <li><code>odd-q</code> : staggeraxis = <code>y</code>, staggerindex = <code>odd</code></li> <li><code>even-q</code> :staggeraxis = <code>y</code>, staggerindex = <code>even</code></li> </ul>"},{"location":"gridcutimage/","title":"Grid cut image","text":""},{"location":"gridcutimage/#introduction","title":"Introduction","text":"<p>Create image game objects in grids, to assemble target texture.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"gridcutimage/#live-demos","title":"Live demos","text":"<ul> <li>Cut image</li> <li>Cut rendertexture</li> </ul>"},{"location":"gridcutimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridcutimage/#install-plugin","title":"Install plugin","text":""},{"location":"gridcutimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridcutimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridcutimageplugin.min.js', true);\n</code></pre></li> <li>Create images     <pre><code>var images = scene.plugins.get('rexgridcutimageplugin').gridCut(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridCutImagePlugin from 'phaser3-rex-plugins/plugins/gridcutimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridCutImage',\nplugin: GridCutImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create images     <pre><code>var images = scene.plugins.get('rexGridCutImage').gridCut(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import GridCutImage from 'phaser3-rex-plugins/plugins/gridcutimage.js';\n</code></pre></li> <li>Create images     <pre><code>var images = GridCutImage(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#grid-cut","title":"Grid cut","text":"<pre><code>scene.plugins.get('rexGridCutImage').gridCut(gameObjects, columns, rows, {\n// onCreateImage: undefined,\n// ImageClass: Phaser.GameObjects.Image,\n\n// originX: 0.5,\n// originY: 0.5,\n// add: true,\n// align: true,\n// objectPool: undefined\n})\n</code></pre> <ul> <li><code>gameObjects</code> : Target game object which has a texture, ex Image, RenderTexture.</li> <li><code>columns</code>, <code>rows</code> : Cut texture in <code>columns</code> x <code>rows</code> grids</li> <li><code>onCreateImage</code> : Custom callback to return an image game object, optional.     <pre><code>function(scene, texture, frame) {\nreturn gameObject;\n}\n</code></pre><ul> <li><code>texture</code> : A texture object.</li> <li><code>frame</code> : Frame name.</li> </ul> </li> <li><code>ImageClass</code> : Create image game object from this class. Default value is built-in Image class. Used when <code>onCreateImage</code> is <code>undefined</code>.</li> <li><code>originX</code>, <code>originY</code> : Origin of created image game objects</li> <li><code>add</code> : <ul> <li><code>true</code> : Add these created image game objects to scene. Default value.</li> <li><code>false</code> : Don't add created image game objects to scene.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>true</code> : Align position of created image game objects to target game object (<code>gameObjects</code>). Default value when <code>add</code> is set to <code>true</code>.</li> <li><code>false</code> : Don't set position of created image game objects. Default value when <code>add</code> is set to <code>false</code>.</li> </ul> </li> <li><code>objectPool</code> : An array of image game objects, will reuse image game objects from this pool. Optional.</li> </ul>"},{"location":"gridtable/","title":"Grid table","text":""},{"location":"gridtable/#introduction","title":"Introduction","text":"<p>Viewer of grid table, to manipulate game object of each visible cell.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"gridtable/#live-demos","title":"Live demos","text":"<ul> <li>Grid table</li> <li>Grid table &amp; slider</li> <li>Grid table &amp; scroller</li> <li>Grid table &amp; slider &amp; scroller</li> <li>Horizontal scrolling</li> <li>Varying cell height</li> </ul>"},{"location":"gridtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridtable/#install-plugin","title":"Install plugin","text":""},{"location":"gridtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridtableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridtableplugin.min.js', true);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.add.rexGridTable(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridTablePlugin from 'phaser3-rex-plugins/plugins/gridtable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridTablePlugin',\nplugin: GridTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.add.rexGridTable(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import GridTable from 'phaser3-rex-plugins/plugins/gridtable.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new GridTable(scene, x, y, width, height, config);\nscene.add.existing(table);\n</code></pre></li> </ul>"},{"location":"gridtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.add.rexGridTable(x, y, width, height, {\nscrollMode: 0,        // 0|'v'|'vertical'|1|'h'|'horizontal'\ncellsCount: 0,\ncolumns: 1,\n// rows: 1,\ncellHeight: 30,\ncellWidth: 30,\n\ncellVisibleCallback: null,\n// cellVisibleCallback: function (cell, cellContainer, table) {},\ncellVisibleCallbackScope: undefined,\nreuseCellContainer: false,\n\ncellInvisibleCallback: null,\n// cellInvisibleCallback: function(cell) {},\ncellInvisibleCallbackScope: undefined,\nclamplTableOXY: true,\n\nmask: {\npadding: 0,\n// updateMode: 0,\n// layer: undefined,\n},\n// enableLayer: false\n});\n</code></pre> <ul> <li><code>scrollMode</code> :<ul> <li><code>0</code>, or <code>'v'</code>, or <code>'vertical'</code> : Scroll table vertically.</li> <li><code>1</code>, or <code>'h'</code>, or <code>'horizontal'</code> : Scroll table horizontally.</li> </ul> </li> <li><code>cellsCount</code> : Total cells count.</li> <li><code>columns</code> : Columns count of each row. Can be used in vertical or horizontal scroll mode.</li> <li><code>rows</code> : Rows count of each column. Can be used in horizontal scroll mode.</li> <li><code>cellHeight</code> : Default height of each cell.<ul> <li>Expand cell height to fit table height : set <code>cellHeight</code> to <code>undefined</code>, and <code>scrollMode</code> is <code>'horizontal'</code>.</li> </ul> </li> <li><code>cellWidth</code> : Width of each cell.<ul> <li>Expand cell width to fit table width : set <code>cellWidth</code> to <code>undefined</code>, and <code>scrollMode</code> is <code>'vertical'</code>.</li> </ul> </li> <li><code>cellVisibleCallback</code> , <code>cellVisibleCallbackScope</code> : Callback when cell begins visible.     <pre><code>function (cell, cellContainer, table) {\nif (cellContainer === null) { // No reusable cell container, create a new one\nvar scene = cell.scene;\n// cellContainer = scene.add.container();\n}\n// Set child properties of cell container ...\ncell.setContainer(cellContainer); // Assign cell container\n}\n</code></pre></li> <li><code>reuseCellContainer</code> : Set <code>true</code> to reuse cell container when cell is visible.</li> <li><code>cellInvisibleCallback</code>, <code>cellInvisibleCallbackScope</code>: Callback when cell begins invisible <pre><code>function (cell) {\n// var container = cell.popContainer();\n}\n</code></pre></li> <li><code>clamplTableOXY</code> : Set <code>true</code> to clamp <code>tableOX</code>, <code>tableOY</code> when out-of-bound,<ul> <li>Set <code>false</code> when dragging by scroller</li> </ul> </li> <li><code>mask</code> : A rectangle mask of cells<ul> <li><code>mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>mask.updateMode</code> : When to update cells mask<ul> <li><code>0</code>, or <code>update</code> : Apply mask to cell container only when <code>table.updateTable()</code> is invoked. Default behavior.</li> <li><code>1</code>, or <code>everyTick</code> : Apply mask to cell container every tick. Use this mode if game objects of cell are moved after <code>table.updateTable()</code> and still been masked.</li> </ul> </li> <li><code>mask.layer</code> :<ul> <li><code>undefined</code>, <code>false</code>, <code>null</code> : Disable this feature, default behavior</li> <li>Layer game object : Draw children game object of panel on this layer game object, then apply mask on this layer game object.     </li> </ul> </li> <li><code>false</code> : No mask.</li> </ul> </li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add cell game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add cell game objects into an internal layer game object. See also.</li> </ul> </li> </ul> <p>Add grid table from JSON</p> <pre><code>var table = scene.make.rexGridTable({\nx: 0,\ny: 0,\nwidth: 256,\nheight: 256,\n\n// cellsCount: 0,   // total cells count\n// ...\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"gridtable/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridTable extends GridTable {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var table = new MyGridTable(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#cell-begins-visible","title":"Cell begins visible","text":"<p>Add container of cell when it begins visible in event <code>cellvisible</code>. </p> <pre><code>table.on('cellvisible', function(cell, cellContainer, table){\nif (cellContainer === null) { // No reusable cell container, create a new one\nvar scene = cell.scene;\n// cellContainer = scene.add.container();\n}\n// Set child properties of cell container ...\ncell.setContainer(cellContainer); // Assign cell container\n})\n</code></pre> <p>It is equal to <code>cellVisibleCallback</code> in configuration.</p> <pre><code>{\n// ...\ncellVisibleCallback: function(cell, cellContainer, table) {\ncell.setContainer(cellContainer); // Assign cell container\n},\n// ...\n}\n</code></pre> <ul> <li><code>cell</code><ul> <li>Scene object of grid table.     <pre><code>var scene = cell.scene;\n</code></pre></li> <li>Index of cell.     <pre><code>var index = cell.index;\n</code></pre></li> <li>Size of cell.     <pre><code>var cellWidth = cell.width;\nvar cellHeight = cell.height;\n</code></pre><ul> <li>Change size of cell : <ul> <li>Change cell height in scoll-vertical mode.     <pre><code>cell.setHeight(newHeight);\n// cell.height = newHeight;\n</code></pre>     or     <pre><code>cell.setDeltaHeight(deltaHeight);\n// cell.deltaHeight = deltaHeight;\n</code></pre></li> <li>Reset cell height in scoll-vertical mode.     <pre><code>cell.setDeltaHeight(0);\n// cell.deltaHeight = 0;\n</code></pre></li> <li>Change cell width in scroll-horizontal mode.     <pre><code>cell.setWidth(newWidth);\n// cell.width = newWidth;\n</code></pre>     or     <pre><code>cell.setDeltaWidth(deltaWidth);\n// cell.deltaWidth = deltaWidth;\n</code></pre></li> <li>Reset cell height in scroll-horizontal mode.     <pre><code>cell.setDeltaWidth(0);\n// cell.deltaWidth = 0;\n</code></pre></li> </ul> </li> </ul> </li> <li>Assign cell container. Set origin point of this cell container to (0,0).     <pre><code>cell.setContainer(cellContainer);\n</code></pre></li> <li>Alignment of cellContainer :      <pre><code>cell.setCellContainerAlign(align);\n</code></pre><ul> <li><code>align</code> :<ul> <li><code>undefined</code> : Set position of cellContainer to left-top of cell space. Default behavior.</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center of cell space.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center of cell space.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center of cell space.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center of cell space.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center of cell space.         </li> </ul> </li> </ul> </li> </ul> </li> <li><code>cellContainer</code> : Cell container picked from object pool for reusing. Set <code>reuseCellContainer</code> to <code>true</code> to enable this feature.<ul> <li><code>null</code> : No cell container available.</li> <li>Game object : Reusable cell container.</li> </ul> </li> <li><code>table</code> : Grid table.</li> </ul> <p>Each cell only has one container gameObject, old container will be destroyed when assigning a new container.</p>"},{"location":"gridtable/#cell-begins-invisible","title":"Cell begins invisible","text":"<p>Container of an invisible cell will be destroyed automatically.</p> <p>To resue container gameObject</p> <ul> <li>Set <code>reuseCellContainer</code> to <code>true</code> to put invisible cell container into object pool.</li> <li>Or, pop that container by <code>cell.popContainer()</code> in event <code>cellinvisible</code>.</li> </ul> <pre><code>table.on('cellinvisible', function(cell){\n// var container = cell.popContainer();\n})\n</code></pre> <p>It is equal to <code>cellInvisibleCallback</code> in configuration.</p> <pre><code>{\n// ...\ncellInvisibleCallback: function(cell) {\n// var container = cell.popContainer();\n},\n// ...\n}\n</code></pre>"},{"location":"gridtable/#scroll-table-content","title":"Scroll table content","text":"<ul> <li>Set     <pre><code>table.setTableOY(oy).updateTable();\ntable.addTableOY(dy).updateTable();\n</code></pre> <pre><code>table.setTableOX(ox).updateTable();\ntable.addTableOX(dx).updateTable();\n</code></pre> <pre><code>table.setTableOXY(ox, oy).updateTable();\ntable.addTableOXY(dx, dy).updateTable();\n</code></pre>     or     <pre><code>table.tableOY = oy;  // include table.updateTable()\ntable.tableOX = ox;\n</code></pre><ul> <li>These will trigger <code>cellvisible</code>, or <code>cellinvisible</code> events.</li> </ul> </li> <li>Get     <pre><code>var tableOY = table.tableOY;\nvar tableOX = table.tableOX;\n</code></pre></li> </ul> <p>Use case</p> <p>Scroll table by scroller behavior.</p>"},{"location":"gridtable/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>table.setTableOYByPercentage(t).updateTable();  // t: 0~1\n</code></pre>     or     <pre><code>table.t = t;  // include table.updateTable()\n</code></pre></li> <li>Get     <pre><code>var t = table.getTableOYPercentage();\n//var t = table.t;\n</code></pre></li> </ul> <p>Use case</p> <p>Scroll table by slider behavior.</p>"},{"location":"gridtable/#scroll-to-bottom","title":"Scroll to bottom","text":"<pre><code>table.scrollToBottom();\n</code></pre>"},{"location":"gridtable/#scroll-to-row","title":"Scroll to row","text":"<ul> <li>Scroll to next row     <pre><code>table.scrollToNextRow();\n</code></pre></li> <li>Scroll to next n row     <pre><code>table.scrollToNextRow(n);\n</code></pre></li> <li>Scroll to row     <pre><code>table.scrollToRow(rowIndex);\n</code></pre></li> <li>Get current row index     <pre><code>var rowIndex = table.startRowIndex;\n</code></pre></li> </ul>"},{"location":"gridtable/#refresh-table-content","title":"Refresh table content","text":"<ul> <li>Refresh all visible cells.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Update a visible cell     <pre><code>table.updateVisibleCell(cellIndex);\n</code></pre></li> </ul>"},{"location":"gridtable/#table-size-in-cells","title":"Table size in cells","text":"<ul> <li>Set table size     <pre><code>table.setGridSize(colCount, rowCount).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#total-cells-count","title":"Total cells count","text":"<ul> <li>Get     <pre><code>var count = table.cellsCount;\n</code></pre></li> <li>Set     <pre><code>table.setCellsCount(count).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#columns-count","title":"Columns count","text":"<ul> <li>Get     <pre><code>var columnCount = table.columnCount;\n</code></pre></li> <li>Set     <pre><code>table.setColumnCount(count).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#table-size-in-pixels","title":"Table size in pixels","text":"<ul> <li>Table height in pixels     <pre><code>var tableHeight = table.tableHeight;\n</code></pre></li> <li>Table width in pixels     <pre><code>var tableWidth = table.tableWidth;\n</code></pre></li> </ul>"},{"location":"gridtable/#bounds-of-tableox-tableoy","title":"Bounds of tableOX, tableOY","text":"<ul> <li>Top bound of tableOY     <pre><code>var topTableOY = table.topTableOY;  // 0\n</code></pre></li> <li>Bottom bound of tableOY     <pre><code>var bottomTableOY = table.bottomTableOY; // A negative number\n</code></pre></li> <li>Left bound of tableOX     <pre><code>var leftTableOX = table.leftTableOX;  // 0\n</code></pre></li> <li>Right bound of tableOX     <pre><code>var rightTableOX = table.rightTableOX; // A negative number\n</code></pre></li> </ul> <p>Use case</p> <p>Set bounds of scroller</p>"},{"location":"gridtable/#resize-table","title":"Resize table","text":"<pre><code>table.resize(width, height);\n</code></pre>"},{"location":"gridtable/#cell","title":"Cell","text":""},{"location":"gridtable/#get-cell","title":"Get cell","text":"<pre><code>var cell = table.getCell(cellIndex);\n</code></pre>"},{"location":"gridtable/#get-cell-from-position","title":"Get cell from position","text":"<pre><code>var cellIndex = table.pointToCellIndex(x, y);\nvar cell = table.getCell(cellIndex);\n</code></pre>"},{"location":"gridtable/#cell-height","title":"Cell height","text":"<ul> <li>Get     <pre><code>var height = cell.height;\n</code></pre></li> <li>Set cell height, only worked in scoll-vertical mode.     <pre><code>cell.height = height;\n// cell.setHeight(height);\n</code></pre>     or     <pre><code>table.setCellHeight(cellIndex, cellHeight);\n</code></pre><ul> <li>Refresh table after the cell size is changed.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Emit <code>'cellheightchange'</code> event.     <pre><code>table.on('cellheightchange', function (cell, cellContainer, table) {\n});\n</code></pre></li> </ul> </li> </ul>"},{"location":"gridtable/#cell-width","title":"Cell width","text":"<ul> <li>Get     <pre><code>var width = cell.width;\n</code></pre></li> <li>Set cell width, only worked in scoll-horizontal mode.     <pre><code>cell.width = width;\n// cell.setWidth(width);\n</code></pre>     or     <pre><code>table.setCellWidth(cellIndex, cellWidth);\n</code></pre><ul> <li>Refresh table after the cell size is changed.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Emit <code>'cellwidthchange'</code> event.     <pre><code>table.on('cellwidthchange', function (cell, cellContainer, table) {\n});\n</code></pre></li> </ul> </li> </ul>"},{"location":"gridtable/#fore-each-visible-cell","title":"Fore each visible cell","text":"<ul> <li>For when you absolutely know this Set won't be modified during the iteration     <pre><code>table.iterateVisibleCell(function(cell){\n// ...\n});\n</code></pre></li> <li>For when you know this Set will be modified during the iteration.     <pre><code>table.eachVisibleCell(function(cell){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"gridtable/#container","title":"Container","text":"<ul> <li>Get     <pre><code>var container = cell.getContainer();\n</code></pre></li> <li>Pop (get and remove)     <pre><code>var container = cell.popContainer();\n</code></pre></li> <li>Set     <pre><code>cell.setContainer(container);\n</code></pre></li> <li>Remove     <pre><code>cell.destroyContainer();\n</code></pre></li> </ul>"},{"location":"gridtable/#properties","title":"Properties","text":"<pre><code>var cellIndex = cell.index;\n</code></pre>"},{"location":"group/","title":"Group","text":""},{"location":"group/#introduction","title":"Introduction","text":"<p>Objects pool, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"group/#usage","title":"Usage","text":""},{"location":"group/#add-group-object","title":"Add group object","text":"<pre><code>var group = scene.add.group(config);\n// var group = scene.add.group(gameObjects, config);  // Add game objects into group\n</code></pre> <ul> <li><code>config</code> <pre><code>{\nclassType: Phaser.GameObjects.Sprite,\ndefaultKey: null,\ndefaultFrame: null,\nactive: true,\nmaxSize: -1,\nrunChildUpdate: false,\ncreateCallback: null,\nremoveCallback: null,\ncreateMultipleCallback: null\n}\n</code></pre><ul> <li><code>classType</code> :<ul> <li>Sprite : <code>Phaser.GameObjects.Sprite</code></li> <li>Image : <code>Phaser.GameObjects.Image</code></li> </ul> </li> <li><code>runChildUpdate</code> : Set <code>true</code> to run <code>gameObject.update()</code> every tick.</li> <li><code>createCallback</code> : A function to be called when adding or creating group members.     <pre><code>var callback = function(gameObject) {\n}\n</code></pre></li> <li><code>removeCallback</code> : A function to be called when removing group members.     <pre><code>var callback = function(gameObject) {\n}\n</code></pre></li> <li><code>createMultipleCallback</code> : A function to be called when creating several group members at once.     <pre><code>var callback = function(gameObjects) {\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"group/#add-game-object","title":"Add game object","text":"<pre><code>group.add(gameObject);\n// group.add(gameObject, true);  // add this game object to display and update list of scene\n</code></pre> <pre><code>group.addMultiple(gameObjects);   // array of game objects\n// group.addMultiple(gameObjects, true);\n</code></pre> <ul> <li>Game object will only be added once.</li> <li>Game object will be removed automatically when destroyed.</li> </ul>"},{"location":"group/#remove-game-object","title":"Remove game object","text":"<pre><code>group.remove(gameObject);\n// group.remove(gameObject, true);  // also remove this game object from display and update list of scene\n</code></pre> <p>Remove all game objects</p> <pre><code>group.clear();\n// group.clear(removeFromScene, destroyChild);\n</code></pre>"},{"location":"group/#get-game-objects","title":"Get game objects","text":"<ul> <li>Get all game objects.     <pre><code>var gameObjects = group.getChildren();  // array of game objects\n</code></pre></li> <li>Get all matching game objects     <pre><code>var gameObjects = group.getMatching(property, value);\n// var gameObjects = group.getMatching(property, value, startIndex, endIndex);\n</code></pre></li> <li>Amount of game objects.     <pre><code>var len = group.getLength();\n</code></pre></li> <li>Group is full. Maximun size is set in <code>maxSize</code>.     <pre><code>var isFull = group.isFull();\n</code></pre></li> <li>Game object is in group.     <pre><code>var isInGroup = group.contains(child);\n</code></pre></li> </ul>"},{"location":"group/#group-actions","title":"Group actions","text":""},{"location":"group/#property","title":"Property","text":"<ul> <li>Set property     <pre><code>group.propertyValueSet(key, value);\n// group.propertyValueSet(key, value, step, index, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>1</code> : From beginning to end </li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> <li>Increase property     <pre><code>group.propertyValueInc(key, value);\n// group.propertyValueInc(key, value, step, index, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>1</code> : From beginning to end </li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#position","title":"Position","text":"<ul> <li>Set Position     <pre><code>group.setX(value);\n// group.setX(value, step);\ngroup.setX(value);\n// group.setY(value, step);\ngroup.setXY(x, y);\n// group.setXY(x, y, stepX, stepY);\n</code></pre></li> <li>Increase Position     <pre><code>group.incX(value);\n// group.incX(value, step);\ngroup.incY(value);\n// group.incY(value, step);\ngroup.incXY(x, y);\n// group.incXY(x, y, stepX, stepY);\n</code></pre></li> <li>Shift position     <pre><code>group.shiftPosition(x, y);\n// group.shiftPosition(x, y, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>0</code> : First to last</li> <li><code>1</code> : Last to first</li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#angle","title":"Angle","text":"<ul> <li>Set angle     <pre><code>group.angle(value);\n// group.angle(value, step);\n</code></pre> <pre><code>group.rotate(value);\n// group.rotate(value, step);\n</code></pre></li> <li>Rotate around     <pre><code>group.rotateAround(point, angle);\n</code></pre> <pre><code>group.rotateAroundDistance(point, angle, distance);\n</code></pre></li> </ul>"},{"location":"group/#visible","title":"Visible","text":"<ul> <li>Set visible     <pre><code>group.setVisible(value);\n// group.setVisible(value, index, direction);\n</code></pre><ul> <li><code>index</code> : An optional offset to start searching from within the items array.</li> <li><code>direction</code> : The direction to iterate through the array.<ul> <li><code>1</code> : From beginning to end</li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> <li>Toggle visible     <pre><code>group.toggleVisible();\n</code></pre></li> </ul>"},{"location":"group/#alpha","title":"Alpha","text":"<ul> <li>Set alpha     <pre><code>group.setAlpha(value);\n// group.setAlpha(value, step);\n</code></pre></li> </ul>"},{"location":"group/#tint","title":"Tint","text":"<ul> <li>Set tint     <pre><code>group.setTint(value);\n// group.setTint(topLeft, topRight, bottomLeft, bottomRight);\n</code></pre></li> </ul>"},{"location":"group/#blend-mode","title":"Blend mode","text":"<ul> <li>Set blend mode <pre><code>group.setBlendMode(value);\n</code></pre></li> </ul>"},{"location":"group/#scale","title":"Scale","text":"<ul> <li>Set scale     <pre><code>group.scaleX(value);\n// group.scaleX(value, step);\ngroup.scaleY(value);\n// group.scaleY(value, step);\ngroup.scaleXY(scaleX, scaleY);\n// group.scaleXY(scaleX, scaleY, stepX, stepY);\n</code></pre></li> </ul>"},{"location":"group/#origin","title":"Origin","text":"<ul> <li>Set origin     <pre><code>group.setOrigin(originX, originY);\n// group.setOrigin(originX, originY, stepX, stepY);\n</code></pre></li> </ul>"},{"location":"group/#depth","title":"Depth","text":"<ul> <li>Set depth     <pre><code>group.setDepth(value, step);\n</code></pre></li> </ul>"},{"location":"group/#animation","title":"Animation","text":"<ul> <li>Play animation     <pre><code>group.playAnimation(key, startFrame);\n</code></pre></li> </ul>"},{"location":"group/#hit-area","title":"Hit area","text":"<ul> <li>Set hit-area     <pre><code>group.setHitArea();\n// group.setHitArea(hitArea, hitAreaCallback);\n</code></pre></li> </ul>"},{"location":"group/#shuffle","title":"Shuffle","text":"<ul> <li>Shuffle array     <pre><code>group.shuffle();\n</code></pre></li> </ul>"},{"location":"group/#activeinactive-game-objects","title":"Active/inactive game objects","text":"<ul> <li>Set inactive     <pre><code>group.kill(gameObject);         // gameObject.setActive(false)\ngroup.killAndHide(gameObject);  // gameObject.setActive(false).setVisible(false)\n</code></pre></li> <li>Amount of active game objects     <pre><code>var activeCount = group.countActive();\n</code></pre>     or     <pre><code>var activeCount = group.getTotalUsed();\n</code></pre></li> <li>Amount of active game objects     <pre><code>var inactiveCount = group.countActive(false);\n</code></pre></li> <li>Amount of free (maxSize - activeCount) game objects     <pre><code>var freeCount = group.getTotalFree();  // group.maxSize - group.getTotalUsed()\n</code></pre></li> <li>Get first active/inactive game object,<ul> <li>Return <code>null</code> if no game object picked.     <pre><code>var gameObject = group.getFirst(active);  // active = true/false\nvar gameObject = group.getFirstAlive(); // Equal to group.getFirst(true, ...)\nvar gameObject = group.getFirstDead(); // Equal to group.getFirst(false, ...)\n</code></pre></li> <li>Create one if no game object picked.     <pre><code>var gameObject = group.getFirst(active, true, x, y, key, frame, visible);  // active = true/false\nvar gameObject = group.getFirstAlive(true, x, y, key, frame, visible); // Equal to group.getFirst(true, ...)\nvar gameObject = group.getFirstDead(true, x, y, key, frame, visible); // Equal to group.getFirst(false, ...)\nvar gameObject = group.get(x, y, key, frame, visible); // Equal to group.getFirst(false, true, ...)\n</code></pre><ul> <li>Use (<code>x</code>, <code>y</code>, <code>key</code>, <code>frame</code>) to create Image/Sprite game object.     <pre><code>var newGameObject = new GameObjectClass(x, y, key, frame);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#create-game-objects","title":"Create game objects","text":"<pre><code>var gameObjects = group.createFromConfig(config);\nvar gameObjects = group.createMultiple(config);    // config in array\n</code></pre> <ul> <li><code>config</code> <pre><code>{\nclassType: this.classType,\nkey: undefined,             // Required\nframe: null,\nvisible: true,\nactive: true,\nrepeat: 0,                  // Create (1 + repeat) game objects\ncreateCallback: undefined,  // Override this.createCallback if not undefined\n\n// Position\nsetXY: {\nx:0,\ny:0,\nstepX:0,\nstepY:0\n},\n// Actions.SetXY(gameObjects, x, y, stepX, stepY)\ngridAlign: false,\n// {\n//     width: -1,\n//     height: -1,\n//     cellWidth: 1,\n//     cellHeight: 1,\n//     position: Phaser.Display.Align.TOP_LEFT,\n//     x: 0,\n//     y: 0\n// }\n// Actions.GridAlign(gameObjects, gridAlign)\n\n// Angle\nsetRotation: {\nvalue: 0,\nstep:\n},\n// Actions.SetRotation(gameObjects, value, step)\n\n// Scale\nsetScale: {\nx:0,\ny:0,\nstepX:0,\nstepY:0\n},\n// Actions.SetScale(gameObjects, x, y, stepX, stepY)\n\n// Alpha\nsetAlpha: {\nvalue: 0,\nstep:\n},\n// Actions.SetAlpha(gameObjects, value, step)\n\nsetOrigin: {\nx:0,\ny:0,\nstepX:0, stepY:0\n},\n\n// Input\nhitArea: null,\nhitAreaCallback: null,\n// Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback)\n}\n</code></pre><ul> <li><code>classType</code> :<ul> <li>Sprite: <code>Phaser.GameObjects.Sprite</code></li> <li>Image: <code>Phaser.GameObjects.Image</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#destroy","title":"Destroy","text":"<ul> <li>Destroy group only     <pre><code>group.destroy();\n</code></pre></li> <li>Destroy group and children     <pre><code>group.destroy(true);\n</code></pre></li> </ul>"},{"location":"groupactions/","title":"Group actions","text":""},{"location":"groupactions/#introduction","title":"Introduction","text":"<p>Set properties of game objects, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"groupactions/#usage","title":"Usage","text":""},{"location":"groupactions/#call-function","title":"Call function","text":"<pre><code>Phaser.Actions.Call(gameObjects, function(gameObject) {\n\n}, scope);\n</code></pre>"},{"location":"groupactions/#set-any-property","title":"Set any property","text":"<pre><code>Phaser.Actions.PropertyValueSet(gameObjects, key, value, step, index, direction);\n</code></pre> <ul> <li><code>gameObjects</code> : An array of game objects.</li> <li><code>key</code> : The property to be updated.</li> <li><code>value</code> : The amount to be added to the property.</li> <li><code>step</code> : This is added to the <code>value</code> amount, multiplied by the iteration counter.</li> <li><code>index</code> : An optional offset to start searching from within the items array.</li> <li><code>direction</code> :<ul> <li><code>1</code> : from beginning to end.</li> <li><code>-1</code>: from end to beginning.</li> </ul> </li> </ul> <pre><code>Phaser.Actions.PropertyValueInc(gameObjects, key, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SmootherStep(gameObjects, key, min, max, inc));\n</code></pre> <pre><code>Phaser.Actions.SmoothStep(gameObjects, key, min, max, inc));\n</code></pre> <pre><code>Phaser.Actions.Spread(gameObjects, key, min, max, inc));\n</code></pre>"},{"location":"groupactions/#position","title":"Position","text":"<pre><code>Phaser.Actions.SetX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#shift-position","title":"Shift position","text":"<p>Set the position of first game object to (x, y), others to the position of previous game object.</p> <pre><code>Phaser.Actions.ShiftPosition(gameObjects, x, y, direction, output);\n</code></pre>"},{"location":"groupactions/#position-on-shape","title":"Position on shape","text":""},{"location":"groupactions/#grid-align","title":"Grid align","text":"<pre><code>Phaser.Actions.GridAlign(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\nposition: Phaser.Display.Align.TOP_LEFT,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> </li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"groupactions/#line","title":"Line","text":"<p>Line :</p> <pre><code>var line = new Phaser.Geom.Line(x1, y1, x2, y2);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnLine(gameObjects, line);\n</code></pre> <pre><code>Phaser.Actions.RandomLine(gameObjects, line);\n</code></pre>"},{"location":"groupactions/#circle","title":"Circle","text":"<p>Circle :</p> <pre><code>var circle = new Phaser.Geom.Circle(x, y, radius);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnCircle(gameObjects, circle, startAngle, endAngle);\n</code></pre> <pre><code>Phaser.Actions.RandomCircle(gameObjects, circle);\n</code></pre>"},{"location":"groupactions/#ellipse","title":"Ellipse","text":"<p>Ellipse :</p> <pre><code>var ellipse = new Phaser.Geom.Ellipse(x, y, width, height);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnEllipse(gameObjects, ellipse, startAngle, endAngle);\n</code></pre>"},{"location":"groupactions/#triangle","title":"Triangle","text":"<p>Triangle :</p> <pre><code>var triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnTriangle(gameObjects, triangle, stepRate);\n</code></pre> <pre><code>Phaser.Actions.RandomTriangle(gameObjects, triangle);\n</code></pre>"},{"location":"groupactions/#rectangle","title":"Rectangle","text":"<p>Rectangle :</p> <pre><code>var rect = new Phaser.Geom.Rectangle(x, y, width, height);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnRectangle(gameObjects, rect, shift;\n</code></pre> <pre><code>Phaser.Actions.RandomRectangle(gameObjects, rect);\n</code></pre> <pre><code>Phaser.Actions.WrapInRectangle(gameObjects, rect, padding);\n</code></pre>"},{"location":"groupactions/#angle","title":"Angle","text":"<pre><code>Phaser.Actions.Angle(gameObjects, value, step, index, direction);\n// value: angle in radians\n</code></pre> <pre><code>Phaser.Actions.Rotate(gameObjects, value, step, index, direction);\n// value: angle in degree\n</code></pre> <pre><code>Phaser.Actions.RotateAround(gameObjects, point, angle);\n// point: {x, y}, angle: angle in radians\n</code></pre> <pre><code>Phaser.Actions.RotateAroundDistance(gameObjects, point, angle, distance);\n// point: {x, y}, angle: angle in radians\n</code></pre>"},{"location":"groupactions/#visible","title":"Visible","text":"<pre><code>Phaser.Actions.SetVisible(gameObjects, value, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ToggleVisible(gameObjects);\n</code></pre>"},{"location":"groupactions/#alpha","title":"Alpha","text":"<pre><code>Phaser.Actions.SetAlpha(gameObjects, value, step, index, direction);\n</code></pre>"},{"location":"groupactions/#tint","title":"Tint","text":"<pre><code>Phaser.Actions.setTint(gameObjects, value);\n//Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre>"},{"location":"groupactions/#origin","title":"Origin","text":"<pre><code>Phaser.Actions.SetOrigin(gameObjects, originX, originY, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#scale","title":"Scale","text":"<pre><code>Phaser.Actions.ScaleX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ScaleY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ScaleXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#scroll-factor","title":"Scroll factor","text":"<pre><code>Phaser.Actions.SetScrollFactorX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetScrollFactorY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetScrollFactor(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#depth","title":"Depth","text":"<pre><code>Phaser.Actions.SetDepth(gameObjects, value, step, index, direction);\n</code></pre>"},{"location":"groupactions/#hit-area","title":"Hit area","text":"<pre><code>Phaser.Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback);\n</code></pre>"},{"location":"groupactions/#blend-mode","title":"Blend mode","text":"<pre><code>Phaser.Actions.SetBlendMode(gameObjects, blendMode, index, direction);\n</code></pre> <ul> <li><code>blendMode</code> : Blend mode</li> </ul>"},{"location":"groupactions/#play-animation","title":"Play animation","text":"<pre><code>Phaser.Actions.PlayAnimation(gameObjects, key, ignoreIfPlaying);\n</code></pre>"},{"location":"groupactions/#shuffle","title":"Shuffle","text":"<pre><code>Phaser.Actions.Shuffle(gameObjects);\n</code></pre>"},{"location":"handlebars/","title":"Handlebars","text":""},{"location":"handlebars/#introduction","title":"Introduction","text":"<p>Format string with variables, largely compatible with Mustache templates. Reference</p>"},{"location":"handlebars/#usage","title":"Usage","text":"<pre><code>var template = 'hello, {{name}}';\nvar view = {\nname: 'rex'\n};\nvar result = Mustache.render(template, view);\n</code></pre>"},{"location":"handlebars/#pre-compile","title":"Pre-compile","text":"<pre><code>const template = Handlebars.compile(\"{{foo}}\");\ntemplate({}, {\n// allowProtoPropertiesByDefault: false,\n// allowProtoMethodsByDefault: false\n});\n</code></pre>"},{"location":"hiddeninputtext/","title":"Hidden edit","text":""},{"location":"hiddeninputtext/#introduction","title":"Introduction","text":"<p>An invisible Input DOM element to  receive character input and display on text, bbocodetext, or tagtext.</p> <p>Inspirited from CanvasInput.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"hiddeninputtext/#live-demos","title":"Live demos","text":"<ul> <li>With Text</li> <li>With BBCodeText</li> <li>With rexui-Label</li> <li>With bitmaptext</li> <li>Number input</li> </ul>"},{"location":"hiddeninputtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"hiddeninputtext/#install-plugin","title":"Install plugin","text":""},{"location":"hiddeninputtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhiddeninputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhiddeninputtextplugin.min.js', true);\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = scene.plugins.get('rexhiddeninputtextplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HiddenInputTextPlugin from 'phaser3-rex-plugins/plugins/hiddeninputtext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHiddenInputTextPlugin',\nplugin: HiddenInputTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import HiddenInputText from 'phaser3-rex-plugins/plugins/hiddeninputtext.js';\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = new HiddenInputText(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#add-input-text-object","title":"Add input text object","text":"<pre><code>var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, {\n// inputType: 'text',    // 'text'|'password'|'textarea'|...\n// type: 'text',    // 'text'|'password'|'textarea'|...\n\ncursor: '|',\ncursorFlashDuration: 1000,\n\n// enterClose: true,\n\n// onOpen: function (textObject, hiddenInputText) {   // Or onFocus:\n// },\n// onClose: function (textObject, hiddenInputText) {  // Or onBlur:\n// },\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },\n});\n</code></pre> <ul> <li><code>textGameObject</code> : </li> <li><code>inputType</code>, or <code>type</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, ...</li> </ul> </li> <li><code>cursor</code> : Cursor character used in default update text callback.<ul> <li><code>null</code>, or <code>''</code> : Don't insert cursor character.</li> </ul> </li> <li><code>cursorFlashDuration</code> : Display cursor character or a space string to create a flash cursor.</li> <li><code>enterClose</code> : <ul> <li><code>true</code> : Close input text when enter-key was pressed. Default value is <code>true</code> if <code>inputType</code> is not <code>'textarea'</code>.</li> <li><code>false</code> : If <code>inputType</code> is set to <code>'textarea'</code>, default value will be <code>false</code>.</li> </ul> </li> <li><code>onOpen</code>, or <code>onFocuse</code> : Callback invoked when focus on this hidden input text.     <pre><code>function (textObject, hiddenInputText) {\n}\n</code></pre></li> <li><code>onClose</code>, or <code>onBlur</code> : Callback invoked when blur.     <pre><code>function (textObject, hiddenInputText) {\n}\n</code></pre></li> <li><code>onUpdate</code> : <ul> <li>A callback invoked in each tick of editing.     <pre><code>function (text, textObject, hiddenInputText) {\n// return text;\n}\n</code></pre><ul> <li>Can return a new string for text game object displaying.</li> </ul> </li> <li><code>'number'</code> : Only output number string.</li> </ul> </li> </ul> <p>Note</p> <p>This hiddenInputText will be destroyed when <code>textGameObject</code> is destroyed.</p>"},{"location":"hiddeninputtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyHiddenText extends HiddenInputText {\nconstructor(textGameObject, config) {\nsuper(textGameObject, config) {\n// ...            \n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var hiddenInputText = new MyHiddenText(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#cursor","title":"Cursor","text":"<ul> <li>Set     <pre><code>hiddenInputText.setCursor(s);\n</code></pre></li> <li>Get     <pre><code>var cursor = hiddenInputText.cursor;\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#open-editor","title":"Open editor","text":"<pre><code>hiddenInputText.open();\n</code></pre>"},{"location":"hiddeninputtext/#close-editor","title":"Close editor","text":"<pre><code>hiddenInputText.close();\n</code></pre>"},{"location":"hiddeninputtext/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = hiddenInputText.isOpened;\n</code></pre>"},{"location":"hiddeninputtext/#select-text","title":"Select text","text":"<p>This feature does not support.</p>"},{"location":"hiddeninputtext/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"hiddeninputtext/#event","title":"Event","text":"<ul> <li>On text change     <pre><code>hiddenInputText.on('textchange', function(text, textGameObject){\n})\n</code></pre></li> <li>Not a number input     <pre><code>hiddenInputText.on('nan', function(text){\n\n})\n</code></pre></li> </ul>"},{"location":"i18next/","title":"i18next","text":""},{"location":"i18next/#introduction","title":"Introduction","text":"<p>i18next is a very popular internationalization framework for browser or any other javascript environment.</p> <ul> <li>Author: i18next</li> </ul>"},{"location":"i18next/#usage","title":"Usage","text":""},{"location":"i18next/#import-class","title":"Import class","text":"<ul> <li>Install i18next, i18next-http-backend from npm     <pre><code>npm i i18next\nnpm i i18next-http-backend\n</code></pre></li> <li>Import i18next     <pre><code>import i18next from 'i18next';\nimport Backend from 'i18next-http-backend';\n</code></pre></li> <li>Initialize     <pre><code>i18next.use(Backend).init(config);\n</code></pre></li> <li>Translation     <pre><code>var result = i18next.t(key);\n</code></pre></li> </ul>"},{"location":"i18next/#initialize","title":"Initialize","text":"<pre><code>i18next\n.use(Backend)\n.init({\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n})\n</code></pre> <ul> <li><code>lng</code> : Language to use. Will fallback to <code>'dev'</code>.</li> <li><code>ns</code> : String or array of namespaces to load. Default value is <code>'translation'</code>.</li> <li><code>debug</code> : Logs info level to console output. Helps finding issues with loading not working. Default value is <code>false</code>.</li> <li><code>resources</code> : Resources to initialize with.</li> <li><code>backend.loadPath</code> : Path where resources get loaded from, or a function returning a path.     <pre><code>function(lngs, namespaces) { return customPath; }\n</code></pre></li> <li><code>backend.parse</code> : Parse data after it has been fetched. Optional.     <pre><code>function(data) { return JSON.parse(data); }\n</code></pre></li> </ul> <p>See also Configuration Options, and Backend Options</p>"},{"location":"i18next/#change-language","title":"Change language","text":"<pre><code>i18next.changeLanguage(\"en\");\n</code></pre> <p>Fire event <code>'languageChanged'</code>.</p>"},{"location":"i18next/#set-default-namespace","title":"Set default namespace","text":"<pre><code>i18next.setDefaultNamespace(namespace);\n</code></pre>"},{"location":"i18next/#translate","title":"Translate","text":"<pre><code>var result = i18next.t(key);\n// var result = i18next.t(key, interpolation);\n</code></pre>"},{"location":"i18next/#events","title":"Events","text":"<ul> <li>On language changed, triggered by <code>i18next.changeLanguage(lng)</code>.     <pre><code>i18next.on('languageChanged', function (lng) {\n});\n</code></pre></li> </ul>"},{"location":"image/","title":"Image","text":""},{"location":"image/#introduction","title":"Introduction","text":"<p>Display of static images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"image/#usage","title":"Usage","text":""},{"location":"image/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"image/#add-image-object","title":"Add image object","text":"<pre><code>var image = scene.add.image(x, y, key);\n// var image = scene.add.image(x, y, key, frame);\n</code></pre> <p>Add image from JSON</p> <pre><code>var image = scene.make.image({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// angle: 0,\n// alpha: 1,\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> : <ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends Phaser.GameObjects.Image {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"image/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"image/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"imagebox/","title":"Image box","text":""},{"location":"imagebox/#introduction","title":"Introduction","text":"<p>Keep aspect ratio of image game object when scale-down resizing.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"imagebox/#live-demos","title":"Live demos","text":"<ul> <li>Resize</li> </ul>"},{"location":"imagebox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"imagebox/#install-plugin","title":"Install plugin","text":""},{"location":"imagebox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('reximageboxplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageboxplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ImageBoxPlugin from 'phaser3-rex-plugins/plugins/imagebox-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexImageBoxPlugin',\nplugin: ImageBoxPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ImageBox from 'phaser3-rex-plugins/plugins/imagebox.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new ImageBox(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"imagebox/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, {\n// width: undefined,\n// height: undefined,\n\n// image: undefined\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Resize this game object.<ul> <li><code>undefined</code> : Use original size. Default behavior.</li> </ul> </li> <li><code>image</code> : Custom image game object instance.<ul> <li><code>undefined</code> : Use built-in image game object. Default behavior.</li> </ul> </li> </ul> <p>Add imagebox from JSON</p> <pre><code>var image = scene.make.rexImageBox({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// width: undefined,\n// height: undefined,\n\n// image: undefined\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"imagebox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImageBox extends ImageBox {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImageBox(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#resize","title":"Resize","text":"<pre><code>image.resize(width, height);\n</code></pre> <p>Note</p> <ul> <li>If new size is bigger than original size, uses original size. (i.e won't scale up)  </li> <li>If new size is smaller than original size, scales down and keeps aspect ratio.</li> </ul>"},{"location":"imagebox/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n</code></pre>"},{"location":"imagebox/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"imagebox/#clear-texture","title":"Clear texture","text":"<pre><code>image.setTexture();\n</code></pre> <p>Will set internal image game object to invisible.</p>"},{"location":"imagebox/#scale-image","title":"Scale image","text":"<pre><code>image.scaleImage();\n</code></pre> <p><code>image.resize(width, height)</code>, or <code>image.setTexture(key, frame)</code> will invoke this method internally.</p>"},{"location":"imagebox/#internal-image-game-object","title":"Internal image game object","text":"<pre><code>var internalImageGO = image.image;\n</code></pre>"},{"location":"imageuriloader/","title":"Image URI loader","text":""},{"location":"imageuriloader/#introduction","title":"Introduction","text":"<p>Load image by uri (base64 string) in preload stage.</p> <p>Built-in image loader dosen't support loading local image uri.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"imageuriloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"imageuriloader/#install-plugin","title":"Install plugin","text":""},{"location":"imageuriloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'reximageuriloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageuriloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// reximageuriloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('reximageuriloaderplugin').addToScene(this);\n\nthis.load.rexImageURI(key, uri);\n}\n}\n</code></pre></li> </ul>"},{"location":"imageuriloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ImageURILoaderPlugin from 'phaser3-rex-plugins/plugins/imageuriloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexImageURILoader',\nplugin: ImageURILoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexImageURI(key, uri);\n</code></pre></li> </ul>"},{"location":"imageuriloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ImageURILoader from 'phaser3-rex-plugins/plugins/imageuriloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>ImageURILoader.call(scene.load, key, uri);\n</code></pre></li> </ul>"},{"location":"imageuriloader/#load-image","title":"Load image","text":"<p>In preload stage:</p> <pre><code>this.load.rexImageURI(key, uri);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>uri</code> : URI, a base64 string.</li> </ul>"},{"location":"imageuriloader/#load-sprite-sheet","title":"Load sprite sheet","text":"<p>In preload stage:</p> <pre><code>this.load.rexImageURI(key, uri, frameConfig);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>uri</code> : URI, a base64 string.</li> <li><code>frameConfig</code> : <ul> <li><code>frameWidth</code> : The width of the frame in pixels.</li> <li><code>frameHeight</code> : The height of the frame in pixels. Uses the <code>frameWidth</code> value if not provided.</li> <li><code>startFrame</code> : The first frame to start parsing from.</li> <li><code>endFrame</code> : The frame to stop parsing at. If not provided it will calculate the value based on the image and frame dimensions.</li> <li><code>margin</code> : The margin in the image. This is the space around the edge of the frames. </li> <li><code>spacing</code> : The spacing between each frame in the image.</li> </ul> </li> </ul>"},{"location":"input/","title":"Input","text":""},{"location":"input/#introduction","title":"Introduction","text":"<p>Input system of each scene, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"input/#usage","title":"Usage","text":""},{"location":"input/#enabledisable","title":"Enable/disable","text":"<pre><code>scene.input.enabled = enabled; // enabled: true/false\n</code></pre>"},{"location":"inputtext/","title":"Input text","text":""},{"location":"inputtext/#introduction","title":"Introduction","text":"<p>Input DOM element.</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"inputtext/#live-demos","title":"Live demos","text":"<ul> <li>Input text</li> <li>Number input</li> <li>In fullscreen</li> </ul>"},{"location":"inputtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"inputtext/#install-plugin","title":"Install plugin","text":""},{"location":"inputtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinputtextplugin.min.js', true);\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InputTextPlugin from 'phaser3-rex-plugins/plugins/inputtext-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInputTextPlugin',\nplugin: InputTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import InputText from 'phaser3-rex-plugins/plugins/inputtext.js';\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = new InputText(scene, x, y, width, height, config);\nscene.add.existing(inputText);\n</code></pre></li> </ul>"},{"location":"inputtext/#add-input-text-object","title":"Add input text object","text":"<pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n// var inputText = scene.add.rexInputText(x, y, config);\n// var inputText = scene.add.rexInputText(config);\n</code></pre> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ntype: 'text',    // 'text'|'password'|'textarea'|'number'|'color'|...\n\n// Element properties\nid: undefined,\ntext: undefined,\nmaxLength: undefined,\nminLength: undefined,    placeholder: undefined,\ntooltip: undefined,\nreadOnly: false,\nspellCheck: false,\nautoComplete: 'off',\n\n// Style properties\nalign: undefined,\npaddingLeft: undefined,\npaddingRight: undefined,\npaddingTop: undefined,\npaddingBottom: undefined,\nfontFamily: undefined,\nfontSize: undefined,\ncolor: '#ffffff',\nborder: 0,\nbackgroundColor: 'transparent',\nborderColor: 'transparent',\noutline: 'none',\ndirection: 'ltr',\n\nselectAll: false\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li><code>type</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, <code>'number'</code>, <code>'color'</code>, ...</li> </ul> </li> <li>Element properties<ul> <li><code>id</code> : <code>id</code> element property.</li> <li><code>text</code> : <code>value</code> element property.</li> <li><code>maxLength</code> : <code>maxLength</code> element property.</li> <li><code>minLength</code> : <code>minLength</code> element property.</li> <li><code>placeholder</code> : <code>placeholder</code> element property.</li> <li><code>tooltip</code> : <code>title</code> element property.</li> <li><code>readOnly</code> : <code>readonly</code> element property.</li> <li><code>spellCheck</code> : <code>spellcheck</code> element property.</li> <li><code>autoComplete</code> : <code>autocomplete</code> element property.</li> </ul> </li> <li>Element style properties<ul> <li><code>align</code> : <code>text-align</code> style property.</li> <li><code>paddingLeft</code>, <code>paddingRight</code>, <code>paddingTop</code>, <code>paddingBottom</code> : <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code>, <code>padding-bottom</code> style property.</li> <li><code>fontFamily</code> : <code>font-family</code> style property.</li> <li><code>fontSize</code> : <code>font-size</code> style property.</li> <li><code>color</code> : <code>color</code> style property.</li> <li><code>backgroundColor</code> : <code>backgroundColor</code> style property.</li> <li><code>border</code>, <code>borderColor</code> : <code>border</code>, <code>borderColor</code> style property.</li> <li><code>outline</code> : <code>outline</code> style property.</li> <li><code>direction</code> : <code>direction</code> style property.</li> </ul> </li> <li><code>selectAll</code> : Set <code>true</code> to select all text.</li> </ul>"},{"location":"inputtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends InputText {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var inputText = new MyText(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#text","title":"Text","text":"<ul> <li>Get     <pre><code>var text = inputText.text;\n</code></pre></li> <li>Set     <pre><code>inputText.setText(text);\n// inputText.text = text;\n</code></pre></li> <li>Scroll to bottom     <pre><code>inputText.scrollToBottom();\n</code></pre></li> </ul>"},{"location":"inputtext/#style","title":"Style","text":"<ul> <li>Get     <pre><code>var value = inputText.getStyle(key);\n</code></pre></li> <li>Set     <pre><code>inputText.setStyle(key, value)\n</code></pre></li> </ul>"},{"location":"inputtext/#focus","title":"Focus","text":"<ul> <li>Focus     <pre><code>inputText.setFocus();\n</code></pre></li> <li>Blur     <pre><code>inputText.setBlur();\n</code></pre></li> <li>Is focused     <pre><code>var isFocused = inputText.isFocused;\n</code></pre></li> </ul>"},{"location":"inputtext/#font-color","title":"Font color","text":"<ul> <li>Get     <pre><code>var color = inputText.fontColor;\n// var color = inputText.node.style.color;\n</code></pre></li> <li>Set     <pre><code>inputText.fontColor = color;  // CSS color string\n// inputText.node.style.color = color;\n</code></pre>     or     <pre><code>inputText.setFontColor(color);  // CSS color string\n</code></pre></li> </ul>"},{"location":"inputtext/#max-length","title":"Max length","text":"<ul> <li>Get     <pre><code>var value = inputText.maxLength;\n</code></pre></li> <li>Set     <pre><code>inputText.maxLength = value;\n</code></pre>     or     <pre><code>inputText.setMaxLength(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#min-length","title":"Min length","text":"<ul> <li>Get     <pre><code>var value = inputText.minLength;\n</code></pre></li> <li>Set     <pre><code>inputText.minLength = value;\n</code></pre>     or     <pre><code>inputText.setMinLength(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#placeholder","title":"Placeholder","text":"<ul> <li>Get     <pre><code>var value = inputText.placeholder;\n</code></pre></li> <li>Set     <pre><code>inputText.placeholder = value;\n</code></pre>     or     <pre><code>inputText.setPlaceholder(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#tooltip","title":"Tooltip","text":"<ul> <li>Get     <pre><code>var value = inputText.tooltip;\n</code></pre></li> <li>Set     <pre><code>inputText.tooltip = value;\n</code></pre>     or     <pre><code>inputText.setTooltip(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#readonly","title":"Readonly","text":"<ul> <li>Get     <pre><code>var readOnly = inputText.readOnly;\n</code></pre></li> <li>Set     <pre><code>inputText.readOnly = value;\n</code></pre> <pre><code>inputText.setReadOnly();\n// inputText.setReadOnly(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#resize","title":"Resize","text":"<pre><code>inputText.resize(width, height);\n</code></pre>"},{"location":"inputtext/#select-text","title":"Select text","text":"<ul> <li>Select all text     <pre><code>inputText.selectText();\n// inputText.selectAll();\n</code></pre></li> <li>Select sub-string     <pre><code>inputText.selectText(selectionStart, selectionEnd);\n</code></pre></li> </ul>"},{"location":"inputtext/#cursor-position","title":"Cursor position","text":"<ul> <li>Get     <pre><code>var cursorPosition = inputText.cursorPosition;\n</code></pre><ul> <li>Equal to <code>inputText.selectionStart</code>.</li> </ul> </li> <li>Set     <pre><code>inputText.setCursorPosition(cursorPosition);\ninputText.cursorPosition = cursorPosition;\n</code></pre><ul> <li>Equal to <code>inputText.setSelectionRange(cursorPosition, cursorPosition)</code></li> </ul> </li> </ul>"},{"location":"inputtext/#events","title":"Events","text":"<ul> <li>On text changed     <pre><code>inputText.on('textchange', function(inputText, e){ }, scope);\n</code></pre></li> <li>On focus     <pre><code>inputText.on('focus', function(inputText, e){ }, scope);\n</code></pre></li> <li>On blur     <pre><code>inputText.on('blur', function(inputText, e){ }, scope);\n</code></pre></li> <li>On click, double click     <pre><code>inputText.on('click', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('dblclick', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Touch/mouse events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On keydown, keyup     <pre><code>inputText.on('keydown', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('keyup', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Keyboard events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On pointerdown, pointermove, pointerup     <pre><code>inputText.on('pointerdown', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('pointermove', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('pointerup', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Mouse/touch events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On select     <pre><code>inputText.on('select', function(inputText, e){ var selectedString = inputText.selectedText;\nvar selectionStart = inputText.selectionStart;\nvar selectionEnd = inputText.selectionEnd;\n}, scope);\n</code></pre></li> <li>On composition inpit     <pre><code>inputText.on('compositionStart', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('compositionEnd', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('compositionUpdate', function(inputText, e){ }, scope);\n</code></pre></li> </ul>"},{"location":"inputtext/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"inputtext/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"inputtext/#close-editing","title":"Close editing","text":"<ul> <li>Close editing (set blur) when pointerdown outside     <pre><code>scene.input.on('pointerdown', function () {\ninputText.setBlur();\n})\n</code></pre></li> <li>Close editing (set blur) when ENTER key press     <pre><code>inputText.on('keydown', function (inputText, e) {\nif ((inputText.inputType !== 'textarea') &amp;&amp; (e.key === 'Enter')) {\ninputText.setBlur();\n}\n})\n</code></pre><ul> <li><code>inputType</code> : <code>'text'</code>, <code>'textarea'</code>, ...</li> </ul> </li> </ul>"},{"location":"interception/","title":"Interception","text":""},{"location":"interception/#introduction","title":"Introduction","text":"<p>Predict the intersection position of two game objects with constant moving speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"interception/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"interception/#install-plugin","title":"Install plugin","text":""},{"location":"interception/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinterceptionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinterceptionplugin.min.js', true);\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = scene.plugins.get('rexinterceptionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InterceptionPlugin from 'phaser3-rex-plugins/plugins/interception-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInterception',\nplugin: InterceptionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = scene.plugins.get('rexInterception').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Interception from 'phaser3-rex-plugins/plugins/interception.js';\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = new Interception(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#create-instance","title":"Create instance","text":"<pre><code>var interception = scene.plugins.get('rexInterception').add(gameObject, {\n// target: undefined,\n// enable: true\n});\n</code></pre> <ul> <li><code>target</code> : Game object.</li> <li><code>enable</code> : Set <code>true</code> to enable predicting.</li> </ul>"},{"location":"interception/#target","title":"Target","text":"<ul> <li>Set     <pre><code>interception.setTarget(gameObject);\n</code></pre>     or     <pre><code>interception.target = gameObject;\n</code></pre></li> <li>Disalbe     <pre><code>interception.setTarget(undefined);\n</code></pre>     or     <pre><code>interception.target = undefined;\n</code></pre></li> <li>Get     <pre><code>var target = interception.target;\n</code></pre></li> </ul>"},{"location":"interception/#enable-predicting","title":"Enable predicting","text":"<ul> <li>Enable     <pre><code>interception.setEnable();\n</code></pre></li> <li>Disable, uses target position as predicted position     <pre><code>interception.setEnable(false);\n</code></pre></li> </ul>"},{"location":"interception/#predicted-result","title":"Predicted result","text":"<ul> <li>Predicted position     <pre><code>var position = interception.predictedPosition; // {x, y}\n</code></pre></li> <li>Angle to predicted position     <pre><code>var rotation = interception.predictedAngle; // Angle in radian\n</code></pre></li> </ul>"},{"location":"interpolation/","title":"Interpolation","text":""},{"location":"interpolation/#introduction","title":"Introduction","text":"<p>Calculates interpolation value over t (0~1), built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"interpolation/#usage","title":"Usage","text":"<ul> <li>Linear interpolation (lerp) two values     <pre><code>var result = Phaser.Math.Linear(p0, p1, t);\n</code></pre></li> <li>Linear interpolation (lerp) two Vectors     <pre><code>var result = Phaser.Math.LinearXY(vector0, vector1, t);\n</code></pre><ul> <li><code>vector0</code>, <code>vector1</code> : Phaser.Math.Vector2</li> </ul> </li> <li>Smooth interpolation     <pre><code>var result = Phaser.Math.Interpolation.SmoothStep(t, min, max);\n</code></pre><ul> <li><code>t</code> : 0~1</li> </ul> </li> <li>Smoother interpolation     <pre><code>var result = Phaser.Math.Interpolation.SmootherStep(t, min, max);\n</code></pre><ul> <li><code>t</code> : 0~1</li> </ul> </li> <li>Quadratic bezier interpolation     <pre><code>var result = Phaser.Math.Interpolation.QuadraticBezier(t, p0, p1, p2);\n</code></pre><ul> <li><code>t</code> : 0~1</li> <li><code>p0</code> : The start point.</li> <li><code>p1</code> : The control point.</li> <li><code>p2</code> : The end point.</li> </ul> </li> <li>Cubic bezier interpolation     <pre><code>var result = Phaser.Math.Interpolation.CubicBezier(t, p0, p1, p2, p3);\n</code></pre><ul> <li><code>t</code> : 0~1</li> <li><code>p0</code> : The start point.</li> <li><code>p1</code> : The first control point.</li> <li><code>p2</code> : The second control point.</li> <li><code>p3</code> : The end point.</li> </ul> </li> </ul>"},{"location":"intouching/","title":"In touching","text":""},{"location":"intouching/#introduction","title":"Introduction","text":"<p>Fires 'intouch' event every tick when pressing on a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"intouching/#live-demos","title":"Live demos","text":"<ul> <li>Cooldown</li> <li>Is in touching</li> </ul>"},{"location":"intouching/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"intouching/#install-plugin","title":"Install plugin","text":""},{"location":"intouching/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexintouchingplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexintouchingplugin.min.js', true);\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = scene.plugins.get('rexintouchingplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InTouchingPlugin from 'phaser3-rex-plugins/plugins/intouching-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInTouchingn',\nplugin: InTouchingPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = scene.plugins.get('rexInTouchingn').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import InTouching from 'phaser3-rex-plugins/plugins/intouching.js';\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = new InTouching(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#create-instance","title":"Create instance","text":"<pre><code>var intouching = scene.plugins.get('rexInTouching').add(gameObject, {\n// enable: true,\n// cooldown: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Can touch.</li> <li><code>cooldown</code> : Fire 'intouch' event every tick, or periodically.<ul> <li><code>undefined</code> : Fire 'intouch' event every tick.</li> </ul> </li> </ul>"},{"location":"intouching/#events","title":"Events","text":"<ul> <li>In-touching     <pre><code>intouching.on('intouch', function (intouching, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Touching-start     <pre><code>intouching.on('touchstart', function (intouching, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Touching-end     <pre><code>intouching.on('touchend', function (intouching, gameObject) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"intouching/#in-touching","title":"In touching","text":"<pre><code>var isInTouching = intouching.isInTouching;\n</code></pre>"},{"location":"intouching/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = intouching.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>intouching.setEnable(enabled);  // enabled: true, or false\n// intouching.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>intouching.toggleEnable();\n</code></pre></li> </ul>"},{"location":"intouching/#cooldown","title":"Cooldown","text":"<ul> <li>Get     <pre><code>var cooldownTime = intouching.cooldownTime;\n</code></pre></li> <li>Set     <pre><code>intouching.setCooldown(time);\n</code></pre>     or     <pre><code>intouching.cooldownTime = cooldownTime;\n</code></pre></li> </ul>"},{"location":"keyboardcombo/","title":"Combo events","text":""},{"location":"keyboardcombo/#introduction","title":"Introduction","text":"<p>Combo-keys events.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"keyboardcombo/#usage","title":"Usage","text":"<ol> <li>Create combo     <pre><code>var keyCombo = scene.input.keyboard.createCombo(keys, {\n// resetOnWrongKey: true,\n// maxKeyDelay: 0,\n// resetOnMatch: false,\n// deleteOnMatch: false,\n});\n</code></pre><ul> <li><code>keys</code> : Array of keyCodes<ul> <li>In strings. ex: <code>['up', 'up', 'down', 'down']</code>, or <code>['UP', 'UP', 'DOWN', 'DOWN']</code></li> <li>In key map. ex: <code>[Phaser.Input.Keyboard.KeyCodes.UP, ... ]</code></li> <li>In numbers. ex: <code>[38, 38, 40, 40]</code></li> </ul> </li> <li><code>resetOnWrongKey</code> : Set <code>true</code> to reset the combo when press the wrong key.</li> <li><code>maxKeyDelay</code> : The max delay in ms between each key press. Set <code>0</code> to disable this feature.</li> <li><code>resetOnMatch</code> : Set <code>true</code> to reset the combo when previously matched.</li> <li><code>deleteOnMatch</code> : Set <code>true</code> to delete this combo when matched.</li> </ul> </li> <li>Listen combo matching event     <pre><code>scene.input.keyboard.on('keycombomatch', function (keyCombo, keyboardEvent) { /* ... */ });\n</code></pre></li> </ol>"},{"location":"keyboardevents/","title":"Keyboard events","text":""},{"location":"keyboardevents/#introduction","title":"Introduction","text":"<p>Built-in keyboard events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"keyboardevents/#usage","title":"Usage","text":""},{"location":"keyboardevents/#quick-start","title":"Quick start","text":"<ul> <li>Is key-down/is key-up     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nvar isDown = keyObj.isDown;\nvar isUp = keyObj.isUp;\n</code></pre></li> <li>Key is down after a duration     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nvar isDown = scene.input.keyboard.checkDown(keyObj, duration);\n</code></pre></li> <li>On key-down/on key-up     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nkeyObj.on('down', function(event) { /* ... */ });\nkeyObj.on('up', function(event) { /* ... */ });\n</code></pre>     or     <pre><code>scene.input.keyboard.on('keydown-' + 'W', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup-' + 'W', function (event) { /* ... */ });\n</code></pre></li> <li>Any key-down/any key-up     <pre><code>scene.input.keyboard.on('keydown', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event</code> : KeyboardEvent<ul> <li><code>event.code</code> : 'Key' + 'W'</li> </ul> </li> </ul> </li> </ul>"},{"location":"keyboardevents/#key-object","title":"Key object","text":"<ul> <li>Get key object     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // see `Key map` section\n// var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);\n</code></pre>     or     <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre><ul> <li><code>enableCapture</code> : Automatically call <code>preventDefault</code> on the native DOM browser event for the key codes being added.</li> <li><code>emitOnRepeat</code> : Controls if the Key will continuously emit a 'down' event while being held down (true), or emit the event just once (false, the default).</li> </ul> </li> <li>Get key objects     <pre><code>var keys = scene.input.keyboard.addKeys('W,S,A,D');  // keys.W, keys.S, keys.A, keys.D\n// var keys = scene.input.keyboard.addKeys('W,S,A,D', enableCapture, emitOnRepeat);\n</code></pre>     or     <pre><code>var keys = scene.input.keyboard.addKeys({\nup: 'up',\ndown: 'down',\nleft: 'left',\nright: 'right'\n});  // keys.up, keys.down, keys.left, keys.right\n</code></pre></li> <li>Remove key object     <pre><code>scene.input.keyboard.removeKey('W');\n// scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W);\n// scene.input.keyboard.removeKey(key, destroy, removeCapture);\n</code></pre><ul> <li><code>destroy</code> : Call <code>Key.destroy</code> on each removed Key object</li> <li><code>removeCapture</code> : Remove all key captures for Key objects owened by this plugin?</li> </ul> </li> <li>Remove all key objects     <pre><code>scene.input.keyboard.removeAllKeys(true);\n// scene.input.keyboard.removeAllKeys(destroy, removeCapture);\n</code></pre><ul> <li><code>destroy</code> : Call <code>Key.destroy</code> on each removed Key object</li> <li><code>removeCapture</code> : Remove all key captures for Key objects owened by this plugin?</li> </ul> </li> <li>Key-down/key-up state     <pre><code>var isDown = keyObj.isDown;\nvar isUp = keyObj.isUp;\n</code></pre></li> <li>Duration of key-down     <pre><code>var duration = keyObj.getDuration(); // ms\n</code></pre></li> <li>Enable/disable     <pre><code>keyObj.enabled = enabled; // Set false to disable key event\n</code></pre></li> </ul>"},{"location":"keyboardevents/#key-object-of-cursorkeys","title":"Key object of cursorkeys","text":"<ol> <li>Get key state object     <pre><code>var cursorKeys = scene.input.keyboard.createCursorKeys();\n</code></pre></li> <li>Get key state     <pre><code>var isUpDown = cursorKeys.up.isDown;\nvar isDownDown = cursorKeys.down.isDown;\nvar isLeftDown = cursorKeys.left.isDown;\nvar isRightDown = cursorKeys.right.isDown;\nvar isSpaceDown = cursorKeys.space.isDown;\nvar isShiftDown = cursorKeys.shift.isDown;\n</code></pre></li> </ol>"},{"location":"keyboardevents/#order-of-key-downkey-up-events","title":"Order of key-down/key-up events","text":"<ol> <li>Key-down/key-up events of key object     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nkeyObj.on('down', function(event) { /* ... */ });\nkeyObj.on('up', function(event) { /* ... */ });\n</code></pre><ul> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.</li> </ul> </li> <li>On key-down/on key-up     <pre><code>scene.input.keyboard.on('keydown-' + 'W', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup-' + 'W', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.    </li> </ul> </li> <li>Any key-down/on key-up     <pre><code>scene.input.keyboard.on('keydown', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event.key</code> : <code>'a'</code></li> <li><code>event.keyCode</code> : <code>65</code></li> <li><code>event.code</code> : <code>'KeyA'</code></li> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.</li> </ul> </li> </ol>"},{"location":"keyboardevents/#destroy-key-object","title":"Destroy key object","text":"<pre><code>keyObj.destroy();\n</code></pre>"},{"location":"keyboardevents/#key-map","title":"Key map","text":"<ul> <li><code>A</code> ~ <code>Z</code></li> <li><code>F1</code> ~ <code>F12</code></li> <li><code>BACKSPACE</code></li> <li><code>TAB</code></li> <li><code>ENTER</code></li> <li><code>SHIFT</code></li> <li><code>CTRL</code>. <code>ALT</code></li> <li><code>PAUSE</code></li> <li><code>CAPS_LOCK</code></li> <li><code>ESC</code></li> <li><code>SPACE</code></li> <li><code>PAGE_UP</code>, <code>PAGE_DOWN</code></li> <li><code>END</code>, <code>HOME</code></li> <li><code>LEFT</code>, <code>UP</code>, <code>RIGHT</code>,<code>DOWN</code></li> <li><code>PRINT_SCREEN</code></li> <li><code>INSERT</code>, <code>DELETE</code></li> <li><code>ZERO</code>, <code>ONE</code>, <code>TWO</code>, <code>THREE</code>, <code>FOUR</code>, <code>FIVE</code>, <code>SIX</code>, <code>SEVEN</code>, <code>EIGHT</code>, <code>NINE</code></li> <li><code>NUMPAD_ZERO</code>, <code>NUMPAD_ONE</code>, <code>NUMPAD_TWO</code>, <code>NUMPAD_THREE</code>, <code>NUMPAD_FOUR</code>, <code>NUMPAD_FIVE</code>, <code>NUMPAD_SIX</code>, <code>NUMPAD_SEVEN</code>, <code>NUMPAD_EIGHT</code>, <code>NUMPAD_NINE</code>, <code>NUMPAD_ADD</code>, <code>NUMPAD_SUBTRACT</code></li> <li><code>OPEN_BRACKET</code>, <code>CLOSED_BRACKET</code></li> <li><code>SEMICOLON_FIREFOX</code>, <code>COLON</code>, <code>COMMA_FIREFOX_WINDOWS</code>, <code>COMMA_FIREFOX</code>, <code>BRACKET_RIGHT_FIREFOX</code>, <code>BRACKET_LEFT_FIREFOX</code></li> </ul>"},{"location":"layer/","title":"Layer","text":""},{"location":"layer/#introduction","title":"Introduction","text":"<p>A local display list, built-in game object of phaser.</p> <p>Layers have no position or size</p> <p>Layers have no position or size within the Scene  </p> <ul> <li>Cannot enable a Layer for physics or input.</li> <li>Cannot change the position, rotation or scale of a Layer. </li> <li>No scroll factor, texture, tint, origin, crop or bounds.</li> </ul> <p>Layers cannot be added to Containers</p> <p>Containers can be added to Layers, but Layers cannot be added to Containers.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"layer/#usage","title":"Usage","text":""},{"location":"layer/#add-layer","title":"Add layer","text":"<pre><code>var layer = scene.add.layer();\n// var layer = scene.add.layer(children);\n</code></pre> <ul> <li><code>children</code> : Array of game objects added to this layer.</li> </ul>"},{"location":"layer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLayer extends Phaser.GameObjects.Layer {\nconstructor(scene, children) {\nsuper(scene, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var layer = new MyLayer(scene, children);\n</code></pre></li> </ul>"},{"location":"layer/#add-child","title":"Add child","text":"<ul> <li>Add child     <pre><code>layer.add(gameObject);\n// layer.add(gameObjects);\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add child at     <pre><code>layer.addAt(gameObject, index);\n</code></pre></li> <li>Replace child     <pre><code>layer.replace(oldGameObject, newGameObject);\n</code></pre></li> </ul>"},{"location":"layer/#remove-child","title":"Remove child","text":"<ul> <li>Remove child     <pre><code>var removed = layer.remove(gameObject);\n</code></pre></li> <li>Remove child at     <pre><code>var removed = layer.removeAt(index);\n</code></pre></li> <li>Remove children between indexes     <pre><code>var removed = layer.removeBetween(startIndex, endIndex);\n</code></pre></li> <li>Remove all children     <pre><code>layer.removeAll();\n</code></pre></li> </ul> <p>Removed game object won't be added to display list of scene, use</p> <pre><code>scene.add.existing(gameObject);\n</code></pre> <p>to add it back.</p>"},{"location":"layer/#get-child","title":"Get child","text":"<ul> <li>Get child at     <pre><code>var gameObject = layer.getAt(index);\n</code></pre></li> <li>Get first child by name     <pre><code>var gameObject = layer.getByName(name);\n</code></pre></li> <li>Get first child by property     <pre><code>var gameObject = layer.getFirst(property, value);\n// var gameObject = layer.getFirst(property, value, startIndex, endIndex);\n</code></pre></li> <li>Get random child     <pre><code>var gameObject = layer.getRandom();\n// var gameObject = layer.getRandom(startIndex, length);\n</code></pre></li> <li>Get all children     <pre><code>var gameObjects = layer.getAll();\n</code></pre></li> <li>Get index of child     <pre><code>var index = layer.getIndex(gameObject);\n</code></pre></li> <li>Get child count     <pre><code>var count = layer.count(property, value);\n</code></pre></li> <li>Get total children count     <pre><code>var count = layer.length;\n</code></pre></li> <li>Has child     <pre><code>var hasChild = layer.exists(gameObject);\n</code></pre></li> </ul>"},{"location":"layer/#iterate","title":"Iterate","text":"<ul> <li>Get first child (set iterator index to 0)     <pre><code>var gameObject = layer.first;\n</code></pre></li> <li>Get last child (set iterator index to last)     <pre><code>var gameObject = layer.last;\n</code></pre></li> <li>Get next child (increase iterator index, until last)     <pre><code>var gameObject = layer.next;\n</code></pre></li> <li>Get previous child (decrease iterator index, until 0)     <pre><code>var gameObject = layer.previous;\n</code></pre></li> </ul>"},{"location":"layer/#move-child","title":"Move child","text":"<ul> <li>Swap     <pre><code>layer.swap(gameObject1, gameObject2);\n</code></pre></li> <li>Move to     <pre><code>layer.moveTo(gameObject, index);\n</code></pre></li> <li>Bring to top     <pre><code>layer.bringToTop(gameObject);\n</code></pre></li> <li>Send to back     <pre><code>layer.sendToBack(gameObject);\n</code></pre></li> <li>Move up     <pre><code>layer.moveUp(gameObject);\n</code></pre></li> <li>Move down     <pre><code>layer.moveDown(gameObject);\n</code></pre></li> <li>Move child1 above child2     <pre><code>layer.moveAbove(child1, child2);\n</code></pre></li> <li>Move child1 below child2     <pre><code>layer.moveBelow(child1, child2);\n</code></pre></li> <li>Sort     <pre><code>layer.sort(property);\n</code></pre>     or     <pre><code>layer.sort('', function(gameObject1, gameObject2) { return 1; // 0, or -1\n});\n</code></pre></li> <li>Reverse     <pre><code>layer.reverse();\n</code></pre></li> <li>Shuffle     <pre><code>layer.shuffle();\n</code></pre></li> </ul> <p>Note</p> <p>Children game objects also sort by depth.</p>"},{"location":"layer/#for-each-child","title":"For each child","text":"<pre><code>layer.each(function(gameObject) {\n\n}, scope);\n</code></pre>"},{"location":"layer/#set-property","title":"Set property","text":"<pre><code>layer.setAll(property, value);\n// layer.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"layer/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"layer/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"layermanager/","title":"Layer manager","text":""},{"location":"layermanager/#introduction","title":"Introduction","text":"<p>A dictionary to store Layer game objects.</p> <ul> <li>Author: Rex</li> <li>Container of game objects</li> </ul>"},{"location":"layermanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"layermanager/#install-plugin","title":"Install plugin","text":""},{"location":"layermanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlayermanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlayermanagerplugin.min.js', true);\n</code></pre></li> <li>Add layer manager     <pre><code>var layerManager = scene.plugins.get('rexlayermanagerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LayerManagerPlugin from 'phaser3-rex-plugins/plugins/layermanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLayerManager',\nplugin: LayerManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add layer manager     <pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LayerManager from 'phaser3-rex-plugins/plugins/layermanager.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var layerManager = new LayerManager(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#create-instance","title":"Create instance","text":"<pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, {\n// layerManager: ['layer0', 'layer1', ...]\n});\n</code></pre> <p>or</p> <pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, ['layer0', 'layer1', ...]\n);\n</code></pre> <ul> <li><code>layers</code> : Add layers by name string array.</li> </ul>"},{"location":"layermanager/#destroy","title":"Destroy","text":"<pre><code>layerManager.destroy()\n</code></pre> <p>Also destroy all layers in this layer manager.</p>"},{"location":"layermanager/#add-layer","title":"Add layer","text":"<pre><code>layerManager.add(name);\n// layerManager.add(name, depth);\n</code></pre>"},{"location":"layermanager/#add-game-object-to-layer","title":"Add game object to layer","text":"<pre><code>layerManager.addToLayer(name, gameObject);\n</code></pre> <ul> <li><code>name</code> : Name of layer</li> <li><code>gameObject</code> : Any kind of game object, include containerLite and related game objects.</li> </ul> <p>Note</p> <p>Print a warn message if specific layer is not existed.</p>"},{"location":"layermanager/#get-layer","title":"Get layer","text":"<ul> <li>Get layer by name     <pre><code>var layer = layerManager.getLayer(name);\n</code></pre></li> <li>Get all layers in this layer manager     <pre><code>var layers = layerManager.getLayers();\n// var out = layerManager.getLayers(out);\n</code></pre></li> </ul>"},{"location":"layermanager/#has-layer","title":"Has layer","text":"<pre><code>var hasLayer = layerManager.has(name);\n// var hasLayer = layerManager.exists(name);\n</code></pre>"},{"location":"lifetime/","title":"Life time","text":""},{"location":"lifetime/#introduction","title":"Introduction","text":"<p>Destroy game object when time-out.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"lifetime/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lifetime/#install-plugin","title":"Install plugin","text":""},{"location":"lifetime/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlifetimeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlifetimeplugin.min.js', true);\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = scene.plugins.get('rexlifetimeplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LifeTimePlugin from 'phaser3-rex-plugins/plugins/lifetime-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLifeTime',\nplugin: LifeTimePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = scene.plugins.get('rexLifeTime').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LifeTime from 'phaser3-rex-plugins/plugins/lifetime.js';\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = new LifeTime(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#create-instance","title":"Create instance","text":"<pre><code>var lifeTime = scene.plugins.get('rexLifeTime').add(gameObject, {\nlifeTime: 1000,\n// destroy: true,\n// start: true\n});\n</code></pre> <ul> <li><code>lifeTime</code> : Life time in ms.</li> <li><code>destroy</code> : Set <code>true</code> to destroy game object when time-out.</li> <li><code>start</code>: Set <code>true</code> to starting counting now.</li> </ul>"},{"location":"lifetime/#events","title":"Events","text":"<ul> <li>On time-out     <pre><code>lifeTime.on('complete', function(gameObject, lifeTime){});\n// lifeTime.once('complete', function(gameObject, lifeTime){});\n</code></pre></li> </ul>"},{"location":"lifetime/#life-time","title":"Life-time","text":"<ul> <li>Set     <pre><code>lifeTime.setLifeTime(time);\n</code></pre></li> <li>Add to     <pre><code>lifeTime.addToLifeTime(time);\n</code></pre></li> <li>Get life-time     <pre><code>var time = lifeTime.lifeTime;\n</code></pre></li> <li>Get remainder time     <pre><code>var time = lifeTime.remainder;\n</code></pre></li> <li>Is alive     <pre><code>var isAlive = lifeTime.isAlive;\n</code></pre></li> </ul>"},{"location":"lifetime/#startstoppauseresume","title":"Start/Stop/Pause/Resume","text":"<ul> <li>Start     <pre><code>lifeTime.start();\n</code></pre></li> <li>Stop     <pre><code>lifeTime.stop();\n</code></pre></li> <li>Pause     <pre><code>lifeTime.pause();\n</code></pre></li> <li>Resume     <pre><code>lifeTime.resume();\n</code></pre></li> </ul>"},{"location":"light/","title":"Light","text":""},{"location":"light/#introduction","title":"Introduction","text":"<p>lighting system from normal map.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"light/#usage","title":"Usage","text":""},{"location":"light/#light-system","title":"Light system","text":""},{"location":"light/#enable","title":"Enable","text":"<ul> <li>Enable     <pre><code>scene.lights.enable();\n</code></pre></li> <li>Disable     <pre><code>scene.lights.disable();\n</code></pre>     or     <pre><code>scene.lights.active = false;\n</code></pre></li> </ul>"},{"location":"light/#ambient-color","title":"Ambient color","text":"<pre><code>scene.lights.setAmbientColor(color);\n</code></pre> <ul> <li><code>color</code> : Integer color value.</li> </ul>"},{"location":"light/#light","title":"Light","text":"<ul> <li>Add     <pre><code>var light = scene.lights.addLight(x, y, radius);\n// var light = scene.lights.addLight(x, y, radius, color, intensity);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of the Light.</li> <li><code>radius</code> : The radius of the Light.</li> <li><code>color</code> : The integer RGB color of the light. Default is <code>0xffffff</code>.</li> <li><code>intensity</code> : The intensity of the Light.</li> </ul> </li> <li>Remove     <pre><code>scene.lights.removeLight(light);\n</code></pre></li> </ul>"},{"location":"light/#position","title":"Position","text":"<ul> <li>Set     <pre><code>light.setPosition(x, y);\n</code></pre>     or     <pre><code>light.x = x;\nlight.y = y;\n</code></pre></li> <li>Get     <pre><code>var x = light.x;\nvar y = light.y;\n</code></pre></li> </ul>"},{"location":"light/#color","title":"Color","text":"<ul> <li>Set<ul> <li>Red, green, blue     <pre><code>light.color.set(red, green, blue);\n</code></pre>     or     <pre><code>light.color.r = red;\nlight.color.g = green;\nlight.color.b = blue;\n</code></pre></li> <li>Integer value     <pre><code>light.setColor(colorInteger);\n</code></pre></li> </ul> </li> <li>Get<ul> <li>Red, green, blue     <pre><code>var red = light.color.r;\nvar green = light.color.g;\nvar blue = light.color.b;\n</code></pre></li> </ul> </li> </ul>"},{"location":"light/#size","title":"Size","text":"<ul> <li>Set     <pre><code>light.setRadius(radius);\n// light.radius = radius;\n</code></pre>     or     <pre><code>light.diameter = diameter;\n// light.width = diameter;\n// light.height = diameter;\n// light.displayWidth = diameter;\n// light.displayHeight = diameter;\n</code></pre></li> <li>Get     <pre><code>var radius = light.radius;\n</code></pre>     or     <pre><code>var diameter = light.diameter;\n// var diameter = light.displayWidth;\n// var diameter = light.displayHeight;\n// var diameter = light.width;\n// var diameter = light.height;\n</code></pre></li> </ul>"},{"location":"light/#intensity","title":"Intensity","text":"<ul> <li>Set     <pre><code>light.setIntensity(intensity);\n</code></pre>     or     <pre><code>light.intensity = intensity;\n</code></pre></li> <li>Get     <pre><code>var intensity = light.intensity;\n</code></pre></li> </ul>"},{"location":"light/#game-object","title":"Game object","text":""},{"location":"light/#load-texture-with-normal-map","title":"Load texture with normal map","text":"<pre><code>scene.load.image(key, [url, normalMapUrl]);\n</code></pre> <ul> <li><code>url</code> : Url of texture.</li> <li><code>url</code> : Url of texture.</li> <li><code>normalMapUrl</code> : Url of normal map.</li> </ul>"},{"location":"light/#apply-light-pipeline","title":"Apply light pipeline","text":"<pre><code>gameObject.setPipeline('Light2D');\n</code></pre>"},{"location":"line/","title":"Line","text":""},{"location":"line/#introduction","title":"Introduction","text":"<p>Draw a line with start/end/body textures.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"line/#live-demos","title":"Live demos","text":"<ul> <li>Line</li> </ul>"},{"location":"line/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"line/#install-plugin","title":"Install plugin","text":""},{"location":"line/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineplugin.min.js', true);\n</code></pre></li> <li>Add line object     <pre><code>var line = scene.add.rexLine(config);\n</code></pre></li> </ul>"},{"location":"line/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LinePlugin from 'phaser3-rex-plugins/plugins/line-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLinePlugin',\nplugin: LinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line object     <pre><code>var line = scene.add.rexLine(config);\n</code></pre></li> </ul>"},{"location":"line/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Line from 'phaser3-rex-plugins/plugins/line.js';\n</code></pre></li> <li>Add line object     <pre><code>var line = new Line(scene, config);\nscene.add.existing(line);\n</code></pre></li> </ul>"},{"location":"line/#create-instance","title":"Create instance","text":"<pre><code>var line = scene.add.rexLine({\nstart: {\nx: 0, y: 0,\nkey: undefined, frame: undefined, origin: 0.5,\n},\n// start: key,\n// start: undefined,\n\nend: {\nx: 0, y: 0,\nkey: undefined, frame: undefined, origin: 1,\n},\n// end: key,\n// end: undefined,\n\nbody: {\nkey: undefined, frame: undefined, extendMode: 1,\nwidth: undefined,\n},\n// body: key,\n});\n</code></pre> <ul> <li><code>start</code> : Configuration of line-start. Or texture key of line-start.<ul> <li><code>start.x</code>, <code>start.y</code> : Position of line-start.</li> <li><code>start.key</code>, <code>start.frame</code> : Texrure of line-start.</li> <li><code>start.origin</code> : Origin of line-start. Default is <code>0.5</code>.</li> </ul> </li> <li><code>end</code> : Configuration of line-end. Or texture key of line-end.<ul> <li><code>end.x</code>, <code>end.y</code> : Position of line-end.</li> <li><code>end.key</code>, <code>end.frame</code> : Texrure of line-end.</li> <li><code>end.origin</code> : Origin of line-end. Default is <code>1</code>.</li> </ul> </li> <li><code>body</code> : Configuration of line-body. Or texture key of line-body.<ul> <li><code>body.key</code>, <code>body.frame</code> : Texrure of line-body. Line-body will be drawn repeatedly.</li> <li><code>body.extendMode</code> : Extend mode of line-body.<ul> <li><code>0</code>, or <code>'scale'</code> : Draw line-body with scaled image game object.</li> <li><code>1</code>, or <code>'repeat'</code> : Draw line-body with tile-sprute game object. (Default value)</li> </ul> </li> <li><code>body.width</code> : Line width.</li> </ul> </li> </ul>"},{"location":"line/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLine extends Line {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var line = new MyLine(scene, config);\n</code></pre></li> </ul>"},{"location":"line/#position-of-line-startline-end","title":"Position of line-start/line-end","text":"<ul> <li>Line start<ul> <li>Get     <pre><code>var x0 = line.x0;\nvar y0 = line.y0;\n</code></pre></li> <li>Set     <pre><code>line.setLineStartPosition(x, y);\n</code></pre>     or     <pre><code>line.x0 = x;\nline.y0 = y;\n</code></pre></li> </ul> </li> <li>Line end<ul> <li>Get     <pre><code>var x1 = line.x1;\nvar y1 = line.y1;\n</code></pre></li> <li>Set     <pre><code>line.setLineEndPosition(x, y);\n</code></pre>     or     <pre><code>line.x1 = x;\nline.y1 = y;\n</code></pre></li> </ul> </li> </ul>"},{"location":"line/#set-textures","title":"Set textures","text":"<ul> <li>Line-start<ul> <li>Set line-start texture     <pre><code>line.setLineStartTexture(key, frameName);\n</code></pre></li> <li>Set origin of line-start texture     <pre><code>line.setLineStartOrigin(origin);\n</code></pre><ul> <li><code>origin</code> : <code>0</code>~<code>1</code>. Default is <code>0</code>, to align the left side of line-start texture with start position.</li> </ul> </li> </ul> </li> <li>Line-end<ul> <li>Set line-end texture     <pre><code>line.setLineEndTexture(key, frameName);\n</code></pre></li> <li>Set origin of line-end texture     <pre><code>line.setLineEndOrigin(origin);\n</code></pre><ul> <li><code>origin</code> : <code>0</code>~<code>1</code>. Default is <code>1</code>, to align the right side of line-end texture with end position.</li> </ul> </li> </ul> </li> <li>Line-body<ul> <li>Set line-body texture     <pre><code>line.setLineBodyTexture(key, frameName);\n</code></pre></li> <li>Set line-body extend mode     <pre><code>line.setLineBodyExtendMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'scale'</code> : Draw line-body with scaled image game object.</li> <li><code>1</code>, or <code>'repeat'</code> : Draw line-body with tile-sprute game object.        </li> </ul> </li> </ul> </li> <li>Set line-body width     <pre><code>line.setLineBodyWidth(width);\n</code></pre></li> </ul> </li> </ul>"},{"location":"list-inputtext/","title":"Input text","text":"<p>Solutions of single or multiple line(s) input text.</p> <ul> <li>Input text game object (Display: dom / Edit: dom) :    <ul> <li>Demo<ul> <li><code>type</code> or <code>inputType</code> :<ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game object with Text edit behavior (Display: text / Edit: dom) : <ul> <li>Demo<ul> <li><code>type</code> :<ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game object with Hidden text edit behavior (Display: text / Edit: text, invisible dom) : <ul> <li>Demo<ul> <li><code>type</code> or <code>inputType</code> : <ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Canvas input game object (Display: canvas-input / Edit: canvas-input) : <ul> <li>Single line input</li> <li>Multiple line input<ul> <li><code>textArea</code> : Set <code>true</code> for multiple line input.</li> </ul> </li> </ul> </li> </ul>"},{"location":"live2d/","title":"Live2d","text":""},{"location":"live2d/#introduction","title":"Introduction","text":"<p>Display live2d model.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"live2d/#live-demos","title":"Live demos","text":"<ul> <li>Transform and hit area</li> <li>Change model</li> </ul> <p>The example Live2D models, Haru and Hiyori, are redistributed under Live2D's Free Material License.</p>"},{"location":"live2d/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"live2d/#install-plugin","title":"Install plugin","text":""},{"location":"live2d/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlive2dplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlive2dplugin.min.js', true);\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>scene.load.rexLive2dCoreScript(coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>scene.load.rexLive2d(key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import Live2dPlugin from 'phaser3-rex-plugins/plugins/live2d-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLive2dPlugin',\nplugin: Live2dPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>scene.load.rexLive2dCoreScript(coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>scene.load.rexLive2d(key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import {\nLive2dCoreScriptFileCallback,\nLive2dFileCallback,\nLive2dGameObject\n} from 'phaser3-rex-plugins/plugins/live2d.js';\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>Live2dCoreScriptFileCallback.call(scene.load, coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>Live2dFileCallback.call(scene.load, key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = new Live2dGameObject(scene, x, y, key, config);\nscene.add.existing(live2dGameObject);\n</code></pre></li> </ul>"},{"location":"live2d/#create-instance","title":"Create instance","text":"<pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, {\n// autoPlayIdleMotion: motionGroupName\n});\n</code></pre> <ul> <li><code>autoPlayIdleMotion</code> : Start motion when idle (i.e. all motions are finished).</li> </ul> <p>Add live2d from JSON</p> <pre><code>var live2d = scene.make.rexLive2d({\nx: 0,\ny: 0,\nkey: 256,\n// autoPlayIdleMotion: motionGroupName,\n\nadd: true\n});\n</code></pre>"},{"location":"live2d/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLive2d extends Live2d {\nconstructor(scene, x, y, key, config) {\nsuper(scene, x, y, key, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var live2dGameObject = new MyLive2d(scene, x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#change-model","title":"Change model","text":"<pre><code>live2dGameObject.setModel(key);\n</code></pre> <p>or</p> <pre><code>live2dGameObject.setModel(key, {\n// autoPlayIdleMotion: motionGroupName\n})\n</code></pre>"},{"location":"live2d/#expression","title":"Expression","text":"<ul> <li>Set expression     <pre><code>live2dGameObject.setExpression(name);\n</code></pre></li> <li>Get expression names     <pre><code>var names = live2dGameObject.getExpressionNames();\n</code></pre><ul> <li><code>names</code> : Array of expression names</li> </ul> </li> </ul>"},{"location":"live2d/#motion","title":"Motion","text":"<ul> <li>Start motion     <pre><code>live2dGameObject.startMotion(group, no);\n// live2dGameObject.startMotion(group, no, priority);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> <li><code>no</code> : Number of motion in <code>group</code></li> <li><code>priority</code> : Priority of this motion<ul> <li><code>'idle'</code>, or <code>1</code></li> <li><code>'normal'</code>, or <code>2</code>, default value</li> <li><code>'force'</code> or <code>3</code></li> </ul> </li> </ul> </li> <li>Start random motion     <pre><code>live2dGameObject.startMotion(group);\n// live2dGameObject.startMotion(group, undefined, priority);\n</code></pre></li> <li>Stop all motions     <pre><code>live2dGameObject.stopAllMotions();\n</code></pre></li> <li>Get motion names     <pre><code>var names = live2dGameObject.getMotionNames();\n</code></pre></li> <li>Get motion names of a group     <pre><code>var names = live2dGameObject.getMotionNames(group);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> </ul> </li> <li>Get motion group names     <pre><code>var names = live2dGameObject.getMotionGroupNames();\n</code></pre></li> <li>Get current playing motion names     <pre><code>var names = live2dGameObject.getPlayinigMotionNames();\n</code></pre></li> <li>Is any motion playing?     <pre><code>var isPlaying = live2dGameObject.isAnyMotionPlaying();\n</code></pre></li> <li>Start motion when idle (i.e. all motions are finished)     <pre><code>live2dGameObject.autoPlayIdleMotion(group);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> </ul> </li> <li>Set time-scale     <pre><code>live2dGameObject.setTimeScale(timeScale);\n</code></pre>     or     <pre><code>live2dGameObject.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"live2d/#look-at","title":"Look at","text":"<ul> <li>Look at     <pre><code>live2dGameObject.lookAt(x, y, {\n// camera: scene.cameras.main,\n\n// eyeBallX: 1, eyeBallY: 1,\n// angleX: 30, angleY: 30, angleZ: 30,\n// bodyAngleX: 10\n})\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Look at position.</li> <li><code>camera</code> : Default value is <code>scene.cameras.main</code>.</li> <li><code>eyeBallX</code>, <code>eyeBallY</code> : Weight of parameter <code>ParamEyeBallX</code>, <code>ParamEyeBallY</code>.</li> <li><code>angleX</code>, <code>angleY</code>, <code>angleZ</code> : Weight of parameter <code>ParamAngleX</code>, <code>ParamAngleY</code>, <code>ParamAngleZ</code>.</li> <li><code>bodyAngleX</code> : Weight of parameter <code>ParamBodyAngleX</code>.</li> </ul> </li> <li>Look forward     <pre><code>live2dGameObject.lookForward();\n</code></pre></li> </ul>"},{"location":"live2d/#lip-sync","title":"Lip sync","text":"<ul> <li>Set lip sync value     <pre><code>live2dGameObject.setLipSyncValue(value);\n</code></pre>     or     <pre><code>live2dGameObject.lipSyncValue = value;\n</code></pre></li> <li>Get lip sync value     <pre><code>var value = live2dGameObject.lipSyncValue;\n</code></pre></li> </ul>"},{"location":"live2d/#hit-test","title":"Hit test","text":""},{"location":"live2d/#touch-events","title":"Touch events","text":"<ol> <li>Set interactive     <pre><code>live2dGameObject.setInteractive();\n</code></pre></li> <li>Register touch events of hit area<ul> <li>On pointer down     <pre><code>live2dGameObject.on('pointerdown-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointerdown', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> <li>On pointer up     <pre><code>live2dGameObject.on('pointerup-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointerup', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> <li>On pointer move     <pre><code>live2dGameObject.on('pointermove-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointermove', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> </ul> </li> </ol>"},{"location":"live2d/#is-hit","title":"Is hit","text":"<pre><code>var isHit = live2dGameObject.hitTest(hitAreaName, x, y);\n// var isHit = live2dGameObject.hitTest(hitAreaName, x, y, camera);\n</code></pre>"},{"location":"live2d/#parameter","title":"Parameter","text":"<ol> <li>Register parameter     <pre><code>live2dGameObject.registerParameter(name);\n</code></pre><ul> <li><code>name</code> : Register parameter id = <code>Param</code> + capitalize(<code>name</code>)</li> </ul> </li> <li>Reset and add value     <pre><code>live2dGameObject\n.resetParameterValue(name)\n.addParameterValue(name, value);\n</code></pre>     or     <pre><code>var parameters = live2dGameObject.getParameters();  // {name: value}\nparameters[name] = value;\n</code></pre></li> </ol>"},{"location":"loader/","title":"Loader","text":""},{"location":"loader/#introduction","title":"Introduction","text":"<p>Load assets, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"loader/#usage","title":"Usage","text":""},{"location":"loader/#loading-in-preload-stage","title":"Loading in preload stage","text":"<pre><code>scene.load.image(key, url);\n// scene.load.image(config); // config: {key, url}\n</code></pre> <p>Loader in preload stage will start loading automatically by scene.</p>"},{"location":"loader/#loading-after-preload-stage","title":"Loading after preload stage","text":"<pre><code>scene.load.image(key, url);   // add task\n// scene.load.image(config); // config: {key, url}\nscene.load.once('complete', callback, scope);  // add callback of 'complete' event\nscene.load.start();                     // start loading\n</code></pre>"},{"location":"loader/#set-path","title":"Set path","text":"<pre><code>scene.load.setPath(path)\n</code></pre>"},{"location":"loader/#more-configurations","title":"More configurations","text":"<p>More configurations in game config</p> <pre><code>loader:{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nwithCredentials: false,\nimageLoadType: 'XHR',    // 'HTMLImageElement' \nlocalScheme: [ 'file://', 'capacitor://' ]\n},\n</code></pre>"},{"location":"loader/#events","title":"Events","text":"<ul> <li>Load file complete event     <pre><code>scene.load.on('filecomplete', function(key, type, data) {}, scope);\n</code></pre> <pre><code>scene.load.on('filecomplete-' + type + '-' + key, function(key, type, data) {}, scope);\n</code></pre></li> <li>Add loading file event     <pre><code>scene.load.on('addfile', function(key, type, file) {}, scope);\n</code></pre></li> <li>Start loading     <pre><code>scene.load.once('start', function(){}, scope);\n</code></pre></li> <li>Loading progressing     <pre><code>scene.load.on('progress', function(progress){}, scope);\n</code></pre><ul> <li><code>progress</code> value will increase when a file is loaded, and decrease when a new file loading request is added.     <pre><code>var loader = scene.load;\nvar total = loader.totalToLoad;\nvar remainder = loader.list.size + loader.inflight.size;\nvar progress = 1 - (remainder / total);\n</code></pre></li> </ul> </li> <li>Loading file progressing     <pre><code>scene.load.on('fileprogress', function(file, progress){\n// var key = file.key;\n}, scope);\n</code></pre></li> <li>Loading a file object successful     <pre><code>scene.load.once('load', function(fileObj){}, scope);\n</code></pre></li> <li>Loading a file object failed     <pre><code>scene.load.once('loaderror', function(fileObj){}, scope);\n</code></pre></li> <li>All loading completed<ul> <li>Before releasing resources     <pre><code>scene.load.once('postprocess', function(loader){}, scope);\n</code></pre></li> <li>After releasing resources     <pre><code>scene.load.once('complete', function(loader){}, scope);\n</code></pre></li> </ul> </li> <li>Scene's <code>'preupdate'</code>, <code>'update'</code>, <code>'postupdate'</code>, <code>'render'</code> events will be triggered during preload stage.</li> </ul>"},{"location":"loader/#status-of-loader","title":"Status of loader","text":"<ul> <li>Ready to start loading     <pre><code>var isReady = scene.load.isReady();\n</code></pre></li> <li>Is loading     <pre><code>var isLoading = scene.load.isLoading();\n</code></pre></li> </ul>"},{"location":"loader/#file-types","title":"File types","text":""},{"location":"loader/#image","title":"Image","text":"<ul> <li>Image     <pre><code>scene.load.image(key, url);\n// scene.load.image(key, url, xhrSettings);\n</code></pre><ul> <li><code>url</code> : Url of texture.</li> </ul> </li> <li>Image and normal map     <pre><code>scene.load.image(key, [url, normalMapUrl]);\n// scene.load.image(key, [url, normalMapUrl], xhrSettings);\n</code></pre><ul> <li><code>url</code> : Url of texture.</li> <li><code>normalMapUrl</code> : Url of normal map.</li> </ul> </li> <li>SVG     <pre><code>scene.load.svg(key, url);\n// scene.load.svg(key, url, svgConfig);\n// scene.load.svg(key, url, svgConfig, xhrSettings);\n</code></pre><ul> <li><code>svgConfig</code> : <code>{width, height}</code>, or <code>{scale}</code></li> </ul> </li> <li>Html texture     <pre><code>scene.load.htmlTexture(key, url, width, height);\n// scene.load.htmlTexture(key, url, width, height, xhrSettings);\n</code></pre></li> </ul> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#sprite-sheet","title":"Sprite sheet","text":"<pre><code>scene.load.spritesheet(key, url, {\n// frameWidth: frameWidth,\n// frameHeight: frameHeight,\n// startFrame: startFrame,\n// endFrame: endFrame,\n// margin: margin,\n// spacing: spacing\n});\n// scene.load.spritesheet(key, url, frameConfig, xhrSettings);\n</code></pre> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#texture-atlas","title":"Texture atlas","text":"<pre><code>scene.load.atlas(key, textureURL, atlasURL);\n// scene.load.atlas(key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings);\n</code></pre> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#multi-file-texture-atlas","title":"Multi file texture atlas","text":"<pre><code>scene.load.multiatlas(key, atlasURL);\n// scene.load.multiatlas(key, atlasURL, path, baseURL, atlasXhrSettings);\n</code></pre> <ul> <li><code>atlasURL</code> : The absolute or relative URL to load the texture atlas json data file from.</li> <li><code>path</code> : Optional path to use when loading the textures defined in the atlas data.</li> <li><code>baseURL</code> : Optional Base URL to use when loading the textures defined in the atlas data.</li> </ul>"},{"location":"loader/#unity-texture-atlas","title":"Unity texture atlas","text":"<pre><code>scene.load.unityAtlas(key, textureURL, atlasURL);\n// scene.load.unityAtlas(key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings);\n</code></pre>"},{"location":"loader/#animation","title":"Animation","text":"<pre><code>scene.load.animation(key, url);\n// scene.load.animation(key, url, dataKey, xhrSettings);\n</code></pre> <p>Get data from json cache</p> <pre><code>var cache = scene.json;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#audio","title":"Audio","text":"<pre><code>scene.load.audio(key, urls);\n// scene.load.audio(key, urls, {instances: 1}, xhrSettings);\n</code></pre> <ul> <li><code>urls</code> : The absolute or relative URL to load the audio files from, or a blob.</li> <li><code>config.instances</code> : Number of audio instances for HTML5Audio. Defaults to <code>1</code>.</li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.audio;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#audio-sprite","title":"Audio sprite","text":"<pre><code>scene.load.audioSprite(key, jsonURL, audioURL, audioConfig);\n// scene.load.audioSprite(key, jsonURL, audioURL, audioConfig, audioXhrSettings, jsonXhrSettings);\n</code></pre> <ul> <li><code>jsonURL</code> : The absolute or relative URL to load the json file from.</li> <li><code>audioURL</code> : The absolute or relative URL to load the audio file from.</li> <li><code>audioConfig</code> : An object containing an <code>instances</code> property for HTML5Audio. Defaults to <code>1</code>.</li> </ul>"},{"location":"loader/#video","title":"Video","text":"<pre><code>scene.load.video(key, url, noAudio);\n// scene.load.video(key, url, noAudio, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : The absolute or relative URL to load the video files from, or a blob.</li> <li><code>loadEvent</code> : The load event to listen for when not loading as a blob.<ul> <li><code>'loadeddata'</code> : Data for the current frame is available. Default value.</li> <li><code>'canplay'</code> : The video is ready to start playing.</li> <li><code>'canplaythrough'</code> : The video can be played all the way through, without stopping.</li> </ul> </li> <li><code>asBlob</code> : Load the video as a data blob, or via the Video element? Default value is <code>false</code>.</li> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.</li> <li><code>false</code> : Has audio track, default behavior.</li> </ul> <p>Get data from video cache</p> <pre><code>var cache = scene.video;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#bitmap-font","title":"Bitmap font","text":"<pre><code>scene.load.bitmapFont(key, textureURL, fontDataURL);\n// scene.load.bitmapFont(key, textureURL, fontDataURL, textureXhrSettings, fontDataXhrSettings);\n</code></pre> <ul> <li><code>textureURL</code> : The absolute or relative URL to load the font image file from.</li> <li><code>fontDataURL</code> : The absolute or relative URL to load the font xml data file from, which created by software such as <ul> <li>Angelcode Bitmap Font Generator</li> <li>Littera </li> <li>Glyph Designer</li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.bitmapFont;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#tile-map","title":"Tile map","text":"<ul> <li>JSON : Created using the Tiled Map Editor and selecting JSON as the export format     <pre><code>scene.load.tilemapTiledJSON(key, url);\n// scene.load.tilemapTiledJSON(key, url, xhrSettings);\n</code></pre></li> <li>CSV : Created in a text editor, or a 3rd party app that exports as CSV.     <pre><code>scene.load.tilemapCSV(key, url);\n// scene.load.tilemapCSV(key, url, xhrSettings);\n</code></pre></li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.tilemap;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#text","title":"Text","text":"<pre><code>scene.load.text(key, url);\n// scene.load.text(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.text;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#json","title":"JSON","text":"<pre><code>scene.load.json(key, url);\n// scene.load.json(key, url, dataKey, xhrSettings);\n</code></pre> <ul> <li><code>dataKey</code> : When the JSON file loads only this property will be stored in the Cache.</li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.json;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#xml","title":"XML","text":"<pre><code>scene.load.xml(key, url);\n// scene.load.xml(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.xml;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#html","title":"HTML","text":"<pre><code>scene.load.html(key, url);\n// scene.load.html(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.html;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#css","title":"CSS","text":"<pre><code>scene.load.css(key, url);\n// scene.load.css(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.css;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#scene","title":"Scene","text":"<pre><code>scene.load.sceneFile(key, url);\n// scene.load.sceneFile(key, url, xhrSettings);\n</code></pre> <p>The <code>key</code> matches the class name in the JavaScript file.</p>"},{"location":"loader/#script","title":"Script","text":"<pre><code>scene.load.script(key, url);\n// scene.load.script(key, url, type, xhrSettings);\n</code></pre> <ul> <li><code>type</code> :\u3000<code>'script'</code>, or <code>'module'</code>.</li> </ul>"},{"location":"loader/#scripts","title":"Scripts","text":"<pre><code>scene.load.scripts(key, urlArray);\n// scene.load.scripts(key, urlArray, xhrSettings);\n</code></pre> <p>Add scripts in the exact order of <code>urlArray</code>.</p>"},{"location":"loader/#glsl","title":"GLSL","text":"<pre><code>scene.load.glsl(key, url);\n// scene.load.glsl(key, url, shaderType, xhrSettings);\n</code></pre> <ul> <li><code>shaderType</code> : The type of shader.<ul> <li><code>'fragment'</code> : Fragment shader. Default value.</li> <li><code>'vertex'</code> : Vertex shader.</li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.shader;\nvar data = cache.get(key);\n</code></pre> <p>A glsl file can contain multiple shaders, all separated by a frontmatter block.</p> <pre><code>---\nname: type: ---\n\nvoid main(void)\n{\n}\n</code></pre>"},{"location":"loader/#binary","title":"Binary","text":"<pre><code>scene.load.binary(key, url, dataType);  // dataType: Uint8Array\n// scene.load.binary(key, url, dataType, xhrSettings);\n</code></pre> <ul> <li><code>dataType</code> : Optional type to cast the binary file to once loaded. <ul> <li><code>Uint8Array</code>, <code>Uint8ClampedArray</code>, <code>Uint16Array</code> <code>Uint32Array</code></li> <li><code>Int8Array</code>, <code>Int16Array</code>, <code>Int32Array</code></li> <li><code>Float32Array</code>, <code>Float64Array</code></li> <li><code>BigInt64Array</code>, <code>BigUint64Array</code></li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.binary;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#plugin","title":"Plugin","text":"<pre><code>scene.load.plugin(key, url, true); // start plugin when loaded\n// scene.load.plugin(key, url, true, undefined, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : File url or class instance.</li> </ul>"},{"location":"loader/#scene-plugin","title":"Scene plugin","text":"<pre><code>scene.load.scenePlugin(key, url, systemKey, sceneKey);\n// scene.load.scenePlugin(key, url, systemKey, sceneKey, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : File url or class instance.</li> </ul>"},{"location":"loader/#file-pack","title":"File pack","text":"<p>Load files in JSON format.</p> <pre><code>scene.load.pack(key, url);\n// scene.load.pack(key, url, dataKey, xhrSettings);\n</code></pre> <p>or</p> <pre><code>scene.load.pack(key, json);\n// scene.load.pack(key, json, dataKey);\n</code></pre> <ul> <li><code>dataKey</code> : When the JSON file loads only this property will be stored in the Cache.</li> </ul> <p>JSON pack file:</p> <pre><code>{\n'dataKey': {\n// \"prefix\": \"...\",          // optional, extend key by prefix\n// \"path\": \"...\",            // optional, extend url by path\n// \"defaultType\": \"image\",   // optional, default file type\n'files': [\n{\n'type': 'image',\n'key': '...',\n'url': '...'\n},\n{\n'type': 'image',\n'key': '...',\n'url': '...'\n}\n// ...\n]\n},\n\n'node0': {\n'node1': {\n'node2': {\n'files': [\n// ....\n]\n}\n}\n}\n// dataKey: 'node0.node1.node2'\n}\n</code></pre> <p>File type:</p> <ul> <li><code>audio</code></li> <li><code>binary</code></li> <li><code>glsl</code></li> <li><code>html</code></li> <li><code>htmlTexture</code></li> <li><code>image</code></li> <li><code>json</code></li> <li><code>script</code></li> <li><code>spritesheet</code></li> <li><code>svg</code></li> <li><code>text</code></li> <li><code>tilemapCSV</code></li> <li><code>tilemapJSON</code></li> <li><code>xml</code></li> </ul> <p>Get pack json data from cache</p> <pre><code>var cache = scene.cache.json;  // pack json is stored in json cache\nvar data = cache.get(key);\n</code></pre> <p>Event name in <code>'filecomplete'</code> event : <code>'filecomplete-packfile-' + key</code></p>"},{"location":"loader/#release-data","title":"Release data","text":"<pre><code>var cache = scene.cache.text;\ncache.remove(key);\n</code></pre>"},{"location":"loader/#data-in-cache","title":"Data in cache","text":"<pre><code>var cache = scene.cache.text;\nvar hasData = cache.exists(key);\n// var hasData = cache.has(key);\n</code></pre>"},{"location":"loader/#cache-events","title":"Cache events","text":"<ul> <li>Add any item     <pre><code>cache.events.on('add', function(cache, key, item){\n\n})\n</code></pre></li> <li>Remove any item     <pre><code>cache.events.on('remove', function(cache, key, item){\n\n})\n</code></pre></li> </ul>"},{"location":"loader/#replace","title":"Replace","text":"<ol> <li>Remove key.</li> <li>Load file again.</li> </ol>"},{"location":"loader/#xhr-settings-object","title":"XHR Settings Object","text":"<p>Parameter <code>xhrSettings</code> </p> <pre><code>{\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nheaders: undefined,\nheader: undefined,\nheaderValue: undefined,\nrequestedWith: undefined,\noverrideMimeType: undefined,\nwithCredentials: false\n}\n</code></pre> <ul> <li><code>user</code> : Optional username for the XHR request.</li> <li><code>password</code> : Optional password for the XHR request.</li> <li><code>timeout</code> : Optional XHR timeout value.</li> <li><code>headers</code>, <code>header</code>, <code>headerValue</code>, <code>requestedWith</code> : This value is used to populate the XHR <code>setRequestHeader</code></li> <li><code>overrideMimeType</code> : Provide a custom mime-type to use instead of the default.</li> <li><code>withCredentials</code> : Whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting <code>withCredentials</code> has no effect on same-site requests.</li> </ul>"},{"location":"loadingprogress/","title":"Loading progress","text":""},{"location":"loadingprogress/#introduction","title":"Introduction","text":"<p>Pop-up dialog for loading-progress, then scale-down this dialog.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"loadingprogress/#live-demos","title":"Live demos","text":"<ul> <li>Loading progress</li> <li>Custom transit</li> </ul>"},{"location":"loadingprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"loadingprogress/#install-plugin","title":"Install plugin","text":""},{"location":"loadingprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexloadingprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexloadingprogressplugin.min.js', true);\n</code></pre></li> <li>Add loading-progress behavior     <pre><code>var loadingProgress = scene.plugins.get('rexloadingprogressplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add loading-progress behavior     <pre><code>var loadingProgress = scene.plugins.get('rexLoadingProgress').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LoadingProgress from 'phaser3-rex-plugins/plugins/loadingprogress.js';\n</code></pre></li> <li>Add loadingprogress behavior     <pre><code>var loadingProgress = new LoadingProgressBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#create-instance","title":"Create instance","text":"<pre><code>var loadingProgress = scene.plugins.get('rexLoadingProgress').add(gameObject, {\n// duration: {\n//     in: 200,\n//     out: 200\n// }\n\n// progress: function(gameObject, progress) {},\n// transitIn: function(gameObject, duration) {},\n// transitOut: function(gameObject, duration) {},\n});\n</code></pre> <ul> <li><code>gameObject</code> : Game object for presenting loading-progress.</li> <li><code>duration</code> : Duration of transition-in, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.- </li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog). Game object will be destroyed after transiting out.<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> </ul> </li> <li><code>progress</code> : Callback of loading-progress     <pre><code>function(gameObject, progress) {\n\n}\n</code></pre><ul> <li><code>progress</code> : Number between 0 to 1.</li> </ul> </li> <li><code>transitIn</code> : Tween behavior of opening dialog.<ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog.<ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"loadingprogress/#events","title":"Events","text":"<ul> <li>On progress     <pre><code>loadingProgress.on('progress', function(progress) {\n})\n</code></pre></li> <li>On opened dialog     <pre><code>loadingProgress.on('open', function(gameObject, loadingProgress) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>loadingProgress.on('close', function() {\n})\n</code></pre></li> </ul>"},{"location":"localforage-files/","title":"Files","text":""},{"location":"localforage-files/#introduction","title":"Introduction","text":"<p>Save JSON data, using localforage.</p> <p>Each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"localforage-files/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"localforage-files/#install-plugin","title":"Install plugin","text":""},{"location":"localforage-files/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlocalforagefilesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlocalforagefilesplugin.min.js', true);\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = scene.plugins.get('rexlocalforagefilesplugin').add(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FilesPlugin from 'phaser3-rex-plugins/plugins/localforagefiles-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFiles',\nplugin: FilesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = scene.plugins.get('rexFiles').add(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Files from 'phaser3-rex-plugins/plugins/localforagefiles.js';\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = new Files(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#create-instance","title":"Create instance","text":"<pre><code>var fileManager = scene.plugins.get('rexFiles').add.files({\n// name: 'files',\n// zip: true\n});\n</code></pre> <ul> <li><code>name</code> : Storage name.</li> <li><code>zip</code> :<ul> <li><code>true</code> : Save compressed stringify json data.</li> <li><code>false</code> : Save json data directly</li> </ul> </li> </ul>"},{"location":"localforage-files/#save-file","title":"Save file","text":"<ul> <li>Overwrite     <pre><code>fileManager.save(fileID, header, content);\n</code></pre><ul> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>header</code> : Header data for indexing, a JSON object.<ul> <li>Reserve keys : <code>fileID</code>.</li> </ul> </li> <li><code>content</code> : Content/body, a JSON object.<ul> <li>Reserve keys : <code>fileID</code>.</li> </ul> </li> </ul> </li> <li>Update     <pre><code>fileManager.save(fileID, header, content, true);\n</code></pre></li> </ul>"},{"location":"localforage-files/#load-headers","title":"Load headers","text":"<pre><code>fileManager.loadHeaders()\n.then(function(result) { // var headers = result.headers;\n})\n.catch(function(result) {\n// var error = result.error;\n})\n</code></pre> <ul> <li><code>headers</code> : Get header by <code>headers[fileID]</code>, each header contains<ul> <li><code>header.fileID</code> : Unique ID of this file.     </li> </ul> </li> </ul>"},{"location":"localforage-files/#load-file","title":"Load file","text":"<pre><code>fileManager.load(fileID)\n.then(function(result) { // var header = result.header;\n// var content = result.content;\n// var fileID = result.fileID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var fileID = result.fileID;\n})\n</code></pre> <ul> <li><code>header</code>, <code>content</code> : Header/content of this file.</li> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>userID</code> : User ID of file owner.</li> </ul>"},{"location":"localforage/","title":"LocalForage","text":""},{"location":"localforage/#introduction","title":"Introduction","text":"<p>Offline storage, improved.</p> <ul> <li>Author: Mozilla</li> </ul>"},{"location":"localforage/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p> <p>By default, LocalForage selects backend drivers for the datastore in this order:</p> <ol> <li>IndexedDB</li> <li>WebSQL</li> <li>localStorage</li> </ol>"},{"location":"localforage/#save-data","title":"Save data","text":"<ul> <li>Callback     <pre><code>localforage.setItem(key, value, function(){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.setItem(key, value)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localforage/#read-data","title":"Read data","text":"<ul> <li>Callback     <pre><code>localforage.getItem(key, function(err, value){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.getItem(key)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localforage/#remove-data","title":"Remove data","text":"<ul> <li>Callback     <pre><code>localforage.removeItem(key, function(){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.removeItem(key)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localstorage-data/","title":"Data manager","text":""},{"location":"localstorage-data/#introduction","title":"Introduction","text":"<p>Sync data from data manager to local-storage.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Max Size</p> <p>5MB per app per browser.</p>"},{"location":"localstorage-data/#live-demos","title":"Live demos","text":"<ul> <li>Extend game registry</li> <li>New local storage data manager</li> </ul>"},{"location":"localstorage-data/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"localstorage-data/#install-plugin","title":"Install plugin","text":""},{"location":"localstorage-data/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlocalstoragedataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlocalstoragedataplugin.min.js', true);\n</code></pre></li> <li>Extend existed data object (<code>game.registry</code>, or <code>scene.data</code>)     <pre><code>var data = scene.plugins.get('rexlocalstoragedataplugin').extend(game.registry, config);\n// var data = scene.plugins.get('rexlocalstoragedataplugin').extend(scene.data, config);\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = scene.plugins.get('rexlocalstoragedataplugin').add(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LocalStorageDataPlugin from 'phaser3-rex-plugins/plugins/localstoragedata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLocalStorageData',\nplugin: LocalStorageDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Extend existed data object (<code>game.registry</code>, or <code>scene.data</code>)     <pre><code>var data = scene.plugins.get('rexLocalStorageData').extend(game.registry, config);\n// var data = scene.plugins.get('rexLocalStorageData').extend(scene.data, config);\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = scene.plugins.get('rexLocalStorageData').add(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LocalStorageData from 'phaser3-rex-plugins/plugins/localstoragedata.js';\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = new LocalStorageData(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexLocalStorageData').add({\n// name: '',\n// load: true,\n// default: undefined,\n// reset: false\n});\n// var data = scene.plugins.get('rexLocalStorageData').add(parent, config);\n// var data = scene.plugins.get('rexRData').add(parent, eventEmitter, config);\n</code></pre> <ul> <li><code>name</code> : Prefix of key in local storage.</li> <li><code>load</code> :<ul> <li><code>true</code> : Load data from local storage. Default behavior.</li> <li><code>false</code> : Don't load data now.</li> </ul> </li> <li><code>default</code> : Define valid keys and default values of loaded data.<ul> <li><code>undefined</code> : Load all keys from local storage.</li> </ul> </li> <li><code>reset</code> : <ul> <li><code>true</code> : Reset all data to default values (<code>default</code>), clear keys which are not in <code>defaultData</code>.</li> </ul> </li> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"localstorage-data/#load","title":"Load","text":"<pre><code>data.load(defaultData);\n// data.load(defaultData, reset);\n</code></pre> <ul> <li><code>defaultData</code> : Define valid keys and default values of loaded data.<ul> <li><code>undefined</code> : Load all keys from local storage. <code>reset</code> will be <code>false</code> in this case.</li> </ul> </li> <li><code>reset</code> : <ul> <li><code>true</code> : Reset all data to default values (<code>defaultData</code>), clear keys which are not in <code>defaultData</code>.</li> </ul> </li> </ul> <p>Note</p> <p>Data loaded from local storage already, if <code>load</code> is <code>true</code>.</p>"},{"location":"localstorage-data/#getsetremove-value","title":"Get/set/remove value","text":"<p>See built-in data manager.</p>"},{"location":"localstorage-data/#reserved-keys","title":"Reserved keys","text":"<p><code>'__keys__'</code> is used internally by this plugin.</p>"},{"location":"localstorage-data/#get-default-value","title":"Get default value","text":"<pre><code>var value = data.getDefaultValue(key);\n</code></pre>"},{"location":"localstorage/","title":"LocalStorage","text":""},{"location":"localstorage/#introduction","title":"Introduction","text":"<p>Store small data in key-value pairs locally within the user's browser.</p> <ul> <li>Author: Built-in javascript function</li> </ul> <p>Max Size</p> <p>5MB per app per browser.</p>"},{"location":"localstorage/#usage","title":"Usage","text":"<p>Reference</p> <p>Sample code</p>"},{"location":"localstorage/#save-data","title":"Save data","text":"<pre><code>localStorage.setItem(key, value);\n</code></pre>"},{"location":"localstorage/#read-data","title":"Read data","text":"<pre><code>var value = localStorage.getItem(key);\n</code></pre> <p>Note</p> <p>The keys and the values are always strings.  Objects, integer keys will be automatically converted to strings.</p>"},{"location":"localstorage/#remove-data","title":"Remove data","text":"<pre><code>localStorage.removeItem(key);\n</code></pre>"},{"location":"lokijs/","title":"LokiJs","text":""},{"location":"lokijs/#introduction","title":"Introduction","text":"<p>In-memory JavaScript Datastore with Persistence.</p> <ul> <li>Reference</li> <li>Document</li> </ul>"},{"location":"lokijs/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lokijs/#create-database","title":"Create database","text":"<pre><code>var db = new loki();\n// var db = new loki('loki.json', config);  // load database from file\n</code></pre>"},{"location":"lokijs/#create-collection","title":"Create collection","text":"<pre><code>var collection = db.addCollection(name);\n// var collection = db.addCollection(name, config);\n</code></pre>"},{"location":"lokijs/#get-collection","title":"Get collection","text":"<pre><code>var collection = db.getCollection(name);\n</code></pre>"},{"location":"lokijs/#insert-document","title":"Insert document","text":"<pre><code>var docInColl = collection.insert(doc);  // doc: an object\n</code></pre> <p>Get Id</p> <pre><code>var id = docInColl.$loki;\n</code></pre>"},{"location":"lokijs/#insert-documents","title":"Insert documents","text":"<pre><code>collection.insert(docArray);  // documents in array\n</code></pre>"},{"location":"lokijs/#query","title":"Query","text":""},{"location":"lokijs/#get-document-by-id","title":"Get document by id","text":"<pre><code>var doc = collection.get(id);  // id: `$loki`\n</code></pre>"},{"location":"lokijs/#get-doc-by-unique-index","title":"Get doc by unique index","text":"<pre><code>var doc = collection.by(key, value);\n</code></pre>"},{"location":"lokijs/#filter-documents","title":"Filter documents","text":"<ul> <li>$eq : filter for document(s) with property of (strict) equality     <pre><code>var docArray = collection.find({key: value});\n// var docArray = collection.find({key: {'$eq': value});\n</code></pre></li> <li>$aeq : filter for document(s) with property of abstract (loose) equality     <pre><code>var docArray = collection.find({key: {'$aeq': value});\n</code></pre>     For example     <pre><code>var results = coll.find({age: {'$aeq': 20}});  // age == '20' or age == 20\n</code></pre></li> <li>$ne : filter for document(s) with property not equal to provided value     <pre><code>var docArray = collection.find({key: {'$ne': value});\n</code></pre></li> <li>$gt : filter for document(s) with property greater than provided value     <pre><code>var docArray = collection.find({key: {'$gt': value});\n</code></pre></li> <li>$gte : filter for document(s) with property greater or equal to provided value     <pre><code>var docArray = collection.find({key: {'$gte': value});\n</code></pre></li> <li>$lt : filter for document(s) with property less than provided value     <pre><code>var docArray = collection.find({key: {'$lt': value});\n</code></pre></li> <li>$lte : filter for document(s) with property less than or equal to provided value     <pre><code>var docArray = collection.find({key: {'$lte': value});\n</code></pre></li> <li>$between : filter for documents(s) with property between provided values     <pre><code>var docArray = collection.find({key: {'$between': [value0, value1]});\n</code></pre></li> <li>$in : filter for document(s) with property matching any of the provided array values     <pre><code>var docArray = collection.find({key: {'$in': [value0, value1, ...]});\n</code></pre>     Your property should not be an array but your compare values should be.</li> <li>$nin : filter for document(s) with property not matching any of the provided array values     <pre><code>var docArray = collection.find({key: {'$nin': [value0, value1, ...]});\n</code></pre></li> <li>$contains : filter for document(s) with property containing the provided value     <pre><code>var docArray = collection.find({key: {'$contains': value});\n</code></pre>     Use this when your property contains an array but your compare value is not an array</li> <li>$containsAny : filter for document(s) with property containing any of the provided values     <pre><code>var docArray = collection.find({key: {'$containsAny': [value0, value1, ...]});\n</code></pre></li> <li>$containsNone : filter for documents(s) with property containing none of the provided values     <pre><code>var docArray = collection.find({key: {'$containsNone': [value0, value1, ...]});\n</code></pre></li> <li>$regex : filter for document(s) with property matching provided regular expression     <pre><code>var docArray = collection.find({key: {'$regex': pattern});\n// var docArray = collection.find({key: {'$regex': [pattern, options]});\n</code></pre>     For example     <pre><code>var docArray = collection.find({key: { '$regex': 'din' }});\nvar docArray = collection.find({key: { '$regex': ['din', 'i'] }});\n</code></pre></li> <li>$dteq: filter for document(s) with date property equal to provided date value     <pre><code>var docArray = collection.find({key: {'$dteq': new Date('1/1/2017')});\n</code></pre></li> <li>$type : filter for documents which have a property of a specified type     <pre><code>var docArray = collection.find({key: {'$type': value}); // 'string', or 'number', ...\n</code></pre></li> <li>$size : filter for documents which have array property of specified size     <pre><code>var docArray = collection.find({key: {'$size': value});\n</code></pre> (does not work for strings)</li> <li>$len : filter for documents which have string property of specified length     <pre><code>var docArray = collection.find({key: {'$len': value});\n</code></pre></li> <li>$or : filter for documents which meet any of the nested subexpressions     <pre><code>var docArray = collection.find({'$or': [\n{key0: {'$lt': value0},\n{key1: {'$gte': value1},\n// ...\n]});\n</code></pre></li> </ul>"},{"location":"lokijs/#find-one-document","title":"Find one document","text":"<pre><code>var doc = collection.findOne({});\n</code></pre>"},{"location":"lokijs/#filter-by-function","title":"Filter by function","text":"<pre><code>var docArray = collection.where(function(doc){\n// ...\nreturn isPicked;  // true to pick this document\n})\n</code></pre>"},{"location":"lokijs/#sort","title":"Sort","text":"<ul> <li>Sort with a key     <pre><code>var docArray = collection.chain().find({}).simplesort(key).data();  // ascending\n// var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data();  // descending\n</code></pre></li> <li>Sort with mutiple keys     <pre><code>var docArray = collection.chain().find({}).compoundsort([key0, key1]).data();  // key0, key1: ascending\n// var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending\n</code></pre></li> <li>Sort with function     <pre><code>var docArray = collection.chain().find({}).sort(\nfunction(doc1, doc2) {\nreturn result; // 0, 1, -1\n})\n.data();\n</code></pre>     result:<ul> <li><code>0</code>: equal</li> <li><code>1</code>: greater</li> <li><code>-1</code>: less</li> </ul> </li> </ul>"},{"location":"lokijs/#pagination","title":"Pagination","text":"<p>Get documents from <code>start</code> to <code>start+count-1</code>.</p> <pre><code>var docArray = collection.chain().find({}).offset(start).limit(count).data();\n</code></pre>"},{"location":"lokijs/#update","title":"Update","text":"<p>Update each filtered documents.</p> <pre><code>var docArray = collection.chain().find({}).update(\nfunction(doc) { //\nreturn doc;\n});\n</code></pre>"},{"location":"lokijs/#remove","title":"Remove","text":"<p>Remove filtered documents.</p> <pre><code>collection.chain().find({}).remove();\n</code></pre>"},{"location":"lokijs/#map","title":"Map","text":"<p>Map document into a new anonymous collection, won't affect original collection.</p> <pre><code>var docArray = collection.chain().find({}).map(\nfunction(doc) {\n// ...\nreturn doc\n})\n.data();\n</code></pre>"},{"location":"lokijs/#map-reduce","title":"Map-reduce","text":"<ol> <li>Map document into a new anonymous collection</li> <li>Run reduceFn to get final result value from result set of step 1.</li> </ol> <pre><code>var mapFn = function(doc) {\n// ...\nreturn doc\n};\nvar reduceFn = function(docArray) {\n// ...\nreturn result;\n}\nvar result = collection.chain().find({}).mapReduce(mapFn, reduceFn);\n</code></pre>"},{"location":"lokijs/#clone-result-set","title":"Clone result set","text":"<pre><code>var resultSet = collection.chain().find({});\nvar resultSetClone = resultSet.branch();\n\n// resultSetClone.find({}).data();\n</code></pre>"},{"location":"lokijs/#dynamic-view","title":"Dynamic view","text":"<ol> <li>Create dynamic view     <pre><code>var view = children.addDynamicView(name);\n</code></pre></li> <li>Add filters<ul> <li>find     <pre><code>view.applyFind({});\n</code></pre></li> <li>where     <pre><code>view.applyWhere(function(doc) { return true; });\n</code></pre></li> <li>simple sort     <pre><code>view.applySimpleSort(key);\n</code></pre></li> <li>sort by multiple keys     <pre><code>view.applySortCriteria([key0, key1]);\n// view.applySortCriteria([key0, [key1, true]]);\n</code></pre></li> <li>sort function     <pre><code>view.applySort(function(doc1, doc2) {\nreturn result; // 0, 1, -1\n});\n</code></pre>     result:<ul> <li><code>0</code>: equal</li> <li><code>1</code>: greater</li> <li><code>-1</code>: less</li> </ul> </li> </ul> </li> <li>Get result data     <pre><code>var docArray = view.data();\n</code></pre></li> </ol> <p>Add new filters <pre><code>var docArray = view.branchResultset().find({}).data();\n</code></pre></p>"},{"location":"lokijs/#speed-up-quering","title":"Speed-up quering","text":""},{"location":"lokijs/#custom-unique-index","title":"Custom unique index","text":"<ol> <li>Define custom unique index     <pre><code>var collection = db.addCollection(name, {\nunique: [key0]\n});\n</code></pre></li> <li>Get document by custom unique index     <pre><code>var doc = collection.by(key0, value);\n</code></pre></li> </ol>"},{"location":"lokijs/#binary-indices","title":"Binary indices","text":"<ol> <li>Define binary index     <pre><code>var collection = db.addCollection(name, {\nindices: [key0]\n});\n</code></pre>     Or     <pre><code>collection.ensureIndex(key);\n</code></pre></li> <li>Get documents by normal filters     <pre><code>var docArray = collection.find({key0: {'$gt': value}});\n</code></pre></li> </ol>"},{"location":"lokijs/#methods-of-collection","title":"Methods of collection","text":"<ul> <li>Average value of a property    <pre><code>var avgValue = collection.avg(key);\n</code></pre></li> <li>Maximum value of a property    <pre><code>var maxValue = collection.max(key);\n</code></pre></li> <li>Minimum value of a property    <pre><code>var minValue = collection.min(key);\n</code></pre></li> <li>Median value of a property    <pre><code>var medianValue = collection.median(key);\n</code></pre></li> <li>Amount of documents    <pre><code>var amount = collection.count(query);  // {key: {'$gt': value}}\n</code></pre></li> </ul>"},{"location":"lokijs/#serialize-deserialize","title":"Serialize &amp; Deserialize","text":"<ul> <li>Database as string     <pre><code>var s = db.serialize();\n</code></pre></li> <li>Load database from string     <pre><code>db.loadJSON(s);\n</code></pre></li> </ul>"},{"location":"luxon/","title":"Luxon","text":""},{"location":"luxon/#introduction","title":"Introduction","text":"<p>Parse, validate, manipulate, and display dates and times. Reference</p>"},{"location":"luxon/#usage","title":"Usage","text":"<ul> <li>Install</li> <li>Getting started<ul> <li>Demo</li> <li>A quick tour</li> <li>API</li> </ul> </li> </ul>"},{"location":"luxon/#creating-a-datetime","title":"Creating a DateTime","text":"<pre><code>const dt = DateTime.local(2017, 5, 15, 8, 30);\n</code></pre> <p>or</p> <pre><code>var dt = DateTime.fromISO('2017-05-15');\n// var dt = DateTime.fromISO('2017-05-15T17:36');\n// var dt = DateTime.fromISO('2017-W33-4');\n// var dt = DateTime.fromISO('2017-W33-4T04:45:32.343');\n</code></pre>"},{"location":"luxon/#current-date-and-time","title":"Current date and time","text":"<pre><code>const now = DateTime.now();\n// const now = DateTime.local();\n</code></pre>"},{"location":"luxon/#json","title":"JSON","text":"<ul> <li>To JSON     <pre><code>var json = dt.toObject();\n</code></pre></li> <li>From JSON     <pre><code>var dt = DateTime.fromObject(json);\n// var dt = DateTime.fromObject({year: 2017, month: 5, day: 15, hour: 17, minute: 36});\n</code></pre></li> </ul>"},{"location":"luxon/#math","title":"Math","text":"<pre><code>var dt1 = dt0.plus({ hours: 3, minutes: 2 });\nvar dt1 = dt0.minus({ days: 7 });\nvar dt1 = dt0.startOf('day');\nvar dt1 = dt0.endOf('hour');\n</code></pre>"},{"location":"luxon/#difference","title":"Difference","text":"<pre><code>var i1 = DateTime.fromISO('1982-05-25T09:45'),\ni2 = DateTime.fromISO('1983-10-14T10:30');\ni2.diff(i1).toObject() //=&gt; { milliseconds: 43807500000 }\ni2.diff(i1, 'hours').toObject() //=&gt; { hours: 12168.75 }\ni2.diff(i1, ['months', 'days']).toObject() //=&gt; { months: 16, days: 19.03125 }\ni2.diff(i1, ['months', 'days', 'hours']).toObject() //=&gt; { months: 16, days: 19, hours: 0.75 }\n</code></pre>"},{"location":"luxon/#durations","title":"Durations","text":"<pre><code>var dur = Duration.fromObject({ hours: 2, minutes: 7 });\n// dt.plus(dur);\n\ndur.as('seconds') //=&gt; 7620\ndur.toObject()    //=&gt; { hours: 2, minutes: 7 }\ndur.toISO()       //=&gt; 'PT2H7M'\n</code></pre>"},{"location":"luxon/#parseformat","title":"Parse/Format","text":"<ul> <li>Parse     <pre><code>var dt = DateTime.fromFormat('12-16-2017', 'MM-dd-yyyy');\n// var dt = DateTime.fromFormat('May 25, 1982', 'MMMM dd, yyyy');\n// var dt = DateTime.fromFormat('mai 25, 1982', 'MMMM dd, yyyy', { locale: 'fr' });\n</code></pre></li> <li>Format     <pre><code>var s = dt.toFormat('MM-dd-yyyy');\n// var s = dt.toFormat('MMMM dd, yyyy')\n// var s = dt.setLocale('fr').toFormat('MMMM dd, yyyy')\n</code></pre></li> </ul>"},{"location":"luxon/#relative-time","title":"Relative time","text":"<p>Returns a string representation of this date relative to today.</p> <pre><code>var s = dt.toRelativeCalendar();\n</code></pre> <pre><code>var s = dt.toRelativeCalendar({\nbase: dt0,\nlocale: string,\nunit: string\n});\n</code></pre> <ul> <li><code>base</code> : The DateTime to use as the basis to which this time is compared. Defaults to now.</li> <li><code>locale</code> : Override the locale of this DateTime.</li> <li><code>unit</code> : Use a specific unit; if omitted, the method will pick the unit. Use one of <code>'years'</code>, <code>'quarters'</code>, <code>'months'</code>, <code>'weeks'</code>, or <code>'days'</code></li> </ul>"},{"location":"lzstring/","title":"LZ string","text":""},{"location":"lzstring/#introduction","title":"Introduction","text":"<p>Compress string using LZ-based compression algorithm. Reference</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"lzstring/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lzstring/#install-plugin","title":"Install plugin","text":""},{"location":"lzstring/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlzstringplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlzstringplugin.min.js', true);\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = scene.plugins.get('rexlzstringplugin').add(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LZStringPlugin from 'phaser3-rex-plugins/plugins/lzstring-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLZString',\nplugin: LZStringPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = scene.plugins.get('rexLZString').add(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LZString from 'phaser3-rex-plugins/plugins/lzstring.js';\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = new LZString(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#create-instance","title":"Create instance","text":"<pre><code>var lzstring = scene.plugins.get('rexLZString').add({\n// encoding: 'none'     // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3\n});\n</code></pre> <ul> <li><code>encoding</code> : <ul> <li><code>'none'</code>, or <code>0</code> : no encoding.</li> <li><code>'base64'</code>, or <code>1</code> : base64 encoding.</li> <li><code>'utf16'</code>, or <code>2</code> : UTF16 encoding.</li> <li><code>'uri'</code>, or <code>3</code> : URI encoding.</li> </ul> </li> </ul>"},{"location":"lzstring/#compression","title":"Compression","text":"<pre><code>var compressionResult = lzstring.compress(src);\n</code></pre>"},{"location":"lzstring/#decompression","title":"Decompression","text":"<pre><code>var decompressionResult = lzstring.decompress(compressionResult);\n</code></pre>"},{"location":"lzstring/#set-encoding","title":"Set encoding","text":"<pre><code>lzstring.setEncoding(m);  // 0|'none'|1|'base64'|2|'utf16'|3|'uri'\n</code></pre>"},{"location":"mainloop/","title":"Main loop","text":"<ol> <li>game.events <code>prestep</code> event. Global Managers like Input and Sound update.<ol> <li>trigger <code>game.sound.update()</code></li> </ol> </li> <li>game.events <code>step</code> event. User-land code and plugins<ul> <li>Register event     <pre><code>scene.game.events.on('step', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>Update the Scene Manager and all active Scenes<ol> <li>scene.events <code>preupdate</code> event<ul> <li>Register event     <pre><code>scene.events.on('preupdate', function(time, delta){\n//\n}, scope);\n</code></pre></li> <li>InputPlugin.preUpdate()</li> <li>TweenManager.preUpdate() to arrange active targets</li> <li>UpdateList.preUpdate(), to arrange game objects in UpdateList</li> </ul> </li> <li>scene.events <code>update</code> event<ul> <li>Register event     <pre><code>scene.events.on('update', function(time, delta){\n//\n}, scope);\n</code></pre></li> <li>TweenManager.update(), to run active tweens</li> <li>UpdateList.update<ul> <li>gameObject.preUpdate</li> </ul> </li> <li>Update arcade world</li> </ul> </li> <li>scene.update()</li> <li>scene.events <code>postupdate</code> event<ul> <li>Register event     <pre><code>scene.events.on('postupdate', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> </li> <li>game.events <code>poststep</code> event. Final event before rendering starts.<ul> <li>Register event     <pre><code>scene.game.events.on('poststep', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>game.renderer.preRender()</li> <li>game.events <code>prerender</code> event<ul> <li>Register event     <pre><code>scene.game.events.on('prerender', function(renderer, time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>SceneManager.render()<ol> <li>Sort display list</li> <li>scene.events <code>prerender</code> event<ul> <li>Register event     <pre><code>scene.events.on('prerender', function(renderer){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>Render cameras</li> <li>scene.events <code>render</code> event<ul> <li>Register event     <pre><code>scene.events.on('render', function(renderer){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> </li> <li>game.renderer.postRender()</li> <li>game.events <code>postrender</code> event. Final event before the step repeats.<ul> <li>Register event     <pre><code>scene.game.events.on('postrender', function(renderer, time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> <p>Note</p> <p>Each scene is a standalone system.</p>"},{"location":"mainloop/#flow-chart","title":"Flow chart","text":""},{"location":"mainloop/#game-loop","title":"Game loop","text":"<pre><code>graph TB\n\nsubgraph Render\nGameRenderPreRender[\"game.renderer.preRender()\"]\nGameEventPreRender&gt;\"game.events: prerender\"]\nSceneManagerRender[\"SceneManager.render()&lt;br&gt;...See 'Scene steps'...\"]\nGameRenderPostRender[\"game.renderer.postRender()\"]\nGameEventPostRender&gt;\"game.events: postrender\"]\nend\n\nsubgraph Step\nGameEventPreStep&gt;\"game.events: prestep&lt;br&gt;&lt;br&gt;sound.update()\"]\nGameEventStep&gt;\"game.events: step\"]\nSceneManagerUpdate[\"SceneManager.update()&lt;br&gt;...See 'Scene steps'...\"]\nGameEventPostStep&gt;\"game.events: poststep\"]\nend\n\n\nGameEventPreStep --&gt; GameEventStep\nGameEventStep --&gt; SceneManagerUpdate\nSceneManagerUpdate --&gt; GameEventPostStep\nGameEventPostStep --&gt; GameRenderPreRender\nGameRenderPreRender --&gt; GameEventPreRender\nGameEventPreRender --&gt; SceneManagerRender\nSceneManagerRender --&gt; GameRenderPostRender\nGameRenderPostRender --&gt; GameEventPostRender\nGameEventPostRender --&gt; GameEventPreStep</code></pre>"},{"location":"mainloop/#scene-steps","title":"Scene steps","text":"<pre><code>graph TB\n\nsubgraph Render\nSceneEventPreRender&gt;\"scene.events: prerender\"]\nSceneCameraRender[\"scene.cameras.render()\"]\nSceneEventRender&gt;\"scene.events: render\"]\nend\n\nsubgraph Update\nSceneEventPreUpdate&gt;\"scene.events: preupdate&lt;br&gt;&lt;br&gt;InputPlugin.preUpdate()&lt;br&gt;TweenManager.preUpdate()&lt;br&gt;UpdateList.preUpdate()\"]\nSceneEventUpdate&gt;\"scene.events: update&lt;br&gt;&lt;br&gt;TweenManager.update()&lt;br&gt;UpdateList.update()&lt;br&gt;gameObject.preUpdate()\"]\nSceneUpdate[\"scene.update()\"]\nSceneEventPostUpdate&gt;\"scene.events: postupdate\"]\nend\n\n\nSceneEventPreUpdate --&gt; SceneEventUpdate\nSceneEventUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneEventPostUpdate\n\nSceneEventPostUpdate -.-&gt; SceneEventPreRender\nSceneEventPreRender --&gt; SceneCameraRender\nSceneCameraRender --&gt; SceneEventRender</code></pre>"},{"location":"markedeventsheet/","title":"Markdown event sheets","text":""},{"location":"markedeventsheet/#introduction","title":"Introduction","text":"<p>Event sheets contains main condition(s) and actions, in simple markdown format (headings, code block).</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"markedeventsheet/#live-demos","title":"Live demos","text":"<ul> <li>Command executor</li> </ul>"},{"location":"markedeventsheet/#usage","title":"Usage","text":"<ul> <li>Sample code</li> <li>Event sheets</li> </ul>"},{"location":"markedeventsheet/#install-plugin","title":"Install plugin","text":""},{"location":"markedeventsheet/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmarkedeventsheetsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmarkedeventsheetsplugin.min.js', true);\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = scene.plugins.get('rexmarkedeventsheetsplugin').add(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MarkedEventSheetsPlugin from 'phaser3-rex-plugins/plugins/markedeventsheets-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMarkedEventSheets',\nplugin: MarkedEventSheetsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MarkedEventSheets from 'phaser3-rex-plugins/plugins/markedeventsheets.js';\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = new MarkedEventSheets(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#create-instance","title":"Create instance","text":"<pre><code>var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add({\ncommandExecutor: Object,\nparallel: false\n});\n</code></pre> <ul> <li><code>commandExecutor</code> : Command executor of actions.<ul> <li>This plugin provides a built-in command executor.</li> </ul> </li> <li><code>parallel</code> :<ul> <li><code>false</code> : Test condition then execute event sheet one by one. Default behavior.</li> <li><code>true</code> : Test all condition of event sheets then execute event sheets one by one.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#add-event-sheet","title":"Add event sheet","text":"<pre><code>eventSheetManager.addEventSheet(content, {\ncommentLineStart: '\\/\\/',\nlineBreak: '\\\\',\nparallel: undefined\n})\n</code></pre> <p>or</p> <pre><code>eventSheetManager.addEventSheet(content, groupName, {\ncommentLineStart: '\\/\\/',\nlineBreak: '\\\\',\nparallel: undefined\n})\n</code></pre> <ul> <li><code>content</code> : See structure of event sheet</li> <li><code>commentLineStart</code> : Content line start by this symobl (default value is <code>//</code>) will be ignored as a comment line.</li> <li><code>lineBreak</code> : Markdown will use <code>\\</code> as line break. So the last character <code>\\</code> will be discarded.</li> <li><code>parallel</code> : <ul> <li><code>undefined</code> : Use default <code>parallel</code> property.</li> </ul> </li> <li><code>groupName</code> : Each event sheet belong a group. Ignore this parameter to use default group.<ul> <li><code>'_'</code> : Default group name.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#remove-event-sheet","title":"Remove event sheet","text":"<ul> <li>Remove an event sheet in default group     <pre><code>eventSheetManager.removeEventSheet(title);\n</code></pre></li> <li>Remove an event sheet in a specific group     <pre><code>eventSheetManager.removeEventSheet(title, groupName);\n</code></pre></li> <li>Remove all event sheets in default group     <pre><code>eventSheetManager.removeAllEventSheets();\n</code></pre></li> <li>Remove all event sheets in a specific group     <pre><code>eventSheetManager.removeAllEventSheets(groupName);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#start-running","title":"Start running","text":"<ul> <li>Start running default group     <pre><code>eventSheetManager.start();\n</code></pre></li> <li>Start running a specific group of event sheets     <pre><code>eventSheetManager.start(groupName);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) without condition testing, in default group.     <pre><code>eventSheetManager.start(title);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) without condition testing, in a specific group.     <pre><code>eventSheetManager.start(title, groupName);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) with condition testing, in default group.     <pre><code>eventSheetManager.start(title, false);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) with condition testing, in a specific group.     <pre><code>eventSheetManager.start(title, groupName, false);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#stop-running","title":"Stop running","text":"<ul> <li>Stop running default group     <pre><code>eventSheetManager.stop();\n</code></pre></li> <li>Stop running a specific group of event sheets     <pre><code>eventSheetManager.stop(groupName);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#local-memory","title":"Local memory","text":"<p>Local memory is shared for all event sheets.</p> <ul> <li>Set value     <pre><code>eventSheetManager.setData(key, value);\n</code></pre></li> <li>Toggle value     <pre><code>eventSheetManager.toggleData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>eventSheetManager.incData(key, inc);\n</code></pre></li> <li>Get value     <pre><code>var value = eventSheetManager.getData(key);\n</code></pre></li> <li>Has key     <pre><code>var hasData = eventSheetManager.hasData(key);\n</code></pre></li> <li>Local memory as a dictionary     <pre><code>var data = eventSheetManager.memory;\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#states","title":"States","text":"<ul> <li>Dump state of event sheets of all groups     <pre><code>var states = eventSheetManager.dumpState();\n</code></pre></li> <li>Load state of event sheet of all groups     <pre><code>eventSheetManager.loadState(states);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#events","title":"Events","text":"<ul> <li>A group of event sheets has been executed completed     <pre><code>eventSheetManager.on('complete', function(groupName, eventSheetManager){ });\n</code></pre></li> <li>Enter an event sheet     <pre><code>eventSheetManager.on('eventsheet.enter', function(title, groupName, eventSheetManager){ });\n</code></pre></li> <li>Exit an event sheet     <pre><code>eventSheetManager.on('eventsheet.exit', function(title, groupName, eventSheetManager){ });\n</code></pre></li> <li>Enter a label (any heading) an event sheet     <pre><code>eventSheetManager.on('label.enter', function(labelTitle, treeTitle, groupName, eventSheetManager){ });\n</code></pre></li> <li>Exit a label (any heading) of an event sheet     <pre><code>eventSheetManager.on('label.exit', function(labelTitle, treeTitle, groupName, eventSheetManager){ });\n</code></pre></li> <li>Test condition of an event sheet failed     <pre><code>eventSheetManager.on('eventsheet.catch', function(title, groupName, eventSheetManager){ });\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#structure-of-event-sheet","title":"Structure of event sheet","text":"<p>Sample</p>"},{"location":"markedeventsheet/#main-headings","title":"Main headings","text":"<pre><code># Title\n\n## [Condition]\n\ncoin &gt; 5\n\n## Script\n\n## [Catch]\n</code></pre> <ul> <li>H1 heading: Title of this event sheet</li> <li>H2 heading with <code>[Condition]</code> : Main condition.    <ul> <li>Each line under <code>[Condition]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Can have many <code>[Condition]</code> heading, each <code>[Condition]</code> heading will be composed of <code>OR</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H2/H3/... headings between <code>[Condition]</code> and <code>[Catch]</code> : Actions when main condition is <code>true</code>.<ul> <li>Flow control instructions of headings</li> <li>Actions : Custom command</li> </ul> </li> <li>H2 heading with <code>[Catch]</code> : Actions when main condition is <code>false</code>.</li> </ul>"},{"location":"markedeventsheet/#flow-control-instructions","title":"Flow control instructions","text":""},{"location":"markedeventsheet/#simple-branch","title":"Simple branch","text":"<pre><code>## [If]\n\ncoin &gt; 5\n\n### Label\n</code></pre> <ul> <li>H2/H3/... heading with <code>[If]</code> : Internal branch<ul> <li>Each line under <code>[If]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H3/H4/... heading under <code>[If]</code> : Actions when condition is <code>true</code>.</li> </ul>"},{"location":"markedeventsheet/#complex-branch","title":"Complex branch","text":"<p>Does not support complex branch (if... else if ... else) inside an event sheet. User can build complex branch by mutiple event sheets with main condition (<code>[Condition]</code> H2 heading). Example</p>"},{"location":"markedeventsheet/#while-loop","title":"While loop","text":"<pre><code>## [While]\n\nloopCount &gt; 0\n\n### Label\n</code></pre> <ul> <li>H2/H3/... heading with <code>[While]</code> : While loop<ul> <li>Each line under <code>[While]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H3/H4/... heading under <code>[While]</code> : Actions running when condition is <code>true</code></li> </ul>"},{"location":"markedeventsheet/#break","title":"Break","text":"<pre><code>[break]\n</code></pre> <ul> <li>Action line with <code>[break]</code> : Ignore remainder actions in current label (heading).</li> </ul>"},{"location":"markedeventsheet/#exit","title":"Exit","text":"<pre><code>[exit]\n</code></pre> <ul> <li>Action line with <code>[exit]</code> : Skip remainder label (heading) and actions.</li> </ul>"},{"location":"markedeventsheet/#custom-command","title":"Custom command","text":"<pre><code>commandName\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Each command is divided by space line. i.e. add space lines above and below command.</li> <li>First line is the command name.<ol> <li>Invoke <code>commandExecutor.commandName</code> method if this <code>commandName</code> method is existed.     <pre><code>commandName(config, eventSheetManager) {\n// return eventEmitter;\n}\n</code></pre><ul> <li><code>config</code> : Parameter and value in a dictionary.</li> <li><code>eventSheetManager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul> </li> <li>Otherwise, invoke <code>commandExecutor.defaultHandler</code>.     <pre><code>defaultHandler(commandName, config, manager) {\n// return eventEmitter;\n}\n</code></pre><ul> <li><code>commandName</code> : Command name.</li> <li><code>config</code> : Parameter and value in a dictionary.</li> <li><code>manager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul> </li> </ol> </li> <li>Remainder lines are parameter composed of parameter name and value, with <code>=</code><ul> <li>Space characters at line start will be discarded.</li> <li>Value will be parsed to number, boolean, or string.<ul> <li>String value contains <code>{{</code>, and <code>}}</code> will be interpolation by mustache template syntax, return a string value.</li> <li>String value wrapped by <code>#(</code> <code>)</code> will be treated as expression, return a number value.</li> </ul> </li> </ul> </li> <li>Any line start with <code>//</code> will be ignored as comment line.</li> </ul> <p>For multiple lines parameter :</p> <pre><code>```commandName,param0=value,param1=value\nline0\nline1\nline2\n```\n</code></pre> <ul> <li>Lines in code block will be assigned to <code>text</code> parameter.</li> </ul> <p>So it will be equal to</p> <pre><code>commandName\n  text=...\n  param0=value\n  param1=value\n</code></pre>"},{"location":"markedeventsheet/#command-executor","title":"Command executor","text":"<p>A command executor for phaser3 engine.</p>"},{"location":"markedeventsheet/#create-command-executor-instance","title":"Create command executor instance","text":"<pre><code>var commandExecutor = scene.plugins.get('rexMarkedEventSheets').addCommandExecutor(scene, {\nlayers: []\n});\n\n// Add to event sheet manager\n// var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add({\n//     commandExecutor: commandExecutor\n// });\n</code></pre> <ul> <li><code>layers</code> : Pre-create layer game object indexed by array of string names.</li> </ul>"},{"location":"markedeventsheet/#game-object","title":"Game object","text":""},{"location":"markedeventsheet/#register-custom-game-object","title":"Register custom game object","text":"<pre><code>commandExecutor.addGameObjectManager({\nname: GOTYPE,\n\nviewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\nfade: 500,\n// fade: {mode: 'tint', time: 500},\n\ndefaultLayer: layerName,\n\ncommands: {\ncommandName(config, eventSheetManager) {\n// commandExecutor.waitEvent(eventEmitter, eventName);\n}\n}\n})\n</code></pre> <ul> <li><code>name</code> : A string name of game object's type. Will register command <code>GOTYPE</code> to this command executor.</li> <li><code>createGameObject</code> : A callback for creating game object     <pre><code>function(scene, config) {\nreturn gameObject;\n}\n</code></pre><ul> <li><code>config</code> : Parameters passed from event sheet.<ul> <li><code>id</code> : Parameter <code>id</code> is reserved.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>defaultLayer</code> : A layer name defined in <code>layers</code> parameter of <code>addCommandExecutor</code> method</li> <li><code>commands</code> : Custom commands, each command is a callback indexed by command name     <pre><code>commandName: function(gameObject, config, commandExecutor) {\n// commandExecutor.waitEvent(eventEmitter, eventName);\n}\n</code></pre><ul> <li><code>commandName</code> : Command name. These command names are reserved : <code>to</code>, <code>yoyo</code>, <code>destroy</code></li> <li><code>gameObject</code> : Game object instance.</li> <li><code>config</code> : Parameters passed from event sheet.</li> <li><code>commandExecutor</code> : This command executor instance.<ul> <li><code>commandExecutor.waitEvent(eventEmitter, eventName)</code> : Invoke this method to    Run next command after <code>eventEmitter</code> emitting event <code>eventName</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"markedeventsheet/#create-custom-game-object","title":"Create custom game object","text":"<pre><code>GOTYPE\n  id=NAME\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Create custom game object <code>GOTYPE</code> with config <code>{param0, param1}</code>, indexed by <code>id</code></li> </ul>"},{"location":"markedeventsheet/#set-properties-of-custom-game-object","title":"Set properties of custom game object","text":"<pre><code>NAME\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n</code></pre> <ul> <li><code>vpx</code>, <code>vpy</code> : viewportCoordinate properties injected if <code>viewportCoordinate</code> is <code>true</code>.</li> </ul>"},{"location":"markedeventsheet/#ease-properties-of-custom-game-object","title":"Ease properties of custom game object","text":"<pre><code>NAME.to\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n  duration=1000\n  ease=Linear\n  repeat=0\n  wait=\n</code></pre> <pre><code>NAME.yoyo\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n  duration=1000\n  ease=Linear\n  repeat=0\n  wait=\n</code></pre> <ul> <li>These properties are reserved : <code>id</code>, <code>duration</code>, <code>ease</code>, <code>repeat</code>, <code>yoyo</code>, <code>wait</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#invoke-custom-command","title":"Invoke custom command","text":"<pre><code>NAME.commandName\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Invoke custom command <code>commandName</code> method with these parameters<ul> <li><code>gameObject</code> : Indexed by <code>NAME</code></li> <li><code>config</code> : <code>{param0, param1}</code></li> </ul> </li> </ul> <p>Do nothing if gameObject or commandName is not found.</p>"},{"location":"markedeventsheet/#destroy-custom-game-object","title":"Destroy custom game object","text":"<pre><code>NAME.destroy\n</code></pre>"},{"location":"markedeventsheet/#wait","title":"Wait","text":""},{"location":"markedeventsheet/#wait-click","title":"Wait click","text":"<pre><code>click\n</code></pre> <ul> <li>Run next command after clicking.</li> </ul>"},{"location":"markedeventsheet/#wait-any","title":"Wait any","text":"<pre><code>wait\n  click\n  key=keyName\n  time=\n</code></pre> <ul> <li><code>click</code> : Run next command after clicking.</li> <li><code>key</code> : Run next command after key down</li> <li><code>time</code> : Run next command after time-out.</li> </ul> <p>Emit these events from eventSheetManager</p> <ul> <li>Wait click or key down     <pre><code>eventSheetManager.on('pause.input', function(){ });\n</code></pre><ul> <li>Resume (run next command)      ```javascript         eventSheetManager.on('resume.input', function(){ <pre><code>});\n```\n</code></pre> <ul> <li>Wait click only     <code>javascript     eventSheetManager.on('pause.click', function(){       });</code></li> <li>Wait key down only     <code>javascript     eventSheetManager.on('pause.key', function(keyName){       });</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"markedeventsheet/#sound","title":"Sound","text":"<p>This command executor provides </p> <ul> <li>2 background music tracks : <code>bgm</code>, <code>bgm2</code></li> <li>2 sound effects : <code>se</code>, <code>se2</code>.</li> </ul>"},{"location":"markedeventsheet/#sound-properties","title":"Sound properties","text":"<pre><code>bgm\n  volume\n  mute\n  unmute\n</code></pre> <ul> <li>Command name : <code>bgm</code>, <code>bgm2</code>, <code>se</code>, <code>se2</code></li> </ul>"},{"location":"markedeventsheet/#play-sound","title":"Play sound","text":"<pre><code>bgm.play\n  key=\n  // volume\n  // detune\n  // rate\n  fadeIn=0\n  // loop\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.play</code>, <code>bgm2.play</code>, <code>se.play</code>, <code>se2.play</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#cross-fade-in-sound","title":"Cross fade in sound","text":"<pre><code>bgm.cross\n  key=\n  duration=500\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.cross</code>, <code>bgm2.cross</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#stop-sound","title":"Stop sound","text":"<pre><code>bgm.stop\n</code></pre> <ul> <li>Command name : <code>bgm.stop</code>, <code>bgm2.stop</code>, <code>se.stop</code>, <code>se2.stop</code></li> </ul>"},{"location":"markedeventsheet/#fade-out-sound","title":"Fade out sound","text":"<pre><code>bgm.fadeOut\n  duration=500\n  stop=true\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.fadeOut</code>, <code>bgm2.fadeOut</code>, <code>se.fadeOut</code>, <code>se2.fadeOut</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#fade-in-sound","title":"Fade in sound","text":"<pre><code>bgm.fadeIn\n  duration=500\n</code></pre> <ul> <li>Command name : <code>bgm.fadeIn</code>, <code>bgm2.fadeIn</code></li> </ul>"},{"location":"markedeventsheet/#pause-sound","title":"Pause sound","text":"<pre><code>bgm.pause\n</code></pre> <ul> <li>Command name : <code>bgm.pause</code>, <code>bgm2.pause</code></li> </ul>"},{"location":"markedeventsheet/#resume-sound","title":"Resume sound","text":"<pre><code>bgm.resume\n</code></pre> <ul> <li>Command name : <code>bgm.resume</code>, <code>bgm2.resume</code></li> </ul>"},{"location":"markedeventsheet/#mute-sound","title":"Mute sound","text":"<pre><code>bgm.mute\n</code></pre> <ul> <li>Command name : <code>bgm.mute</code>, <code>bgm2.mute</code>, <code>se.mute</code>, <code>se2.mute</code></li> </ul>"},{"location":"markedeventsheet/#unmute-sound","title":"Unmute sound","text":"<pre><code>bgm.unmute\n</code></pre> <ul> <li>Command name : <code>bgm.unmute</code>, <code>bgm2.unmute</code>, <code>se.unmute</code>, <code>se2.unmute</code></li> </ul>"},{"location":"markedeventsheet/#camera","title":"Camera","text":""},{"location":"markedeventsheet/#camera-properties","title":"Camera properties","text":"<pre><code>camera\n  x=\n  y=\n  rotate=\n  zoom=\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Scroll</li> <li><code>rotate</code> : Rotate in degree</li> <li><code>zoom</code> : Zoom</li> </ul> <p>Run next command immediately.</p>"},{"location":"markedeventsheet/#fade-in","title":"Fade in","text":"<pre><code>camera.fadeIn\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See fade effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#fade-out","title":"Fade out","text":"<pre><code>camera.fadeOut\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See fade effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#flash","title":"Flash","text":"<pre><code>camera.flash\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See flash effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#shake","title":"Shake","text":"<pre><code>camera.shake\n  duration=1000\n  intensity\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>intensity</code> : See shake effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#zoom","title":"Zoom","text":"<pre><code>camera.zoomTo\n  duration=1000\n  zoom\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>zoom</code> : See zoom effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#rotate-to","title":"Rotate to","text":"<pre><code>camera.rotateTo\n  duration=1000\n  rotate\n  ease\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>rotate</code>, <code>ease</code> : See rotateTo effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#scroll-to","title":"Scroll to","text":"<pre><code>camera.scrollTo\n  duration=1000\n  x\n  y\n  ease\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>x</code>, <code>y</code>, <code>ease</code> : Scroll to position.</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#add-custom-command","title":"Add custom command","text":"<pre><code>commandExecutor.addCommand(commandName, function(config, eventSheetManager){\n// return eventEmitter;\n}, scope);\n</code></pre> <ul> <li><code>config</code> : Parameters passed from event sheet.</li> <li><code>eventSheetManager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul>"},{"location":"mask/","title":"Mask","text":""},{"location":"mask/#introduction","title":"Introduction","text":"<p>Apply mask on game object. Built-in render of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"mask/#usage","title":"Usage","text":""},{"location":"mask/#add-mask","title":"Add mask","text":""},{"location":"mask/#create-mask-object","title":"Create mask object","text":""},{"location":"mask/#bitmap-mask","title":"Bitmap mask","text":"<ol> <li>Create image (image, sprite, bitmap text, particles, text),or shader <pre><code>var shape = scene.add.image(x, y, key).setVisible(false);\n</code></pre></li> <li>Create mask     <pre><code>var mask = shape.createBitmapMask();\n</code></pre>     or     <pre><code>var mask = scene.add.bitmapMask(shape);\n</code></pre></li> </ol> <p>or</p> <pre><code>var mask =  scene.add.bitmapMask(undefined, x, y, key, frame);\n</code></pre>"},{"location":"mask/#geometry-mask","title":"Geometry mask","text":"<p>The mask is essentially a clipping path which can only make a masked pixel  fully visible or fully invisible without changing its alpha (opacity).</p> <ol> <li>Create graphics <pre><code>var shape = scene.make.graphics();\n</code></pre></li> <li>Create mask     <pre><code>var mask = shape.createGeometryMask();\n</code></pre></li> </ol>"},{"location":"mask/#apply-mask-object","title":"Apply mask object","text":"<pre><code>gameObject.setMask(mask); // image.mask = mask;\n</code></pre> <p>A mask object could be added to many game objects.</p> <p>Error</p> <p>Don't put game object and its mask into a container together. See this testing, enable line 22-24.</p> <p>Note</p> <p>Bitmap Mask is WebGL only.</p> <p>Note</p> <p>Can combine Geometry Masks and Blend Modes on the same Game Object,  but Bitmap Masks can't.</p>"},{"location":"mask/#clear-mask","title":"Clear mask","text":"<ul> <li>Clear mask     <pre><code>image.clearMask();\n</code></pre></li> <li>Clear mask and destroy mask object     <pre><code>image.clearMask(true);\n</code></pre></li> </ul>"},{"location":"mask/#invert-alpha","title":"Invert alpha","text":"<p>Only GeometryMask has <code>inverse alpha</code> feature.</p> <ul> <li>Inverse alpha     <pre><code>mask.setInvertAlpha();\n// mask.invertAlpha = true;\n</code></pre></li> <li>Disable     <pre><code>mask.setInvertAlpha(false);\n// mask.invertAlpha = false;\n</code></pre></li> </ul>"},{"location":"mask/#get-shape-game-object","title":"Get shape game object","text":"<ul> <li>Bitmap mask     <pre><code>var shape = mask.bitmapMask;\n</code></pre></li> <li>Geometry mask     <pre><code>var shape = mask.geometryMask;\n</code></pre></li> </ul>"},{"location":"matterjs-attractor/","title":"Attractor","text":""},{"location":"matterjs-attractor/#introduction","title":"Introduction","text":"<p>Apply continual forces on bodies.</p> <ul> <li>Reference</li> </ul>"},{"location":"matterjs-attractor/#usage","title":"Usage","text":""},{"location":"matterjs-attractor/#system-configuration","title":"System configuration","text":"<ul> <li>Game config     <pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nplugins: {\nattractors: true,\n// ...\n}\n// ...\n}\n}\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Runtime     <pre><code>scene.matter.system.enableAttractorPlugin();\n</code></pre></li> </ul>"},{"location":"matterjs-attractor/#matter-object-configuration","title":"Matter object configuration","text":"<pre><code>var options = {\n// ...\nplugin: {\nattractors: [\ncallback,\n// ...\n]\n},\n// ...\n}\n</code></pre> <ul> <li><code>callback</code> :<ul> <li>Retuen a force (<code>{x,y}</code>), which will be applied to bodyB <pre><code>function(bodyA, bodyB) {\nreturn {x, y}; // Force\n}\n</code></pre><ul> <li><code>bodyA</code> : Attractor matter object.</li> <li><code>bodyB</code> : Other matter object.</li> </ul> </li> <li>Apply forece to bodies directly.     <pre><code>function(bodyA, bodyB) {\nbodyA.gameObject.applyForce({x, y});\nbodyB.gameObject.applyForce({x, y});\n}\n</code></pre><ul> <li><code>bodyA</code> : Attractor matter object.<ul> <li><code>bodyA.gameObject</code> : Game object.</li> </ul> </li> <li><code>bodyB</code> : Other matter object.<ul> <li><code>bodyB.gameObject</code> : Game object.</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/","title":"Game object","text":""},{"location":"matterjs-gameobject/#introduction","title":"Introduction","text":"<p>Matterjs physics Image/Sprite/Group object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"matterjs-gameobject/#usage","title":"Usage","text":""},{"location":"matterjs-gameobject/#add-physics-object","title":"Add physics object","text":"<p>Enable physics world</p>"},{"location":"matterjs-gameobject/#image-object","title":"Image object","text":"<pre><code>var image = scene.matter.add.image(x, y, key, frame);\n// var image = scene.matter.add.image(x, y, key, frame, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#sprite-object","title":"Sprite object","text":"<pre><code>var image = scene.matter.add.sprite(x, y, key, frame);\n// var image = scene.matter.add.sprite(x, y, key, frame, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#any-game-object","title":"Any game object","text":"<pre><code>var gameObject = scene.matter.add.gameObject(gameObject);\n// var gameObject = scene.matter.add.gameObject(gameObject, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#image-composite","title":"Image composite","text":"<p>Create a new composite containing Matter Image objects created in a grid arrangement.</p> <pre><code>var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows);\n// var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options);\n</code></pre> <ul> <li><code>key</code>, <code>frame</code> : Texture key and frame name.</li> <li><code>x</code>, <code>y</code> : Top-left position of these game objects.</li> <li><code>columns</code>, <code>rows</code> : The number of columns/rows in the grid.</li> <li><code>columnGap</code>, <code>rowGap</code> : The distance between each column/row.</li> <li><code>config</code> : Config object</li> <li><code>composite</code> : Composite matter object.<ul> <li><code>composite.bodies</code> : An array of bodies.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#config","title":"Config","text":"<pre><code>{\nlabel: 'Body',\nshape: 'rectangle',\nchamfer: null,\n\nisStatic: false,\nisSensor: false,\nisSleeping: false,\nignoreGravity: false,\nignorePointer: false,\n\nsleepThreshold: 60,\ndensity: 0.001,\nrestitution: 0,\nfriction: 0.1,\nfrictionStatic: 0.5,\nfrictionAir: 0.01,\n\nforce: { x: 0, y: 0 },\nangle: 0,\ntorque: 0,\n\ncollisionFilter: {\ngroup: 0,\ncategory: 0x0001,\nmask: 0xFFFFFFFF,\n},\n\n// parts: [],\n\n// plugin: {\n//     attractors: [\n//         (function(bodyA, bodyB) { return {x, y}}),\n//     ]\n// },\n\nslop: 0.05,\n\ntimeScale: 1,\n}\n</code></pre> <ul> <li><code>label</code> : An arbitrary <code>String</code> name to help the user identify and manage bodies.</li> <li><code>shape</code> : <ul> <li>A string : <code>'rectangle'</code>, <code>'circle'</code>, <code>'trapezoid'</code>, <code>'polygon'</code>, <code>'fromVertices'</code>, <code>'fromPhysicsEditor'</code></li> <li>An object : <ul> <li>Rectangle shape     <pre><code>{\ntype: 'rectangle',\n// width: gameObject.width\n// height: gameObject.height\n}\n</code></pre></li> <li>Circle shape     <pre><code>{\ntype: 'circle',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// maxSides: 25\n}\n</code></pre></li> <li>Trapezoid shape     <pre><code>{\ntype: 'trapezoid',\n// slope: 0.5,\n}\n</code></pre></li> <li>Polygon shape     <pre><code>{\ntype: 'polygon',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// sides: 5,\n}\n</code></pre></li> <li>Vertices     <pre><code>{\ntype: 'fromVertices',\nverts: points,\n// flagInternal: false,\n// removeCollinear: 0.01,\n// minimumArea: 10,\n}\n</code></pre><ul> <li><code>points</code> :<ul> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>chamfer</code> : <ul> <li><code>null</code></li> <li>A number</li> <li><code>{radius: value}</code></li> <li><code>{radius: [topLeft, topRight, bottomRight, bottomLeft]}</code></li> </ul> </li> <li><code>isStatic</code> : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed.</li> <li><code>isSensor</code> : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically.</li> <li><code>isSleeping</code> : A flag that indicates whether the body is considered sleeping. A sleeping body acts similar to a static body, except it is only temporary and can be awoken.</li> <li><code>sleepThreshold</code> : The number of updates in which this body must have near-zero velocity before it is set as sleeping.</li> <li><code>density</code> : Density of the body, that is its mass per unit area.</li> <li><code>restitution</code> : The restitution/bounce/elasticity of the body. The value is always positive and is in the range <code>(0, 1)</code>.<ul> <li><code>0</code> : Collisions may be perfectly inelastic and no bouncing may occur.</li> <li><code>0.8</code> : The body may bounce back with approximately 80% of its kinetic energy.</li> </ul> </li> <li><code>friction</code> : Friction of the body. The value is always positive and is in the range <code>(0, 1)</code>.<ul> <li><code>0</code> : The body may slide indefinitely.</li> <li><code>1</code> : The body may come to a stop almost instantly after a force is applied.</li> </ul> </li> <li><code>frictionStatic</code> : The static friction of the body (in the Coulomb friction model). <ul> <li><code>0</code> : The body will never 'stick' when it is nearly stationary and only dynamic <code>friction</code> is used.</li> <li><code>10</code> :  The higher the value, the more force it will take to initially get the body moving when nearly stationary.</li> </ul> </li> <li><code>frictionAir</code> : The air friction of the body (air resistance). <ul> <li><code>0</code> : The body will never slow as it moves through space.</li> <li>The higher the value, the faster a body slows when moving through space.</li> </ul> </li> <li><code>force</code> : The force to apply in the current step.</li> <li><code>angle</code> : Angle of the body, in radians.</li> <li><code>torque</code> : the torque (turning force) to apply in the current step.</li> <li><code>collisionFilter</code> : An <code>Object</code> that specifies the collision filtering properties of this body.<ul> <li><code>collisionFilter.group</code></li> <li><code>collisionFilter.category</code> : A bit field that specifies the collision category this body belongs to.</li> <li><code>collisionFilter.mask</code> : A bit mask that specifies the collision categories this body may collide with.</li> </ul> </li> <li><code>slop</code> : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies.<ul> <li>The default should generally suffice, although very large bodies may require larger values for stable stacking.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#collision","title":"Collision","text":"<p>Collisions between two bodies will obey the following rules: </p> <ul> <li>(grpupA &gt; 0) &amp;&amp; (groupB &gt; 0) :<ul> <li>Collision = (groupA == groupB)</li> </ul> </li> <li>(grpupA == 0) || (groupB == 0) :<ul> <li>Collision = ((categoryA &amp; maskB) !== 0) &amp;&amp; ((categoryB &amp; maskA) !== 0)</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#movement","title":"Movement","text":""},{"location":"matterjs-gameobject/#velocity","title":"Velocity","text":"<pre><code>gameObject.setVelocity(x, y);\n</code></pre> <pre><code>gameObject.setVelocityX(x);\n</code></pre> <pre><code>gameObject.setVelocityY(x);\n</code></pre>"},{"location":"matterjs-gameobject/#acceleration","title":"Acceleration","text":""},{"location":"matterjs-gameobject/#force","title":"Force","text":"<ul> <li>Applies a force to a body.     <pre><code>gameObject.applyForce(force);\n</code></pre><ul> <li><code>force</code> : <code>{x, y}</code></li> </ul> </li> <li>Applies a force to a body from a given position.     <pre><code>gameObject.applyForceFrom(position, force); // position, force: {x, y}\n</code></pre><ul> <li><code>position</code> : <code>{x, y}</code></li> <li><code>force</code> : <code>{x, y}</code></li> </ul> </li> <li>Apply thrust to the forward position of the body.     <pre><code>gameObject.thrust(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the left position of the body.     <pre><code>gameObject.thrustLeft(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the right position of the body.     <pre><code>gameObject.thrustRight(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the back position of the body.     <pre><code>gameObject.thrustBack(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the back position of the body.     <pre><code>gameObject.thrustBack(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#gravity","title":"Gravity","text":"<ul> <li>Ignore world gravity     <pre><code>gameObject.setIgnoreGravity(ignore);\n</code></pre><ul> <li><code>ignore</code> : Set to true to ignore the effect of world gravity</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#friction","title":"Friction","text":"<pre><code>gameObject.setFriction(value, air, fstatic);\n</code></pre> <pre><code>gameObject.setFrictionAir(v);\n</code></pre> <pre><code>gameObject.setFrictionStatic(v);\n</code></pre>"},{"location":"matterjs-gameobject/#rotation","title":"Rotation","text":""},{"location":"matterjs-gameobject/#fixed-rotation","title":"Fixed rotation","text":"<pre><code>gameObject.setFixedRotation();\n</code></pre>"},{"location":"matterjs-gameobject/#angular-velocity","title":"Angular velocity","text":"<pre><code>gameObject.setAngularVelocity(v);\n</code></pre>"},{"location":"matterjs-gameobject/#collision_1","title":"Collision","text":""},{"location":"matterjs-gameobject/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var isSensor = gameObject.isSensor();\n</code></pre></li> <li>Set     <pre><code>gameObject.setSensor(value);\n</code></pre><ul> <li><code>value</code> : Set <code>true</code> to enable sensor.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#collision-group","title":"Collision group","text":"<ul> <li>Collision grpup     <pre><code>gameObject.setCollisionGroup(value);\n</code></pre></li> <li>Collision category<ol> <li>Get new collision category     <pre><code>var category = scene.matter.world.nextCategory();\n</code></pre><ul> <li><code>category</code> : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1&lt;&lt;31))</li> </ul> </li> <li>Set collision category of game object     <pre><code>gameObject.setCollisionCategory(category);\n</code></pre></li> <li>Set category mask     <pre><code>gameObject.setCollidesWith([categoryA, categoryB, ...]);\n// gameObject.setCollidesWith(categoryA);\n</code></pre></li> </ol> </li> </ul>"},{"location":"matterjs-gameobject/#collision-event","title":"Collision event","text":"<pre><code>scene.matter.world.on('collisionstart', function (event, bodyA, bodyB) {\n// var pairs = event.pairs;\n});\n</code></pre> <ul> <li><code>event</code> : <ul> <li><code>event.pairs</code> : An array of collision pairs<ul> <li><code>event.pairs[i].bodyA</code>, <code>event.pairs[i].bodyB</code> : Matter body object.<ul> <li><code>body.gameObject</code> : Game object of matter body.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>bodyA</code>, <code>bodyB</code> : Equal to <code>event.pairs[0].bodyA</code>, <code>event.pairs[0].bodyB</code>.</li> </ul>"},{"location":"matterjs-gameobject/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>gameObject.setRectangle(width, height, options);\n</code></pre></li> <li>Circle     <pre><code>gameObject.setCircle(radius, options);\n</code></pre></li> <li>Polygon     <pre><code>gameObject.setPolygon(radius, sides, options);\n</code></pre></li> <li>Trapezoid     <pre><code>gameObject.setTrapezoid(width, height, slope, options);\n</code></pre></li> <li>Any     <pre><code>gameObject.setBody(config, options);\n</code></pre><ul> <li><code>config</code> : <ul> <li>Rectangle shape     <pre><code>{\ntype: 'rectangle',\n// width: gameObject.width\n// height: gameObject.height\n}\n</code></pre></li> <li>Circle shape     <pre><code>{\ntype: 'circle',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// maxSides: 25\n}\n</code></pre></li> <li>Trapezoid shape     <pre><code>{\ntype: 'trapezoid',\n// slope: 0.5,\n}\n</code></pre></li> <li>Polygon shape     <pre><code>{\ntype: 'polygon',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// sides: 5,\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#bounce","title":"Bounce","text":"<pre><code>gameObject.setBounce(v);\n</code></pre> <ul> <li>restitution</li> </ul>"},{"location":"matterjs-gameobject/#mass","title":"Mass","text":"<pre><code>gameObject.setMass(v);\n</code></pre> <pre><code>gameObject.setDensity(v);\n</code></pre>"},{"location":"matterjs-gameobject/#sleep","title":"Sleep","text":""},{"location":"matterjs-gameobject/#enable_1","title":"Enable","text":"<pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nenableSleeping: true\n// ...\n}\n}\n\n}\n</code></pre>"},{"location":"matterjs-gameobject/#sleep-threshold","title":"Sleep threshold","text":"<pre><code>gameObject.setSleepThreshold(value);\n</code></pre>"},{"location":"matterjs-gameobject/#sleep-events","title":"Sleep events","text":"<ul> <li>Sleeping start     <pre><code>scene.matter.world.on('sleepstart', function (event, body) {\n});\n</code></pre></li> <li>Sleeping end     <pre><code>scene.matter.world.on('sleepend', function (event, body) {\n});\n</code></pre></li> </ul>"},{"location":"matterjs-world/","title":"World","text":""},{"location":"matterjs-world/#introduction","title":"Introduction","text":"<p>Matter physics engine in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"matterjs-world/#usage","title":"Usage","text":""},{"location":"matterjs-world/#configuration","title":"Configuration","text":"<pre><code>var config = {\n// ...\nphysics: {\ndefault: 'matter',\nmatter: {\n//    enabled: true,\n//    positionIterations: 6,\n//    velocityIterations: 4,\n//    constraintIterations: 2,\n//    enableSleeping: false,\n//    plugins: {\n//        attractors: false,\n//        wrap: false,\n//    },\n//    gravity: {\n//        x: 0,\n//        y: 0,\n//    }\n//    setBounds: {\n//        x: 0,\n//        y: 0,\n//        width: scene.sys.scale.width,\n//        height: scene.sys.scale.height,\n//        thickness: 64,\n//        left: true,\n//        right: true,\n//        top: true,\n//        bottom: true,\n//    },\n//    timing: {\n//        timestamp: 0,\n//        timeScale: 1,\n//    },\n//    correction: 1,\n//    getDelta: (function() { return 1000 / 60; }),\n//    autoUpdate: true,\n//    debug: false,\n//    debug: {\n//        showAxes: false,\n//        showAngleIndicator: false,\n//        angleColor: 0xe81153,\n//        showBroadphase: false,\n//        broadphaseColor: 0xffb400,\n//        showBounds: false,\n//        boundsColor: 0xffffff,\n//        showVelocity: false,\n//        velocityColor: 0x00aeef,\n//        showCollisions: false,\n//        collisionColor: 0xf5950c,\n//        showSeparations: false,\n//        separationColor: 0xffa500,\n//        showBody: true,\n//        showStaticBody: true,\n//        showInternalEdges: false,\n//        renderFill: false,\n//        renderLine: true,\n//        fillColor: 0x106909,\n//        fillOpacity: 1,\n//        lineColor: 0x28de19,\n//        lineOpacity: 1,\n//        lineThickness: 1,\n//        staticFillColor: 0x0d177b,\n//        staticLineColor: 0x1327e4,\n//        showSleeping: false,\n//        staticBodySleepOpacity: 0.7,\n//        sleepFillColor: 0x464646,\n//        sleepLineColor: 0x999a99,\n//        showSensors: true,\n//        sensorFillColor: 0x0d177b,\n//        sensorLineColor: 0x1327e4,\n//        showPositions: true,\n//        positionSize: 4,\n//        positionColor: 0xe042da,\n//        showJoint: true,\n//        jointColor: 0xe0e042,\n//        jointLineOpacity: 1,\n//        jointLineThickness: 2,\n//        pinSize: 4,\n//        pinColor: 0x42e0e0,\n//        springColor: 0xe042e0,\n//        anchorColor: 0xefefef,\n//        anchorSize: 4,\n//        showConvexHulls: false,\n//        hullColor: 0xd703d0\n//    }\n}\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"matterjs-world/#control","title":"Control","text":""},{"location":"matterjs-world/#pause","title":"Pause","text":"<pre><code>scene.matter.world.pause();\n</code></pre>"},{"location":"matterjs-world/#resume","title":"Resume","text":"<pre><code>scene.matter.world.resume();\n</code></pre>"},{"location":"matterjs-world/#drag-object","title":"Drag object","text":"<pre><code>scene.matter.add.mouseSpring();\n// scene.matter.add.mouseSpring(options);\n</code></pre> <ul> <li><code>options</code> <pre><code>{\nlength: 0.01,\nstiffness: 0.1,\ndamping: 0,\nangularStiffness: 1,\ncollisionFilter: {\ncategory: 0x0001,\nmask: 0xFFFFFFFF,\ngroup: 0\n}\n}\n</code></pre><ul> <li><code>collisionFilter</code> : Drag filter, see collision.</li> </ul> </li> </ul>"},{"location":"matterjs-world/#world-bounds","title":"World bounds","text":""},{"location":"matterjs-world/#enable","title":"Enable","text":"<ul> <li>World :<ul> <li>Set bounds     <pre><code>scene.matter.world.setBounds(x, y, width, height);\n// scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom);\n</code></pre><ul> <li><code>thickness</code> : The thickness of each wall, in pixels.</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : If true will create the left/right/top/bottom bounds wall.</li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-world/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>scene.matter.world.setGravity(x, y);\n// scene.matter.world.setGravity(x, y, scale);\n</code></pre></li> <li>Disable     <pre><code>scene.matter.world.disableGravity();\n</code></pre></li> </ul>"},{"location":"matterjs-world/#constraint","title":"Constraint","text":""},{"location":"matterjs-world/#constraint-of-2-game-objects","title":"Constraint of 2 game objects","text":"<pre><code>var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB);\n// var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options);\n</code></pre> <ul> <li><code>gameObjectA</code>, <code>gameObjectB</code> : Matter game object, or matter body object.</li> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> <li><code>options</code> :     <pre><code>{\npointA: {\nx: 0,\ny: 0,\n},\npointB: {\nx: 0,\ny: 0,\n},\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>pointA</code>, <code>pointB</code> : Offset position of <code>gameObjectA</code>, <code>gameObjectB</code>.</li> </ul> </li> </ul> <p>Alias:</p> <pre><code>var constraint = scene.matter.add.spring(gameObjectA, gameObjectB, length, stiffness, options);\nvar constraint = scene.matter.add.joint(gameObjectA, gameObjectB, length, stiffness, options);\n</code></pre>"},{"location":"matterjs-world/#constraint-to-world-position","title":"Constraint to world position","text":"<pre><code>var constraint = scene.matter.add.worldConstraint(gameObjectB, length, stiffness, options);\n</code></pre> <ul> <li><code>gameObjectB</code> : Matter game object, or matter body object.</li> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> <li><code>options</code> :     <pre><code>{\npointA: {\nx: 0,\ny: 0,\n},\npointB: {\nx: 0,\ny: 0,\n},\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>pointA</code> : World position.</li> <li><code>pointB</code> : Offset position of <code>gameObjectB</code>.</li> </ul> </li> </ul>"},{"location":"matterjs-world/#chain-game-objects","title":"Chain game objects","text":"<pre><code>var composite = scene.matter.add.chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options);\n</code></pre> <ul> <li><code>composite</code> : Image composite</li> <li><code>xOffsetA</code>, <code>yOffsetA</code> : Offset position of gameObjectA, in scale.<ul> <li>xOffset = (Offset distance / width)</li> <li>yOffset = (Offset distance / height)</li> </ul> </li> <li><code>xOffsetB</code>, <code>yOffsetB</code> : Offset position of gameObjectB, in scale.</li> <li><code>options</code> :      <pre><code>{\nlength: undefined,\nstiffness: 1,\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> </ul> </li> <li><code>composite</code><ul> <li><code>composite.bodies</code> : An array of bodies.</li> <li><code>composite.constraints</code> : An array of constraints</li> </ul> </li> </ul>"},{"location":"matterjs-world/#remove-constraint","title":"Remove constraint","text":"<pre><code>scene.matter.world.removeConstraint(constraint);\n</code></pre>"},{"location":"matterjs-wrap/","title":"Wrap","text":""},{"location":"matterjs-wrap/#introduction","title":"Introduction","text":"<p>Automatically wrap the position of bodies and composites such that they always stay within the given bounds.</p> <ul> <li>Reference</li> </ul>"},{"location":"matterjs-wrap/#usage","title":"Usage","text":""},{"location":"matterjs-wrap/#system-configuration","title":"System configuration","text":"<ul> <li>Game config     <pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nplugins: {\nwrap: true,\n// ...\n}\n// ...\n}\n}\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Runtime     <pre><code>scene.matter.system.enableWrapPlugin();\n</code></pre></li> </ul>"},{"location":"matterjs-wrap/#matter-object-configuration","title":"Matter object configuration","text":"<pre><code>var options = {\n// ...\nplugin: {\nwrap: {\nmin: {\nx: 0,\ny: 0\n},\nmax: {\nx: 1024,\ny: 1024\n}\n}\n},\n// ...\n}\n</code></pre>"},{"location":"mesh/","title":"Mesh","text":""},{"location":"mesh/#introduction","title":"Introduction","text":"<p>Render a group of textured vertices and manipulate the view of those vertices, such as rotation, translation or scaling.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"mesh/#usage","title":"Usage","text":""},{"location":"mesh/#quad","title":"Quad","text":"<p>Note</p> <p>See also Plane</p> <ol> <li>Load texture     <pre><code>scene.load.image(key, url);\n</code></pre></li> <li>Add mesh object     <pre><code>var mesh = scene.add.mesh(x, y, texture, frame);\n</code></pre>     or     <pre><code>var mesh = scene.make.mesh({\nx: 0,\ny: 0,\nadd: true,\n\nkey: null,\nframe: null\n});\n</code></pre></li> <li>Set perspective or orthographic projection<ul> <li>Perspective projection     <pre><code>mesh.setPerspective(width, height, fov);\n// mesh.setPerspective(width, height, fov, near, far);\n</code></pre><ul> <li><code>width</code>, <code>height</code> : The width/height of the projection matrix. Typically the same as the Mesh and/or Renderer.</li> <li><code>fov</code> : The field of view, in degrees.</li> <li><code>near</code>, <code>far</code> : The near/far value of the view. Default value are <code>0.01</code>/<code>1000</code>.</li> </ul> </li> <li>Orthographic projection     <pre><code>mesh.setOrtho(mesh.width/mesh.height, 1);\n// mesh.setOrtho(scaleX, scaleY, near, far);\n</code></pre><ul> <li><code>scaleX</code>, <code>scaleY</code> : The default horizontal/vertical scale in relation to the Mesh / Renderer dimensions.</li> <li><code>near</code>, <code>far</code> : The near/far value of the view. Default value are <code>0.01</code>/<code>1000</code>.</li> </ul> </li> </ul> </li> <li>Creates a grid of vertices     <pre><code>Phaser.Geom.Mesh.GenerateGridVerts({\nmesh: mesh,\ntexture: textureKey,\nframe: frameName,\nwidth: 1,\nheight: 1,\nwidthSegments: 1,\nheightSegments: 1,\n\n// x: 0,\n// y: 0,\n// colors: 0xffffff,\n// alphas: 1,\n// tile: false,\n// isOrtho: false\n})\n</code></pre><ul> <li><code>mesh</code> : The vertices of the generated grid will be added to this Mesh Game Object.</li> <li><code>texture</code> : The texture to be used for this Grid.</li> <li><code>frame</code> : The name or index of the frame within the Texture.</li> <li><code>width</code> , <code>height</code> : The width/height of the grid in 3D units.     <pre><code>{\n// ...\nwidth: (frameWidth/frameHeight),\nheight: (frameHeight/frameHeight)\n// ...\n}\n</code></pre></li> <li><code>widthSegments</code>, <code>heightSegments</code> : The number of segments to split the grid horizontally/vertically in to.</li> <li><code>colors</code> : An array of colors, one per vertex, or a single color value applied to all vertices.</li> <li><code>alphas</code> An array of alpha values, one per vertex, or a single alpha value applied to all vertices.</li> <li><code>tile</code> :<ul> <li><code>false</code> : Display as a single texture. Default value.</li> <li><code>true</code> : Texture tile (repeat) across the grid segments.</li> </ul> </li> </ul> </li> </ol>"},{"location":"mesh/#model","title":"Model","text":"<ol> <li>Load model     <pre><code>scene.load.obj(key, url, objURL, matURL);\n</code></pre><ul> <li><code>objURL</code> : URL to load the obj file.</li> <li><code>matURL</code> : URL to load the material file.</li> </ul> </li> <li>Add mesh object     <pre><code>var mesh = scene.add.mesh(x, y);\n</code></pre>     or     <pre><code>var mesh = scene.make.mesh({\nx: 0,\ny: 0,\nadd: true\n});\n</code></pre></li> <li>Add model     <pre><code>mesh.addVerticesFromObj(key, scale, x, y, z, rotateX, rotateY, rotateZ, zIsUp);\n</code></pre><ul> <li><code>key</code> : The key of the model data in the OBJ Cache to add to this Mesh.</li> <li><code>scale</code> : An amount to scale the model data by. Default is <code>1</code>.</li> <li><code>x</code>, <code>y</code>, <code>z</code> : Translate the model x/y/z position by this amount.</li> <li><code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> : Rotate the model on the x/y/z axis by this amount, in radians.</li> <li><code>zIsUp</code> : <ul> <li><code>true</code> : Z axis is up.</li> <li><code>false</code> : Y axis is up.</li> </ul> </li> </ul> </li> </ol>"},{"location":"mesh/#custom-mesh-class","title":"Custom mesh class","text":"<ul> <li>Define class     <pre><code>class MyMesh extends Phaser.GameObjects.mesh {\nconstructor(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas) {\nsuper(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var mesh = new MyMesh(scene, x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"mesh/#control","title":"Control","text":""},{"location":"mesh/#view","title":"View","text":"<ul> <li>Translates the view position of this Mesh on the x/y/z axis by the given amount.     <pre><code>mesh.panX(x);\nmesh.panY(y);\nmesh.panZ(z);\n</code></pre></li> </ul>"},{"location":"mesh/#model_1","title":"Model","text":"<ul> <li>Position     <pre><code>mesh.modelPosition.x = x;\nmesh.modelPosition.y = y;\nmesh.modelPosition.z = z;\n</code></pre><ul> <li><code>x</code>, <code>y</code>, <code>z</code> : Offset position.<ul> <li><code>z+</code> : Near</li> <li><code>z-</code> : Far</li> <li><code>x-</code> : Left</li> <li><code>x+</code> : Right</li> <li><code>y+</code> : Up</li> <li><code>y-</code> : Down</li> </ul> </li> </ul> </li> <li>Rotation     <pre><code>mesh.modelRotation.x = rotationX;\nmesh.modelRotation.y = rotationY;\nmesh.modelRotation.z = rotationZ;\n</code></pre><ul> <li><code>rotationX</code>, <code>rotationY</code>, <code>rotationZ</code> : Rotation angle in radians.</li> </ul> </li> <li>Scale     <pre><code>mesh.modelScale.x = scaleX;\nmesh.modelScale.y = scaleY;\nmesh.modelScale.z = scaleZ;\n</code></pre><ul> <li><code>scaleX</code>, <code>scaleY</code>, <code>scaleZ</code> : Scale value, <code>1</code> is origin size.</li> </ul> </li> </ul>"},{"location":"mesh/#backward-facing-faces","title":"Backward facing Faces","text":"<ul> <li>Hide backward facing Faces. Default behavior.     <pre><code>mesh.hideCCW = true;\n</code></pre></li> <li>Show backward facing Faces     <pre><code>mesh.hideCCW = false;\n</code></pre></li> </ul>"},{"location":"mesh/#faces","title":"Faces","text":"<p>Mesh is composed of triangle faces.</p> <pre><code>var faces = mesh.faces;\n</code></pre>"},{"location":"mesh/#contains","title":"Contains","text":"<ul> <li>Has any face which contains point     <pre><code>var isHit = mesh.hasFaceAt(worldX, worldY);\n// var isHit = mesh.hasFaceAt(worldX, worldY, camera);\n</code></pre></li> <li>Get face contains point     <pre><code>var face = mesh.getFaceAt(worldX, worldY);\n// var face = mesh.getFaceAt(worldX, worldY, camera);\n</code></pre></li> </ul>"},{"location":"mesh/#properties","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = face.alpha;\n</code></pre></li> <li>Set     <pre><code>face.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Rotate     <pre><code>Phaser.Geom.Mesh.RotateFace(face, radians);\n</code></pre></li> </ul> </li> <li>Center position<ul> <li>Get     <pre><code>var x = face.x;\nvar y = face.y;\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> <li>Set     <pre><code>face.x = x;\nface.y = y;\n</code></pre>     or     <pre><code>face.translate(x, y);\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> </ul> </li> </ul>"},{"location":"mesh/#vertices","title":"Vertices","text":"<p>Each face has 3 vertices.</p> <pre><code>var vertices = mesh.vertices;\n</code></pre> <ul> <li><code>vertices</code> : Array of vertex.</li> </ul>"},{"location":"mesh/#properties_1","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = vertex.alpha;\n</code></pre></li> <li>Set     <pre><code>vertex.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Tint<ul> <li>Get     <pre><code>var color = vertex.color;\n</code></pre></li> <li>Set     <pre><code>vertex.color = color;\n</code></pre></li> </ul> </li> </ul>"},{"location":"mesh/#update-properties","title":"Update properties","text":"<ul> <li>Start updating     <pre><code>mesh.ignoreDirtyCache = true;\n</code></pre></li> <li>Stop updating     <pre><code>mesh.ignoreDirtyCache = false;\n</code></pre></li> </ul>"},{"location":"mesh/#interactive","title":"Interactive","text":"<p>To test if pointer is at any face of this mesh game object.</p> <pre><code>mesh.setInteractive();\n</code></pre>"},{"location":"mesh/#debug","title":"Debug","text":"<ol> <li>Set debug Graphics <pre><code>var debugGraphics = scene.add.graphics();\nmesh.setDebug(debugGraphics);\n</code></pre></li> <li>Update Graphics in <code>scene.update()</code> method.     <pre><code>debugGraphics.clear();\ndebugGraphics.lineStyle(1, 0x00ff00);\n</code></pre></li> </ol>"},{"location":"modal-promise/","title":"Modal promise","text":""},{"location":"modal-promise/#introduction","title":"Introduction","text":"<p>Modal behavior wrapped into promise.</p> <ul> <li>Author: Rex</li> <li>Promise</li> </ul>"},{"location":"modal-promise/#live-demos","title":"Live demos","text":"<ul> <li>Manual</li> <li>Timeout</li> <li>Modal dialog</li> </ul>"},{"location":"modal-promise/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"modal-promise/#install-plugin","title":"Install plugin","text":""},{"location":"modal-promise/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmodalplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmodalplugin.min.js', true);\n</code></pre></li> <li>Add modal behavior     <pre><code>scene.plugins.get('rexmodalplugin').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add modal behavior     <pre><code>scene.plugins.get('rexModal').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ModalPromise } from 'phaser3-rex-plugins/plugins/modal.js';\n</code></pre></li> <li>Add modal behavior     <pre><code>ModalPromise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#promise","title":"Promise","text":"<pre><code>scene.plugins.get('rexModal').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior</li> </ul>"},{"location":"modal-promise/#close","title":"Close","text":"<p><pre><code>scene.plugins.get('rexModal').close(gameObject);\n// scene.plugins.get('rexModal').close(gameObject, closeEventData);\n</code></pre> or <pre><code>gameObject.emit('modal.requestClose');\n// gameObject.emit('modal.requestClose', closeEventData);\n</code></pre></p> <ul> <li>Fire <code>'modal.requestClose'</code> event on game object, which will invoke <code>modal.requestClose()</code> method. After closing dialog, <code>resolve</code> part of promise will be triggered.</li> </ul> <pre><code>graph TB\n\nPromise[\"promose('gameObject, config)\"]\nOnOpen[\"gameObject.on('modal.open')\"]\nRequestCloseEvent[\"gameObject.emit('modal.requestClose', closeEventData)\"]\nTimeOut[\"Timeout&lt;br&gt;Any touch\"]\nOnClose[\"gameObject.on('modal.close')\"]\nResolve[\"then(function(closeEventData) { })\"]\n\nPromise --&gt; |Transition-in| OnOpen\nOnOpen --&gt; |manualClose| RequestCloseEvent\nOnOpen --&gt; |Not manualClose| TimeOut\nRequestCloseEvent --&gt; |Transition-out| OnClose\nTimeOut --&gt; |Transition-out| OnClose\nOnClose --&gt; Resolve</code></pre>"},{"location":"modal-promise/#events","title":"Events","text":"<ul> <li>To invoke <code>modal.requestClose()</code> method     <pre><code>gameObject.emit('modal.requestClose', closeEventData);\n</code></pre></li> <li>On opened dialog     <pre><code>gameObject.on('modal.open', function(modalBehavior) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>gameObject.on('modal.close', function(closeEventData, modalBehavior) {\n})\n</code></pre></li> </ul>"},{"location":"modal/","title":"Modal behavior","text":""},{"location":"modal/#introduction","title":"Introduction","text":"<p>Pop-up modal dialog, then scale-down this dialog.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"modal/#live-demos","title":"Live demos","text":"<ul> <li>Manual</li> <li>Timeout</li> <li>Touch outside</li> <li>Custom transit</li> </ul>"},{"location":"modal/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"modal/#install-plugin","title":"Install plugin","text":""},{"location":"modal/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmodalplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmodalplugin.min.js', true);\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = scene.plugins.get('rexmodalplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = scene.plugins.get('rexModal').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ModalBehavoir } from 'phaser3-rex-plugins/plugins/modal.js';\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = new ModalBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#create-instance","title":"Create instance","text":"<pre><code>var modal = scene.plugins.get('rexModal').add(gameObject, {\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true,\n// openOnStart: true\n});\n</code></pre> <ul> <li><code>cover</code> : Configuration of Cover -- A rectangle shape covered full window, and block all touch events.<ul> <li><code>false</code> : Don't create cover game object.</li> <li><code>cover.transitIn</code> : Custom callback. Default behavior is fade-in.     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> <li><code>cover.transitOut</code> : Custom callback. Default behavior is fade-out.     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>touchOutsideClose</code> : Set to <code>true</code> to close modal dialog when clicking out side of gameObject. <ul> <li>Default value is <code>false</code>.  Will be set to <code>false</code> if <code>anyTouchClose</code> is set to <code>true</code>.</li> </ul> </li> <li><code>anyTouchClose</code> : Set to <code>true</code> to close modal dialog when any clicking. <ul> <li>Default value is <code>false</code>.</li> </ul> </li> <li><code>timeOutClose</code> : Set to <code>true</code> to close modal dialog when holding time out (<code>duration.hold</code>).<ul> <li>If <code>duration.hold</code> is given, default value is <code>true</code>. Otherwise default value is <code>false</code>.</li> </ul> </li> <li><code>manualClose</code> : Set to <code>true</code> to close modal dialog via <code>modal.requestClose()</code> method.<ul> <li>Default value is <code>false</code>. When this parameter is <code>true</code>, other closing methods will be disabled.</li> <li>If <code>touchOutsideClose</code>,  <code>anyTouchClose</code>, and <code>timeOutClose</code> are <code>false</code>, it is equal to <code>manualClose</code>.</li> </ul> </li> <li><code>duration</code> : Duration of transition-in, hold, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.</li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog).<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> <li><code>duration.hold</code> : Duration of hold.<ul> <li><code>-1</code> : Disable <code>timeOutClose</code>.</li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Transition behavior of opening dialog.<ul> <li><code>0</code>, <code>'popUp'</code> : Pop up dialog from <code>0</code> to current scale.</li> <li><code>1</code>, <code>'fadeIn'</code> : Fade in dialog</li> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog.<ul> <li><code>0</code>, <code>'scaleDown'</code> : Scale down dialog</li> <li><code>1</code>, <code>'fadeOut'</code> : Fade out dialog</li> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>destroy</code><ul> <li><code>true</code> : Destroy dialog game object and this behavior when closing completed. Default behavior.</li> <li><code>fasle</code> : Keep dialog game object and this behavior when closing completed. Could reuse it later.</li> </ul> </li> <li><code>openOnStart</code>:<ul> <li><code>true</code> : Open dialog game object (<code>modal.requestOpen()</code>) at beginning. Default behavior.</li> <li><code>false</code> : Open dialog game object manually.</li> </ul> </li> </ul>"},{"location":"modal/#open","title":"Open","text":"<ul> <li>Will open modal dialog game object (run transition-in callback) when creating this behavior,    if <code>openOnStart</code> is set to <code>true</code>.</li> <li>Invoke <code>modal.requestOpen()</code> to open modal dialog game object again, after closing modal dialog.<ul> <li>Set <code>destroy</code> to <code>false</code> to reuse dialog game object and this behavior.</li> </ul> </li> </ul>"},{"location":"modal/#close","title":"Close","text":"<pre><code>modal.requestClose();\n// modal.requestClose(closeEventData);\n</code></pre> <ul> <li><code>closeEventData</code> : Emit <code>'close'</code> event when closed dialog complete, pass <code>closeEventData</code> to callback of this event.     <pre><code>modal.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal/#events","title":"Events","text":"<ul> <li>On opened dialog     <pre><code>modal.on('open', function(gameObject, modal) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>modal.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"mousewheel/","title":"Mouse wheel","text":""},{"location":"mousewheel/#introduction","title":"Introduction","text":"<p>Mouse wheel events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"mousewheel/#usage","title":"Usage","text":""},{"location":"mousewheel/#mouse-wheel-events","title":"Mouse wheel events","text":"<ol> <li>Events on touched Game object     <pre><code>gameObject.on('wheel', function(pointer, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> <li>Event on input plugin for each touched Game object     <pre><code>scene.input.on('gameobjectwheel', function(pointer, gameObject, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> <li>Events to get all touched Game Objects     <pre><code>scene.input.on('wheel', function(pointer, currentlyOver, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> </ol>"},{"location":"mousewheel/#mouse-wheel-properties","title":"Mouse wheel properties","text":"<ul> <li><code>pointer.deltaX</code> : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> <li><code>pointer.deltaY</code> : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> <li><code>pointer.deltaZ</code> : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> </ul>"},{"location":"mousewheelscroller/","title":"Mouse wheel scroller","text":""},{"location":"mousewheelscroller/#introduction","title":"Introduction","text":"<p>Emit scroll event when mouse-wheeling.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"mousewheelscroller/#live-demos","title":"Live demos","text":"<ul> <li>Scroller</li> </ul>"},{"location":"mousewheelscroller/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"mousewheelscroller/#install-plugin","title":"Install plugin","text":""},{"location":"mousewheelscroller/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmousewheelscrollerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmousewheelscrollerplugin.min.js', true);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = scene.plugins.get('rexmousewheelscrollerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MouseWheelScrollerPlugin from 'phaser3-rex-plugins/plugins/mousewheelscroller-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMouseWheelScroller',\nplugin: MouseWheelScrollerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = scene.plugins.get('rexMouseWheelScroller').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MouseWheelScroller from 'phaser3-rex-plugins/plugins/mousewheelscroller.js';\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = new MouseWheelScroller(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#create-instance","title":"Create instance","text":"<pre><code>var scroller = scene.plugins.get('rexMouseWheelScroller').add(gameObject, {\n// focus: false,\n// speed: 0.1,\n// enable: true,\n});\n</code></pre> <ul> <li><code>focus</code> : Fire 'scroll' event when mouse-wheeling --<ul> <li><code>true</code> : Cursor is over game object.</li> <li><code>false</code> : Without checking if cursor is over game object or not. Default behavior.</li> </ul> </li> <li><code>speed</code> : Scrolling speed. Default value is <code>0.1</code>.</li> <li><code>enable</code> : Set <code>true</code> to enable 'scroll' event.</li> </ul>"},{"location":"mousewheelscroller/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>scroller.on('scroll', function(inc, gameObject, scroller) {\n\n}, scope)\n</code></pre><ul> <li><code>inc</code> : Scroll value, <ul> <li>Positive value : Mouse-wheeling down</li> <li>Negative value : Mouse-wheeling up</li> </ul> </li> </ul> </li> </ul>"},{"location":"mousewheelscroller/#speed","title":"Speed","text":"<ul> <li>Set    <pre><code>scroller.setSpeed(speed);\n// scroller.speed = speed;\n</code></pre></li> <li>Get     <pre><code>var speed = scroller.speed;\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#enable","title":"Enable","text":"<ul> <li>Set    <pre><code>scroller.setEnable(enable);\n// scroller.enable = enable;\n</code></pre></li> <li>Get     <pre><code>var enable = scroller.enable;\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/","title":"Mouse-wheel to up/down","text":""},{"location":"mousewheeltoupdown/#introduction","title":"Introduction","text":"<p>Map mouse-wheeling to (up/down) cursor key state.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"mousewheeltoupdown/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"mousewheeltoupdown/#install-plugin","title":"Install plugin","text":""},{"location":"mousewheeltoupdown/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmousewheeltoupdownplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmousewheeltoupdownplugin.min.js', true);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = scene.plugins.get('rexmousewheeltoupdownplugin').add(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MouseWheelToUpDownPlugin from 'phaser3-rex-plugins/plugins/mousewheeltoupdown-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMouseWheelToUpDown',\nplugin: MouseWheelToUpDownPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = scene.plugins.get('rexMouseWheelToUpDown').add(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = new MouseWheelToUpDown(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#create-instance","title":"Create instance","text":"<pre><code>var mouseWheelToUpDown = scene.plugins.get('rexMouseWheelToUpDown').add(scene);\n</code></pre>"},{"location":"mousewheeltoupdown/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = mouseWheelToUpDown.createCursorKeys();\n\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var upKeyDown = mouseWheelToUpDown.up;\nvar downKeyDown = mouseWheelToUpDown.down;\nvar noKeyDown = mouseWheelToUpDown.noKey;\n</code></pre>"},{"location":"mousewheeltoupdown/#destroy","title":"Destroy","text":"<pre><code>mouseWheelToUpDown.destroy();\n</code></pre>"},{"location":"moveto/","title":"Move to","text":""},{"location":"moveto/#introduction","title":"Introduction","text":"<p>Move game object towards target position with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"moveto/#live-demos","title":"Live demos","text":"<ul> <li>Move-to</li> </ul>"},{"location":"moveto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"moveto/#install-plugin","title":"Install plugin","text":""},{"location":"moveto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmovetoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmovetoplugin.min.js', true);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.plugins.get('rexmovetoplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MoveToPlugin from 'phaser3-rex-plugins/plugins/moveto-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMoveTo',\nplugin: MoveToPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.plugins.get('rexMoveTo').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MoveTo from 'phaser3-rex-plugins/plugins/moveto.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = new MoveTo(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#create-instance","title":"Create instance","text":"<pre><code>var moveTo = scene.plugins.get('rexMoveTo').add(gameObject, {\n// speed: 400,\n// rotateToTarget: false\n});\n</code></pre> <ul> <li><code>speed</code> : Moving speed, pixels in second.</li> <li><code>rotateToTarget</code> : Set true to change angle towards path.</li> </ul>"},{"location":"moveto/#start-moving","title":"Start moving","text":"<ul> <li>Move to target position     <pre><code>moveTo.moveTo(x, y);\n</code></pre>     or     <pre><code>moveTo.moveTo({\nx: 0,\ny: 0,\n// speed: 0\n});\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Target position    </li> </ul> </li> <li>Move from start position to current position     <pre><code>moveTo.moveFrom(x, y);\n</code></pre>     or     <pre><code>moveTo.moveFrom({\nx: 0,\ny: 0,\n// speed: 0\n});\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Start position</li> </ul> </li> <li>Move toward angle     <pre><code>moveTo.moveToward(angle, distance);\n</code></pre><ul> <li><code>angle</code> : Angle in radian.</li> </ul> </li> </ul>"},{"location":"moveto/#target-position","title":"Target position","text":"<pre><code>var targetX = moveTo.targetX;\nvar targetY = moveTo.targetY;\n</code></pre>"},{"location":"moveto/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>moveTo.setEnable();\n</code></pre>     or     <pre><code>moveTo.enable = true;\n</code></pre></li> <li>Disable     <pre><code>moveTo.setEnable(false);\n</code></pre>     or     <pre><code>moveTo.enable = false;\n</code></pre></li> </ul>"},{"location":"moveto/#pause-resume-stop-moving","title":"Pause, Resume, stop moving","text":"<pre><code>moveTo.pause();\nmoveTo.resume();\nmoveTo.stop();\n</code></pre>"},{"location":"moveto/#set-speed","title":"Set speed","text":"<pre><code>moveTo.setSpeed(speed);\n// moveTo.speed = speed;\n</code></pre>"},{"location":"moveto/#set-rotate-to-target","title":"Set rotate-to-target","text":"<pre><code>moveTo.setRotateToTarget(rotateToTarget);\n</code></pre> <ul> <li><code>rotateToTarget</code> : Set true to change angle towards target</li> </ul>"},{"location":"moveto/#events","title":"Events","text":"<ul> <li>On start moving     <pre><code>moveTo.on('start', function(gameObject, moveTo){});\n</code></pre></li> <li>On reached target     <pre><code>moveTo.on('complete', function(gameObject, moveTo){});\n// moveTo.once('complete', function(gameObject, moveTo){});\n</code></pre></li> </ul>"},{"location":"moveto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = moveTo.isRunning;\n</code></pre></li> </ul>"},{"location":"mustache/","title":"Mustache","text":""},{"location":"mustache/#introduction","title":"Introduction","text":"<p>Format string with variables. Reference</p>"},{"location":"mustache/#usage","title":"Usage","text":"<pre><code>var template = 'hello, {{name}}';\nvar view = {\nname: 'rex'\n};\nvar result = Mustache.render(template, view);\n</code></pre>"},{"location":"ninepatch/","title":"Nine patch","text":""},{"location":"ninepatch/#introduction","title":"Introduction","text":"<p>Stretchable image.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ninepatch/#live-demos","title":"Live demos","text":"<ul> <li>3x3, 3x3</li> <li>5x5</li> <li>Custom frame name</li> <li>Custom base frame name</li> <li>Preserve ratio</li> <li>Max-fixed-part-scale</li> </ul>"},{"location":"ninepatch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ninepatch/#install-plugin","title":"Install plugin","text":""},{"location":"ninepatch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexninepatchplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexninepatchplugin.min.js', true);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import NinePatchPlugin from 'phaser3-rex-plugins/plugins/ninepatch-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexNinePatchPlugin',\nplugin: NinePatchPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import NinePatch from 'phaser3-rex-plugins/plugins/ninepatch.js';\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = new NinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\nscene.add.existing(ninePatch);\n</code></pre></li> </ul>"},{"location":"ninepatch/#create-instance","title":"Create instance","text":"<pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, {\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, {\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, {\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch({\nx: 0, y: 0,\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, rightWidth: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Width of each column. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>leftWidth</code>, <code>rightWidth</code> : Set <code>columns</code> to <code>[leftWidth, undefined, rightWidth]</code>, if <code>columns</code> is <code>undefined</code>.</li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Height of each row. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>topHeight</code>, <code>bottomHeight</code> : Set <code>rows</code> to <code>[topHeight, undefined, bottomHeight]</code>, if <code>rows</code> is <code>undefined</code>.</li> <li><code>preserveRatio</code> : Preserve ratio of fixed parts (i.e. displaying in origin size). Default is <code>true</code>.</li> <li><code>maxFixedPartScale</code> : Max scale value of fixed-part.</li> <li><code>stretchMode</code> : Stretch mode of edges and internal cells.<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> <li><code>getFrameNameCallback</code> : Callback to get frame name of each cell.<ul> <li><code>undefined</code> : Use default callback.<ul> <li>If <code>baseFrame</code> is <code>'__BASE'</code> : return <code>${colIndex},${rowIndex}</code></li> <li>Else : return <code>${baseFrame}_${colIndex},${rowIndex}</code></li> </ul> </li> <li>Function object : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNinePatch extends NinePatch {\nconstructor(scene, x, y, width, height, key, baseFrame, columns, rows, config) {\nsuper(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ninePatch = new MyNinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#resize","title":"Resize","text":"<pre><code>ninePatch.resize(width, height);\n</code></pre> <p>Will update texture</p>"},{"location":"ninepatch/#set-base-texture-of-source-image","title":"Set base texture of source image","text":"<pre><code>ninePatch.setBaseTexture(key, baseFrame, columns, rows);\n</code></pre> <p>or</p> <pre><code>ninePatch.setBaseTexture(key, baseFrame, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre> <ul> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code>, or <code>null</code> : Use default base frame <code>'__BASE'</code>. Default value.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code> : Width of each column.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code> : Height of each row.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>leftWidth</code>, <code>rightWidth</code> : Set <code>columns</code> to <code>[leftWidth, undefined, rightWidth]</code>.</li> <li><code>topHeight</code>, <code>bottomHeight</code> : Set <code>rows</code> to <code>[topHeight, undefined, bottomHeight]</code>.</li> </ul> <p>Will update texture</p>"},{"location":"ninepatch/#set-stretch-mode","title":"Set stretch mode","text":"<pre><code>ninePatch.setStretchMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#set-get-frame-name-callback","title":"Set get-frame-name callback","text":"<pre><code>ninePatch.setGetFrameNameCallback(callback);\n</code></pre> <ul> <li><code>callback</code> : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`\n}\n</code></pre></li> </ul>"},{"location":"ninepatch/#fixed-part-scale","title":"Fixed-part scale","text":"<ul> <li>Fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.fixedPartScaleX;\nvar scaleY = ninePatch.fixedPartScaleY;\n</code></pre></li> </ul> </li> <li>Max fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.maxFixedPartScaleX;\nvar scaleY = ninePatch.maxFixedPartScaleY;\n</code></pre></li> <li>Set     <pre><code>ninePatch.setMaxFixedPartScale(scale);\n// ninePatch.setMaxFixedPartScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>ninePatch.maxFixedPartScaleX = scaleX;\nninePatch.maxFixedPartScaleY = scaleY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#update-texture","title":"Update texture","text":"<pre><code>ninePatch.updateTexture();\n</code></pre>"},{"location":"ninepatch/#compare-with-nine-slice","title":"Compare with nine-slice","text":"<ul> <li>Nine-slice is a built-in game object.</li> <li>Nine-slice has better render performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> </ul> </li> <li>Nine-slice is webgl mode only.</li> <li>Nine-slice does not have <code>flip</code>, <code>crop</code> methods.</li> </ul>"},{"location":"ninepatch2/","title":"Nine patch2","text":""},{"location":"ninepatch2/#introduction","title":"Introduction","text":"<p>Stretchable image. Has better performance than nine-patch.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ninepatch2/#live-demos","title":"Live demos","text":"<ul> <li>3x3</li> <li>Performance test</li> </ul>"},{"location":"ninepatch2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ninepatch2/#install-plugin","title":"Install plugin","text":""},{"location":"ninepatch2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexninepatch2plugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexninepatch2plugin.min.js', true);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import NinePatch2Plugin from 'phaser3-rex-plugins/plugins/ninepatch2-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexNinePatch2Plugin',\nplugin: NinePatch2Plugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import NinePatch2 from 'phaser3-rex-plugins/plugins/ninepatch2.js';\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = new NinePatch2(scene, x, y, width, height, key, baseFrame, columns, rows, config);\nscene.add.existing(ninePatch);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#create-instance","title":"Create instance","text":"<pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, {\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, {\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, {\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2({\nx: 0, y: 0,\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Width of each column. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Height of each row. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>preserveRatio</code> : Preserve ratio of fixed parts (i.e. displaying in origin size). Default is <code>true</code>.</li> <li><code>maxFixedPartScale</code> : Max scale value of fixed-part.</li> <li><code>stretchMode</code> : Stretch mode of edges and internal cells.<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> <li><code>getFrameNameCallback</code> : Callback to get frame name of each cell.<ul> <li><code>undefined</code> : Use default callback.<ul> <li>If <code>baseFrame</code> is <code>'__BASE'</code> : return <code>${colIndex},${rowIndex}</code></li> <li>Else : return <code>${baseFrame}_${colIndex},${rowIndex}</code></li> </ul> </li> <li>Function object : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNinePatch extends NinePatch2 {\nconstructor(scene, x, y, width, height, key, baseFrame, columns, rows, config) {\nsuper(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ninePatch = new MyNinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#resize","title":"Resize","text":"<pre><code>ninePatch.resize(width, height);\n</code></pre> <p>Will update texture</p>"},{"location":"ninepatch2/#tint","title":"Tint","text":"<ul> <li>Set tint     <pre><code>ninePatch.setTint(tint);\n</code></pre></li> <li>Clear tint     <pre><code>ninePatch.clearTint();\n</code></pre></li> <li>Set tint fill     <pre><code>ninePatch.setTintFill(tint);\n</code></pre></li> <li>Get tint     <pre><code>var tint = ninePatch.tint;\nvar tintFill = ninePatch.tintFill;\n</code></pre><ul> <li><code>tintFill</code> :<ul> <li><code>false</code> : Solid tint + texture alpha</li> <li><code>true</code> : Solid tint, no texture</li> </ul> </li> </ul> </li> </ul>"},{"location":"ninepatch2/#set-texture-of-source-image","title":"Set texture of source image","text":"<pre><code>ninePatch.setBaseTexture(key, baseFrame, columns, rows);\n// ninePatch.setBaseTexture(key, columns, rows);\n</code></pre> <ul> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>. Default value.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code> : Width of each column.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code> : Height of each row.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> </ul> <p>Will update texture</p>"},{"location":"ninepatch2/#set-stretch-mode","title":"Set stretch mode","text":"<pre><code>ninePatch.setStretchMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#set-get-frame-name-callback","title":"Set get-frame-name callback","text":"<pre><code>ninePatch.setGetFrameNameCallback(callback);\n</code></pre> <ul> <li><code>callback</code> : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`\n}\n</code></pre></li> </ul>"},{"location":"ninepatch2/#fixed-part-scale","title":"Fixed-part scale","text":"<ul> <li>Fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.fixedPartScaleX;\nvar scaleY = ninePatch.fixedPartScaleY;\n</code></pre></li> </ul> </li> <li>Max fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.maxFixedPartScaleX;\nvar scaleY = ninePatch.maxFixedPartScaleY;\n</code></pre></li> <li>Set     <pre><code>ninePatch.setMaxFixedPartScale(scale);\n// ninePatch.setMaxFixedPartScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>ninePatch.maxFixedPartScaleX = scaleX;\nninePatch.maxFixedPartScaleY = scaleY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#update-texture","title":"Update texture","text":"<pre><code>ninePatch.updateTexture();\n</code></pre>"},{"location":"ninepatch2/#compare-with-nine-patch","title":"Compare with nine-patch","text":"<ul> <li>Nine-patch2 has better performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> <li>Nine-patch2 draws frames directly.</li> </ul> </li> <li>Nine-patch2 does not have <code>flip</code>, <code>crop</code> methods.</li> <li>Nine-patch2 can't apply custom spriteFx pipeline.</li> </ul>"},{"location":"nineslice/","title":"Nine slice","text":""},{"location":"nineslice/#introduction","title":"Introduction","text":"<p>Display a texture-based object that can be stretched both horizontally and vertically,  but that retains fixed-sized corners, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"nineslice/#usage","title":"Usage","text":""},{"location":"nineslice/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"nineslice/#add-nine-slice-object","title":"Add nine slice object","text":"<pre><code>var nineSlice = scene.add.nineslice(x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre> <p>Add nine slice from JSON</p> <pre><code>var nineSlice = scene.make.nineslice({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// width: 256,\n// height: 256,\n// leftWidth: 10,\n// rightWidth: 10,\n// topHeight: 0,\n// bottomHeight: 0,\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"nineslice/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNineSlice extends Phaser.GameObjects.NineSlice {\nconstructor(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight) {\nsuper(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var nineSlice = new MyNineSlice(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre></li> </ul>"},{"location":"nineslice/#resize","title":"Resize","text":"<pre><code>nineSlice.setSize(width, height);\n</code></pre>"},{"location":"nineslice/#set-texture-of-source-image","title":"Set texture of source image","text":"<pre><code>nineSlice.setTexture(texture, frame);\nnineSlice.setSlices(width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre>"},{"location":"nineslice/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"nineslice/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"nineslice/#create-mask","title":"Create mask","text":"<pre><code>var mask = nineSlice.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"nineslice/#compare-with-nine-patch","title":"Compare with nine-patch","text":"<ul> <li>Nine-slice is a built-in game object.</li> <li>Nine-slice has better render performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> </ul> </li> <li>Nine-slice is webgl mode only.</li> <li>Nine-slice does not have <code>flip</code>, <code>crop</code> methods.</li> </ul>"},{"location":"orientation/","title":"Orientation","text":""},{"location":"orientation/#introduction","title":"Introduction","text":"<p>Get oriention, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"orientation/#usage","title":"Usage","text":""},{"location":"orientation/#orientation","title":"Orientation","text":"<pre><code>var orientation = scene.scale.orientation;\n</code></pre>"},{"location":"orientation/#events","title":"Events","text":"<ul> <li>On orientation change     <pre><code>scene.scale.on('orientationchange', function(orientation) {\nif (orientation === Phaser.Scale.PORTRAIT) {\n// ...\n} else if (orientation === Phaser.Scale.LANDSCAPE) {\n// ...\n}\n});\n</code></pre></li> </ul>"},{"location":"orientation/#lock-orientation","title":"Lock orientation","text":"<pre><code>scene.scale.lockOrientation(orientation)\n</code></pre> <ul> <li><code>orientation</code> :   <ul> <li><code>'portrait'</code></li> <li><code>'landscape'</code></li> <li><code>'portrait-primary'</code></li> <li><code>'portrait-secondary'</code></li> <li><code>'landscape-primary'</code></li> <li><code>'landscape-secondary'</code></li> <li><code>'default'</code></li> </ul> </li> </ul>"},{"location":"pad/","title":"Pad","text":""},{"location":"pad/#introduction","title":"Introduction","text":"<p>Takes the given string and pads it out, to the length required, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"pad/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.Pad(str, len, pad, dir);\n</code></pre> <ul> <li><code>str</code> : String, or number.</li> <li><code>len</code> : Length or result string.</li> <li><code>pad</code> : The string to pad it out.</li> <li><code>dir</code> : <ul> <li><code>1</code> : Left</li> <li><code>2</code> : Right</li> <li><code>3</code> : Both</li> </ul> </li> </ul>"},{"location":"particles-along-bounds/","title":"Particles along bounds","text":""},{"location":"particles-along-bounds/#introduction","title":"Introduction","text":"<p>Emit particles along bounds of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"particles-along-bounds/#live-demos","title":"Live demos","text":"<ul> <li>Particles-along-bounds</li> </ul>"},{"location":"particles-along-bounds/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"particles-along-bounds/#install-plugin","title":"Install plugin","text":""},{"location":"particles-along-bounds/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexparticlesalongboundsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexparticlesalongboundsplugin.min.js', true);\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = scene.plugins.get('rexparticlesalongboundsplugin').startEffect(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragPlugin from 'phaser3-rex-plugins/plugins/particlesalongbounds-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexParticlesAlongBounds',\nplugin: ParticlesAlongBoundsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = scene.plugins.get('rexParticlesAlongBounds').startEffect(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ParticlesAlongBounds from 'phaser3-rex-plugins/plugins/particlesalongbounds.js';\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = ParticlesAlongBounds(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#create-instance","title":"Create instance","text":"<pre><code>var particles = scene.plugins.get('rexParticlesAlongBounds').startEffect(gameObject, {\ntextureKey: key,\n// textureFrames: undefined,\n// padding: 0,\n// blendMode: 'ADD',\n// lifespan: 1000,\n// stepRate: 10,\n// spread: 10,\n\n// scale: undefined,\n// alpha: undefined,\n// tint: undefined,\n\n// repeat: 0,\n// gravityX: 0,\n// gravityY: 0,\n// duration: undefined\n});\n</code></pre> <ul> <li><code>padding</code> : Extra padded space around bounds of game object. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>textureKey</code> : Texture key of particles.</li> <li><code>textureFrames</code> : : One or more texture frames, or a configuration object.<ul> <li>String or number value.</li> <li>Array of string or number value.</li> <li>Configuration object :     <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>blendMode</code> : Blend mode of particles. Default value is <code>ADD</code>.</li> <li><code>lifespan</code> : Lifespan of particle.</li> <li><code>stepRate</code> : Step length between each particle's initial position along bounds of game object.</li> <li><code>spread</code> : Moving speed of particle.</li> <li><code>scale</code> : Scale changing of particle.</li> <li><code>alpha</code> : Alpha changing of particle.</li> <li><code>tint</code> : Tint changing of particle.</li> <li><code>repeat</code> : Fire particles around bounds repeatly.<ul> <li><code>0</code> : Fire particles around bounds one time, default value.</li> </ul> </li> <li><code>gravityX</code>, <code>gravityY</code> : Gravity vector of world axis. This vector will rotate back if game object is rotated.</li> <li><code>duration</code> : Total duration from firing of 1st particle to destroy last particle.<ul> <li><code>undefined</code> : Use default behavior of particles</li> <li>Less or equal to <code>lifespan</code> : Fires all particles at begining.</li> </ul> </li> </ul> <p>Format of <code>spread</code>, <code>scale</code>, <code>alpha</code>, <code>tint</code> parameters :</p> <ul> <li><code>{min, max}</code> : Pick a random value between min and max</li> <li><code>{start, end}</code> : Pick values incremented continuously across a range. (<code>ease</code>=<code>'Linear'</code>)<ul> <li><code>{start, end, ease}</code></li> </ul> </li> <li><code>{start, end, steps}</code> : Pick values incremented by steps across a range.</li> <li><code>{start, end, random}</code><ul> <li><code>random</code>: <code>true</code> or <code>false</code></li> </ul> </li> <li><code>{min, max, steps}</code> : Pick values between min to max, with steps.</li> <li><code>{onEmit: function(particle, key, t, value) {return value}}</code> : Get return value from a function invoking.</li> </ul>"},{"location":"particles-along-bounds/#is-running","title":"Is running","text":"<pre><code>var isRunning = particles.isRunning;\n</code></pre>"},{"location":"particles-along-bounds/#events","title":"Events","text":"<ul> <li>On fire completed, i.e. last particle is dead     <pre><code>particles.on('complete', function(gameObject, particles){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"particles/","title":"Particles","text":""},{"location":"particles/#introduction","title":"Introduction","text":"<p>Particles uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>Note</p> <p>API is not compatible with 3.55.x</p>"},{"location":"particles/#usage","title":"Usage","text":""},{"location":"particles/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"particles/#add-particle","title":"Add particle","text":"<pre><code>var particles = scene.add.particles(x, y, texture, {\n\n// EmitterOp\naccelerationX: 0,\naccelerationY: 0,\nalpha: 1,\nangle: { min: 0, max: 360 },\nbounce: 0,\ncolor: undefined,\ndelay: 0,\nhold: 0,\nlifespan: 1000,\nmaxVelocityX: 10000,\nmaxVelocityY: 10000,\nmoveToX: 0,\nmoveToY: 0,\nquantity: 1,\nrotate: 0,\nscaleX: 1,\nscaleY: 1,\n// scale:\nspeedX: 0,\nspeedY: 0,\nspeed: tint: 0xffffff,\nx: 0,\ny: 0,\n\n// Emitter properties\nactive:\nadvance:\nblendMode:\ncolorEase:\ndeathCallback:\ndeathCallbackScope:\nduration:\nemitCallback:\nemitCallbackScope:\n// callbackScope    \nfrequency:\ngravityX:\ngravityY:\nmaxAliveParticles:\nmaxParticles:\nname:\nemitting:\nparticleBringToTop:\nparticleClass:\nradial:\nsortCallback:\nsortOrderAsc:\nsortProperty:\nstopAfter:\ntintFill:\ntimeScale:\ntrackVisible:\nvisible:\n\n// Position\n// emitZone : random-zone, edge-zone\n// random-zone\nemitZone: {\ntype: 'random',\nsource: geom,\n},\n\n// edge-zone\nemitZone:{\ntype: 'edge',\nsource: geom,\nquantity: 1,\nstepRate: 0,\ntotal: -1,\nyoyo: false,\nseamless: true\n},\n\ndeathZone: {\ntype: 'onEnter', // 'onEnter', or 'onLeave'\nsource: geom,\n},\n\nbounds:               // {x, y, w, h}, or {x, y, width, height}, or Phaser.Geom.Rectangle\ncollideLeft: true,\ncollideRight: true,\ncollideTop: true,\ncollideBottom: true,\n\nfollow:\nfollowOffset:{\nx: 0,\ny: 0\n},\n\n// Texture\ntexture:\nframe:\nanim: [],  // string, or array of string\n\nreserve: 0,\nadvance: 0\n});\n</code></pre> <ul> <li>Parameters of EmitterOp : Number, Random Array, Custom Callback, Stepped start/end, Eased start/end, min/max, Random object, Custom onEmit onUpdate, Interpolation<ul> <li>A number</li> <li><code>{min, max}</code> : Pick a random value between min and max</li> <li><code>{min, max, int}</code></li> <li><code>{start, end}</code> : Pick values incremented continuously across a range. (<code>ease</code>=<code>'Linear'</code>)<ul> <li><code>{start, end, ease}</code></li> <li><code>{start, end, ease, easeParams}</code></li> </ul> </li> <li><code>{start, end, steps}</code> : Pick values incremented by steps across a range.</li> <li><code>{start, end, steps, yoyo: true}</code></li> <li><code>{start, end, random}</code><ul> <li><code>random</code>: <code>true</code> or <code>false</code></li> </ul> </li> <li><code>{random: [start, end]}</code> : Pick a random number between start and and.</li> <li><code>[a, b, c, d]</code> : Pick a random number from an array.</li> <li><code>{min, max, steps}</code> : Pick values between min to max, with steps.</li> <li><code>{ values: [ a, b, c, d ], interpolation: 'catmull', ease: 'linear' }</code> : Interpolation (<code>linear</code>, <code>bezier</code>, <code>catmull</code>) in values array.</li> <li><code>function(particle, key, t, value) { return value; }</code></li> <li><code>{onEmit, onUpdate}</code> : Get return value from a function invoking.     <pre><code>function(particle, key, t, value) {\nreturn value;\n}\n</code></pre></li> </ul> </li> <li><code>active</code> : Whether this emitter updates itself and its particles.<ul> <li><code>false</code> : Equal to pause.</li> </ul> </li> <li><code>advance</code> : If you wish to fast forward the emitter in time, set this value to a number representing the amount of ms the emitter should advance.</li> <li><code>blendMode</code> : See blend mode</li> <li><code>colorEase</code> : The string-based name of the Easing function to use if you have enabled Particle color interpolation via the <code>color</code> property, otherwise has no effect.</li> <li><code>deathCallback</code>, <code>deathCallbackScope</code> <pre><code>function(particle) {\n\n}\n</code></pre></li> <li><code>emitCallback</code>, <code>emitCallbackScope</code> <pre><code>function(particle, emitter) {\n\n}\n</code></pre></li> <li><code>duration</code> : Limit the emitter to emit particles for a maximum of <code>duration</code> ms. <ul> <li><code>0</code> : Forever, default behavior.</li> </ul> </li> <li><code>follow</code> : A Game Object whose position is used as the particle origin.</li> <li><code>followOffset</code> : The offset of the particle origin from thefollow target.</li> <li><code>frequency</code><ul> <li><code>0</code> : One particle flow cycle for each logic update (the maximum flow frequency).</li> <li><code>&gt; 0</code> : The time interval between particle flow cycles in ms.</li> <li><code>-1</code> : Exploding emitter.</li> </ul> </li> <li><code>hold</code> : Frozen or 'held in place' after it has finished its lifespan for a set number of ms </li> <li><code>gravityX</code>, <code>gravityY</code></li> <li><code>maxAliveParticles</code></li> <li><code>maxParticles</code><ul> <li><code>0</code> : Unlimited.</li> <li><code>&gt; 0</code> : Hard limit the amount of particle objects.</li> </ul> </li> <li><code>frames</code> : One or more texture frames, or a configuration object.<ul> <li>String or number value</li> <li>Array of string or number value</li> <li>Configuration object :     <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>anim</code> : <ul> <li>String</li> <li>Array of string</li> <li>Configuration object :     <pre><code>{\nanim: [],  // Array of string\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>particleBringToTop</code> : <ul> <li><code>true</code> : Newly emitted particles are added to the top of the particle list, i.e. rendered above those already alive. Default behavior.</li> </ul> </li> <li><code>sortCallback</code> : The callback used to sort the particles.</li> <li><code>sortProperty</code> : Optionally sort the particles before they render based on this property. The property must exist on the <code>Particle</code> class, such as <code>y</code>, <code>lifeT</code>, <code>scaleX</code>, etc.</li> <li><code>sortOrderAsc</code> : When <code>sortProperty</code> is defined this controls the sorting order, either ascending or descending.</li> <li><code>stopAfter</code> : The Particle Emitter will stop emitting particles once this total has been reached. It will then enter a 'stopped' state, firing the <code>STOP</code> event.</li> <li><code>radial</code> : A radial emitter will emit particles in all directions between angle min and max,</li> <li><code>emitting</code> : Controls if the emitter is currently emitting a particle flow (when frequency &gt;= 0).    Already alive particles will continue to update until they expire.<ul> <li><code>false</code> : Equal to stop</li> </ul> </li> <li><code>tintFill</code> : </li> <li><code>timeScale</code> : The time rate applied to active particles, affecting lifespan, movement, and tweens. Values larger than 1 are faster than normal.</li> <li><code>trackVisible</code> : Whether the emitter's <code>visible</code> state will track the follow target's visibility state.</li> <li><code>emitZone</code> :<ul> <li>Emit zone <pre><code>{\ntype: 'random',\nsource: geom,\n}            </code></pre></li> <li>Emit edge <pre><code>{\ntype: 'edge',\nsource: curve,\n\nquantity: 1,\nstepRate: 0,\nyoyo: false,\nseamless: true\n}            </code></pre></li> </ul> </li> <li><code>deathZone</code> <pre><code>{\ntype: 'onEnter', // 'onEnter', or 'onLeave'\nsource: geom\n}\n</code></pre></li> <li><code>bounds</code> : <code>{x, y, w, h}</code>, or <code>{x, y, width, height}</code>, or Rectangle. </li> <li><code>collideLeft</code>, <code>collideRight</code>, <code>collideTop</code>, <code>collideBottom</code> : Whether particles interact with the left/right/top/bottom edge of the bounds.</li> <li><code>name</code></li> <li><code>particleClass</code></li> </ul>"},{"location":"particles/#control","title":"Control","text":"<ul> <li>Start     <pre><code>emitter.start();\n// emitter.start(advance, duration);\n</code></pre><ul> <li><code>advance</code> : Advance this number of ms in time through the emitter.</li> <li><code>duration</code> : Limit this emitter to only emit particles for the given number of ms. Setting this parameter will override any duration already set in the Emitter configuration object.</li> </ul> </li> <li>Stop     <pre><code>emitter.stop();\n// emitter.stop(kill);\n</code></pre><ul> <li><code>kill</code> : <ul> <li><code>true</code> : Kill all particles immediately</li> <li><code>false</code> : Leave them to die after their lifespan expires. Default behavior.</li> </ul> </li> </ul> </li> <li>Pause     <pre><code>emitter.pause();  // set `active` to false\n</code></pre></li> <li>Resume     <pre><code>emitter.resume();  // set `active` to true\n</code></pre></li> <li>Starts (or restarts) a particle flow.     <pre><code>emitter.flow(frequency, count, stopAfter);\n</code></pre><ul> <li><code>frequency</code> :<ul> <li><code>&gt;= 0</code> : The time interval of each flow cycle, in ms</li> <li><code>-1</code> : Explosion mode.</li> </ul> </li> <li><code>count</code> : The number of particles to emit at each flow cycle.</li> <li><code>stopAfter</code> : Stop this emitter from firing any more particles once this value is reached. <ul> <li>Setting this parameter will override any <code>stopAfter</code> value already set in the Emitter configuration object.</li> <li><code>0</code> : Unlimited</li> </ul> </li> </ul> </li> <li>Explode : Puts the emitter in explode mode (<code>frequency</code> = <code>-1</code>), stopping any current particle flow, and emits several particles all at once.     <pre><code>emitter.explode();\n// emitter.explode(count, x, y);\n</code></pre><ul> <li><code>count</code> : The number of Particles to emit.</li> <li><code>x</code>, <code>y</code> : The x, y coordinate to emit the Particles from.</li> </ul> </li> <li>Emit : Emits particles at the given position. If no position is given, it will emit from this Emitters current location.     <pre><code>emitter.emitParticleAt();\n// emitter.emitParticleAt(x, y, count);    \n</code></pre>     or     <pre><code>emitter.emitParticle(count, x, y);\n</code></pre><ul> <li><code>count</code> : The number of Particles to emit.</li> <li><code>x</code>, <code>y</code> : The x, y coordinate to emit the Particles from.</li> </ul> </li> <li>Fast forward     <pre><code>emitter.fastForward(time, delta);\n</code></pre><ul> <li><code>time</code> : The number of ms to advance the Particle Emitter by.</li> <li><code>delta</code> : The amount of delta to use for each step. Defaults to <code>1000 / 60</code>.</li> </ul> </li> <li>Kill all alive particles     <pre><code>emitter.killAll()\n</code></pre></li> </ul>"},{"location":"particles/#follow-target","title":"Follow target","text":"<ul> <li>Start     <pre><code>emitter.startFollow(target);\n// emitter.startFollow(target, offsetX, offsetY, trackVisible);\n</code></pre><ul> <li><code>target</code> : The Game Object to follow.</li> <li><code>offsetX</code>, <code>offsetY</code> : Horizontal/vertical offset of the particle origin from the Game Object.</li> <li><code>trackVisible</code> : Whether the emitter's visible state will track the target's visible state.    </li> </ul> </li> <li>Stop     <pre><code>emitter.stopFollow();\n</code></pre></li> </ul>"},{"location":"particles/#frame","title":"Frame","text":"<p><pre><code>emitter.setEmitterFrame(frames);\n// emitter.setEmitterFrame(frames, pickRandom, quantity);\n</code></pre> - <code>frames</code> : One or more texture frames, or a configuration object.     - String or number value     - Array of string or number value     - Configuration object :         <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre> - <code>pickRandom</code> :      - <code>true</code> : Whether frames should be assigned at random from <code>frames</code>. Default behavior. - <code>quantity</code> : The number of consecutive particles that will receive each frame. Default value is <code>1</code>.</p>"},{"location":"particles/#animation","title":"Animation","text":"<p><pre><code>emitter.setAnim(anims);\n// emitter.setAnim(anims, pickRandom, quantity);\n</code></pre> - <code>anims</code> : One or more animations, or a configuration object.     - String or number value     - Array of string or number value     - Configuration object :         <pre><code>{\nanims: [],\ncycle: false,\nquantity: 1\n}\n</code></pre> - <code>pickRandom</code> :      - <code>true</code> : Whether frames should be assigned at random from <code>frames</code>. Default behavior. - <code>quantity</code> : The number of consecutive particles that will receive each frame. Default value is <code>1</code>.</p>"},{"location":"particles/#particle","title":"Particle","text":"<ul> <li>Speed     <pre><code>emitter.setParticleSpeed(x, y);\n</code></pre>     or     <pre><code>emitter.speedX = x;\nemitter.speedY = y;\n</code></pre><ul> <li>Changes the emitter from radial to a point emitter</li> </ul> </li> <li>Bounce     <pre><code>emitter.bounce = value;\n</code></pre><ul> <li><code>0</code> : No bounce</li> <li><code>1</code> : Full rebound</li> </ul> </li> <li>Max velocity     <pre><code>emitter.maxVelocityX = x;\nemitter.maxVelocityY = y;\n</code></pre></li> <li>Gravity     <pre><code>emitter.setParticleGravity(x, y);\n</code></pre>     or     <pre><code>emitter.gravityX = x;\nemitter.gravityY = y;\n</code></pre></li> <li>Acceleration     <pre><code>emitter.accelerationX = x;\nemitter.accelerationY = y;\n</code></pre></li> <li>Lifespan : Sets the lifespan of newly emitted particles in milliseconds.     <pre><code>emitter.setParticleLifespan(time);\n</code></pre>     or     <pre><code>emitter.lifespan = time\n</code></pre></li> <li>The number of milliseconds to wait after emission before the particles start updating.     <pre><code>emitter.delay = time;\n</code></pre></li> <li>The number of milliseconds to wait after a particle has finished its life before it will be removed.     <pre><code>emitter.hold = time;\n</code></pre></li> <li>Tint     <pre><code>emitter.setParticleTint(tint);\n</code></pre>     or     <pre><code>emitter.particleTint = tint;\n</code></pre><ul> <li>Webgl only</li> </ul> </li> <li>Color     <pre><code>emitter.particleColor = color;   // WebGL only.\nemitter.colorEase = easeName;\n</code></pre><ul> <li>Webgl only</li> </ul> </li> <li>Alpha     <pre><code>emitter.setParticleAlpha(alpha);\n</code></pre>     or     <pre><code>emitter.setAlpha(alpha);\n</code></pre>     or     <pre><code>emitter.particleAlpha = alpha;\n</code></pre></li> <li>Scale : Sets the vertical and horizontal scale of the emitted particles.     <pre><code>emitter.setParticleScale(x, y);\n</code></pre>     or     <pre><code>emitter.setScale(x, y);\n</code></pre>     or     <pre><code>emitter.particleScaleX = x;\nemitter.particleScaleY = y;\n</code></pre></li> <li>Position     <pre><code>emitter.particleX = x;\nemitter.particleY = y;\n</code></pre></li> <li>Position to move toward     <pre><code>emitter.moveToX = x;\nemitter.moveToY = y;\n</code></pre></li> <li>The angle at which the particles are emitted.     <pre><code>emitter.particleAngle = angle;  // degrees    \n</code></pre></li> <li>The rotation (or angle) of each particle when it is emitted.     <pre><code>emitter.particleRotate = rotation; // degrees\n</code></pre></li> <li>The number of particles that are emitted each time an emission occurs     <pre><code>emitter.quantity = quantity;\n</code></pre></li> <li>Hard limit the amount of particle objects     <pre><code>var count = emitter.maxParticles;\n</code></pre><ul> <li>Whether this emitter is at its limit     <pre><code>var atLimit = emitter.atLimit();\n</code></pre></li> </ul> </li> <li>Alive (active) particles<ul> <li>Amount of alive particles     <pre><code>var count = emitter.getAliveParticleCount();\n</code></pre>     or     <pre><code>var count = emitter.alive.length;\n</code></pre></li> <li>Add callback for newly emitted particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.onParticleEmit(callback, context);\n</code></pre><ul> <li>Clear callback     <pre><code>emitter.onParticleEmit();\n</code></pre></li> </ul> </li> <li>For each alive particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.forEachAlive(callback, context);\n</code></pre></li> </ul> </li> <li>Dead (inactive) particles        <ul> <li>Amount of dead particles     <pre><code>var count = emitter.getDeadParticleCount();\n</code></pre>     or     <pre><code>var count = emitter.dead.length;\n</code></pre></li> <li>Add callback for each particle death     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.onParticleDeath(callback, context);\n</code></pre><ul> <li>Clear callback     <pre><code>emitter.onParticleDeath();\n</code></pre></li> </ul> </li> <li>For each dead particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.forEachDead(callback, context);\n</code></pre></li> <li>Add dead particles into pool     <pre><code>emitter.reserve(count);\n</code></pre></li> </ul> </li> <li>Total (alive + dead) number of particles.     <pre><code>var count = emitter.getParticleCount();\n</code></pre></li> <li>Active particles overlaps with a Rectangle Geometry object or an Arcade Physics Body.     <pre><code>var particles = emitter.overlap(target);\n</code></pre><ul> <li><code>target</code> : <ul> <li>A Rectangle.</li> <li>Arcade Physics Body.</li> </ul> </li> <li><code>particles</code> : An array of Particles that overlap with the given target</li> </ul> </li> <li>Gets a bounds Rectangle calculated from the bounds of all currently active Particles     <pre><code>emitter.getBounds(padding, advance, delta, output);\n</code></pre><ul> <li><code>padding</code> : The amount of padding, in pixels, to add to the bounds Rectangle.</li> <li><code>advance</code>, <code>delta</code> : Fast forward in time to try and allow the bounds to be more accurate.</li> <li><code>output</code> : The Rectangle to store the results in.</li> </ul> </li> <li>Gets the bounds of this particle as a Geometry Rectangle     <pre><code>particle.getBounds();\n</code></pre></li> </ul>"},{"location":"particles/#render-order","title":"Render order","text":"<ul> <li>Sort by property     <pre><code>emitter.setSortProperty(property, ascending);\n</code></pre><ul> <li><code>property</code> : The property on the <code>Particle</code> class to sort by.</li> <li><code>ascending</code> : Should the particles be sorted in ascending or descending order?</li> </ul> </li> <li>Sort by callback     <pre><code>var callback = function(particleA, particleB) {\nreturn 1; // 0,1,-1\n}\nemitter.setSortCallback(callback);\n</code></pre></li> </ul>"},{"location":"particles/#emitter","title":"Emitter","text":"<ul> <li>Frequency     <pre><code>emitter.setFrequency(frequency);\n// emitter.setFrequency(frequency, quantity);\n</code></pre><ul> <li><code>frequency</code> :<ul> <li><code>&gt;= 0</code> : The time interval of each flow cycle, in ms</li> <li><code>-1</code> : Explosion mode.</li> </ul> </li> <li><code>quantity</code> : The number of particles to release at each flow cycle or explosion.</li> </ul> </li> <li>Quantity     <pre><code>emitter.setQuantity(quantity);\n</code></pre><ul> <li><code>quantity</code> : The number of particles to release at each flow cycle or explosion.</li> </ul> </li> </ul>"},{"location":"particles/#zone","title":"Zone","text":""},{"location":"particles/#emit-zone","title":"Emit zone","text":""},{"location":"particles/#add-emit-zone","title":"Add emit zone","text":"<pre><code>var zone = emitter.addEmitZone({\ntype: 'random',\nsource: geom,\n});\n</code></pre> <ul> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon, BitmapZone, or Path or Curve, which has <code>getRandomPoint(point)</code> method<ul> <li>Custom zone     <pre><code>{\ngetRandomPoint: function(point) {\n// point.x = ...\n// point.y = ...\nreturn point;\n}\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"particles/#add-emit-edge","title":"Add emit edge","text":"<pre><code>var zone = emitter.addEmitZone({\ntype: 'edge',\nsource: curve,\n\nquantity: 1,\nstepRate: 0,\nyoyo: false,\nseamless: true,\ntotal: -1\n});\n</code></pre> <ul> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon, or Path or Curve, which has <code>getPoints(quantity, stepRate)</code> method<ul> <li>Custom edge     <pre><code>{\ngetPoints: function(quantity, stepRate) {\n// output = [point0, point1, ...];  // point: Phaser.Math.Vector2, or {x, y}\nreturn output;\n}\n}\n</code></pre></li> </ul> </li> <li><code>quantity</code> : The number of particles to place on the source edge. Set to 0 to use <code>stepRate</code> instead.</li> <li><code>stepRate</code> : The distance between each particle. When set, <code>quantity</code> is implied and should be set to 0.</li> <li><code>yoyo</code> : Whether particles are placed from start to end and then end to start. Default is <code>false</code>.</li> <li><code>seamless</code> : Whether one endpoint will be removed if it's identical to the other. Default is <code>true</code>.</li> <li><code>total</code> : The total number of particles this zone will emit before passing over to the next emission zone in the Emitter.</li> </ul> <p>quantity or stepRate</p> <ul> <li>Any geometry like circle, ellipse, kine, polygon, rectangle, triangle source has quantity, or stepRate</li> <li>Curve source has quantity, or stepRate</li> <li>Path source only has quantity</li> </ul>"},{"location":"particles/#set-emit-zone","title":"Set emit zone","text":"<pre><code>emitter.setEmitZone(zone);\n</code></pre> <ul> <li><code>zone</code> : The Emit Zone to set as the active zone.<ul> <li>A zone object</li> <li>A number as index</li> </ul> </li> </ul>"},{"location":"particles/#zone-source","title":"Zone source","text":"<ul> <li>Get     <pre><code>// var zone = emitter.emitZones[i];\nvar source = zone.source;    </code></pre></li> <li>(Edge type only) Update points of curve source     <pre><code>zone.updateSource();\n</code></pre></li> <li>(Edge type only) Set source to another curve, also update points     <pre><code>zone.changeSource(curve);\n</code></pre></li> </ul>"},{"location":"particles/#remove-emit-zone","title":"Remove emit zone","text":"<pre><code>emitter.removeEmitZone(zone)\n</code></pre>"},{"location":"particles/#clear-emit-zone","title":"Clear emit zone","text":"<pre><code>emitter.emitZones.length = 0;\nemitter.zoneIndex = 0;\n</code></pre>"},{"location":"particles/#death-zone","title":"Death zone","text":"<pre><code>var zone = emitter.addDeathZone({\ntype: 'onEnter',\nsource: geom\n});\n</code></pre> <ul> <li><code>type</code> : <code>'onEnter'</code> or <code>'onLeave'</code></li> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon<ul> <li>Custom <code>source</code> :     <pre><code>{\ncontains: function (x, y) {\n// ...\nreturn bool;\n}\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"particles/#remove-death-zone","title":"Remove death zone","text":"<pre><code>emitter.removeDeathZone(zone)\n</code></pre>"},{"location":"particles/#clear-death-zone","title":"Clear death zone","text":"<pre><code>emitter.deathZones.length = 0;\n</code></pre>"},{"location":"particles/#events","title":"Events","text":"<ul> <li>Starts emission of particles.     <pre><code>emitter.on('start', function(emitter) {\n\n})\n</code></pre></li> <li>Explodes a set of particles.     <pre><code>emitter.on('explode', function(emitter, particle) {\n\n})\n</code></pre></li> <li>Death Zone kills a Particle instance.     <pre><code>emitter.on('deathzone', function(emitter, particle, zone) {\n\n})\n</code></pre></li> <li>Stops emission     <pre><code>emitter.on('stop', function(emitter) {\n\n})\n</code></pre><ul> <li>Directly call the <code>ParticleEmitter.stop</code> method.</li> <li>Stop after a set time via the <code>duration</code> property.</li> <li>Stop after a set number of particles via the <code>stopAfter</code> property.</li> </ul> </li> <li>Complete Event, no particles are still rendering at this point in time.     <pre><code>emitter.on('complete', function(emitter) {\n\n})\n</code></pre></li> </ul>"},{"location":"particles/#bounds","title":"Bounds","text":"<ul> <li>Add bounds     <pre><code>var bounds = emitter.addParticleBounds(x, y, width, height);\n// var bounds = emitter.addParticleBounds(x, y, width, height, collideLeft, collideRight, collideTop, collideBottom);\n</code></pre>     or     <pre><code>var bounds = emitter.addParticleBounds(rect);\n</code></pre><ul> <li><code>x, y, width, height</code>, <code>{x, y, width, height}</code>, or <code>{x, y, w, h}</code>, or Rectangle : Bounds</li> <li><code>collideLeft</code>, <code>collideRight</code>, <code>collideTop</code>, <code>collideBottom</code> : Whether particles interact with the left/right/top/bottom edge of the bounds.</li> </ul> </li> <li>Collide edges     <pre><code>bounds.collideLeft = enabled;\nbounds.collideRight = enabled;\nbounds.collideTop = enabled;\nbounds.collideBottom = enabled;\n</code></pre></li> <li>Bound rectangle     <pre><code>var rect = bounds.bounds;\n</code></pre><ul> <li><code>rect</code> : Rectangle</li> </ul> </li> </ul>"},{"location":"particles/#gravity-well","title":"Gravity well","text":"<ul> <li>Create a gravity well   <pre><code>var well = particles.createGravityWell({\n// x: 0,\n// y: 0,\n// power: 0,\n// epsilon: 100,\n// gravity: 50\n});\n</code></pre></li> <li>Enable<ul> <li>Active    <pre><code>well.active = true;\n</code></pre></li> <li>Inactive    <pre><code>well.active = false;\n</code></pre></li> </ul> </li> <li>Position     <pre><code>well.x = x;\nwell.y = y;\n</code></pre></li> <li>Gravity     <pre><code>well.gravity = value;\n</code></pre></li> <li>Power     <pre><code>well.power = value;\n</code></pre></li> </ul>"},{"location":"particles/#custom-particle-processor","title":"Custom Particle Processor","text":"<ul> <li>Declare Particle Processor class     <pre><code>class MyParticleProcessor extends Phaser.GameObjects.Particles.ParticleProcessor {\nconstructor() {\nsuper(x, y, active);\n// ...\n}\n\nupdate(particle, delta, step, t) {\n// particle : The Particle to update.\n// delta : The delta time in ms.\n// step : The delta value divided by 1000.\n// t : The current normalized lifetime of the particle, between 0 (birth) and 1 (death).\n}\n\ndestroy() {\nsuper.destroy();\n}\n}\n</code></pre><ul> <li>Override <code>update</code> method</li> </ul> </li> <li>Add to emitter     <pre><code>var myParticleProcessor = emitter.addParticleProcessor(new MyParticleProcessor);\n</code></pre></li> </ul>"},{"location":"particles/#custom-particle-class","title":"Custom particle class","text":"<pre><code>class MyParticle extends Phaser.GameObjects.Particles.Particle {\nconstructor (emitter) {\nsuper(emitter);\n/* ... */\n}\n\nupdate (delta, step, processors) {\nsuper.update(delta, step, processors);\n/* ... */\n}\n}\n</code></pre>"},{"location":"path/","title":"Path","text":""},{"location":"path/#introduction","title":"Introduction","text":"<p>Path in curves, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"path/#usage","title":"Usage","text":""},{"location":"path/#add-path-object","title":"Add path object","text":"<pre><code>var path = scene.add.path();\n// var path = scene.add.path(x, y);  // curve start from (x, y)\n</code></pre> <p>or</p> <pre><code>var path = new Phaser.Curves.Path();\n// var path = new Phaser.Curves.Path(x, y);  // curve start from (x, y)\n</code></pre>"},{"location":"path/#add-path-object-with-curves","title":"Add path object with curves","text":"<p>Curves in JSON</p> <p><pre><code>var path = scene.add.path(json);\n</code></pre> or <pre><code>var path = new Phaser.Curves.Path(json);\n</code></pre></p>"},{"location":"path/#add-curve","title":"Add curve","text":""},{"location":"path/#line","title":"Line","text":"<ul> <li>Add line object<ol> <li>Create line object     <pre><code>var curve = new Phaser.Curves.Line({x: x0, y: y0}, {x: x1, y: y1});\n</code></pre>     or     <pre><code>var curve = new Phaser.Curves.Line([x0, y0, x1, y1]);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add line started from previous end point to next point     <pre><code>path.lineTo(endX, endY);\n</code></pre>     or     <pre><code>path.lineTo(new Phaser.Math.Vector2({x, y}));\n</code></pre></li> </ul> <p>Properties:</p> <ul> <li><code>curve.p0</code> : The first endpoint.<ul> <li><code>curve.p0.x</code>, <code>curve.p0.y</code></li> </ul> </li> <li><code>curve.p1</code> : The second endpoint.<ul> <li><code>curve.p1.x</code>, <code>curve.p1.y</code></li> </ul> </li> </ul>"},{"location":"path/#circleellipsearc","title":"Circle/ellipse/arc","text":"<ul> <li>Add circle/ellipse/arc object<ol> <li>Create circle/ellipse/arc object<ul> <li>Circle     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, radius);\n</code></pre></li> <li>Ellipse     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius);\n</code></pre></li> <li>Arc     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise,     rotation);\n</code></pre></li> </ul> </li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add circle/ellipse/arc started from previous end point to next point<ul> <li>Circle     <pre><code>path.circleTo(radius);\n</code></pre></li> <li>Ellipse     <pre><code>path.ellipseTo(xRadius, yRadius);\n</code></pre></li> <li>Arc     <pre><code>path.ellipseTo(xRadius, yRadius, startAngle, endAngle, clockwise, rotation);\n</code></pre></li> </ul> </li> </ul> <p>Properties:</p> <ul> <li><code>curve.p0</code> : Center point.<ul> <li><code>curve.p0.x</code>, <code>curve.p0.y</code></li> </ul> </li> <li><code>curve.xRadius</code>, <code>curve.yRadius</code> : Horizontal/vertical radiuse.</li> <li><code>curve.startAngle</code>, <code>curve.endAngle</code> : Start/end angle, in degrees.</li> <li><code>curve.clockwise</code> : <code>true</code> if Clockwise, <code>false</code> if anti-clockwise.</li> <li><code>curve.angle</code> : Rotation, in degrees.<ul> <li><code>curve.rotation</code> : Rotation, in radians.</li> </ul> </li> </ul>"},{"location":"path/#spline","title":"Spline","text":"<ul> <li>Add spline object<ol> <li>Create spline object     <pre><code>var curve = new Phaser.Curves.Spline([\np0,            // {x, y}, or [x, y]\np1,            // {x, y}, or [x, y]\n// ...\n]);\n</code></pre>     or     <pre><code>var curve = new Phaser.Curves.Spline([\nx0, y0,\nx1, y1,\n// ...\n]);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add spline started from previous end point to next point     <pre><code>var points = ;\npath.splineTo([\np0,            // {x, y}, or [x, y]\np1,            // {x, y}, or [x, y]\n// ...\n]);\n</code></pre>     or     <pre><code>path.splineTo([\nx0, y0,\nx1, y1,\n// ...\n]);\n</code></pre></li> </ul>"},{"location":"path/#append-point","title":"Append point","text":"<pre><code>var point = curve.addPoint(x, y);\n</code></pre>"},{"location":"path/#quadratic-bezier-curve","title":"Quadratic bezier curve","text":"<ol> <li>Create quadratic bezier curve object     <pre><code>var curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint, endPoint); // point: {x, y}\n</code></pre>     or     <pre><code>var points = [\nx0, y0,     // start point\nx1, y1,     // control point\nx2, y2      // end point\n];\nvar curve = new Phaser.Curves.QuadraticBezier(points);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> <p>Add quadratic bezier curve started from previous end point to next point</p> <p><pre><code>path.quadraticBezierTo(endX, endY, controlX, controlY);\n</code></pre> or <pre><code>path.quadraticBezierTo(endPoint, controlPoint);  // point : Phaser.Math.Vector2\n</code></pre></p>"},{"location":"path/#cubic-bezier-curve","title":"Cubic bezier curve","text":"<ol> <li>Create quadratic bezier curve object     <pre><code>var curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint); // point: {x, y}\n</code></pre>     or     <pre><code>var points = [\nx0, y0,     // start point\nx1, y1,     // control point1\nx2, y2,     // control point2\nx3, y3      // end point\n];\nvar curve = new Phaser.Curves.CubicBezier(points);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> <p>Add cubic bezier curve started from previous end point to next point</p> <p><pre><code>path.cubicBezierTo(endX, endY, control1X, control1Y, control2X, control2Y);\n</code></pre> or <pre><code>path.cubicBezierTo(endPoint, controlPoint1, controlPoint2);  // point : Phaser.Math.Vector2\n</code></pre></p>"},{"location":"path/#move-to-point","title":"Move to point","text":"<pre><code>path.moveTo(x, y);\n</code></pre>"},{"location":"path/#add-curves-from-json","title":"Add curves from JSON","text":"<pre><code>path.fromJSON(json);\n</code></pre>"},{"location":"path/#get-curves","title":"Get curves","text":"<pre><code>var curves = path.curves;\n</code></pre>"},{"location":"path/#get-curve-at-t","title":"Get curve at t","text":"<pre><code>var curve = path.getCurveAt(t);\n</code></pre> <ul> <li><code>t</code> : The normalized location on the Path. Between <code>0</code> and <code>1</code></li> </ul>"},{"location":"path/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>path.draw(graphics);\n// path.draw(graphics, pointsTotal);\n</code></pre> <ul> <li><code>pointsTotal</code> : The number of points to draw for each Curve.</li> </ul> <p>or</p> <pre><code>curve.draw(graphics);\n// curve.draw(graphics, pointsTotal);\n</code></pre> <ul> <li><code>pointsTotal</code> : The resolution of the curve.</li> </ul>"},{"location":"path/#point","title":"Point","text":"<ul> <li>Get point     <pre><code>var out = path.getPoint(t);  // t: 0 ~ 1\n// var out = path.getPoint(t, out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getPoint(t);  // t: 0 ~ 1\n// var out = curve.getPoint(t, out);  // modify out\n</code></pre>     Distance of path from start point to target point (out) might not linear with t.</li> <li>Get random point     <pre><code>var out = path.getRandomPoint();\n// var out = path.getRandomPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getRandomPoint();\n// var out = curve.getRandomPoint(out);  // modify out\n</code></pre></li> <li>Get n points<ul> <li>Path     <pre><code>var points = path.getPoints(divisions);\n</code></pre><ul> <li><code>divisions</code> : The number of divisions per resolution per curve.</li> </ul> </li> <li>Curve     <pre><code>var points = curve.getPoints(divisions);\n// var points = curve.getPoints(divisions, undefined, out);\n</code></pre>     or     <pre><code>var points = curve.getPoints(undefined, stepRate);\n// var points = curve.getPoints(undefined, stepRate, out);\n</code></pre><ul> <li><code>divisions</code> : The number of divisions in this curve.<ol> <li><code>divisions</code>, if <code>divisions &gt; 0</code>, else</li> <li><code>this.getLength / stepRate</code>, if <code>stepRate &gt; 0</code>, else</li> <li><code>defaultDivisions</code></li> </ol> </li> <li><code>points</code> : Return <code>1 + divisions</code> points.</li> </ul> </li> </ul> </li> <li>Get (n+1) points equally spaced out along the curve     <pre><code>var points = path.getSpacedPoints(n);\n</code></pre>     or     <pre><code>var points = curve.getSpacedPoints(n);\n// var points = curve.getSpacedPoints(undefined, stepRate);\n// var points = curve.getSpacedPoints(divisions, stepRate, out);\n</code></pre></li> <li>Get points spaced out n distance pixels apart     <pre><code>var points = curve.getDistancePoints(n)\n</code></pre>     The smaller the distance, the larger the array will be.     Path object does NOT support this feature yet.</li> <li>Get start point     <pre><code>var out = path.getStartPoint();\n// var out = path.getStartPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getStartPoint();\n// var out = curve.getStartPoint(out);  // modify out\n</code></pre></li> <li>Get end point     <pre><code>var out = path.getEndPoint();\n// var out = path.getEndPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getEndPoint();\n// var out = curve.getEndPoint(out);  // modify out\n</code></pre></li> <li>Get t (0~1) from distance     <pre><code>var t = curve.getTFromDistance(d);\n</code></pre>     Path object does NOT support this feature yet.</li> <li>Get tangent     <pre><code>var out = path.getTangent(t);  // t: 0~1\n// var out = path.getTangent(t, out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getTangent(t);  // t: 0~1\n// var out = curve.getTangent(t, out);  // modify out\n</code></pre></li> </ul>"},{"location":"path/#length-of-path","title":"Length of path","text":"<p><pre><code>var l = path.getLength();\n</code></pre> or <pre><code>var l = curve.getLength();\n</code></pre></p> <p>Length of path/curve will be cached.</p>"},{"location":"path/#update-length","title":"Update length","text":"<p><pre><code>path.updateArcLengths();\n</code></pre> or <pre><code>curve.updateArcLengths();\n</code></pre></p>"},{"location":"path/#curves-to-json","title":"Curves to JSON","text":"<p><pre><code>var json = path.toJSON();\n</code></pre> or <pre><code>var json = curve.toJSON();\n</code></pre></p>"},{"location":"path/#bounds","title":"Bounds","text":"<p>Get bounds</p> <p><pre><code>var out = path.getBounds();    // accuracy = 16\n// var out = path.getBounds(out);\n// var out = path.getBounds(out, accuracy);\n</code></pre> or <pre><code>var out = curve.getBounds();    // accuracy = 16\n// var out = curve.getBounds(out);\n// var out = curve.getBounds(out, accuracy);\n</code></pre></p> <ul> <li><code>out</code> : A rectangle object</li> </ul>"},{"location":"path/#destroy","title":"Destroy","text":"<pre><code>path.destroy();\n</code></pre>"},{"location":"pathfollower/","title":"Path follower","text":""},{"location":"pathfollower/#introduction","title":"Introduction","text":"<p>Set position of game object on a path.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"pathfollower/#live-demos","title":"Live demos","text":"<ul> <li>Path follower</li> <li>Spaced points</li> </ul>"},{"location":"pathfollower/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"pathfollower/#install-plugin","title":"Install plugin","text":""},{"location":"pathfollower/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpathfollowerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpathfollowerplugin.min.js', true);\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = scene.plugins.get('rexpathfollowerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PathFollowerPlugin from 'phaser3-rex-plugins/plugins/pathfollower-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPathFollower',\nplugin: PathFollowerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = scene.plugins.get('rexPathFollower').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PathFollower from 'phaser3-rex-plugins/plugins/pathfollower.js';\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = new PathFollower(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#create-instance","title":"Create instance","text":"<pre><code>// var path = scene.add.path();\nvar pathFollower = scene.plugins.get('rexPathFollower').add(gameObject, {\n// path: path,          // path object\n// t: 0,                // t: 0~1\n// rotateToPath: false,\n// rotationOffset: 0,\n// angleOffset: 0,\n\n// spacedPoints: false,\n// spacedPoints: {\n//     divisions: undefined,\n//     stepRate: 10,\n// }\n\n});\n</code></pre> <ul> <li><code>path</code> : Path object</li> <li><code>t</code> : Initial value of property <code>t</code> (0~1)</li> <li><code>rotateToPath</code>: Set true to change angle towards path</li> <li><code>rotationOffset</code> : Rotation offset in radian, or <code>angleOffset</code> in degrees</li> <li><code>spacedPoints</code> :<ul> <li><code>false</code>, or <code>undefined</code> : Get point by <code>path.getPoint(t)</code></li> <li><code>spacedPoints.divisions</code>, <code>spacedPoints.stepRate</code> : <ol> <li>Get points by <code>path.getSpacedPoints(divisions, stepRate)</code></li> <li>Get point from linear interpolation of points in step1.</li> </ol> </li> </ul> </li> </ul>"},{"location":"pathfollower/#move-along-path","title":"Move along path","text":"<p>Set <code>pathFollower.t</code> (0~1) to move along path</p> <pre><code>pathFollower.t = t;  // t: 0~1\n// pathFollower.setT(t);\n</code></pre> <p>or tween <code>pathFollower.t</code></p> <pre><code>var tween = scene.tweens.add({\ntargets: pathFollower,\nt: 1,\nease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,\nyoyo: false\n});\n</code></pre>"},{"location":"pathfollower/#set-path","title":"Set path","text":"<pre><code>pathFollower.setPath(path);\n</code></pre>"},{"location":"pathfollower/#set-rotate-to-path","title":"Set rotate-to-path","text":"<pre><code>pathFollower.setRotateToPath(rotateToPath, rotationOffset);\n</code></pre> <ul> <li><code>rotateToPath</code> : Set <code>true</code> to change angle towards path</li> <li><code>rotationOffset</code> : Rotation offset in radian</li> </ul>"},{"location":"percentage/","title":"Percentage","text":""},{"location":"percentage/#introduction","title":"Introduction","text":"<p>Work out what percentage <code>value</code> is of the range between <code>min</code> and <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"percentage/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Percent(value, min, max);\n</code></pre> <ul> <li><code>result</code>: Percentage/t (0~1).</li> <li><code>value</code> : The value to determine the percentage of.</li> </ul>"},{"location":"perlin/","title":"Perlin","text":""},{"location":"perlin/#introduction","title":"Introduction","text":"<p>Perlin2/Perlin3 noise and simplex2/simplex3 noise. (Reference)</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"perlin/#live-demos","title":"Live demos","text":"<ul> <li>Perlin2</li> <li>Terrain generator</li> </ul>"},{"location":"perlin/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perlin/#install-plugin","title":"Install plugin","text":""},{"location":"perlin/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperlinplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperlinplugin.min.js', true);\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = scene.plugins.get('rexperlinplugin').add(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerlinPlugin from 'phaser3-rex-plugins/plugins/perlin-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerlin',\nplugin: PerlinPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = scene.plugins.get('rexPerlin').add(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Perlin from 'phaser3-rex-plugins/plugins/perlin.js';\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = new Perlin(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#create-noise-instance","title":"Create noise instance","text":"<pre><code>var noise = scene.plugins.get('rexPerlin').add(seed);\n</code></pre> <ul> <li><code>seed</code> : A seed for this noise, like <code>Math.random()</code></li> </ul>"},{"location":"perlin/#perlin","title":"Perlin","text":"<ul> <li>Perlin2     <pre><code>var value = noise.perlin2(x, y);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> <li>Perlin3     <pre><code>var value = noise.perlin3(x, y, z);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"perlin/#simplex","title":"Simplex","text":"<ul> <li>Simplex2     <pre><code>var value = noise.simplex2(x, y);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code> </li> </ul> </li> <li>Simplex3     <pre><code>var value = noise.simplex3(x, y, z);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"perlin/#set-seed","title":"Set seed","text":"<pre><code>noise.setSeed(seed);\n</code></pre>"},{"location":"perspective-card/","title":"Card","text":""},{"location":"perspective-card/#introduction","title":"Introduction","text":"<p>A container with two perspective-images.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-card/#live-demos","title":"Live demos","text":"<ul> <li>Flip card</li> <li>Label front face</li> </ul>"},{"location":"perspective-card/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-card/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-card/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.add.rexPerspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.add.rexPerspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCard } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add card object     <pre><code>var card = new PerspectiveCard(scene, config);\nscene.add.existing(card);\n</code></pre></li> </ul>"},{"location":"perspective-card/#create-instance","title":"Create instance","text":"<pre><code>var card = scene.add.rexPerspectiveCard({\nx: 0, y: 0,\n\nback: {key, frame},\nfront: {key, frame},\nface: 0,\n\norientation: 0,\n\n// width,\n// height,\n\n// flip : {\n//     frontToBack: 0,\n//     backToFront: 1,\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n// flip: false\n});\n</code></pre> <ul> <li><code>front</code>, <code>back</code> : Perspective image game object for front and back face.<ul> <li><code>{key, frame}</code> : Texture key and frame name, to create perspective image</li> <li><code>{width, height}</code> : Width and height, to create perspective render texture.</li> <li>Perspective image</li> <li>Perspective render texture</li> </ul> </li> <li><code>face</code> : Show front or back face.<ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Flipping left-to-right, or right-to-left.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Flipping top-to-bottom, or bottom-to-top.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Specific width and height of this card container.<ul> <li><code>undefined</code> : Use width and height of front and back face.</li> </ul> </li> <li><code>flip</code> : Configuration of flipping behavior.<ul> <li><code>flip.frontToBack</code>, <code>flip.backToFront</code> : Flipping direction.<ul> <li><code>'right'</code>, <code>'left-to-right'</code>, or <code>0</code> : Flipping from right to left.</li> <li><code>'left'</code>, <code>'right-to-left'</code>, or <code>1</code> : Flipping from left to right.</li> </ul> </li> <li><code>flip.duration</code> : Duration of flipping, in millisecond.</li> <li><code>flip.delay</code> : Initial delay.</li> <li><code>flip.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add flipping behavior.</li> </ul> </li> </ul> <p>Add card from JSON</p> <pre><code>var card = scene.make.rexPerspectiveCard({\nx: 0,\ny: 0,\n\nfront,\nback,\nface: 0,\n\norientation: 0,\n\nwidth,\nheight,\n\nflip,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-card/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCard extends PerspectiveCard {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var card = new MyPerspectiveCard(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = card.face;\n</code></pre><ul> <li><code>face</code>:<ul> <li><code>0</code> : Show front face.</li> <li><code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>card.setFace(face)\n</code></pre><ul> <li><code>face</code><ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Toggle     <pre><code>card.toggleFace()\n</code></pre></li> </ul>"},{"location":"perspective-card/#face-instances","title":"Face instances","text":"<ul> <li>Front face     <pre><code>var frontFace = card.frontFace;\n// var frontFace = card.faces.front;\n</code></pre></li> <li>Back face     <pre><code>var backFace = card.backFace;\n// var backFace = card.faces.back;\n</code></pre></li> </ul>"},{"location":"perspective-card/#flip-behavior","title":"Flip behavior","text":""},{"location":"perspective-card/#start-flipping","title":"Start flipping","text":"<pre><code>card.flip.flip();\n// card.flip.flip(duration, repeat);\n</code></pre> <ul> <li><code>duration</code> : Overwrite default duration value.</li> <li><code>repeat</code> : Number of flipping time (<code>repeat + 1</code>) during <code>duration</code>. Default value is <code>0</code>.</li> </ul> <p>or</p> <ul> <li>Flip-right     <pre><code>card.flip.flipRight();\n// card.flip.flipRight(duration, repeat);\n</code></pre></li> <li>Flip-left     <pre><code>card.flip.flipLeft();\n// card.flip.flipLeft(duration, repeat);\n</code></pre></li> </ul>"},{"location":"perspective-card/#stop-flipping","title":"Stop flipping","text":"<pre><code>card.flip.stop();\n</code></pre>"},{"location":"perspective-card/#set-duration","title":"Set duration","text":"<pre><code>card.flip.setDuration(duration);\n// card.flip.duration = duration;\n</code></pre>"},{"location":"perspective-card/#set-ease","title":"Set ease","text":"<pre><code>card.flip.setEase(ease);\n// card.flip.ease = ease;\n</code></pre>"},{"location":"perspective-card/#events","title":"Events","text":"<ul> <li>On flipping start     <pre><code>card.flip.on('start', function(flip, card){\n// ...\n});\n</code></pre></li> <li>On flipping complete     <pre><code>card.flip.on('complete', function(flip, card){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-card/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = card.flip.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-card/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = card.angleX; // Angle in degrees\nvar angleY = card.angleY; // Angle in degrees\nvar angleZ = card.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = card.rotationX; // Angle in radians\nvar rotationY = card.rotationY; // Angle in radians\nvar rotationZ = card.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>card.angleX = angleX; // Angle in degrees\ncard.angleY = angleY; // Angle in degrees\ncard.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>card.rotationX = rotationX; // Angle in radians\ncard.rotationY = rotationY; // Angle in radians\ncard.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-card/#debug","title":"Debug","text":"<ol> <li>Set debug Graphics <pre><code>var debugGraphics = scene.add.graphics();\ncard.setDebug(debugGraphics);\n</code></pre></li> <li>Update Graphics in <code>scene.update()</code> method.     <pre><code>debugGraphics.clear();\ndebugGraphics.lineStyle(1, 0x00ff00);\n</code></pre></li> </ol>"},{"location":"perspective-card/#other-properties","title":"Other properties","text":"<p>See container.</p>"},{"location":"perspective-carousel/","title":"Carousel","text":""},{"location":"perspective-carousel/#introduction","title":"Introduction","text":"<p>A container with cards.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-carousel/#live-demos","title":"Live demos","text":"<ul> <li>Carousel</li> <li>List</li> <li>UI cards</li> </ul>"},{"location":"perspective-carousel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-carousel/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-carousel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCarousel } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = new PerspectiveCarousel(scene, config);\nscene.add.existing(carousel);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#create-instance","title":"Create instance","text":"<pre><code>var carousel = scene.add.rexPerspectiveCarousel({\nx: 0, y: 0,\n\nfaces: [],\n// face: 0,\n// rtl: false,\n\n// width,\n// height,\n\n// faceWidth,\n// faceSpace: 0,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n});\n</code></pre> <ul> <li><code>faces</code> : Array of perspective-card, perspective-rendertexture, perspective-image, or <code>null</code>.<ul> <li>Assume that all faces have the same size</li> </ul> </li> <li><code>face</code> : Index or name of current face (face at angle <code>0</code>).</li> <li><code>rtl</code><ul> <li><code>false</code> : Place faces from left to right. Default behavior.</li> <li><code>true</code> : Place faces from right to left.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Specific width and height of this carousel container.<ul> <li><code>undefined</code> : Use width and height of first face.</li> </ul> </li> <li><code>faceWidth</code> : Width of face. <ul> <li><code>undefined</code> : Use width of face. Assume that all faces have the same size.</li> </ul> </li> <li><code>faceSpace</code> : Extra space of face width. Used when <code>faceWidth</code> is <code>undefined</code>.</li> <li><code>z</code>, <code>zEnd</code> : Range of faces' z-index. Default value is <code>1</code>/<code>0</code>.</li> <li><code>roll</code> : Configuration of rolling behavior.<ul> <li><code>roll.duration</code> : Duration of rolling, in millisecond.</li> <li><code>roll.delay</code> : Initial delay.</li> <li><code>roll.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add rolling behavior.</li> </ul> </li> </ul> <p>Add carousel from JSON</p> <pre><code>var carousel = scene.make.rexPerspectiveCarousel({\nx: 0,\ny: 0,\n\nfaces: [],\n\n// width,\n// height,\n\n// faceWidth,\n// faceSpace: 0,\n\n// z: 1,\n// zEnd: 0,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-carousel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCarousel extends PerspectiveCarousel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var carousel = new MyPerspectiveCarousel(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#face-instances","title":"Face instances","text":"<pre><code>var faces = carousel.faces;\n</code></pre> <ul> <li><code>faces</code> : Array of face instances.</li> </ul>"},{"location":"perspective-carousel/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = carousel.face;\n</code></pre><ul> <li><code>face</code>: Index of <code>carousel.faces</code>.</li> </ul> </li> <li>Set     <pre><code>carousel.setFace(face)\n</code></pre><ul> <li><code>face</code> : Index or name of current face (face at angle <code>0</code>).</li> </ul> </li> </ul>"},{"location":"perspective-carousel/#roll-behavior","title":"Roll behavior","text":""},{"location":"perspective-carousel/#start-rolling","title":"Start rolling","text":"<ul> <li>Roll to next face     <pre><code>carousel.roll.toNext(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to previous face     <pre><code>carousel.roll.toPrevious(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to right face     <pre><code>carousel.roll.toRight(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to left face     <pre><code>carousel.roll.toLeft(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to face     <pre><code>carousel.roll.to(faceIndex, duration);\n</code></pre><ul> <li><code>faceIndex</code> : <ul> <li>A number : Index of face in <code>carousel.faces</code></li> <li>A string : Name of face  (<code>face.setName(name)</code>)</li> </ul> </li> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> </ul>"},{"location":"perspective-carousel/#stop-flipping","title":"Stop flipping","text":"<pre><code>carousel.roll.stop();\n</code></pre>"},{"location":"perspective-carousel/#set-duration","title":"Set duration","text":"<pre><code>carousel.roll.setDuration(duration);\n// carousel.roll.duration = duration;\n</code></pre>"},{"location":"perspective-carousel/#set-ease","title":"Set ease","text":"<pre><code>carousel.roll.setEase(ease);\n// carousel.roll.ease = ease;\n</code></pre>"},{"location":"perspective-carousel/#events","title":"Events","text":"<ul> <li>On rolling complete     <pre><code>carousel.roll.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#status","title":"Status","text":"<ul> <li>Is rolling     <pre><code>var isRunning = carousel.roll.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleY = carousel.angleY; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationY = carousel.rotationY; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>carousel.angleY = angleY; // Angle in degrees\n</code></pre>     or     <pre><code>carousel.rotationY = rotationY; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#other-properties","title":"Other properties","text":"<p>See container.</p>"},{"location":"perspective-image/","title":"Image","text":""},{"location":"perspective-image/#introduction","title":"Introduction","text":"<p>Image with perspective rotation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-image/#live-demos","title":"Live demos","text":"<ul> <li>Flip image</li> </ul>"},{"location":"perspective-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-image/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveImage } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new PerspectiveImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"perspective-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, {\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexPerspectiveImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveImage extends PerspectiveImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyPerspectiveImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#transform-vertices","title":"Transform vertices","text":"<p>Offset then rotate all vertices.</p> <pre><code>image.transformVerts(x, y, z, rotateX, rotateY, rotateZ);\n</code></pre> <ul> <li><code>x</code>, <code>y</code>, <code>z</code> : Offset vertices<ul> <li><code>z+</code> : Near</li> <li><code>z-</code> : Far</li> <li><code>x-</code> : Left</li> <li><code>x+</code> : Right</li> <li><code>y+</code> : Up</li> <li><code>y-</code> : Down</li> </ul> </li> <li><code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> : Rotate vertices</li> </ul>"},{"location":"perspective-image/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = image.angleX; // Angle in degrees\nvar angleY = image.angleY; // Angle in degrees\nvar angleZ = image.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = image.rotationX; // Angle in radians\nvar rotationY = image.rotationY; // Angle in radians\nvar rotationZ = image.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>image.angleX = angleX; // Angle in degrees\nimage.angleY = angleY; // Angle in degrees\nimage.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>image.rotationX = rotationX; // Angle in radians\nimage.rotationY = rotationY; // Angle in radians\nimage.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-image/#flip","title":"Flip","text":"<pre><code>scene.tweens.add({\ntargets: image,\nangleY: { start: 0, to: -180}\n})\n</code></pre>"},{"location":"perspective-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"perspective-image/#change-frame","title":"Change frame","text":"<p>Frame is bound with vertices. Use perspective renderTexture to change frame without recreate vertices again (assume that size of frame won't changed).</p> <pre><code>rt.drawFrame(key, frame);\n</code></pre>"},{"location":"perspective-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object.</p>"},{"location":"perspective-imagecarousel/","title":"Image carousel","text":""},{"location":"perspective-imagecarousel/#introduction","title":"Introduction","text":"<p>Display list of images.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-imagecarousel/#live-demos","title":"Live demos","text":"<ul> <li>List</li> </ul>"},{"location":"perspective-imagecarousel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-imagecarousel/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-imagecarousel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveImageCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveImageCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveImageCarousel } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = new PerspectiveImageCarousel(scene, config);\nscene.add.existing(carousel);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#create-instance","title":"Create instance","text":"<pre><code>var carousel = scene.add.rexPerspectiveImageCarousel({\nx: 0, y: 0,\n\nimages: [],  // Array of {key, frame}\n// index: 0,\n// rtl: false,\n// repeat: true,\n\n// width,\n// height,\n// faceCount: 4,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n});\n</code></pre> <ul> <li><code>images</code> : Array of textures <code>{key, frame}</code><ul> <li>Assume that all textures have the same size</li> </ul> </li> <li><code>index</code> : Index of current image.</li> <li><code>rtl</code><ul> <li><code>false</code> : Place images from left to right. Default behavior.</li> <li><code>true</code> : Place images from right to left.</li> </ul> </li> <li><code>repeat</code> : Set <code>true</code> to roll to first image from last, or last to first.</li> <li><code>width</code>, <code>height</code> : Specific width and height of this carousel container.<ul> <li><code>undefined</code> : Use width and height of first image.</li> </ul> </li> <li><code>faceCount</code> : Faces count of this carousel. A integer which <code>&gt;=3</code>.</li> <li><code>z</code>, <code>zEnd</code> : Range of faces' z-index. Default value is <code>1</code>/<code>0</code>.</li> <li><code>roll</code> : Configuration of rolling behavior.<ul> <li><code>roll.duration</code> : Duration of rolling, in millisecond.</li> <li><code>roll.delay</code> : Initial delay.</li> <li><code>roll.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add rolling behavior.</li> </ul> </li> </ul> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImageCarousel({\nx: 0,\ny: 0,\n\nimages: [],  // Array of {key, frame}\n// index: 0,\n// rtl: false,\n// repeat: true,\n\n// width,\n// height,\n// faceCount: 4,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-imagecarousel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveImageCarousel extends PerspectiveImageCarousel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var carousel = new MyPerspectiveImageCarousel(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#roll-behavior","title":"Roll behavior","text":""},{"location":"perspective-imagecarousel/#start-rolling","title":"Start rolling","text":"<ul> <li>Roll to next image     <pre><code>carousel.roll.toNext(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to previous image     <pre><code>carousel.roll.toPrevious(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to right image     <pre><code>carousel.roll.toRight(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to left image     <pre><code>carousel.roll.toLeft(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to image     <pre><code>carousel.roll.to(faceIndex, duration);\n</code></pre><ul> <li><code>faceIndex</code> : <ul> <li>A number : Index of image.</li> </ul> </li> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> </ul>"},{"location":"perspective-imagecarousel/#set-duration","title":"Set duration","text":"<pre><code>carousel.roll.setDuration(duration);\n// carousel.roll.duration = duration;\n</code></pre>"},{"location":"perspective-imagecarousel/#set-ease","title":"Set ease","text":"<pre><code>carousel.roll.setEase(ease);\n// carousel.roll.ease = ease;\n</code></pre>"},{"location":"perspective-imagecarousel/#events","title":"Events","text":"<ul> <li>On rolling complete     <pre><code>carousel.roll.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#status","title":"Status","text":"<ul> <li>Is rolling     <pre><code>var isRunning = carousel.roll.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/","title":"Render texture","text":""},{"location":"perspective-rendertexture/#introduction","title":"Introduction","text":"<p>Render texture with perspective rotation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"perspective-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexPerspectiveRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexPerspectiveRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveRenderTexture } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new PerspectiveRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexPerspectiveRenderTexturege(x, y, width, height, {\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexPerspectiveRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexPerspectiveRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveRenderTexturege extends PerspectiveRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyPerspectiveRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"perspective-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> <li>Snapshop game objects     <pre><code>image.snapshot(gameObjects);\n</code></pre><ul> <li><code>gameObjects</code> : Array of game objects.</li> </ul> </li> </ul>"},{"location":"perspective-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"perspective-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"perspective-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"perspective-rendertexture/#other-properties","title":"Other properties","text":"<p>See Perspective image game object.</p>"},{"location":"perspective-sprite/","title":"Sprite","text":""},{"location":"perspective-sprite/#introduction","title":"Introduction","text":"<p>Play animation on perspective-image.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-sprite/#live-demos","title":"Live demos","text":"<ul> <li>Play animation</li> </ul>"},{"location":"perspective-sprite/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-sprite/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-sprite/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveSprite } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = new PerspectiveSprite(scene, x, y, texture, frame, config);\nscene.add.existing(sprite);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#create-instance","title":"Create instance","text":"<pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, {\n// width: undefined,\n// height: undefined,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or </p> <pre><code>var sprite = scene.add.rexPerspectiveImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// width: undefined,\n// height: undefined,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// width: undefined,\n// height: undefined,\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-sprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveSprite extends PerspectiveSprite {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var sprite = new MyPerspectiveSprite(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>sprite.play(key);\n// sprite.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>sprite.playReverse(key);\n// sprite.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>sprite.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>sprite.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"perspective-sprite/#chain","title":"Chain","text":"<ul> <li>Chain next animation     <pre><code>sprite.chain(key);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Chain next and next animation     <pre><code>sprite.chain(key0).chain(key1);\n</code></pre><ul> <li><code>key0</code>, <code>key1</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"perspective-sprite/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>sprite.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>sprite.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>sprite.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = sprite.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>sprite.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#restart","title":"Restart","text":"<pre><code>sprite.anims.restart();\n// sprite.anims.restart(includeDelay, resetRepeats);\n</code></pre>"},{"location":"perspective-sprite/#other-properties","title":"Other properties","text":"<p>See Perspective image game object.</p>"},{"location":"plane/","title":"Plane","text":""},{"location":"plane/#introduction","title":"Introduction","text":"<p>A Plane is a kind of Mesh game object with one-sided grid of cells. which  can have a texture that is either repeated (tiled) across each cell, or applied to the full Plane.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"plane/#usage","title":"Usage","text":""},{"location":"plane/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"plane/#add-plane-object","title":"Add plane object","text":"<pre><code>var plane = scene.add.plane(x, y, key);\n// var plane = scene.add.plane(x, y, key, frame);\n// var plane = scene.add.plane(x, y, texture, frame, width, height, tile);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>key</code>, <code>frame</code> : Texture key of </li> <li><code>width</code>, <code>height</code> : The width/height of this Plane, in cells, not pixels.</li> <li><code>tile</code> : Is the texture tiled? I.e. repeated across each cell.</li> </ul> <p>Add plane from JSON</p> <pre><code>var plane = scene.make.plane({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n// width: 8,\n// height: 8,\n// tile: false,\n// checkerboard: null,\n// checkerboard: { color1, color2, alpha1, alpha2, height }\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"plane/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPlane extends Phaser.GameObjects.Plane {\nconstructor(scene, x, y, texture, frame, width, height, tile) {\nsuper(scene, x, y, texture, frame, width, height, tile);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var plane = new MyPlane(scene, x, y, texture, frame, width, height, tile);\n</code></pre></li> </ul>"},{"location":"plane/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"plane/#animation","title":"Animation","text":"<p>See Sprite's animation section.</p>"},{"location":"plane/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>plane.play(key);\n// plane.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>plane.playReverse(key);\n// plane.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>plane.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>plane.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"plane/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>plane.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>plane.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>plane.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = plane.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>plane.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"plane/#properties","title":"Properties","text":"<ul> <li>Has started     <pre><code>var hasStarted = plane.anims.hasStarted;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = plane.anims.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = plane.anims.isPaused;\n</code></pre></li> <li>Total frames count     <pre><code>var frameCount = plane.anims.getTotalFrames();\n</code></pre></li> <li>Delay     <pre><code>var delay = plane.anims.delay;\n</code></pre></li> <li>Repeat<ul> <li>Total repeat count     <pre><code>var repeatCount = plane.anims.repeat;\n</code></pre></li> <li>Repeat counter     <pre><code>var repeatCount = plane.anims.repeatCounter;\n</code></pre></li> <li>Repeat delay     <pre><code>var repeatDelay = plane.anims.repeatDelay;\n</code></pre></li> <li>Yoyo     <pre><code>var repeatDelay = plane.anims.yoyo;\n</code></pre></li> </ul> </li> <li>Current animation key     <pre><code>var key = plane.anims.getName();\n</code></pre><ul> <li><code>key</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current frame name     <pre><code>var frameName = plane.anims.getFrameName();\n</code></pre><ul> <li><code>frameName</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current animation     <pre><code>var currentAnim = plane.anims.currentAnim;\n</code></pre></li> <li>Current frame     <pre><code>var currentFrame = plane.anims.currentFrame;\n</code></pre></li> </ul>"},{"location":"plane/#interactive","title":"Interactive","text":"<p>To test if pointer is at any face of this mesh game object.</p> <pre><code>plane.setInteractive();\n</code></pre>"},{"location":"plane/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"plane/#checkerboard","title":"Checkerboard","text":"<p>Creates a checkerboard style texture,  based on the given colors and alpha values and applies it to this Plane,  replacing any current texture it may have.</p> <ul> <li>Create     <pre><code>plane.createCheckerboard(color1, color2, alpha1, alpha2, height)\n</code></pre></li> <li>Remove     <pre><code>plane.removeCheckerboard();\n</code></pre></li> </ul>"},{"location":"plugin-list/","title":"Plugin list","text":""},{"location":"plugin-list/#list-of-my-plugins","title":"List of my plugins","text":"<p>Version of phaser3</p> <p>Please upgrade your phaser3 to version &gt;= 3.60.0.</p> <ol> <li>Achievements: Achievements in a csv table.</li> <li>Alpha mask image: Load a texture, then apply an alpha mask from another texture.</li> <li>Anchor: Set size and position based on visible window.</li> <li>Arcade-TCRP/Player: Run commands on step of Arcade.</li> <li>Arcade-TCRP/Recorder: Store commands with step of Arcade.</li> <li>AwaitLoader: Await custom task in preload stage.</li> <li>Away time: Get time from previous closing application to now.</li> <li>BBCode-text: Drawing text with BBCode protocol.</li> <li>Board: Core object of Board system.</li> <li>Board/Field of view: Visible testing, to find field of view.</li> <li>Board/Hexagon map: Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid.</li> <li>Board/Match: Get matched chess.</li> <li>Board/Mini board: Chess Container, to rotate/mirror/drag chess together.</li> <li>Board/Monopoly: Move through path tiles.</li> <li>Board/Move To: Move chess towards target position with a steady speed.</li> <li>Board/Path finder: Find moveable area or moving path.</li> <li>Board/Shape: Grid (polygon) shape object.</li> <li>Board/Tilemap: Create board from tilemap.</li> <li>Board/Tile texture: Create canvas-texture of tile.</li> <li>Bounds: Clamp game object inside target bounds.</li> <li>Bracket parser: A lite-weight bracket parser.</li> <li>Bracket parser2: A lite-weight bracket parser.</li> <li>Buff data: Data manager with buffs.</li> <li>Build arcade object: Create arcade body, and inject arcade object methods.</li> <li>Bullet: Move game object toward current angle of game object, with a constant speed.</li> <li>Button: Fires 'click' event when touch releasd after pressed.</li> <li>Canvas: Drawing on canvas.</li> <li>CanvasInput: An invisible Input DOM element to receive character input and display on DynamicText.</li> <li>Canvas/Circular progress: Circular progress bar on canvas.</li> <li>Canvas/Line progress: Horizontal line progress bar filled with gradient color on canvas.</li> <li>Canvas/Round rectangle: Round rectangle on canvas.</li> <li>Canvas image data: Get image data from texture, or text object.</li> <li>Canvas frame manager: Generate bitmapfont from text game object, or bbcode text game object.</li> <li>Circle mask image: Load a texture, then apply a circle mask.</li> <li>Click outside: Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.</li> <li>Clock: A clock to count elapsed time.</li> <li>Character cache: Generate bitmapfont from text game object, or bbcode text game object.</li> <li>Color/TintRGB: Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties to a game object.</li> <li>Conditions table: Check conditions to find passed tests listed in a csv table.</li> <li>ContainerLite: Control the position and angle of children game objects.</li> <li>Containerlite-perspective: Snapshot children of containerlite, to a perspective render texture.</li> <li>Containerlite-skew: Snapshot children of containerlite, to a skew render texture.</li> <li>CSV-scenario: Run script in csv format.</li> <li>CSV-to-hash-table: Hash table indexed by (col-key, row-key) from csv string.</li> <li>Cursor at bound: Map position pf cursor to cursor key state.</li> <li>Curve/Spiral: Spiral curve.</li> <li>Drag: Drag game object.</li> <li>Drag-rotate: Get dragging angle around a specific point.</li> <li>Drop down: Drop down game object below another target game object.</li> <li>Dynamic text: Control position, angle of each character drawn on a canvas.</li> <li>Ease-data: Easing data value of game object's data-manager.</li> <li>Ease-move: Ease-move game object.</li> <li>Effect properties: Attach properties to a game object or camera, to add/remove/control builtin preFX or postFX effects.</li> <li>Eight direction: Move game object by cursor keys, with a constant speed.</li> <li>Event promise: Return a promise of an event.</li> <li>Expression parser: Parse expression string into function.</li> <li>Fade-out-destroy: Fade out game object then destroy it.</li> <li>Fade-volume: Fade-in/fade-out volume of sound.</li> <li>File chooser: Create a transparent file chooser button.</li> <li>File drop zone: Create a div element for dropping file(s).</li> <li>Firebase/Broadcast: Broadcast real-time messages, using firebase-database.</li> <li>Firebase/Files: Save JSON data, using firebase-firestore.</li> <li>Firebase/ID-alias: Map an unique ID to another unique ID, using firebase-firestore.</li> <li>Firebase/Item-table: 1d/2d/3d table, using firebase-database.</li> <li>Firebase/Leaderboard: Descending sort scores, using firebase-firestore.</li> <li>Firebase/Messages: Store messages in firebase-firestore.</li> <li>Firebase/Online-user-list: Online user list, using firebase-database.</li> <li>Firebase/Single-room: Chat room, using firebase-database.</li> <li>Flash: Flashing (set invisible then visible) game object.</li> <li>Flip: Flipping game object to another face by scaling width/height.</li> <li>FSM: Finite state machine.</li> <li>Fuzzy: A wrap of fuzzy logic.</li> <li>Gashapon: Pick random item from box.</li> <li>Geom/Hexagon: Hexagon geometry object.</li> <li>Geom/Rhombus: Rhombus shape and methods.</li> <li>Gesture/Pan: Get pan events of a game object.</li> <li>Gesture/Pinch: Get scale factor from 2 dragging touch pointers.</li> <li>Gesture/Press: Get press events of a game object.</li> <li>Gesture/Rotate: Get spin angle from 2 dragging touch pointers.</li> <li>Gesture/Swipe: Get swipe events of a game object.</li> <li>Gesture/Tap: Get tap/multi-taps events of a game object.</li> <li>Grid align: Align objects on quadrilateral or hexagon grid.</li> <li>Grid cut image: Create image game objects in grids, to assemble target texture.</li> <li>Grid table: Viewer of grid table, to manipulate game object of each visible cell.</li> <li>Hidden input text: An invisible Input DOM element to receive character input and display on text game object.</li> <li>Image box: Keep aspect ratio of image game object after scale-down resizing.</li> <li>Image URI loader: Load image by uri in preload stage.</li> <li>Input text: Input DOM element.</li> <li>Interception: Predict the intersection position of two game objects with constant moving speed.</li> <li>In touching: Fires 'intouch' event every tick when pressing on a game object.</li> <li>Layer manager: A container of Layer game objects.</li> <li>Life time: Destroy game object when time-out.</li> <li>Line: Draw a line with start/end/body textures.</li> <li>Live2d: Display live2d model.</li> <li>Loading-progress: Pop-up dialog for loading-progress, then scale-down this dialog.</li> <li>LocalForage/Files: Save JSON data, using localforage.</li> <li>LocalStorage/Data: Sync data from data manager to local-storage.</li> <li>LZ-string: Compress string using LZ-based compression algorithm.</li> <li>Markdown event sheets: Event sheets contains main condition(s) and actions, in simple markdown format (headings, code block).</li> <li>Modal promise: Modal behavior wrapped into promise.</li> <li>Mouse-wheel to up/down: Map mouse-wheeling to (up/down) cursor key state.</li> <li>Mouse-wheel scroller: Emit scroll event when mouse-wheeling.</li> <li>Move to: Move game object towards target position with a steady speed.</li> <li>Nine patch: Stretchable image.</li> <li>Nine patch2: Stretchable image. Has better performance than nine-patch.</li> <li>Particles-along-bounds: Emit particles along bounds of game object.</li> <li>Particles/Bitmap-zone: Particles' emitter zone from canvas bitmap of text/canvas game object.</li> <li>Path follower: Set position of game object on a path.</li> <li>Perlin: Perlin2/Perlin3 noise and simplex2/simplex3 noise.</li> <li>Perspective/Card: A container with two perspective-images.</li> <li>Perspective/Carousel: A container with cards.</li> <li>Perspective/Image: Image with perspective rotation.</li> <li>Perspective/ImageCarousel: Display list of images.</li> <li>Perspective/Render texture: Render texture with perspective rotation.</li> <li>Perspective/Sprite: Play animation on perspective-image..</li> <li>PNG appender: Append user data below tail of PNG data, or extract this user data from PNG data.</li> <li>polar-coordinate: Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties to a game object.</li> <li>Pop up: Scale up game object.</li> <li>Quad/Image: Image with 4 or 9 vertex control points.</li> <li>Quad/Render texture: Render texture with 4 or 9 vertex control points.</li> <li>Quest: Question manager.</li> <li>Raycaster: Raycaster between obstacles.</li> <li>Random place: Place objects randomly inside an area without overlapping.</li> <li>Real-time timers: Start and counting timer by real-time timestamp.</li> <li>Restorable data: Restorable data manager.</li> <li>RotateTo: Rotate game object towards target position with a steady speed.</li> <li>Rotate: Rotate game object continually with a steady speed.</li> <li>Run-commands: Run commands in array.</li> <li>Scale-down-destroy: Scale down game object then destroy it.</li> <li>Scale outer: Scroll and zoom camera to make default game window fit the display area, in RESIZE scale mode.</li> <li>Script-tag loader: Load script tag in preload stage.</li> <li>Scroller: Drag content. Slow down when dragging released, pull back when out of bounds.</li> <li>Sequence: Run sequence commands in array.</li> <li>Shader/Barrel: Barrel post processing filter.</li> <li>Shader/Color-replace: Replace color post processing filter.</li> <li>Shader/Cross-stitching: Cross-stitching post processing filter.</li> <li>Shader/Dissolve: Dissolve transition post processing filter.</li> <li>Shader/Drop-shadow: Drop-shadow post processing filter.</li> <li>Shader/Fish-eye: Fish-eye post processing filter.</li> <li>Shader/Glow-filter: Glow post processing filter.</li> <li>Shader/Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Shader/Gray-scale: Gray scale post processing filter.</li> <li>Shader/Horri-fi: 6-in-1 post processing filter.</li> <li>Shader/Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Shader/Inverse: Inverse color post processing filter.</li> <li>Shader/Kawaseblur: Kawase-blur post processing filter.</li> <li>Shader/Outline: Outline post processing filter, ported from pixi.</li> <li>Shader/Pixelation: Pixelation post processing filter.</li> <li>Shader/Shockwave: Shockwave post processing filter.</li> <li>Shader/Split: Split image into 4 parts.</li> <li>Shader/Swirl: Swirl post processing filter.</li> <li>Shader/Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shader/Warp: Warp post processing filter. </li> <li>Shake-position: Shake position of game object.</li> <li>Shape/Checkbox: Checkbox input with drawing checker path animation.</li> <li>Shape/Circular progress: Circular progress bar shape.</li> <li>Shape/Cover: Rectangle shape covered full window, and block all touch events.</li> <li>Shape/Custom progress: Custom progress bar shape.</li> <li>Shape/Custom shapes: Custom shapes on shape.</li> <li>Shape/Full window rectangle: Rectangle shape covered full window.</li> <li>Shape/Line progress: Horizontal line progress bar shape.</li> <li>Shape/Round-Rectangle: Round rectangle shape.</li> <li>Shape/Spinner: Loading animations on shape.</li> <li>Shape/Toggle-switch: Toggle-switch input.</li> <li>Shape/Triangle: Trangle shape inside a rectangle bounds.</li> <li>Shatter/Image: Shatter image to triangle faces.</li> <li>Shatter/Render texture: Shatter render texture to triangle faces.</li> <li>Ship: Move game object as a space ship by cursor keys.</li> <li>Skew/Image: Skewable Image.</li> <li>Skew/RenderTexture: Skewable render texture.</li> <li>Slider: Drag thumb on a slider bar.</li> <li>State manager: Another version of Finite state machine.</li> <li>Step: Interpolate points between previous position and current position with fixed step length.</li> <li>Tag-player: Text commands to control sprites, texts, sound effect or backgroun music.</li> <li>Tag-text: Displays text with multi-color, font face, or font size with tags.</li> <li>TCRP/Player: Run commands on time.</li> <li>TCRP/Recorder: Store commands with time.</li> <li>Text/Edit: Create an input text object above a text object to edit string content.</li> <li>Text/Typing: Typing text on text object.</li> <li>Text/Page: Display text page by page on text object.</li> <li>Text/Translation: Apply translated string (i18next) to text object.</li> <li>Text player: Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.</li> <li>Touch event stop: Stop touch events propagation.</li> <li>Touch state: Store current touch input properties.</li> <li>Transition image: Transit texture to another one.</li> <li>Transition image pack: Transit texture to another one, with some pre-build effects.</li> <li>UI/Badge label: A container with badges above a main item.</li> <li>UI/Buttons: A container with a group of buttons.</li> <li>UI/Chart: Draw chart on canvas.</li> <li>UI/Color components: Edit color value by RGB, or HSV input fields.</li> <li>UI/Color input: Color value input field.</li> <li>UI/Color picker: Pick color value from H and SV palettes.</li> <li>UI/Confrim dialog: Using json style to create confirm dialog.</li> <li>UI/Dialog: A container with a title, content, buttons and backgrounds.</li> <li>UI/Drop down list: A label can open a drop-down list panel.</li> <li>UI/File selector button: A transparent file chooser button above a Label.</li> <li>UI/Fixwidthbuttons: A container with a group of fix-width buttons.</li> <li>UI/Fixwidthsizer: Layout children game objects into lines.</li> <li>UI/Folder: A container with a title, foldable child, and background.</li> <li>UI/Grid buttons: A container with a group of buttons in grids.</li> <li>UI/Grid sizer: Layout children game objects in grids.</li> <li>UI/Gird table: A container with a grid table, slider, and scroller.</li> <li>UI/Holy grail: Layout elements in Holy grail style.</li> <li>UI/Knob: A knob button based on circular progress.</li> <li>UI/Label: A game object container with an icon, text, and background.</li> <li>UI/Menu: A container with buttons and sub-menu.</li> <li>UI/Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, 1d an icon, background.</li> <li>UI/Number bar: A container with an icon, slider, text, and background.</li> <li>UI/Overlap sizer: Layout children game objects overlapped.</li> <li>UI/Pages: A container with pages, only current page is visible.</li> <li>UI/Perspective card: A container with front and back faces.</li> <li>UI/Scroll-able panel: A container with a panel, slider, and scroller.</li> <li>UI/Scroll bar: A container with slider, two buttons, and background.</li> <li>UI/Simple drop down list: Using plain object to create drop down list.</li> <li>UI/Simple label: Using json style to create label.</li> <li>UI/Sizer: Layout children game objects.</li> <li>UI/Slider: A container with a track, indicator, thumb and background.</li> <li>UI/States image: Using plain object to create image game object, with active, hover, disable styles.</li> <li>UI/States round-rectangle: Using plain object to create round rectangle game object, with active, hover, disable styles.</li> <li>UI/States text: Using plain object to create text game object, with active, hover, disable styles.</li> <li>UI/Tab-pages: A container with tabs and pages, only current page is visible.</li> <li>UI/Tabs: A container with 4 groups of buttons around a center panel.</li> <li>UI/Text area: A container with a text, slider, and scroller.</li> <li>UI/Text box: A container with an icon, (typing and paging) text, and background.</li> <li>UI/Title label: A container with title, text in two rows, and an icon, background.</li> <li>UI/Toast: Show text message for a short while.</li> <li>UI/Tweaker: Fine-tuning properties of target object.</li> <li>Unique item list: List of unique items. Support array and set methods.</li> <li>Viewport-coordinate: Attach <code>vpx</code>, <code>vpy</code> properties to a game object, to set position according to proportion of viewport.</li> <li>Virtual joystick: Simulate cursor keys according to touch events.</li> <li>Wait events: Wait fired events or callbacks.</li> <li>Webfont-loader: Load web font by google webfont loader in preload stage.</li> <li>XOR: Encrypt or decrypt string by XOR algorithm.</li> <li>YML-Achievements: Achievements in a YAML table.</li> <li>YML-Conditions table: Check conditions to find passed tests listed in a YAML table.</li> <li>Youtube player: Play youtube video on iframe.</li> </ol>"},{"location":"pluginsystem/","title":"Plugin system","text":""},{"location":"pluginsystem/#introduction","title":"Introduction","text":"<p>Plugin system, built-in system of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"pluginsystem/#usage","title":"Usage","text":""},{"location":"pluginsystem/#global-plugin","title":"Global plugin","text":""},{"location":"pluginsystem/#load-plugin","title":"Load plugin","text":"<ul> <li>Load plugin before any scene start     In game configuration <pre><code>// import pluginKlass from '...';\nvar config = {\n// ...\nplugins: {\nglobal: [\n{\nkey: key,\nplugin: pluginKlass,\nstart: true\n// mapping: memberName  // member name in each scene instance, optional\n// data: undefined\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>pluginKlass</code> : Class instance</li> <li><code>start</code> : Whether the plugin should be started automatically.</li> <li><code>mapping</code> : If this plugin is to be injected into the Scene Systems, this is the property key map used.</li> <li><code>data</code> : Arbitrary data passed to the plugin's <code>init()</code> method.</li> </ul> </li> <li>Load plugin in scene     <pre><code>scene.load.plugin(key, url, true);\n// scene.load.plugin(key, url, true, mapping);\n</code></pre><ul> <li><code>url</code> : File url or class instance.</li> </ul> </li> </ul>"},{"location":"pluginsystem/#get-instance","title":"Get instance","text":"<pre><code>var pluginInst = scene.plugins.get(key);\n</code></pre>"},{"location":"pluginsystem/#scene-plugin","title":"Scene plugin","text":""},{"location":"pluginsystem/#load-plugin_1","title":"Load plugin","text":"<ul> <li>Load plugin before any scene start     In game configuration <pre><code>// import pluginKlass from '...';\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: key,\nplugin: pluginKlass,\nmapping: sceneKey,    // member name in each scene instance\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>pluginKlass</code> : Class instance</li> </ul> </li> <li>Load plugin in scene     <pre><code>scene.load.scenePlugin(key, url, systemKey, sceneKey);\n</code></pre><ul> <li><code>url</code> : File url or class instance.</li> </ul> </li> </ul>"},{"location":"pluginsystem/#get-instance_1","title":"Get instance","text":"<pre><code>var pluginInst = scene[sceneKey];\n</code></pre>"},{"location":"pluginsystem/#plugin-cache","title":"Plugin cache","text":"<ul> <li>Has custom plugin     <pre><code>var hasPlugin = Phaser.Plugins.PluginCache.hasCustom(key);\n</code></pre></li> </ul>"},{"location":"png-appender/","title":"PNG Appender","text":""},{"location":"png-appender/#introduction","title":"Introduction","text":"<p>Append user data below tail of PNG data, or extract this user data from PNG data.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"png-appender/#live-demos","title":"Live demos","text":"<ul> <li>Append-extract</li> </ul>"},{"location":"png-appender/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"png-appender/#install-plugin","title":"Install plugin","text":""},{"location":"png-appender/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpngappenderplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpngappenderplugin.min.js', true);\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = scene.plugins.get('rexpngappenderplugin').append(pngBuffer, data);\nvar data = scene.plugins.get('rexpngappenderplugin').extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PNGAppenderPlugin from 'phaser3-rex-plugins/plugins/pngappender-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPNGAppender',\nplugin: PNGAppenderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = scene.plugins.get('rexPNGAppender').append(pngBuffer, data);\nvar data = scene.plugins.get('rexPNGAppender').extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PNGAppender from 'phaser3-rex-plugins/plugins/pngappender.js';\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = PNGAppender.append(pngBuffer, data);\nvar data = PNGAppender.extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#append-data","title":"Append data","text":"<pre><code>var resultBuffer = scene.plugins.get('rexPNGAppender').append(pngBuffer, data);\n</code></pre> <ul> <li><code>pngBuffer</code> : PNG data loaded from binary loader.</li> <li><code>data</code> : JSON. dictionary, array, string, number, or Uint8Array.</li> <li><code>resultBuffer</code> : PNG data with custom data (<code>data</code>). <ul> <li>Can add to texture cache via <code>scene.load.image(...)</code><ol> <li>Create blob from <code>resultBuffer</code> : <code>var blob = new Blob([buffer], { type: 'image/png' })</code></li> <li>Create object url from blob : <code>var url = window.URL.createObjectURL(blob)</code></li> <li>Load texture from object url : <code>scene.load.image(textureKey, url)</code></li> <li>Start loader if in create stage of scene : <code>scene.load.start()</code></li> </ol> </li> <li>Can download and display on image viewer as normal PNG file.</li> </ul> </li> </ul>"},{"location":"png-appender/#extract-data","title":"Extract data","text":"<pre><code>var data = scene.plugins.get('rexPNGAppender').extract(pngBuffer);\n</code></pre> <ul> <li><code>pngBuffer</code> : PNG data loaded from binary loader.</li> <li><code>data</code> : User data.<ul> <li><code>null</code> : This <code>pngBuffer</code> does not have user data.</li> </ul> </li> </ul>"},{"location":"point-light/","title":"Point light","text":""},{"location":"point-light/#introduction","title":"Introduction","text":"<p>A point light with gradient color in a circle.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"point-light/#usage","title":"Usage","text":""},{"location":"point-light/#add-point-light","title":"Add point light","text":"<pre><code>var pointLight = scene.add.pointlight(x, y, color, radius, intensity, attenuation);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of this Game Object in the world.</li> <li><code>color</code> : Color of this light.</li> <li><code>radius</code> : Radius of this light.</li> <li><code>intensity</code> : <code>0</code>~<code>1</code>, intensity of color.</li> <li><code>attenuation</code> : <code>0</code>~<code>1</code>, decay intensity along radius.</li> </ul>"},{"location":"point-light/#position","title":"Position","text":"<ul> <li>Set     <pre><code>pointLight.setPosition(x, y);\n</code></pre>     or     <pre><code>pointLight.x = x;\npointLight.y = y;\n</code></pre></li> <li>Get     <pre><code>var x = pointLight.x;\nvar y = pointLight.y;\n</code></pre></li> </ul>"},{"location":"point-light/#color","title":"Color","text":"<ul> <li>Set<ul> <li>Red, green, blue     <pre><code>pointLight.color.set(red, green, blue);\n</code></pre>     or     <pre><code>pointLight.color.r = red;\npointLight.color.g = green;\npointLight.color.b = blue;\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> <li>Get<ul> <li>Red, green, blue     <pre><code>var red = pointLight.color.r;\nvar green = pointLight.color.g;\nvar blue = pointLight.color.b;\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"point-light/#radius","title":"Radius","text":"<ul> <li>Set     <pre><code>pointLight.radius = radius;\n</code></pre></li> <li>Get     <pre><code>var radius = pointLight.radius;\n</code></pre></li> </ul>"},{"location":"point-light/#intensity","title":"Intensity","text":"<ul> <li>Set     <pre><code>pointLight.intensity = intensity;\n</code></pre></li> <li>Get     <pre><code>var intensity = pointLight.intensity;\n</code></pre></li> </ul>"},{"location":"point-light/#attenuation","title":"Attenuation","text":"<ul> <li>Set     <pre><code>pointLight.attenuation = attenuation;\n</code></pre></li> <li>Get     <pre><code>var attenuation = pointLight.attenuation;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/","title":"Polar-coordinate","text":""},{"location":"polar-coordinate/#introduction","title":"Introduction","text":"<p>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties to a game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"polar-coordinate/#live-demos","title":"Live demos","text":"<ul> <li>Circle</li> <li>Spiral</li> </ul>"},{"location":"polar-coordinate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"polar-coordinate/#install-plugin","title":"Install plugin","text":""},{"location":"polar-coordinate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpolarcoordinateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpolarcoordinateplugin.min.js', true);\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>scene.plugins.get('rexpolarcoordinateplugin').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PolarCoordinatePlugin from 'phaser3-rex-plugins/plugins/polarcoordinate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPolarCoordinate',\nplugin: PolarCoordinatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>scene.plugins.get('rexPolarCoordinate').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddPolarCoordinateProperties from 'phaser3-rex-plugins/plugins/polarcoordinate.js';\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>AddPolarCoordinateProperties(gameObject, ox, oy, rotation, radius);\ngameObject.polarOX = 400;\ngameObject.polarOY = 300;\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexPolarCoordinate').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarOX = 400;\ngameObject.polarOY = 300;\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre> <ul> <li><code>ox</code>, <code>oy</code> : Position of origin point.</li> <li><code>rotation</code> : Polar angle, in radian.</li> <li><code>radius</code> : Polar radius.</li> </ul> <pre><code>x = ( polarRadius * cos(polarRotation) ) + polarOX\ny = ( polarRadius * sin(polarRotation) ) + polarOY\n</code></pre>"},{"location":"polar-coordinate/#circle","title":"Circle","text":"<pre><code>scene.tweens.add({\ntargets: gameObject,\npolarAngle: 360,\nduration: 3000\n})\n</code></pre>"},{"location":"popup/","title":"Pop up","text":""},{"location":"popup/#introduction","title":"Introduction","text":"<p>Scale up from <code>0</code> to current scale of game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"popup/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"popup/#install-plugin","title":"Install plugin","text":""},{"location":"popup/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscaleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleplugin.min.js', true);\n</code></pre></li> <li>Pop-up object     <pre><code>scene.plugins.get('rexscaleplugin').popup(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScalePlugin from 'phaser3-rex-plugins/plugins/scale-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScale',\nplugin: ScalePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Pop-up object     <pre><code>scene.plugins.get('rexScale').popup(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PopUp from 'phaser3-rex-plugins/plugins/popup.js';\n</code></pre></li> <li>Pop-up object     <pre><code>PopUp(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#pop-up","title":"Pop up","text":"<ul> <li>Pop up width and height     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration);\n// var scale = popUp(gameObject, duration, undefined, ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop up width only     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration, 'x');\n// var scale = popUp(gameObject, duration, 'x', ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop up height only     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration, 'y');\n// var scale = popUp(gameObject, duration, 'y', ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> </ul>"},{"location":"popup/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>scale.on('complete', function(gameObject, scale){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/","title":"Post fx pipeline","text":""},{"location":"postfx-pipeline/#introduction","title":"Introduction","text":"<p>Post fx pipelines for game objects or camera.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>All kinds of post fx pipelines only work in WebGL render mode.</p>"},{"location":"postfx-pipeline/#usage","title":"Usage","text":""},{"location":"postfx-pipeline/#post-fx-pipeline-class","title":"Post fx pipeline class","text":"<pre><code>class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {\nconstructor(game) {\nsuper({\ngame: game,\nrenderTarget: true,\nfragShader: '...',  // GLSL shader\nuniforms: []\n});\n}\n\nonPreRender() {\nthis.set1f('intensity', this._intensity);\n}\n\nonDraw(renderTarget) {\n}\n}\n</code></pre>"},{"location":"postfx-pipeline/#set-uniform-values","title":"Set uniform values","text":"<ul> <li>Property with 1 value<ul> <li>Float     <pre><code>pipelineInstance.set1f(name, value0);\n// pipelineInstance.set1f(name, value0, shader);\n</code></pre></li> <li>uniform1fv     <pre><code>pipelineInstance.set1fv(name, value0);\n// pipelineInstance.set1fv(name, value0, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set1i(name, value0);\n// pipelineInstance.set1i(name, value0, shader);\n</code></pre></li> </ul> </li> <li>Property with 2 values<ul> <li>Float     <pre><code>pipelineInstance.set2f(name, value0, value1);\n// pipelineInstance.set2f(name, value0, value1, shader);\n</code></pre></li> <li>uniform2fv     <pre><code>pipelineInstance.set2fv(name, value0, value1);\n// pipelineInstance.set2fv(name, value0, value1, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set2i(name, value0, value1);\n// pipelineInstance.set2i(name, value0, value1, shader);\n</code></pre></li> </ul> </li> <li>Property with 3 value<ul> <li>Float     <pre><code>pipelineInstance.set3f(name, value0, value1, value2);\n// pipelineInstance.set3f(name, value0, value1, value2, shader);\n</code></pre></li> <li>uniform3fv     <pre><code>pipelineInstance.set3fv(name, value0, value1, value2);\n// pipelineInstance.set3fv(name, value0, value1, value2, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set3i(name, value0, value1, value2);\n// pipelineInstance.set3i(name, value0, value1, value2, shader);\n</code></pre></li> </ul> </li> <li>Property with 4 values<ul> <li>Float     <pre><code>pipelineInstance.set4f(name, value0, value1, value2, value3);\n// pipelineInstance.set4f(name, value0, value1, value2, value3, shader);\n</code></pre></li> <li>uniform4fv     <pre><code>pipelineInstance.set4fv(name, value0, value1, value2, value3);\n// pipelineInstance.set4fv(name, value0, value1, value2, value3, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set4i(name, value0, value1, value2, value3);\n// pipelineInstance.set4i(name, value0, value1, value2, value3, shader);\n</code></pre></li> </ul> </li> </ul>"},{"location":"postfx-pipeline/#onprerender","title":"onPreRender","text":"<ul> <li>Set uniform values in <code>onPreRender</code> method.</li> </ul>"},{"location":"postfx-pipeline/#ondraw","title":"onDraw","text":"<ul> <li>Ping-pong drawing<ul> <li>Variables : <ul> <li><code>renderTarget</code> : Render target, parameter of <code>onDraw</code> method.</li> <li><code>pipelineInstance.fullFrame1</code>, <code>pipelineInstance.fullFrame2</code> : Ping-pong render texture.</li> </ul> </li> <li>Steps<ol> <li>Copy frame to <code>pipelineInstance.fullFrame1</code> <pre><code>pipelineInstance.copyFrame(source, target);\n// pipelineInstance.copyFrame(source, target, brightness, clear, clearAlpha);\n</code></pre></li> <li>Set uniform values</li> <li>Bind and draw on <code>pipelineInstance.fullFrame1</code>, <code>pipelineInstance.fullFrame2</code>.     <pre><code>pipelineInstance.bindAndDraw(source, target);\n// pipelineInstance.bindAndDraw(source, target, clear, clearAlpha, shader);\n</code></pre></li> <li>Draw result back     <pre><code>pipelineInstance.bindAndDraw(source);\n</code></pre></li> </ol> </li> </ul> </li> </ul>"},{"location":"postfx-pipeline/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import MyPostFxClass from 'path';\nvar config = {\n// ...\npipeline: [MyPostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Or register post-fx pipeline at runtime     <pre><code>var pipelineManager = scene.sys.renderer.pipelines;\npipelineManager.addPostPipeline(PostFxName, MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(MyPostFxClass);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<ul> <li>Get post-fx pipeline from game ovject     <pre><code>var pipelineInstance = gameObject.getPostPipeline(MyPostFxClass);\n</code></pre></li> <li>Get post-fx pipeline from camera     <pre><code>var pipelineInstance = camera.getPostPipeline(MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<pre><code>gameObject.removePostPipeline(MyPostFxClass);\n</code></pre>"},{"location":"postfx-pipeline/#unregister-post-fx-pipeline","title":"Unregister post-fx pipeline","text":"<pre><code>var pipelineManager = scene.sys.renderer.pipelines;\npipelineManager.remove(PostFxName);\n</code></pre>"},{"location":"postfx-pipeline/#color-matrix","title":"Color matrix","text":"<p>Use color martix to change RGB render result, and more...</p> <pre><code>class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {\nconstructor(game) {\nsuper({\ngame: game,\nrenderTarget: true,\nfragShader: '...',  // GLSL shader\nuniforms: []\n});\n}\n\nonPreRender() {\n// this.set1f('intensity', this._intensity);\nthis.colorMatrix.grayscale(this._intensity);\n}\n\nonDraw(renderTarget) {\nthis.colorMatrix.grayscale(this._intensity);\nthis.drawFrame(renderTarget, this.fullFrame1);\nthis.bindAndDraw(this.fullFrame1);\n}\n}\n</code></pre>"},{"location":"postfx-pipeline/#color-adjusting","title":"Color adjusting","text":"<p>Invoke before <code>drawFrame()</code>.</p> <ul> <li>Grayscale     <pre><code>this.colorMatrix.grayscale(value);\n// this.colorMatrix.grayscale(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> <li>Night vision tone     <pre><code>this.colorMatrix.night(value);\n// this.colorMatrix.night(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> <li>Sepia tone     <pre><code>this.colorMatrix.sepia();\n// this.colorMatrix.sepia(true); // Cascade\n</code></pre></li> <li>Trippy color tone     <pre><code>this.colorMatrix.lsd();\n// this.colorMatrix.lsd(true); // Cascade\n</code></pre></li> <li>Brown tone     <pre><code>this.colorMatrix.brown();\n// this.colorMatrix.brown(true); // Cascade\n</code></pre></li> <li>Vintage pinhole color effect     <pre><code>this.colorMatrix.vintagePinhole();\n// this.colorMatrix.vintagePinhole(true); // Cascade\n</code></pre></li> <li>Kodachrome color effect     <pre><code>this.colorMatrix.kodachrome();\n// this.colorMatrix.kodachrome(true); // Cascade\n</code></pre></li> <li>Technicolor color effect     <pre><code>this.colorMatrix.technicolor();\n// this.colorMatrix.technicolor(true); // Cascade\n</code></pre></li> <li>Polaroid color effect     <pre><code>this.colorMatrix.polaroid();\n// this.colorMatrix.polaroid(true); // Cascade\n</code></pre></li> <li>Brightness     <pre><code>this.colorMatrix.brightness(value);\n// this.colorMatrix.brightness(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code>(black) ~ <code>1</code></li> </ul> </li> <li>Saturation     <pre><code>this.colorMatrix.saturate(value);\n// this.colorMatrix.saturate(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> <li>Desaturate     <pre><code>this.colorMatrix.desaturate();\n// this.colorMatrix.desaturate(true); // Cascade\n</code></pre></li> <li>Hue     <pre><code>this.colorMatrix.hue(rotation);\n// this.colorMatrix.hue(rotation, true); // Cascade\n</code></pre><ul> <li><code>rotation</code> : Hue rotation, in degree.</li> </ul> </li> <li>Black and white     <pre><code>this.colorMatrix.blackWhite();\n// this.colorMatrix.blackWhite(true); // Cascade\n</code></pre></li> <li>Negative     <pre><code>this.colorMatrix.negative();\n// this.colorMatrix.negative(true); // Cascade\n</code></pre></li> <li>Contrast     <pre><code>this.colorMatrix.contrast(value);\n// this.colorMatrix.contrast(value, true); // Cascade\n</code></pre></li> <li>Desaturate luminance     <pre><code>this.colorMatrix.desaturateLuminance();\n// this.colorMatrix.desaturateLuminance(true); // Cascade\n</code></pre></li> <li>Shifts RGB to BGR order     <pre><code>this.colorMatrix.shiftToBGR();\n// this.colorMatrix.shiftToBGR(true); // Cascade\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#draw","title":"Draw","text":"<p>Invoke under <code>onDraw(renderTarget)</code>.</p> <pre><code>this.drawFrame(renderTarget, this.fullFrame1);\nthis.bindAndDraw(this.fullFrame1);\n</code></pre>"},{"location":"quad-image/","title":"Image","text":""},{"location":"quad-image/#introduction","title":"Introduction","text":"<p>Image with 4 or 9 vertex control points.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"quad-image/#live-demos","title":"Live demos","text":"<ul> <li>Quad image</li> <li>Nine points</li> </ul>"},{"location":"quad-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quad-image/#install-plugin","title":"Install plugin","text":""},{"location":"quad-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadImage } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new QuadImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"quad-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, {\n// ninePointMode: false,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexQuadImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// ninePointMode: false,\n// rtl: false\n});\n</code></pre> <ul> <li><code>ninePointMode</code> :<ul> <li><code>true</code> : Add 9 vertex control points.</li> <li><code>false</code> : Add 4 vertex control points. Default behavior.</li> </ul> </li> <li><code>rtl</code> : Diagonal direction in 4 vertices mode.<ul> <li><code>true</code> : Diagonal from right to left</li> <li><code>false</code> : Diagonal from left to right. Default behavior.</li> </ul> </li> </ul> <p>Add quadimage from JSON</p> <pre><code>var quadimage = scene.make.rexQuadImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// ninePointMode: false,\n// rtl: false\n\nadd: true\n});\n</code></pre>"},{"location":"quad-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyQuadImage extends QuadImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyQuadImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#vertex-control-points","title":"Vertex control points","text":"<ul> <li>Array of vertex control points     <pre><code>var controlPoints = image.controlPoints;\n</code></pre><ul> <li>4, or 9 vertex control points</li> </ul> </li> <li>4 vertex control points     <pre><code>var topLeftPoint = image.topLeft;         // image.controlPoints[0]\nvar topRightPoint = image.topRight;       // image.controlPoints[1]\nvar bottomLeftPoint = image.bottomLeft;   // image.controlPoints[2]\nvar bottomRightPoint = image.bottomRight; // image.controlPoints[3]\n</code></pre></li> <li>9 vertex control points     <pre><code>var topLeft = image.topLeft;               // image.controlPoints[0]\nvar topCenter = image.topCenter;           // image.controlPoints[1]\nvar topRight = image.topRight;             // image.controlPoints[2]\nvar centerLeft = image.centerLeft;         // image.controlPoints[3]\nvar center = image.center;                 // image.controlPoints[4]\nvar centerRight = image.centerRight;       // image.controlPoints[5]\nvar bottomLeft = image.bottomLeft;         // image.controlPoints[6]\nvar bottomCenter = image.bottomCenter;     // image.controlPoints[7]\nvar bottomRight = image.bottomRight;       // image.controlPoints[8]\n</code></pre></li> </ul>"},{"location":"quad-image/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var worldXY = controlPoint.getWorldXY();\nvar x = worldXY.x;\nvar y = worldXY.y;\n</code></pre>     or     <pre><code>var x = controlPoint.x;\nvar y = controlPoint.y;\n</code></pre></li> <li>Set     <pre><code>controlPoint.setPosition(x, y);\n// controlPoint.setWorldXY(x, y);\n</code></pre>     or     <pre><code>controlPoint.x = x;\ncontrolPoint.y = y;\n</code></pre></li> </ul>"},{"location":"quad-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"quad-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object.</p>"},{"location":"quad-rendertexture/","title":"Render texture","text":""},{"location":"quad-rendertexture/#introduction","title":"Introduction","text":"<p>Render texture with 4 or 9 vertex control points.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"quad-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"quad-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quad-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"quad-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexQuadRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexQuadRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadRenderTexture } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new QuadRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexQuadRenderTexturege(x, y, width, height, {\n// hideCCW: true,\n// ninePointMode: false,\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexQuadRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// hideCCW: true,\n// ninePointMode: false,\n});\n</code></pre> <ul> <li><code>ninePointMode</code> :<ul> <li><code>true</code> : Add 9 vertex control points.</li> <li><code>false</code> : Add 4 vertex control points. Default behavior.</li> </ul> </li> </ul> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexQuadRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// hideCCW: false,\n// ninePointMode: false,\n\nadd: true\n});\n</code></pre>"},{"location":"quad-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyQuadRenderTexturege extends QuadRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyQuadRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"quad-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> <li>Snapshop game objects     <pre><code>image.snapshot(gameObjects);\n</code></pre><ul> <li><code>gameObjects</code> : Array of game objects.</li> </ul> </li> </ul>"},{"location":"quad-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"quad-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"quad-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"quad-rendertexture/#other-properties","title":"Other properties","text":"<p>See Quad image game object.</p>"},{"location":"quest/","title":"Quest","text":""},{"location":"quest/#introduction","title":"Introduction","text":"<p>Question manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"quest/#live-demos","title":"Live demos","text":"<ul> <li>(CSV) Branch</li> <li>(YAML) Branch</li> <li>Shuffle</li> </ul>"},{"location":"quest/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quest/#install-plugin","title":"Install plugin","text":""},{"location":"quest/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true);\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = scene.plugins.get('rexquestplugin').add(config);\n</code></pre></li> </ul>"},{"location":"quest/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuestPlugin from 'phaser3-rex-plugins/plugins/quest-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuest',\nplugin: QuestPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = scene.plugins.get('rexQuest').add(config);\n</code></pre></li> </ul>"},{"location":"quest/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Quest from 'phaser3-rex-plugins/plugins/quest.js';\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = new Quest(config);\n</code></pre></li> </ul>"},{"location":"quest/#question-manager","title":"Question manager","text":""},{"location":"quest/#create-question-manager-instance","title":"Create question manager instance","text":"<pre><code>var questionManager = scene.plugins.get('rexQuest').add({\nquestions: undefined,\n// format: undefined,\n// delimiter: ',',\n// types: {\n//     question: 'q',\n//     option: '',\n// },\n// convert: true,\n\nquest: undefined,\n// quest: {\n//     shuffleQuestions: false,\n//     shuffleOptions: false,\n// }\n});\n</code></pre> <ul> <li><code>format</code> : Input data (parameter <code>question</code>) format.<ul> <li><code>'csv'</code> : Input data is a csv string</li> <li><code>'yaml'</code> : Input data is a yaml string represented multiple documents, or an array of yaml string for each document.</li> <li><code>'json'</code> : Input data is a json string.</li> <li><code>undefined</code> : Input data is a plain array of questions, don' parse it.</li> </ul> </li> <li><code>questions</code> : Input data of questions.<ul> <li>A plain array of questions. Parsing result of other input formats.     <pre><code>[\n{\nkey: q0,\nparam0: value0,\nparam1: value1,\nparam2: value2,\noptions: [\n{\nkey: o0,\nparam0: value0,\nparam1: value1,\n// ...\n},\n{\nkey: o1,\nparam0: value0,\nparam1: value1,\n// ...\n}\n]\n},\n{\nkey: q1,\nparam0: value0,\nparam1: value1,\nparam2: value2,\noptions: [\n{\nkey: o0,\nparam0: value0,\nparam1: value1,\n// ...\n},\n{\nkey: o1,\nparam0: value0,\nparam1: value1,\n// ...\n}\n]\n},\n]\n</code></pre><ul> <li>Question object : <code>{key, options, param, ...}</code><ul> <li><code>key</code> : An unique key string. Create a key string <code>'_' + serialNumber</code> if not given.</li> <li><code>options</code> : An array of option objects.</li> <li>Other key-value parameters.</li> </ul> </li> <li>Option object : <code>{key, param, ...}</code><ul> <li><code>key</code> : An unique key string. Create a key string <code>'_' + serialNumber</code> if not given.</li> <li>Other key-value parameters.</li> </ul> </li> </ul> </li> <li>A yaml string represented multiple documents, will parse it to array of questions.     <pre><code>key: q0\nparam0: value0\nparam1: value1\noptions:\n- key: o0\nparam0: value0\nparam1: value1\n- key: o1\nparam0: value0\nparam1: value1\n---\nkey: q1\nparam0: value0\nparam1: value1\noptions:\n- key: o0\nparam0: value0\nparam1: value1\n- key: o1\nparam0: value0\nparam1: value1\n</code></pre></li> <li>An array of yaml strings for each document, will parse them to array of questions.   </li> <li>A csv string, will parse it to array of questions.     <pre><code>type,key,param0,param1,...\nq,q0,value0,value1,...\n,o0,value0,value1,...\n,o1,value0,value1,...\nq,q1,value0,value1,...\n,o0,value0,value1,...\n,o1,value0,value1,...\n</code></pre><ul> <li>Fields in first row<ul> <li><code>type</code> : Type of this row. These values can be redefined via <code>types</code> in configuration object.</li> <li><code>q</code> : A row of question object.</li> <li>Empty string : A row of option object belong a question object.</li> <li><code>key</code> : Unique key string. Create a key string <code>'_' + serialNumber</code> if this field does not exist.</li> <li>Other fields.</li> </ul> </li> </ul> </li> <li>A json string, will parse it to array of questions.</li> </ul> </li> <li><code>delimiter</code> : Delimiter of csv string. Default value is <code>','</code></li> <li><code>types</code> : Define value of row type.<ul> <li><code>types.question</code> : Define value of question row. Default value is <code>q</code>.</li> <li><code>types.option</code> : Define value of option row. Default value is <code>''</code> (empty string).</li> </ul> </li> <li><code>convert</code> : Convert string values to other types.<ul> <li>Default type converting : Convert string to number, boolean, null, or string<ul> <li><code>'0'</code>, <code>'1'</code>, ... (number string) -&gt; number</li> <li><code>'true'</code>, or <code>'false'</code> -&gt; <code>true</code> or <code>false</code></li> <li><code>''</code> (empty string) -&gt; <code>null</code></li> <li>Others : string.</li> </ul> </li> <li>Set <code>false</code> to ignore types converting, i.e. all values are string.</li> <li>A custom type converting function :     <pre><code>function(stringValue, key) {\n// return value;\n}\n</code></pre></li> </ul> </li> <li><code>quest</code> : Create a private quest task object.<ul> <li><code>undefined</code> : Don't create a private quest task object.</li> <li><code>true</code> : Create a private quest task object with default configuration.</li> <li>Configuration of quest task :<ul> <li><code>quest.shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>quest.shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul> </li> </ul>"},{"location":"quest/#add-questions","title":"Add questions","text":"<pre><code>questionManager.add(questions, config);\n</code></pre> <ul> <li><code>questions</code> : An array of question objects, or a csv string. See <code>questions</code> section in Create question manager instance section.</li> <li><code>config</code> :<ul> <li><code>delimiter</code> : Delimiter of csv string. Default value is <code>','</code></li> <li><code>types</code> : Define value of row type.<ul> <li><code>types.question</code> : Define value of question row. Default value is <code>q</code>.</li> <li><code>types.option</code> : Define value of option row. Default value is <code>''</code> (empty string).</li> </ul> </li> <li><code>convert</code> : Convert string values to other types.<ul> <li>Default type converting : Convert string to number, boolean, null, or string<ul> <li><code>'0'</code>, <code>'1'</code>, ... (number string) -&gt; number</li> <li><code>'true'</code>, or <code>'false'</code> -&gt; <code>true</code> or <code>false</code></li> <li><code>''</code> (empty string) -&gt; <code>null</code></li> <li>Others : string.</li> </ul> </li> <li>Set <code>false</code> to ignore types converting, i.e. all values are string.</li> <li>A custom type converting function :     <pre><code>function(stringValue, key) {\n// return value;\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"quest/#remove-question","title":"Remove question","text":"<ul> <li>Remove a question object     <pre><code>questionManager.remove(key);\n</code></pre><ul> <li><code>key</code> : An unique key string.</li> </ul> </li> <li>Remove all question objects     <pre><code>questionManager.removeAll();\n</code></pre></li> </ul>"},{"location":"quest/#get-question","title":"Get question","text":"<ul> <li>Get a question object     <pre><code>var question = questionManager.get(key);\n</code></pre></li> <li>Get all keys of question objects     <pre><code>var questionKeys = questionManager.getKeys();\n// var out = questionManager.getKeys(out);\n</code></pre><ul> <li><code>questionKeys</code> : Array of question key string.</li> </ul> </li> </ul>"},{"location":"quest/#question-is-existed","title":"Question is existed","text":"<pre><code>var isExisted = questionManager.has(key);\n</code></pre>"},{"location":"quest/#array-of-questions","title":"Array of questions","text":"<pre><code>var questions = questionManager.questions;\n</code></pre> <p>Rearrange items of this <code>questions</code> array to reorder questions in quest task.</p>"},{"location":"quest/#get-option","title":"Get option","text":"<pre><code>var option = questionManager.getOption(question, optionKey);\n</code></pre> <ul> <li><code>question</code> : A question object, or a question key string.</li> <li><code>optionKey</code> : A option key string.</li> </ul>"},{"location":"quest/#private-quest-task","title":"Private quest task","text":""},{"location":"quest/#create-private-quest-task","title":"Create private quest task","text":"<p>Each question manager can hava a private quest task object, created when creating question manager, or</p> <pre><code>questionManager.startQuest(config);\n</code></pre> <ul> <li><code>config</code> : <ul> <li><code>shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul>"},{"location":"quest/#get-next-question-object","title":"Get next question object","text":"<ul> <li>Get next question object     <pre><code>var question = questionManager.getNextQuestion();\n</code></pre></li> <li>Get next question object via question key     <pre><code>var question = questionManager.getNextQuestion(questionKey);\n</code></pre></li> </ul>"},{"location":"quest/#event","title":"Event","text":"<ul> <li>Fire <code>'quest'</code> when calling <code>questionManager.getNextQuestion()</code> <pre><code>questionManager.on('quest', function(question, questionManager, quest){\n// questionManager.getNextQuestion();\n})\n</code></pre><ul> <li><code>question</code> : Question object.<ul> <li><code>question.options</code> : Option objects of this question.</li> </ul> </li> <li><code>questionManager</code> : Question manager.</li> <li><code>quest</code> : Quest task.</li> </ul> </li> </ul>"},{"location":"quest/#is-last-question","title":"Is last question","text":"<pre><code>var isLast = questionManager.isLastQuestion();\n</code></pre>"},{"location":"quest/#restart-quest-task","title":"Restart quest task","text":"<pre><code>questionManager.restartQuest();\n</code></pre>"},{"location":"quest/#private-data","title":"Private data","text":"<ul> <li>Get data     <pre><code>var value = questionManager.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = questionManager.getData();\n</code></pre></li> <li>Set value     <pre><code>questionManager.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>questionManager.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>questionManager.mulData(key, mul, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>questionManager.clearData();\n</code></pre></li> </ul>"},{"location":"quest/#quest-task","title":"Quest task","text":"<p>Create new quest task if user needs more then 1 quest task.</p>"},{"location":"quest/#create-quest-task","title":"Create quest task","text":"<pre><code>var quest = questionManager.newQuest(config);\n</code></pre> <ul> <li><code>config</code> : <ul> <li><code>shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul>"},{"location":"quest/#get-next-question-object_1","title":"Get next question object","text":"<ul> <li>Get next question object     <pre><code>var question = quest.getNextQuestion();\n</code></pre></li> <li>Get next question object via question key     <pre><code>var question = quest.getNextQuestion(questionKey);\n</code></pre></li> </ul>"},{"location":"quest/#event_1","title":"Event","text":"<ul> <li>Fire <code>'quest'</code> when calling <code>questionManager.getNextQuestion()</code> <pre><code>quest.on('quest', function(question, questionManager, quest){\n// questionManager.getNextQuestion();\n})\n</code></pre><ul> <li><code>question</code> : Question object.<ul> <li><code>question.options</code> : Option objects of this question.</li> </ul> </li> <li><code>questionManager</code> : Question manager.</li> <li><code>quest</code> : Quest task.</li> </ul> </li> </ul>"},{"location":"quest/#is-last-question_1","title":"Is last question","text":"<pre><code>var isLast = quest.isLastQuestion();\n</code></pre>"},{"location":"quest/#restart-quest-task_1","title":"Restart quest task","text":"<pre><code>quest.start();\n</code></pre>"},{"location":"quest/#private-data_1","title":"Private data","text":"<ul> <li>Get data     <pre><code>var value = quest.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = quest.getData();\n</code></pre></li> <li>Set value     <pre><code>quest.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>quest.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>quest.mulData(key, inc, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>quest.clearData();\n</code></pre></li> </ul>"},{"location":"quest/#get-option_1","title":"Get option","text":"<pre><code>var option = quest.getOption(question, optionKey);\n</code></pre> <ul> <li><code>question</code> : A question object, or a question key string, or <code>undefined</code> to get current question object.</li> <li><code>optionKey</code> : A option key string.</li> </ul>"},{"location":"random-data-generator/","title":"Random data generator","text":""},{"location":"random-data-generator/#introduction","title":"Introduction","text":"<p>Get random value from a random generator, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"random-data-generator/#usage","title":"Usage","text":""},{"location":"random-data-generator/#random-data-generator","title":"Random data generator","text":"<ul> <li>Pre-defined random data generator     <pre><code>var rnd = Phaser.Math.RND;\n</code></pre></li> <li>New random generator     <pre><code>var rnd = new Phaser.Math.RandomDataGenerator(seed);\n</code></pre></li> </ul>"},{"location":"random-data-generator/#set-seed","title":"Set seed","text":"<ul> <li>Set seed in game config for pre-defined random data generator     <pre><code>var config = {\n// ...\nseed: seed,\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>seed</code> : <ul> <li>An array of string, like <code>[(Date.now() * Math.random()).toString()]</code></li> </ul> </li> </ul> </li> <li>Set seed     <pre><code>rnd.init(seed);\n</code></pre><ul> <li><code>seed</code> : A string or an array of string.</li> </ul> </li> </ul>"},{"location":"random-data-generator/#get-random-value","title":"Get random value","text":"<ul> <li>Random real number between <code>0</code> and <code>1</code>.     <pre><code>var value = rnd.frac();\n</code></pre></li> <li>Random integer between <code>0</code> and <code>2^32</code>.     <pre><code>var value = rnd.integer();\n</code></pre></li> <li>Random real number between 0 and 2^32.     <pre><code>var value = rnd.real();\n</code></pre></li> <li>Random integer between and including min and max.     <pre><code>var value = rnd.between(min, max);\n// var value = rnd.integerInRange(min, max);\n</code></pre></li> <li>Random real number between min and max.     <pre><code>var value = rnd.realInRange(min, max);\n</code></pre></li> <li>Random real number between -1 and 1.     <pre><code>var value = rnd.normal();\n</code></pre></li> <li>Random angle between <code>-180</code> and <code>180</code>.     <pre><code>var angle = rnd.angle();\n</code></pre></li> <li>Random rotation in radians, between <code>-3.141</code> and <code>3.141</code>.     <pre><code>var angle = rnd.rotation();\n</code></pre></li> <li>Random timestamp between min and max.     <pre><code>var timestamp = rnd.timestamp(min, max);\n</code></pre><ul> <li><code>min</code> : Default value is the beginning of 2000.</li> <li><code>max</code> : Default value is the end of 2020.</li> </ul> </li> <li>UUID <pre><code>var uuid = rnd.uuid();\n</code></pre></li> <li>Random sign value     <pre><code>var sign = rnd.sign();\n</code></pre><ul> <li><code>sign</code> : <code>-1</code> or <code>1</code></li> </ul> </li> </ul>"},{"location":"random-data-generator/#get-random-item","title":"Get random item","text":"<ul> <li>Random element from within the given array.     <pre><code>var item = rnd.pick(arr);\n</code></pre></li> <li>Random element from within the given array, favoring the earlier entries.     <pre><code>var item = rnd.weightedPick(arr);\n</code></pre></li> </ul>"},{"location":"random-data-generator/#shuffle-array","title":"Shuffle array","text":"<pre><code>var arr = rnd.shuffle(arr);\n</code></pre>"},{"location":"random/","title":"Random number","text":""},{"location":"random/#introduction","title":"Introduction","text":"<p>Get random value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"random/#usage","title":"Usage","text":""},{"location":"random/#get-random-value-between-min-max","title":"Get random value between (min, max)","text":"<ul> <li>Random integer     <pre><code>var value = Phaser.Math.Between(min, max);\n</code></pre></li> <li>Random floating point number     <pre><code>var value = Phaser.Math.FloatBetween(min, max);\n</code></pre></li> </ul>"},{"location":"random/#get-random-vector","title":"Get random vector","text":"<ul> <li>2D vector     <pre><code>var vec = Phaser.Math.RandomXY(vec);    // return vec {x, y}\n// var vec = Phaser.Math.RandomXY(vec, scale);\n</code></pre></li> <li>3D vector     <pre><code>var vec = Phaser.Math.RandomXYZ(vec);    // return vec {x, y, z}\n// var vec = Phaser.Math.RandomXYZ(vec, scale);\n</code></pre></li> <li>4D vector     <pre><code>var vec = Phaser.Math.RandomXYZW(vec);    // return vec {x, y, z, w}\n// var vec = Phaser.Math.RandomXYZW(vec, scale);\n</code></pre></li> </ul>"},{"location":"randomplace/","title":"Random place","text":""},{"location":"randomplace/#introduction","title":"Introduction","text":"<p>Place objects randomly inside an area without overlapping.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"randomplace/#live-demos","title":"Live demos","text":"<ul> <li>Random place</li> </ul>"},{"location":"randomplace/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"randomplace/#install-plugin","title":"Install plugin","text":""},{"location":"randomplace/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrandomplaceplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrandomplaceplugin.min.js', true);\n</code></pre></li> <li>Random place objects     <pre><code>scene.plugins.get('rexrandomplaceplugin').randomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RandomPlacePlugin from 'phaser3-rex-plugins/plugins/randomplace-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRandomPlace',\nplugin: RandomPlacePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Random place objects     <pre><code>scene.plugins.get('rexRandomPlace').randomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RandomPlace from 'phaser3-rex-plugins/plugins/randomplace.js';\n</code></pre></li> <li>Random place objects     <pre><code>RandomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#random-place","title":"Random place","text":"<pre><code>scene.plugins.get('rexRandomPlace').randomPlace(gameObjects, {\nradius: radius,\n\ngetPositionCallback: undefined,\narea: areaGeomObject,\n});\n</code></pre> <ul> <li><code>gameObjects</code> : An array of gameObjects. Each item can be<ul> <li>A game objects.</li> <li>A plain object contains     <pre><code>{\ngameObject: gameObject,\nradius: radius,\n}\n</code></pre><ul> <li><code>radius</code> : Collision radius of this game object.</li> </ul> </li> </ul> </li> <li><code>radius</code> : Default collision radius of each game object.</li> <li><code>getPositionCallback</code> : A callback to get a random position.<ul> <li><code>undefined</code> : Use <code>area.getRandomPoint(out)</code> as callback.</li> <li>A function object :     <pre><code>function(out) {\nout.x = 0;\nout.y = 0;\n}\n</code></pre></li> </ul> </li> <li><code>area</code> : A geom object, which has <code>getRandomPoint</code> method.<ul> <li>A circle : <code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li>A rectangle : <code>new Phaser.Geom.Rectangle(x, y, width, height)</code></li> <li>A triangle : <code>new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3)</code></li> <li>An ellipse : <code>new Phaser.Geom.Ellipse(x, y, width, height)</code></li> <li><code>undefined</code> : A rectangle (0, 0, gameWidth, gameHeight)</li> </ul> </li> </ul>"},{"location":"raycaster/","title":"Raycaster","text":""},{"location":"raycaster/#introduction","title":"Introduction","text":"<p>Raycaster between obstacles.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"raycaster/#live-demos","title":"Live demos","text":"<ul> <li>Reflaction</li> </ul>"},{"location":"raycaster/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"raycaster/#install-plugin","title":"Install plugin","text":""},{"location":"raycaster/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexraycasterplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexraycasterplugin.min.js', true);\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = scene.plugins.get('rexraycasterplugin').add(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RaycasterPlugin from 'phaser3-rex-plugins/plugins/raycaster-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRaycaster',\nplugin: RaycasterPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = scene.plugins.get('rexRaycaster').add(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Raycaster from 'phaser3-rex-plugins/plugins/raycaster.js';\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = new Raycaster(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#create-instance","title":"Create instance","text":"<pre><code>var raycaster = scene.plugins.get('rexRaycaster').add({\n// maxRayLength: 10000\n});\n</code></pre> <ul> <li><code>maxRayLength</code> : Max length of ray.</li> </ul>"},{"location":"raycaster/#obstacle","title":"Obstacle","text":""},{"location":"raycaster/#add","title":"Add","text":"<pre><code>raycaster.addObstacle(gameObject);\n// raycaster.addObstacle(gameObject, polygon);\n</code></pre> <ul> <li><code>polygon</code> : A polygon. <ul> <li><code>undefined</code> : Created polygon from 4 vertics of game object.</li> </ul> </li> </ul> <p>or</p> <pre><code>raycaster.addObstacle(gameObjects);\n</code></pre> <ul> <li><code>gameObjects</code> : Array of game object.</li> </ul>"},{"location":"raycaster/#remove","title":"Remove","text":"<pre><code>raycaster.removeObstacle(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul>"},{"location":"raycaster/#clear","title":"Clear","text":"<pre><code>raycaster.clearObstacle();\n</code></pre>"},{"location":"raycaster/#update-shape","title":"Update shape","text":"<pre><code>raycaster.updateObstacle(gameObject);\n// raycaster.updateObstacle(gameObject, polygon);\n</code></pre> <ul> <li><code>polygon</code> : A polygon. <ul> <li><code>undefined</code> : Created polygon from 4 vertics of game object.</li> </ul> </li> </ul>"},{"location":"raycaster/#raycaster","title":"Raycaster","text":"<pre><code>var result = raycaster.rayToward(x, y, angle);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Emit ray from world-position.</li> <li><code>angle</code> : Emit ray toward to angle, in radian.</li> <li><code>result</code> :<ul> <li><code>false</code> : Ray dose not hit any game object.</li> <li>An object : Hit to a game object.     <pre><code>{\ngameObject,\npolygon,\nsegment,\nx, y,\nreflectAngle\n}\n</code></pre><ul> <li><code>gameObject</code> : Hitting game object.</li> <li><code>polygon</code> : Polygon of hitting game object.</li> <li><code>segment</code> : Segment(line) of hitting polygon.</li> <li><code>x</code>, <code>y</code> : World position of hitting</li> <li><code>reflectAngle</code> : Reflect angle, in radian.</li> </ul> </li> </ul> </li> </ul> <p>Reflection</p> <p>Use <code>result.x</code>, <code>result.y</code>, <code>result.reflectAngle</code> for next reflection ray. <pre><code>raycaster.rayToward(result.x, result.y, result.reflectAngle)\n</code></pre></p>"},{"location":"realtimetimers/","title":"Real time timers","text":""},{"location":"realtimetimers/#introduction","title":"Introduction","text":"<p>Start and counting timer by real-time timestamp.</p> <p>Note</p> <p>Not support pause, or timescale features.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"realtimetimers/#live-demos","title":"Live demos","text":"<ul> <li>Progress</li> </ul>"},{"location":"realtimetimers/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"realtimetimers/#install-plugin","title":"Install plugin","text":""},{"location":"realtimetimers/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrealtimetimersplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrealtimetimersplugin.min.js', true);\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = scene.plugins.get('rexrealtimetimersplugin').add(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RealTimeTimersPlugin from 'phaser3-rex-plugins/plugins/realtimetimers-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRealTimeTimers',\nplugin: RealTimeTimersPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = scene.plugins.get('rexRealTimeTimers').add(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RealTimeTimers from 'phaser3-rex-plugins/plugins/realtimetimers.js';\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = new RealTimeTimers(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#create-instance","title":"Create instance","text":"<pre><code>var realTimeTimers = scene.plugins.get('rexRealTimeTimers').add({\n// startTimestamp: new Date().getTime(),\n// getTimestampCallback: functio() { return timestamp; }\n});\n</code></pre> <ul> <li><code>getTimestampCallback</code> : Custom callback of get current timestamp, optional.<ul> <li>Default behavior is getting current timestamp from system.</li> </ul> </li> <li><code>startTimestamp</code> : Start time, optional. Use this start-timestamp if <code>getTimestampCallback</code> is not given.<ul> <li>Default value is current timestamp <code>new Date().getTime()</code>.</li> </ul> </li> </ul>"},{"location":"realtimetimers/#set-start-timestamp","title":"Set start timestamp","text":"<p>Start-timestamp is set when creating this real-time timers object.</p> <p>User still can change Start-timestamp by</p> <pre><code>realTimeTimers.setStartTimestamp(timestamp);\n</code></pre> <p>This changing won't affect existed timers.</p>"},{"location":"realtimetimers/#add-a-timer","title":"Add a timer","text":"<pre><code>realTimeTimers.addTimer(name, period);\n// realTimeTimers.addTimer(name, period, data);\n// realTimeTimers.addTimer(name, period, data, currentTimestamp);\n</code></pre> <ul> <li><code>name</code> : Any name string of this timer. </li> <li><code>period</code> : Will expire after period time, in millisecond.</li> <li><code>data</code> : Any kind of custom data.</li> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> <p>or</p> <pre><code>realTimeTimers.addTimer(name, {\nday: dayCount,        // d: dayCount,\nhour: hourCount,      // h: hourCount,\nminute: minuteCount,  // m: minuteCount,\nsecond: secondCount,  // s: secondCount,\n}, data, currentTimestamp);\n</code></pre> <ul> <li>Sum period by <ul> <li><code>day</code>, or <code>d</code> : Day count</li> <li><code>hour</code>, or <code>h</code> : Hour count</li> <li><code>minute</code>, or <code>m</code> : Minute count</li> <li><code>second</code>, or <code>s</code> : Second count</li> </ul> </li> </ul>"},{"location":"realtimetimers/#increase-period","title":"Increase period","text":"<pre><code>realTimeTimers.incTimerPeriod(name, period);\n</code></pre> <ul> <li><code>name</code> : Any name string of this timer. </li> <li><code>period</code> : Will expire after period time, in millisecond.</li> </ul> <p>or</p> <pre><code>realTimeTimers.incTimerPeriod(name, {\nday: dayCount,        // d: dayCount,\nhour: hourCount,      // h: hourCount,\nminute: minuteCount,  // m: minuteCount,\nsecond: secondCount,  // s: secondCount,\n});\n</code></pre> <p>Will trigger <code>'update'</code> event.</p>"},{"location":"realtimetimers/#expire-timers","title":"Expire timers","text":"<ul> <li>Get expired timers     <pre><code>var timers = realTimeTimers.getExpiredTimers();\n// var timers = realTimeTimers.getExpiredTimers(currentTimestamp);\n</code></pre><ul> <li><code>timers</code> : Array of expired timers. Each timer include these properties -      <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> </li> <li>Pop(get and remove) expired timers     <pre><code>var timers = realTimeTimers.popExpiredTimers();\n// var timers = realTimeTimers.popExpiredTimers(currentTimestamp);\n</code></pre><ul> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> </li> <li>Get progress of timer     <pre><code>var result = realTimeTimers.getTimersProgress()\n// var result = realTimeTimers.getTimersProgress(currentTimestamp);\n</code></pre><ul> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> <li><code>result</code> : Array of timer's progress. Include these properties -     <pre><code>{\nname: name,\nperiod: time,\nelapsed: time,\nprogress: t    // elapsed/period\ntimer: timerObject\n}\n</code></pre><ul> <li><code>timer</code> : Timer object, can remove this timer object by      <pre><code>realTimeTimers.removeTimers(timer);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"realtimetimers/#get-timers","title":"Get timers","text":"<ul> <li>Get last added timer     <pre><code>var timer = realtimetimers.lastTimer;\n</code></pre></li> <li>Get all timers     <pre><code>var timers = realtimetimers.getTimers();\n</code></pre></li> <li>Get timers by name.     <pre><code>var timers = realtimetimers.getTimers(name);\n</code></pre></li> <li>Amount of total timers     <pre><code>var amount = realtimetimers.length;\n</code></pre></li> </ul>"},{"location":"realtimetimers/#remove-timers","title":"Remove timers","text":"<ul> <li>Remove timers by name     <pre><code>realtimetimers.removeTimers(name);\n</code></pre></li> <li>Remove timer object     <pre><code>realtimetimers.removeTimers(timer);\n</code></pre><ul> <li><code>timer</code> : A timer object, or an array of timer objects.</li> </ul> </li> <li>Remove all timers     <pre><code>realtimetimers.clearTimers();\n</code></pre></li> </ul>"},{"location":"realtimetimers/#states","title":"States","text":"<ul> <li>Get states in plain object     <pre><code>var states = realtimetimers.toJSON();\n</code></pre></li> <li>Get states in JSON string. Can store this JSON string into webstorage or server.     <pre><code>var s = JSON.stringify(realtimetimers);\n</code></pre></li> <li>Set states by plain object     <pre><code>realtimetimers.resetFromJSON(states)\n</code></pre></li> </ul>"},{"location":"realtimetimers/#events","title":"Events","text":"<ul> <li>On add a timer     <pre><code>realtimetimers.on('add', function(timer, timers){ })\n</code></pre><ul> <li><code>timer</code> : Added timer.     <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>timers</code> : Total timers after adding.</li> </ul> </li> <li>On remove a timer     <pre><code>realtimetimers.on('remove', function(timer, timers){ })\n</code></pre><ul> <li><code>timer</code> : Removed timer.     <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>timers</code> : Total timers after removing.</li> </ul> </li> <li>On timers updated (add, remove, or increas period).     <pre><code>realtimetimers.on('update', function(timers){ var s = JSON.stringify(realtimetimers);\n// Store current states to webstorage or server here.\n})\n</code></pre><ul> <li><code>timers</code> : Total timers after updating.</li> </ul> </li> </ul>"},{"location":"rendertexture/","title":"Render texture","text":""},{"location":"rendertexture/#introduction","title":"Introduction","text":"<p>Paste game objects or textures on dynaimc texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"rendertexture/#usage","title":"Usage","text":""},{"location":"rendertexture/#add-render-texture-object","title":"Add render texture object","text":"<ul> <li>Create an empty render texture object.     <pre><code>var rt = scene.add.renderTexture(x, y, width, height);\n</code></pre></li> </ul> <p>Add render texture from JSON</p> <pre><code>var rt = scene.make.renderTexture({\nx: 0,\ny: 0,\nwidth: 32,\nheight: 32,\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <p>Origin position</p> <p>Origin position of this render texture is <code>(0,0)</code> (top-left)</p>"},{"location":"rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRenderTexture extends Phaser.GameObjects.RenderTexture {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rt = new MyRenderTexture(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>rt.draw(gameObject, x, y);\n// rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>rt.draw(group, x, y);\n// rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene's display list     <pre><code>rt.draw(scene.children, x, y);\n// rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>rt.draw(key, x, y);\n// rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>rt.drawFrame(key, frame, x, y);\n// rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"rendertexture/#global-alpha","title":"Global alpha","text":"<pre><code>rt.setGlobalAlpha(alpha);\n// rt.globalAlpha = alpha;\n</code></pre>"},{"location":"rendertexture/#global-tint","title":"Global tint","text":"<pre><code>rt.setGlobalTint(tint);\n// rt.globalTint = tint;\n</code></pre>"},{"location":"rendertexture/#erase","title":"Erase","text":"<pre><code>rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"rendertexture/#clear","title":"Clear","text":"<pre><code>rt.clear();\n</code></pre>"},{"location":"rendertexture/#fill","title":"Fill","text":"<pre><code>rt.fill(rgb, alpha);\n// rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"rendertexture/#set-size","title":"Set size","text":"<pre><code>rt.setSize(width, height);\n// rt.resize(width, height);\n</code></pre>"},{"location":"rendertexture/#save-texture","title":"Save texture","text":"<p>Stores a copy of this Render Texture in the Texture Manager using the given key.</p> <pre><code>rt.saveTexture(key);\n</code></pre> <p>Calling <code>saveTexture</code> again will not save another copy of the same texture, it will just rename the key of the existing copy.</p>"},{"location":"rendertexture/#internal-camera","title":"Internal camera","text":"<p>Internal camera <code>rt.camera</code></p> <ul> <li>Scroll (offset)     <pre><code>rt.camera.setScroll(x, y);\n</code></pre></li> <li>Zoom (scale)     <pre><code>rt.camera.setZoom(zoom);\n</code></pre></li> <li>Rotate     <pre><code>rt.camera.setAngle(angle);  // angle in degrees\n</code></pre></li> </ul>"},{"location":"rendertexture/#snapshot","title":"Snapshot","text":"<ul> <li>Takes a snapshot of the whole of this Render Texture.     <pre><code>rt.snapshot(callback);\n// rt.snapshot(callback, type, encoderOptions);\n</code></pre></li> <li>Takes a snapshot of the given area of this Render Texture.     <pre><code>rt.snapshotArea(x, y, width, height, callback);\n// rt.snapshotArea(x, y, width, height, callback, type, encoderOptions);\n</code></pre></li> <li>Takes a snapshot of the given pixel from this Render Texture.     <pre><code>rt.snapshotPixel(x, y, callback);\n</code></pre></li> </ul>"},{"location":"rendertexture/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = rt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"restorabledata/","title":"Restorable data","text":""},{"location":"restorabledata/#introduction","title":"Introduction","text":"<p>Restorable data manager, extends from built-in data manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"restorabledata/#live-demos","title":"Live demos","text":"<ul> <li>Restorable canvas</li> </ul>"},{"location":"restorabledata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"restorabledata/#install-plugin","title":"Install plugin","text":""},{"location":"restorabledata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrestorabledataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrestorabledataplugin.min.js', true);\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = scene.plugins.get('rexrestorabledataplugin').add(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RestorableDataPlugin from 'phaser3-rex-plugins/plugins/restorabledata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRestorableData',\nplugin: RestorableDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = scene.plugins.get('rexRestorableData').add(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RestorableData from 'phaser3-rex-plugins/plugins/restorabledata.js';\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = new RestorableData(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexRData').add(parent);\n// var data = scene.plugins.get('rexRData').add(parent, eventEmitter);\n</code></pre> <ul> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"restorabledata/#getsetremove-value","title":"Get/set/remove value","text":"<p>See built-in data manager.</p>"},{"location":"restorabledata/#commit","title":"Commit","text":"<p>Commit current data status into repository, and increase current version number.</p> <pre><code>data.commit();\n</code></pre> <p>or</p> <pre><code>data.commit(alias);\n</code></pre> <ul> <li><code>alias</code> : A version alias string.</li> </ul>"},{"location":"restorabledata/#restore","title":"Restore","text":"<ul> <li>Restore data status to a specific version.     <pre><code>data.restore(version);\n</code></pre>     or     <pre><code>data.version = version;\n</code></pre><ul> <li><code>version</code> : Version number or version alias string.</li> </ul> </li> <li>Rebuild data status from version <code>0</code> to a specific version.     <pre><code>data.restore(version, true);\n</code></pre><ul> <li><code>version</code> : Version number or version alias string.</li> </ul> </li> <li>Reverse data status to last version.     <pre><code>data.restore();\n</code></pre></li> </ul>"},{"location":"restorabledata/#version","title":"Version","text":"<ul> <li>Get current version alias string     <pre><code>var version = data.versionAlias;\n</code></pre></li> <li>Get all version alias strings     <pre><code>var aliases = data.versionAliases;\n</code></pre></li> <li>Get current version number     <pre><code>var version = data.version;\n</code></pre></li> <li>Get last version number     <pre><code>var version = data.lastVersion;\n</code></pre></li> </ul> <p>Version starts from <code>0</code> which has no data. Each <code>data.commit()</code> will increase this version number.</p>"},{"location":"restorabledata/#saveload-status","title":"Save/load status","text":"<ul> <li>Get current status     <pre><code>var o = data.toJSON();\n</code></pre></li> <li>Load status     <pre><code>data.resetFromJSON(o);\n</code></pre></li> </ul> <p>or</p> <ul> <li>Get current status via JSON string     <pre><code>var s = JSON.stringify(data);\n</code></pre></li> <li>Load status via JSON string     <pre><code>data.resetFromJSON(JSON.parse(s));\n</code></pre></li> </ul>"},{"location":"reverse-string/","title":"Reverse","text":""},{"location":"reverse-string/#introduction","title":"Introduction","text":"<p>Reverses string, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"reverse-string/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.ReverseString(str);\n</code></pre>"},{"location":"rexvideo/","title":"Rexvideo","text":""},{"location":"rexvideo/#introduction","title":"Introduction","text":"<p>Play video on DOM, or on canvas.</p> <ul> <li>Author: Rex</li> <li>DOM Game object, or Canvas Game object</li> </ul>"},{"location":"rexvideo/#live-demos","title":"Live demos","text":"<ul> <li>DOM video, and canvas video</li> </ul>"},{"location":"rexvideo/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rexvideo/#install-plugin","title":"Install plugin","text":""},{"location":"rexvideo/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexvideoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvideoplugin.min.js', true);\n</code></pre></li> <li>Add video object     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);    // var video = scene.add.rexVideo(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import VideoPlugin from 'phaser3-rex-plugins/plugins/video-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexVideo',\nplugin: VideoPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add video object     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);\n// var video = scene.add.rexVideo(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import VideoCanvas from 'phaser3-rex-plugins/plugins/videocanvas/VideoCanvas.js';\n// import VideoDOM from 'phaser3-rex-plugins/plugins/videodom/VideoDOM.js';\n</code></pre></li> <li>Add text object     <pre><code>var video = new VideoCanvas(scene, x, y, width, height, config);\nscene.add.existing(video);\n// var video = new VideoDOM(scene, x, y, width, height, config);\n// scene.add.existing(video);\n</code></pre></li> </ul>"},{"location":"rexvideo/#add-video-object","title":"Add video object","text":"<ul> <li>Video on DOM     <pre><code>var video = scene.add.rexVideo(x, y, width, height, config);\n// var video = scene.add.rexVideo(x, y, config);\n// var video = scene.add.rexVideo(config);\n</code></pre></li> <li>Video on canvas     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);\n// var video = scene.add.rexVideoCanvas(x, y, config);\n// var video = scene.add.rexVideoCanvas(config);\n</code></pre></li> </ul> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\n// Element properties\nsrc: url,\n// src: {\n//     webm: webmFileURL,\n//     ogg: oggFileURL,\n//     mp4: mp4FileURL,\n//     h264: h264FileURL,\n// }\nid: undefined,\nautoPlay: true,\ncontrols: false,\nloop: false,\nmuted: false,\nplaysInline: true,\ncrossOrigin: 'anonymous',\nplaybackTimeChangeEventEnable: true,\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li>Element properties<ul> <li><code>src</code> : Specifies the URL of the video file.<ul> <li>A string : url of the video file.</li> <li>A plain object : <code>{ videoType: fileURL }</code><ol> <li>Get <code>webmFileURL</code> if browser supports webm video format.</li> <li>Get <code>oggFileURL</code> if browser supports ogg video format.</li> <li>Get <code>mp4FileURL</code> if browser supports mp4 video format.</li> <li>Get <code>h264FileURL</code> if browser supports h264 video format.</li> </ol> </li> </ul> </li> <li><code>id</code> : <code>id</code> element property.</li> <li><code>autoPlay</code> : <code>autoplay</code> element property.</li> <li><code>controls</code> : <code>controls</code> element property.</li> <li><code>loop</code> : <code>loop</code> element property.</li> <li><code>muted</code> : <code>muted</code> element property.</li> <li><code>playsInline</code> : <code>playsInline</code> element property.</li> <li><code>crossOrigin</code> : <code>crossOrigin</code> element property.</li> </ul> </li> <li><code>playbackTimeChangeEventEnable</code> : Set <code>false</code> to disable <code>playbacktimechange</code> event.</li> </ul>"},{"location":"rexvideo/#different-between-rexvideo-and-rexvideocanvas","title":"Different between rexVideo and rexVideoCanvas","text":"<ul> <li><code>rexVideo</code> plays video on DOM.<ul> <li>DOM object always above game canvas.</li> <li>Won't be affected by webgl shader.</li> <li>Right clicks to pop up a menu.    </li> </ul> </li> <li><code>rexVideoCanvas</code> plays video on canvas.<ul> <li>Can be placed between game objects via depth setting.</li> <li>Can be affected by webgl shader.</li> </ul> </li> </ul>"},{"location":"rexvideo/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyVideo extends Video {  // or VideoCanvas\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     if (super.preUpdate) {\n//         super.preUpdate(time, delta)\n//     }\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var video = new MyVideo(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#load","title":"Load","text":"<pre><code>video.load(src);\n</code></pre> <ul> <li><code>src</code> : Specifies the URL of the video file.<ul> <li>A string : url of the video file.</li> <li>A plain object : <code>{ videoType: fileURL }</code><ol> <li>Get <code>webmFileURL</code> if browser supports webm video format.</li> <li>Get <code>oggFileURL</code> if browser supports ogg video format.</li> <li>Get <code>mp4FileURL</code> if browser supports mp4 video format.</li> <li>Get <code>h264FileURL</code> if browser supports h264 video format.</li> </ol> </li> </ul> </li> </ul>"},{"location":"rexvideo/#play","title":"Play","text":"<pre><code>video.play();\n</code></pre>"},{"location":"rexvideo/#pause","title":"Pause","text":"<pre><code>video.pause();\n</code></pre>"},{"location":"rexvideo/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = video.playbackTime; // time in seconds\n</code></pre> <pre><code>var t = video.t; // t: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setPlaybackTime(time); // time in seconds\n// video.playbackTime = time;\n</code></pre> <pre><code>video.setT(t); // t: 0~1\n// video.t = t;\n</code></pre></li> </ul>"},{"location":"rexvideo/#duration","title":"Duration","text":"<pre><code>var duration = video.duration;  // time in seconds\n</code></pre>"},{"location":"rexvideo/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = video.volume;  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setVolume(volume);  // volume: 0~1\n// video.volume = volume;\n</code></pre></li> </ul>"},{"location":"rexvideo/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = video.muted;  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>video.setMute(muted);  // muted: true/false\n// video.muted = muted;\n</code></pre></li> </ul>"},{"location":"rexvideo/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = video.loop;  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>video.setLoop(loop);  // loop: true/false\n// video.loop = loop;\n</code></pre></li> </ul>"},{"location":"rexvideo/#resize","title":"Resize","text":"<pre><code>video.resize(width, height);\n</code></pre>"},{"location":"rexvideo/#status","title":"Status","text":"<ul> <li>Is playing     <pre><code>var isPlaying = video.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = video.isPaused;\n</code></pre></li> <li>Has end     <pre><code>var hasEnded = video.hasEnded;\n</code></pre></li> <li>Ready state     <pre><code>var readyState = video.readyState;\n</code></pre><ul> <li><code>0</code> = HAVE_NOTHING - no information whether or not the audio/video is ready</li> <li><code>1</code> = HAVE_METADATA - metadata for the audio/video is ready</li> <li><code>2</code> = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond</li> <li><code>3</code> = HAVE_FUTURE_DATA - data for the current and at least the next frame is available</li> <li><code>4</code> = HAVE_ENOUGH_DATA - enough data available to start playing</li> </ul> </li> </ul>"},{"location":"rexvideo/#events","title":"Events","text":"<ul> <li>Load start     <pre><code>video.on('loadstart', function(video){ }, scope);\n</code></pre></li> <li>Can play     <pre><code>video.on('canplay', function(video){ }, scope);\n</code></pre></li> <li>Can play through     <pre><code>video.on('canplaythrough', function(video){ }, scope);\n</code></pre></li> <li>Playing     <pre><code>video.on('playing', function(video){ }, scope);\n</code></pre></li> <li>Pause     <pre><code>video.on('pause', function(video){ }, scope);\n</code></pre></li> <li>Stalled     <pre><code>video.on('stalled', function(video){ }, scope);\n</code></pre></li> <li>Ended     <pre><code>video.on('ended', function(video){ }, scope);\n</code></pre></li> <li>Error     <pre><code>video.on('error', function(video){ }, scope);\n</code></pre></li> <li>Playback time changed     <pre><code>video.on('playbacktimechange', function(video){ }, scope);\n</code></pre><ul> <li>Set <code>playbackTimeChangeEventEnable</code> to <code>true</code> to enable this event.</li> </ul> </li> </ul>"},{"location":"rope/","title":"Rope","text":""},{"location":"rope/#introduction","title":"Introduction","text":"<p>Manipulate the vertices of images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"rope/#usage","title":"Usage","text":""},{"location":"rope/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"rope/#add-object","title":"Add object","text":"<pre><code>var rope = scene.add.rope(x, y, texture, frame, points, horizontal);\n// var rope = scene.add.rope(x, y, texture, frame, points, horizontal, colors, alphas);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>A number : Segments to split the texture frame into.</li> <li>An number array : An array containing the vertices data.</li> </ul> </li> <li><code>horizontal</code> : <ul> <li><code>true</code> : Vertices of this Rope be aligned horizontally.</li> <li><code>false</code> : Vertices of this Rope be aligned vertically.</li> </ul> </li> <li><code>colors</code> : An optional array containing the color data for this Rope. One color value per pair of vertices.</li> <li><code>alphas</code> : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.</li> </ul> <p>Add rope from JSON</p> <pre><code>var rope = scene.make.rope({\nx: 0,\ny: 0,\nkey: '',\nframe: null,\nhorizontal: true,\npoints: undefined,\ncolors: undefined,\nalphas: undefined,\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"rope/#custom-rope-class","title":"Custom rope class","text":"<ul> <li>Define class     <pre><code>class MyRope extends Phaser.GameObjects.Rope {\nconstructor(scene, x, y, texture, frame, points, horizontal, colors, alphas) {\nsuper(scene, x, y, texture, frame, points, horizontal, colors, alphas);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rope = new MyRope(scene, x, y, texture, frame, points, horizontal);\n</code></pre></li> </ul>"},{"location":"rope/#origin","title":"Origin","text":"<p>A Ropes origin is always 0.5 x 0.5 and cannot be changed.</p>"},{"location":"rope/#set-vertices","title":"Set vertices","text":"<p>Set vertices via </p> <pre><code>rope.setPoints(points);\n// rope.setPoints(points, colors, alphas);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>A number : Segments to split the texture frame into.</li> <li>An number array : An array containing the vertices data.</li> </ul> </li> <li><code>colors</code> : An optional array containing the color data for this Rope. One color value per pair of vertices.</li> <li><code>alphas</code> : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.</li> </ul> <p>Also change horizontal mode : </p> <ul> <li>Change vertical rope to horizontal rope, do nothing if rope is horizontal mode already     <pre><code>rope.setHorizontal(points);\n// rope.setHorizontal(points, colors, alphas);\n</code></pre></li> <li>Change horizontal rope to vertical rope, do nothing if rope is vertical mode already     <pre><code>rope.setVertical(points);\n// rope.setVertical(points, colors, alphas);\n</code></pre></li> </ul> <p>Or set <code>rope.points</code> directly :</p> <ol> <li>Change <code>rope.points</code><ul> <li>Horizontal rope : <code>rope.points[i].y = newY</code></li> <li>Vertical rope :  <code>rope.points[i].x = newX</code></li> </ul> </li> <li>Call <code>rope.setDirty()</code>, or <code>rope.updateVertices()</code></li> </ol> <p>Each point is relative to position of rope object, get points of world via</p> <pre><code>var worldX = rope.points[i].x + rope.x;\nvar worldY = rope.points[i].y + rope.y;\n</code></pre>"},{"location":"rope/#play-animation","title":"Play animation","text":"<pre><code>rope.play(key);\n// rope.play(key, ignoreIfPlaying, startFrame);\n</code></pre> <ul> <li><code>ignoreIfPlaying</code> : If an animation is already playing then ignore this call. Default value is <code>false</code>.</li> <li><code>startFrame</code> : Optionally start the animation playing from this frame index. Default value is <code>0</code>.</li> </ul>"},{"location":"rope/#alpha","title":"Alpha","text":"<ul> <li>Single alpha     <pre><code>rope.setAlphas(alpha);\n</code></pre></li> <li>Top - bottom alpha     <pre><code>rope.setAlphas(topAlpha, bottomAlpha);\n</code></pre></li> <li>Alpha array for each point     <pre><code>rope.setAlphas(alphaArray);\n</code></pre><ul> <li><code>alphaArray</code> : Array of alpha value.</li> </ul> </li> </ul>"},{"location":"rope/#color-tint","title":"Color tint","text":"<ul> <li>Single color tint     <pre><code>rope.setColors(color);\n</code></pre></li> <li>Color tint array for each point     <pre><code>rope.setAlphas(colorArray);\n</code></pre><ul> <li><code>colorArray</code> : Array of color tint value.</li> </ul> </li> </ul>"},{"location":"rope/#tint-fill-mode","title":"Tint fill mode","text":"<p>Sets the tint fill mode.</p> <pre><code>rope.setTintFill(mode);\n</code></pre> <ul> <li><code>mode</code> : <ul> <li><code>0</code> : Additive tint, blends the vertices colors with the texture. Default behavior.</li> <li><code>1</code> : Fill tint with alpha.</li> <li><code>2</code> : Fill tint without alpha.</li> </ul> </li> </ul>"},{"location":"rope/#flip","title":"Flip","text":"<pre><code>rope.flipX = flip;\nrope.flipY = flip;\n</code></pre> <p>If this Game Object has a physics body, it will not change the body. This is a rendering toggle only.</p>"},{"location":"rope/#debug","title":"Debug","text":"<p>Draw debug mesh each render tick.</p> <pre><code>rope.setDebug(graphic);\n// rope.setDebug(graphic, callback);\n</code></pre> <ul> <li><code>graphic</code> : Graphics game object</li> <li><code>callback</code> : Callback of rendering debug graphics (default callback)     <pre><code>function(rope, meshLength, verts) {\n// var graphic = rope.debugGraphic;\n}\n</code></pre><ul> <li><code>rope</code> : Rope instance.<ul> <li><code>rope.debugGraphic</code> : Graphics game object</li> </ul> </li> <li><code>meshLength</code> : The number of mesh vertices in total.</li> <li><code>verts</code> : An array of the translated vertex coordinates.</li> </ul> </li> </ul> <p>Note</p> <p>Clear Debug graphics (<code>rope.debugGraphic.clear()</code>) during scene's update stage (<code>scene.update() { }</code>)</p>"},{"location":"rotate/","title":"Rotate","text":""},{"location":"rotate/#introduction","title":"Introduction","text":"<p>Rotate game object continually with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"rotate/#live-demos","title":"Live demos","text":"<ul> <li>Change speed</li> </ul>"},{"location":"rotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rotate/#install-plugin","title":"Install plugin","text":""},{"location":"rotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrotateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrotateplugin.min.js', true);\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = scene.plugins.get('rexrotateplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RotatePlugin from 'phaser3-rex-plugins/plugins/rotate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRotate',\nplugin: RotatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = scene.plugins.get('rexRotate').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Rotate from 'phaser3-rex-plugins/plugins/rotate.js';\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = new Rotate(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#create-instance","title":"Create instance","text":"<pre><code>var rotate = scene.plugins.get('rexRotate').add(gameObject, {\n// speed: 180,\n// enable: true,\n// timeScale: 1,\n});\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotate/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>rotate.setEnable();\n</code></pre>     or     <pre><code>rotate.enable = true;\n</code></pre></li> <li>Disable     <pre><code>rotate.setEnable(false);\n</code></pre>     or     <pre><code>rotate.enable = false;\n</code></pre></li> </ul>"},{"location":"rotate/#set-speed","title":"Set speed","text":"<pre><code>rotate.setSpeed(speed);\n// rotate.speed = speed;\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotate/#status","title":"Status","text":"<ul> <li>Is rotating     <pre><code>var enable = rotate.enable;\n// var isRunning = rotate.isRunning;\n</code></pre></li> </ul>"},{"location":"rotateto/","title":"Rotate to","text":""},{"location":"rotateto/#introduction","title":"Introduction","text":"<p>Rotate game object towards target position with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"rotateto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rotateto/#install-plugin","title":"Install plugin","text":""},{"location":"rotateto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrotatetoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrotatetoplugin.min.js', true);\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = scene.plugins.get('rexrotatetoplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RotateToPlugin from 'phaser3-rex-plugins/plugins/rotateto-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRotateTo',\nplugin: RotateToPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = scene.plugins.get('rexRotateTo').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RotateTo from 'phaser3-rex-plugins/plugins/rotateto.js';\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = new RotateTo(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#create-instance","title":"Create instance","text":"<pre><code>var rotateTo = scene.plugins.get('rexRotateTo').add(gameObject, {\n// speed: 180,\n// enable: true,\n// timeScale: 1,\n});\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotateto/#start-moving","title":"Start moving","text":""},{"location":"rotateto/#rotate-game-object-towards-position","title":"Rotate game object towards position","text":"<ul> <li>Shortest angle     <pre><code>rotateTo.rotateTowardsPosition(x, y);\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Target position</li> </ul> </li> <li>Clockwise/counter-clockwise     <pre><code>rotateTo.rotateTowardsPosition(x, y, dir);\n// rotateTo.rotateTowardsPosition(x, y, dir, speed);\n</code></pre><ul> <li><code>dir</code> :<ul> <li><code>0</code> : Shortest angle</li> <li><code>1</code>, or <code>'cw'</code> : Clockwise</li> <li><code>2</code>, or <code>'ccw'</code> : Counter-clockwise</li> </ul> </li> <li><code>speed</code> : Turn speed, degrees in second</li> </ul> </li> </ul>"},{"location":"rotateto/#rotate-game-object-to-angle","title":"Rotate game object to angle","text":"<ul> <li>Shortest angle     <pre><code>rotateTo.rotateTo(angle);\n</code></pre><ul> <li><code>angle</code> : Target angle in degrees</li> </ul> </li> <li>Clockwise/counter-clockwise     <pre><code>rotateTo.rotateTo(angle, dir);\n// rotateTo.rotateTo(angle, dir, speed);\n</code></pre><ul> <li><code>dir</code> :<ul> <li><code>0</code> : Shortest angle</li> <li><code>1</code>, or <code>cw</code> : Clockwise</li> <li><code>2</code>, or <code>ccw</code> : Counter-clockwise</li> </ul> </li> <li><code>speed</code> : Turn speed, degrees in second</li> </ul> </li> </ul>"},{"location":"rotateto/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>rotateTo.setEnable();\n</code></pre>     or     <pre><code>rotateTo.enable = true;\n</code></pre></li> <li>Disable     <pre><code>rotateTo.setEnable(false);\n</code></pre>     or     <pre><code>rotateTo.enable = false;\n</code></pre></li> </ul>"},{"location":"rotateto/#pause-resume-stop-rotating","title":"Pause, Resume, stop rotating","text":"<pre><code>rotateTo.pause();\nrotateTo.resume();\nrotateTo.stop();\n</code></pre>"},{"location":"rotateto/#set-speed","title":"Set speed","text":"<pre><code>rotateTo.setSpeed(speed);\n// rotateTo.speed = speed;\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotateto/#events","title":"Events","text":"<ul> <li>On rotating start     <pre><code>rotateTo.on('start', function(gameObject, rotateTo){});\n</code></pre></li> <li>On reached target     <pre><code>rotateTo.on('complete', function(gameObject, rotateTo){});\n</code></pre></li> </ul>"},{"location":"rotateto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = rotateTo.isRunning;\n</code></pre></li> </ul>"},{"location":"round-to/","title":"Round to","text":""},{"location":"round-to/#introduction","title":"Introduction","text":"<p>Round/ceil/floor to the given precision, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"round-to/#usage","title":"Usage","text":""},{"location":"round-to/#round-to","title":"Round to","text":"<p><pre><code>var result = Phaser.Math.RoundTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.RoundTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul> <p>Examples</p> <pre><code>RoundTo(123.456789, 0) = 123\nRoundTo(123.456789, -1) = 123.5\nRoundTo(123.456789, -2) = 123.46\nRoundTo(123.456789, -3) = 123.457\n</code></pre>"},{"location":"round-to/#ceil-to","title":"Ceil to","text":"<p><pre><code>var result = Phaser.Math.CeilTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.CeilTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul>"},{"location":"round-to/#floor-to","title":"Floor to","text":"<p><pre><code>var result = Phaser.Math.floorTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.floorTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul>"},{"location":"runcommands/","title":"Run commands","text":""},{"location":"runcommands/#introduction","title":"Introduction","text":"<p>Run commands in array.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"runcommands/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"runcommands/#install-plugin","title":"Install plugin","text":""},{"location":"runcommands/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexruncommandsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexruncommandsplugin.min.js', true);\n</code></pre></li> <li>Run commands     <pre><code>scene.plugins.get('rexruncommandsplugin').run(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RunCommandsPlugin from 'phaser3-rex-plugins/plugins/runcommands-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRunCommands',\nplugin: RunCommandsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Run commands     <pre><code>scene.plugins.get('rexRunCommands').run(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RunCommands from 'phaser3-rex-plugins/plugins/runcommands.js';\n</code></pre></li> <li>Run commands     <pre><code>RunCommands(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#run-commands","title":"Run commands","text":"<pre><code>scene.plugins.get('rexRunCommands').run(commands, scope);\n</code></pre> <ul> <li>Format of command :     <pre><code>[fnName, param0, param1, ...]\n</code></pre>     or     <pre><code>[callback, param0, param1, ...]\n</code></pre></li> <li>Commands in nested array :     <pre><code>[\ncommand0,\ncommand1\n[\ncommand2,\ncommand3\n]\n]\n</code></pre></li> <li>Run command :     <pre><code>scope[fnName].call(scope, param0, param1 ...)\n</code></pre>     or     <pre><code>callback.call(scope, param0, param1 ...)\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/","title":"Scale down destroy","text":""},{"location":"scaledowndestroy/#introduction","title":"Introduction","text":"<p>Scale down (i.e. ease scaleX, scaleY to <code>0</code>) game object then destroy it.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"scaledowndestroy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scaledowndestroy/#install-plugin","title":"Install plugin","text":""},{"location":"scaledowndestroy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscaleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleplugin.min.js', true);\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>scene.plugins.get('rexscaleplugin').scaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScalePlugin from 'phaser3-rex-plugins/plugins/scale-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScale',\nplugin: ScalePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScaleDownDestroy from 'phaser3-rex-plugins/plugins/scale-down-destroy.js';\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>ScaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#scale-down","title":"Scale down","text":"<ul> <li>Scale down width and height     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration);\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, undefined, ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li>Scale down width only     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'x');\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'x', ease);\n</code></pre></li> <li>Scale down height only     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'y');\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'y', ease);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>scale.on('complete', function(gameObject, scale){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"scalemanager/","title":"Scale manager","text":""},{"location":"scalemanager/#introduction","title":"Introduction","text":"<p>Scale game window, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"scalemanager/#usage","title":"Usage","text":""},{"location":"scalemanager/#setup","title":"Setup","text":"<p>Setup scale mode in game configuration.</p> <pre><code>var config = {\n// ...\nparent: divId,\n\n// Game size\nwidth: 1024,\nheight: 768,\n\nscale: {\n// Or set parent divId here\nparent: divId,\n\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH,\n\n// Or put game size here\n// width: 1024,\n// height: 768,\n\n// Minimum size\nmin: {\nwidth: 800,\nheight: 600\n},\n// Or set minimum size like these\n// minWidth: 800,\n// minHeight: 600,\n\n// Maximum size\nmax: {\nwidth: 1600,\nheight: 1200\n},\n// Or set maximum size like these\n// maxWidth: 1600,\n// maxHeight: 1200,\n\nzoom: 1,  // Size of game canvas = game size * zoom\n},\nautoRound: false\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre> <ul> <li><code>scale.mode</code> :<ul> <li><code>Phaser.Scale.NONE</code> : No scaling happens at all.</li> <li><code>Phaser.Scale.FIT</code> : The width and height are automatically adjusted to fit inside the given target area, while keeping the aspect ratio. Depending on the aspect ratio there may be some space inside the area which is not covered.</li> <li><code>Phaser.Scale.ENVELOP</code> : The width and height are automatically adjusted to make the size cover the entire target area while keeping the aspect ratio. This may extend further out than the target size.</li> <li><code>Phaser.Scale.WIDTH_CONTROLS_HEIGHT</code> : The height is automatically adjusted based on the width.</li> <li><code>Phaser.Scale.HEIGHT_CONTROLS_WIDTH</code> : The width is automatically adjusted based on the height.</li> <li><code>Phaser.Scale.RESIZE</code> : The Canvas is resized to fit all available parent space, regardless of aspect ratio.</li> </ul> </li> <li><code>scale.autoCenter</code> :<ul> <li><code>Phaser.Scale.NO_CENTER</code> : The game canvas is not centered within the parent by Phaser.</li> <li><code>Phaser.Scale.CENTER_BOTH</code> : The game canvas is centered both horizontally and vertically within the parent.</li> <li><code>Phaser.Scale.CENTER_HORIZONTALLY</code> : The game canvas is centered horizontally within the parent.</li> <li><code>Phaser.Scale.CENTER_VERTICALLY</code> : The game canvas is centered both vertically within the parent.</li> </ul> </li> </ul>"},{"location":"scalemanager/#resize-canvas-element","title":"Resize canvas element","text":"<pre><code>scene.scale.resize(width, height);\n</code></pre> <p>Modify the size of the Phaser canvas element directly. You should only use this if you are using the <code>NO_SCALE</code> scale mode,</p>"},{"location":"scalemanager/#set-game-size","title":"Set game size","text":"<pre><code>scene.scale.setGameSize(width, height);\n</code></pre> <p>It should only be used if you're looking to change the base size of your game and are using one of the Scale Manager scaling modes, i.e. <code>FIT</code>. If you're using <code>NO_SCALE</code> and wish to change the game and canvas size directly, then please use the <code>resize</code> method instead.</p>"},{"location":"scalemanager/#get-view-port","title":"Get view port","text":"<pre><code>var viewport = scene.scale.getViewPort();\n// var viewport = scene.scale.getViewPort(camera, out);\n</code></pre> <ul> <li><code>viewport</code> : The Rectangle of visible area.</li> <li><code>camera</code> : The camera this viewport is respond upon.</li> <li><code>out</code> : The Rectangle of visible area.</li> </ul>"},{"location":"scalemanager/#members","title":"Members","text":"<ul> <li>The un-modified game size, as requested in the game config (the raw width / height), as used for world bounds, cameras, etc     <pre><code>var gameSize = scene.scale.gameSize;\n</code></pre><ul> <li><code>gameSize.width</code>, <code>gameSize.height</code></li> </ul> </li> <li>The modified game size, which is the auto-rounded gameSize, used to set the canvas width and height (but not the CSS style)     <pre><code>var baseSize = scene.scale.baseSize;\n</code></pre><ul> <li><code>baseSize.width</code>, <code>baseSize.height</code></li> </ul> </li> <li>The size used for the canvas style, factoring in the scale mode, parent and other values.     <pre><code>var displaySize = scene.scale.displaySize;\n</code></pre><ul> <li><code>displaySize.width</code>, <code>displaySize.height</code></li> </ul> </li> </ul>"},{"location":"scalemanager/#events","title":"Events","text":"<pre><code>scene.scale.on('resize', function(gameSize, baseSize, displaySize, previousWidth, previousHeight) {});\n</code></pre> <ul> <li><code>gameSize</code><ul> <li><code>gameSize.width</code>, <code>gameSize.height</code></li> </ul> </li> <li><code>baseSize</code><ul> <li><code>baseSize.width</code>, <code>baseSize.height</code></li> </ul> </li> <li><code>displaySize</code><ul> <li><code>displaySize.width</code>, <code>displaySize.height</code></li> </ul> </li> </ul>"},{"location":"scalemanager/#update-bounds","title":"Update bounds","text":"<p>This method dose not have to be invoked, unless the canvas position, or visibility is changed via any other method (i.e. via an Angular route).</p> <pre><code>scene.scale.updateBounds();\n</code></pre>"},{"location":"scalemanager/#full-screen","title":"Full screen","text":"<p>Under <code>'pointerup'</code> touch event :</p> <ul> <li>Start full screen     <pre><code>scene.scale.startFullscreen();\n</code></pre></li> <li>Stop full screen     <pre><code>scene.scale.stopFullscreen();\n</code></pre></li> <li>Toggle full screen     <pre><code>scene.scale.toggleFullscreen();\n</code></pre></li> <li>Is full screen     <pre><code>var isFullscreen = scene.scale.isFullscreen;\n</code></pre></li> </ul> <p>Games within an iframe will also be blocked from fullscreen  unless the iframe has the <code>allowfullscreen</code> attribute.</p> <p>Performing an action that navigates to another page,  or opens another tab, will automatically cancel fullscreen mode,  as will the user pressing the ESC key.</p>"},{"location":"scalemanager/#events_1","title":"Events","text":"<ul> <li>Enter full screen     <pre><code>scene.scale.on('enterfullscreen', function() {}, scope);\n</code></pre></li> <li>Enter full screen failed     <pre><code>scene.scale.on('fullscreenfailed', function(error) {}, scope);\n</code></pre></li> <li>Leave full screen     <pre><code>scene.scale.on('leavefullscreen', function() {}, scope);\n</code></pre></li> <li>Full screen unsupport     <pre><code>scene.scale.on('fullscreenunsupported', function() {}, scope);\n</code></pre></li> <li>Leave full screen     <pre><code>scene.scale.on('leavefullscreen', function() {}, scope);\n</code></pre></li> </ul>"},{"location":"scalemanager/#orientation","title":"Orientation","text":"<pre><code>scene.scale.on('orientationchange', function(orientation) {\nif (orientation === Phaser.Scale.PORTRAIT) {\n\n} else if (orientation === Phaser.Scale.LANDSCAPE) {\n\n}\n}, scope);\n</code></pre>"},{"location":"scaleouter/","title":"Scale outer","text":""},{"location":"scaleouter/#introduction","title":"Introduction","text":"<p>Scroll and zoom camera to make default game window fit the display area, in RESIZE scale mode.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"scaleouter/#live-demos","title":"Live demos","text":"<ul> <li>Viewport</li> <li>Static camera</li> <li>Tween camera</li> </ul>"},{"location":"scaleouter/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scaleouter/#install-plugin","title":"Install plugin","text":""},{"location":"scaleouter/#set-scale-mode-to-resize","title":"Set scale mode to RESIZE","text":"<pre><code>var config = {\n// ...\nscale: {\nparent: divId,\nmode: Phaser.Scale.RESIZE,\nwidth: 1024,    // Default game window width\nheight: 768,    // Default game window height\n// ...\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"scaleouter/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexscaleouterplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleouterplugin.min.js', 'rexScaleOuter', 'rexScaleOuter');\n</code></pre></li> <li>Scale outer is created as a member of scene (<code>scene.rexScaleOuter</code>) for each scene.    It will control main camera (<code>scene.cameras.main</code>) by default.</li> </ul>"},{"location":"scaleouter/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install scene plugin in configuration of game <pre><code>import ScaleOuterPlugin from 'phaser3-rex-plugins/plugins/scaleouter-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexScaleOuter',\nplugin: ScaleOuterPlugin,\nmapping: 'rexScaleOuter'\n}]\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Scale outer is created as a member of scene (<code>scene.rexScaleOuter</code>) for each scene.    It will control main camera (<code>scene.cameras.main</code>) by default.</li> </ul>"},{"location":"scaleouter/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScaleOuter from 'phaser3-rex-plugins/plugins/scaleouter.js';\n</code></pre></li> <li>Add scaleouter object     <pre><code>var scaleouter = new ScaleOuter(scene);\n</code></pre></li> </ul>"},{"location":"scaleouter/#create-instance","title":"Create instance","text":"<p>ScaleOuter plugin is a scene plugin, which created as a member of scene (<code>scene.rexScaleOuter</code>)  for each scene. It does not have to create other scale outer instance.</p>"},{"location":"scaleouter/#remove-instance","title":"Remove instance","text":"<p>Invoke <code>scene.rexScaleOuter.destroy()</code> under <code>scene.create() { ... }</code>.</p>"},{"location":"scaleouter/#add-camera","title":"Add camera","text":"<ul> <li>Add camera manually, under <code>scene.create() { ... }</code> <pre><code>scene.rexScaleOuter.add(camera);\n</code></pre></li> <li>Scale outer will control main camera (<code>scene.cameras.main</code>) if no camera added.</li> </ul>"},{"location":"scaleouter/#viewport","title":"Viewport","text":"<ul> <li>Inner viewport, a recangle object, for area of default size in game config after camera zoom/scroll.     <pre><code>var innerViewport = scene.rexScaleOuter.innerViewport;\n</code></pre></li> <li>Outer viewport, a recangle object, for the visible area after camera zoom/scroll.     <pre><code>var outerViewport = scene.rexScaleOuter.outerViewport;\n</code></pre></li> </ul>"},{"location":"scaleouter/#manual-scale","title":"Manual scale","text":"<ol> <li>Stop resize callback     <pre><code>scene.rexScaleOuter.stop()\n</code></pre></li> <li>Manual scale     <pre><code>scene.rexScaleOuter.scale();\n</code></pre></li> </ol>"},{"location":"scene/","title":"Scene","text":""},{"location":"scene/#define-a-scene","title":"Define a scene","text":""},{"location":"scene/#configuration-of-scene","title":"Configuration of scene","text":"<pre><code>var config = {\nkey: \"\",\n// active: false,\n// visible: true,\n// pack: false,\n// cameras: null,\n// map: {},\n// physics: {},\n// loader: {},\n// plugins: false,\n// input: {}\n};\n</code></pre> <ul> <li><code>key</code> : The unique key of this Scene. Must be unique within the entire Game instance.</li> <li><code>active</code> : Does the Scene start as active or not? An active Scene updates each step.</li> <li><code>visible</code> : Does the Scene start as visible or not? A visible Scene renders each step.</li> <li><code>pack</code> : An optional Loader Packfile to be loaded before the Scene begins.</li> <li><code>cameras</code> : An optional Camera configuration object.   <pre><code>{\nname: '',\nx: 0,\ny: 0,\nwidth: scene.sys.scale.width,\nheight: scene.sys.scale.height,\nzoom: 1,\nrotation: 0,\nscrollX: 0,\nscrollY: 0,\nroundPixels: false,\nvisible: true,\nbackgroundColor: false,\nbounds: null, // {x, y, width, height}\n}\n</code></pre></li> <li><code>map</code> : Overwrites the default injection map for a scene.</li> <li><code>physics</code> : The physics configuration object for the Scene.   <pre><code>{\ndefault: 'arcade', // 'arcade', or 'matter'\narcade: {...},\nmatter: {...}\n}\n</code></pre></li> <li><code>arcade</code> : Arcade Physics configuration.</li> <li><code>matter</code> : Matter Physics configuration.</li> <li><code>loader</code> : The loader configuration object for the Scene.   <pre><code>{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0\n}\n</code></pre></li> <li><code>plugins</code> : The plugin configuration object for the Scene.   <pre><code>{\nglobal: [\n//{key, plugin, start}\n],\nscene: [\n// ...\n]\n}\n</code></pre></li> <li><code>input</code> : The input configuration object for the Scene.   <pre><code>{\nkeyboard: {\ntarget: window\n},\nmouse: {\ntarget: null,\ncapture: true\n},\nactivePointers: 1,\ntouch: {\ntarget: null,\ncapture: true\n},\nsmoothFactor: 0,\ngamepad: false,\nwindowEvents: true,\n}\n</code></pre></li> </ul>"},{"location":"scene/#es6-class","title":"ES6 class","text":"<pre><code>class MyScene extends Phaser.Scene {\nconstructor(config) {\nsuper(config);\n}\n\ninit(data) {}\npreload() {}\ncreate(data) {}\nupdate(time, delta) {}\n}\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#class","title":"Class","text":"<pre><code>var MyScene = new Phaser.Class({\nExtends: Phaser.Scene,\n\ninitialize: function MyScene(config) {\nPhaser.Scene.call(this, config);\n},\n\ninit: function (data) {},\npreload: function () {},\ncreate: function (data) {},\nupdate: function (time, delta) {},\n});\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul> <pre><code>var MyGame = {};\n\nMyGame.Boot = function () {};\n\nMyGame.Boot.prototype.constructor = MyGame.Boot;\n\nMyGame.Boot.prototype = {\ninit: function (data) {},\npreload: function () {},\ncreate: function (data) {},\nupdate: function (time, delta) {},\n};\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#override","title":"Override","text":"<pre><code>var demo = new Phaser.Scene(\"Demo\");\n\ndemo.init = function (data) {};\ndemo.preload = function () {};\ndemo.create = function (data) {};\ndemo.update = function (time, delta) {};\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nsubgraph Stop\nSceneEventDestroy&gt;\"scene.events: destroy\"]\nStop[\"Shutdown&lt;br&gt;Free game objects\"]\nend\n\nsubgraph Update\nSceneUpdate[\"Run: Every tick&lt;br&gt;scene.update()\"]\nSceneEventPauseSleep&gt;\"scene.events: pause&lt;br&gt;scene.events: sleep\"]\nPause[\"Pause: render but no update&lt;br&gt;Sleep: no update, no render\"]\nSceneEventResumeWake&gt;\"scene.events: resume&lt;br&gt;scene.events: wake\"]\nend\n\nsubgraph Create\nSceneEventStart&gt;\"scene.events: start\"]\nSceneEventReady&gt;\"scene.events: ready\"]\nSceneInit[\"scene.init()\"]\nScenePreLoad[\"Load assets&lt;br&gt;scene.preload()\"]\nSceneCreate[\"Create game objects&lt;br&gt;scene.create()\"]\nend\n\nStart((Start)) --&gt; SceneEventStart\nSceneEventStart --&gt; SceneEventReady\nSceneEventReady --&gt; SceneInit\nSceneInit --&gt; ScenePreLoad\nScenePreLoad --&gt; SceneCreate\nSceneCreate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; |\"scene.scene.pause()&lt;br&gt;scene.scene.sleep()\"|SceneEventPauseSleep\nSceneEventPauseSleep --&gt; Pause\nPause --&gt; |\"scene.scene.resume()&lt;br&gt;scene.scene.wake()\"|SceneEventResumeWake\nSceneEventResumeWake --&gt; SceneUpdate\n\nSceneUpdate --&gt; |\"scene.scene.stop()&lt;br&gt;scene.scene.restart()\"|Stop\nPause --&gt; |\"scene.scene.stop()&lt;br&gt;scene.scene.restart()\"|SceneEventDestroy\nSceneEventDestroy --&gt; Stop\n\nStop --&gt; |\"scene.scene.start()&lt;br&gt;scene.scene.launch()&lt;br&gt;scene.scene.restart()\"|SceneEventStart</code></pre> <ul> <li><code>Run</code> : Update and render</li> <li><code>Pause</code> : Render but no update</li> <li><code>Sleep</code> : No update, no render</li> <li><code>Stop</code> : Shutdown</li> </ul> <p>See also</p> <ul> <li>Pause/resume</li> <li>Stop</li> <li>Main loop</li> </ul>"},{"location":"scene/#start","title":"Start","text":"<ol> <li>Invoke <code>scene.preload()</code></li> <li>Invoke <code>scene.create()</code></li> </ol> <p><code>scene.scene.restart()</code> is equal to</p> <pre><code>scene.scene.stop();\nscene.scene.start();\n</code></pre>"},{"location":"scene/#stop","title":"Stop","text":"<ul> <li>All game objects will be destroyed.</li> <li>Registered events on game objects will also be clear, too.</li> <li>Touch, keyboard and GamePad events will be clear.</li> <li>Cameras will be destroyed.</li> <li>Loader will be stopped.</li> <li>Assets will be stored in global cache.</li> <li>Events registered on scene plugin (<code>scene.events.on</code>) won't be clear.</li> </ul>"},{"location":"scene/#members","title":"Members","text":"<ul> <li><code>plugins</code></li> <li><code>load</code> : Loader</li> <li><code>events</code> : Local events</li> <li><code>input</code> : Touch, keyboard</li> <li><code>tweens</code> : Tween tasks</li> <li><code>time</code> : Timer</li> <li><code>cameras</code> : Camera</li> <li><code>scene</code> : scenePlugin</li> <li><code>anims</code></li> <li><code>physics</code> : ArcadePhysics</li> <li><code>matter</code> :\u3000 MatterPhysics</li> <li><code>registry</code> : Global data manager</li> <li><code>data</code> : Local data manager</li> <li><code>sys</code></li> <li><code>game</code></li> <li><code>render</code></li> <li><code>cache</code></li> <li><code>sound</code></li> <li><code>textures</code></li> <li><code>add</code></li> <li><code>make</code></li> <li><code>children</code> : DisplayList <pre><code>scene.children.bringToTop(child);\nscene.children.sendToBack(child);\nscene.children.moveUp(child);\nscene.children.moveDown(child);\nscene.children.moveUp(child);\nscene.children.moveTo(child, index);\nscene.children.moveAbove(child1, child2); // Move child1 above child2\nscene.children.moveBelow(child1, child2); // Move child1 below child2\nscene.children.swap(child1, child2);\n</code></pre></li> <li><code>lights</code></li> </ul> <p>Preserve word in a scene.</p>"},{"location":"scene/#events","title":"Events","text":"<ul> <li>Start (Before <code>scene.init()</code>)   <pre><code>scene.events.on(\"start\", function () {});\n</code></pre></li> <li>Ready (After <code>start</code>)   <pre><code>scene.events.on(\"ready\", function () {});\n</code></pre></li> <li>Every tick<ul> <li>Preupdate     <pre><code>scene.events.on(\"preupdate\", function (time, delta) {});\n</code></pre></li> <li>Update     <pre><code>scene.events.on(\"update\", function (time, delta) {});\n</code></pre></li> <li>Postupdate     <pre><code>scene.events.on(\"postupdate\", function (time, delta) {});\n</code></pre></li> <li>Render     <pre><code>scene.events.on(\"render\", function () {});\n</code></pre></li> </ul> </li> <li>State changed<ul> <li>Pause (from <code>scene.scene.pause()</code>)     <pre><code>scene.events.on(\"pause\", function () {});\n</code></pre></li> <li>Resume (from <code>scene.scene.resume()</code>)     <pre><code>scene.events.on(\"resume\", function () {});\n</code></pre></li> <li>Sleep (from <code>scene.scene.sleep()</code>)     <pre><code>scene.events.on(\"sleep\", function () {});\n</code></pre></li> <li>Wake (from <code>scene.scene.wake()</code>)     <pre><code>scene.events.on(\"wake\", function () {});\n</code></pre></li> <li>Stop/shutdown (from <code>scene.scene.stop()</code>)     <pre><code>scene.events.on(\"shutdown\", function () {});\n</code></pre><ul> <li>Free-up any resources that may be in use by this scene</li> </ul> </li> </ul> </li> <li>Destroy (from <code>scene.scene.remove()</code>)     <pre><code>scene.events.on(\"destroy\", function () {});\n</code></pre></li> <li>Resize     <pre><code>scene.events.on(\"resize\", function () {});\n</code></pre></li> <li>Boot     <pre><code>scene.events.on(\"boot\", function () {});\n</code></pre></li> <li>Game object added to scene<ul> <li>Add     <pre><code>scene.events.on(\"addedtoscene\", function (gameObject, scene) {});\n</code></pre></li> <li>Remove     <pre><code>scene.events.on(\"removedfromscene\", function (gameObject, scene) {});\n</code></pre></li> </ul> </li> </ul>"},{"location":"scenemanager/","title":"Scene manager","text":"<p>Scene manager plugin:</p> <ul> <li>In each scene instance: <code>scene.scene</code></li> </ul>"},{"location":"scenemanager/#add-new-scene","title":"Add new scene","text":"<pre><code>var newScene = scene.scene.add(key, sceneConfig, autoStart, data);\n// var newScene = game.scene.add(key, sceneConfig, autoStart, data);\n</code></pre> <ul> <li><code>key</code> : A unique key used to reference the Scene.</li> <li><code>sceneConfig</code> : The config for the Scene, or a scene class.</li> <li><code>autoStart</code> : Set <code>true</code> to start scene immediately after added.</li> <li><code>data</code> : Optional data object. This will be set as <code>scene.settings.data</code> and passed to <code>scene.init</code>.</li> </ul>"},{"location":"scenemanager/#load-scene-from-external-files","title":"Load scene from external files","text":"<ol> <li>load script <pre><code>scene.load.script(key, url);\n</code></pre></li> <li>add new scene     <pre><code>scene.scene.add(key, sceneConfig, autoStart);\n// game.scene.add(key, sceneConfig, autoStart);\n</code></pre></li> </ol>"},{"location":"scenemanager/#destroy-scene","title":"Destroy scene","text":"<pre><code>scene.scene.remove(key);\n</code></pre> <ul> <li>Fires scene.events <code>destroy</code></li> </ul>"},{"location":"scenemanager/#start-scene","title":"Start scene","text":"<ul> <li>Launch the given Scene and run it in parallel with this one     <pre><code>scene.scene.launch(key, data);\n</code></pre></li> <li>Shutdown this Scene and run the given one     <pre><code>scene.scene.start(key, data);\n</code></pre></li> <li>Restarts this Scene     <pre><code>scene.scene.restart(data);\n</code></pre></li> </ul>"},{"location":"scenemanager/#pauseresume-scene","title":"Pause/Resume scene","text":"<ul> <li>Pause : stops the update step but still renders     <pre><code>scene.scene.pause(key);\n// scene.scene.pause();  // pause myself\n</code></pre><ul> <li>Fires scene.events <code>pause</code></li> </ul> </li> <li>Resume : starts the update loop again     <pre><code>scene.scene.resume(key);\n// scene.scene.resume();  // resume myself\n</code></pre><ul> <li>Fires scene.events <code>resume</code></li> </ul> </li> <li>Sleep : no update, no render but doesn't shutdown     <pre><code>scene.scene.sleep(key);\n// scene.scene.sleep();  // sleep myself\n</code></pre><ul> <li>Fires scene.events <code>sleep</code></li> </ul> </li> <li>Wake-up: starts update and render     <pre><code>scene.scene.wake(key);\n// scene.scene.wake();  // wake-up myself\n</code></pre><ul> <li>Fires scene.events <code>wake</code></li> </ul> </li> <li>Makes this Scene sleep then starts the Scene given     <pre><code>scene.scene.switch(key);\n</code></pre></li> </ul>"},{"location":"scenemanager/#run-scene","title":"Run scene","text":"<p>Runs the given Scene, but does not change the state of this Scene.</p> <p>If the given Scene is paused, it will resume it. If sleeping, it will wake it. If not running at all, it will be started.</p> <pre><code>scene.scene.run(key, data);\n</code></pre>"},{"location":"scenemanager/#stop-scene","title":"Stop scene","text":"<p>Shutdown the Scene, clearing display list, timers, etc.</p> <pre><code>scene.scene.stop(key);\n// scene.scene.stop();  // stop myself\n</code></pre>"},{"location":"scenemanager/#set-visible","title":"Set visible","text":"<pre><code>scene.scene.setVisible(value, key);  // value: true/false\n// scene.scene.setVisible(value);    // set visible to myself\n</code></pre>"},{"location":"scenemanager/#read-status","title":"Read status","text":"<pre><code>var isSleep = scene.scene.isSleeping(key);\n// var isSleep = scene.scene.isSleeping();\n</code></pre> <pre><code>var isPaused = scene.scene.isPaused(key);\n// var isPaused = scene.scene.isPaused();\n</code></pre> <pre><code>var isActive = scene.scene.isActive(key);\n// var isActive = scene.scene.isActive();\n</code></pre> <pre><code>var isVisible = scene.scene.isVisible(key);\n// var isVisible = scene.scene.isVisible();\n</code></pre> Update/isActive Render/isVisible Run Pause Sleep <p>Pause/Sleep/Stop</p> <ul> <li>Pause: Pause <code>update</code> stage.</li> <li>Sleep: Pause <code>update</code> stage, and set scene invisible.</li> <li>Stop: Shoutdown, clearing display list, timers, etc. </li> </ul> <pre><code>var status = scene.scene.getStatus(key);\n// var status = scene.scene.getStatus();\n</code></pre> <ul> <li><code>status</code> :<ul> <li><code>Phaser.Scenes.PENDING</code>, or <code>0</code></li> <li><code>Phaser.Scenes.INIT</code>, or <code>1</code></li> <li><code>Phaser.Scenes.START</code>, or <code>2</code></li> <li><code>Phaser.Scenes.LOADING</code>, or <code>3</code></li> <li><code>Phaser.Scenes.CREATING</code>, or <code>4</code></li> <li><code>Phaser.Scenes.RUNNING</code>, or <code>5</code></li> <li><code>Phaser.Scenes.PAUSED</code>, or <code>6</code></li> <li><code>Phaser.Scenes.SLEEPING</code>, or <code>7</code></li> <li><code>Phaser.Scenes.SHUTDOWN</code>, or <code>8</code></li> <li><code>Phaser.Scenes.DESTROYED</code>, or <code>9</code></li> </ul> </li> </ul>"},{"location":"scenemanager/#get-scene","title":"Get scene","text":"<pre><code>var scene = scene.scene.get(key);\n</code></pre>"},{"location":"scenemanager/#order-of-scenes","title":"Order of scenes","text":"<p>Swaps the position of two scenes in the Scenes list.</p> <pre><code>scene.scene.swapPosition(keyA, keyB);\n// scene.scene.stop(keyA);\n</code></pre> <pre><code>scene.scene.moveAbove(keyA, keyB);\n// scene.scene.moveAbove(keyA);\n</code></pre> <p>Scene B is directly above Scene A.</p> <pre><code>scene.scene.moveBelow(keyA, keyB);\n// scene.scene.moveBelow(keyA);\n</code></pre> <p>Scene B is directly below Scene A.</p> <pre><code>scene.scene.moveUp(keyA);\n// scene.scene.moveBelow();\n</code></pre> <pre><code>scene.scene.moveDown(keyA);\n// scene.scene.moveDown();\n</code></pre> <pre><code>scene.scene.bringToTop(keyA);\n// scene.scene.bringToTop();\n</code></pre> <pre><code>scene.scene.sendToBack(keyA);\n// scene.scene.sendToBack();\n</code></pre>"},{"location":"scenemanager/#transition","title":"Transition","text":"<pre><code>scene.scene.transition({\ntarget: key,\n// data: null,\n// moveAbove: false,\n// moveBelow: false,\n\nduration: 1000,\n\n// remove: false,\n// sleep: false,\n// allowInput: false,\n\n// onStart: null,\n// onStartScope: scene,\n\n// onUpdate: null,\n// onUpdateScope: scene,\n})\n</code></pre> <ul> <li><code>target</code> : The Scene key to transition to.</li> <li><code>data</code> : An object containing any data you wish to be passed to the target scenes init / create methods.</li> <li><code>moveAbove</code>. <code>moveBelow</code> : Move the target Scene to be above/below this current scene before the transition starts.</li> <li><code>duration</code> : Transition duration, in ms.</li> <li><code>remove</code> : Set true to remove this scene.</li> <li><code>sleep</code> : Set true to sleep this scene, set false to stop this scene.</li> <li><code>allowInput</code> : Set true to enable input system of current scene and target scene.</li> <li><code>onStart</code>, <code>onStartScope</code> : Invoked when transition start     <pre><code>function(fromScene, toScene, duration) {\n\n}\n</code></pre><ul> <li><code>fromScene</code> : Current scene instance</li> <li><code>toScene</code> : Target scene instance</li> <li><code>duration</code> : Transition duration, in ms.</li> </ul> </li> <li><code>onUpdate</code> ,<code>onUpdateScope</code> : Transition callback in each tick.     <pre><code>function(progress) {\n\n}\n</code></pre><ul> <li><code>progress</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"scenemanager/#execution-flow","title":"Execution flow","text":"<ol> <li>Invoke <code>scene.scene.transition</code> method.<ul> <li>Current scene : <ul> <li>Fire <code>'transitionout'</code> event.     <pre><code>fromScene.events.on('transitionout', function(targetScene, duration){ });\n</code></pre></li> <li>Run transition's <code>onUpdate</code> callback every tick.</li> <li>Current scene's <code>update</code> method is still running every tick.</li> </ul> </li> <li>Target scene :<ul> <li>Start target scene immediately.</li> <li>Fire target scene's <code>'transitionstart'</code> event. (Register this event in <code>create</code> stage)     <pre><code>targetScene.events.on('transitionstart', function(fromScene, duration){ });\n</code></pre></li> </ul> </li> </ul> </li> <li>When transition completed.<ul> <li>Current scene : <ul> <li>Remove or sleep current scene after transition completed.</li> </ul> </li> <li>Target scene : <ul> <li>Fire target scene's <code>transitioncomplete</code> event.     <pre><code>targetScene.events.on('transitioncomplete', function(fromScene){ });\n</code></pre></li> </ul> </li> </ul> </li> </ol>"},{"location":"scenemanager/#events","title":"Events","text":"<ul> <li>boot     <pre><code>scene.events.on('transitioninit', function(fromScene, duration)){ });\n</code></pre></li> <li>start     <pre><code>scene.events.on('transitionstart', function(fromScene, duration){ });\n</code></pre></li> <li>transition-out     <pre><code>scene.events.on('transitionout', function(targetScene){ });\n</code></pre></li> <li>complete     <pre><code>scene.events.on('transitioncomplete', function(fromScene){ });\n</code></pre></li> <li>wake : wake-up target scene if it was previously asleep     <pre><code>scene.events.on('transitionwake', function(fromScene, duration){ });\n</code></pre></li> </ul>"},{"location":"scenemanager/#system-scene","title":"System scene","text":"<p>A default empty Scene that lives outside of the Scene list,  but can be used by plugins and managers that need access to a live Scene,  without being tied to one.</p> <pre><code>var scene = scene.scene.get('__SYSTEM');\n</code></pre> <p>or</p> <pre><code>var scene = scene.scene.systemScene;\n</code></pre>"},{"location":"scripttagloader/","title":"Script tag loader","text":""},{"location":"scripttagloader/#introduction","title":"Introduction","text":"<p>Load script tag in preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"scripttagloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scripttagloader/#install-plugin","title":"Install plugin","text":""},{"location":"scripttagloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexscripttagloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscripttagloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexscripttagloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexscripttagloaderplugin').addToScene(this);\n\nthis.load.rexScriptTag(url);\n}\n}\n</code></pre></li> </ul>"},{"location":"scripttagloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScriptTagLoaderPlugin from 'phaser3-rex-plugins/plugins/scripttagloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScriptTagLoader',\nplugin: ScriptTagLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexScriptTag(url);\n</code></pre></li> </ul>"},{"location":"scripttagloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScriptTagLoader from 'phaser3-rex-plugins/plugins/scripttagloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>ScriptTagLoader.call(scene.load, url);\n// ScriptTagLoader.call(scene.load, url, availableTest);\n</code></pre></li> </ul>"},{"location":"scripttagloader/#load-script-tag","title":"Load script tag","text":"<p>In preload stage:</p> <pre><code>this.load.rexScriptTag(url);\n// this.load.rexScriptTag(url, availableTest);\n</code></pre> <p>or</p> <pre><code>this.load.rexScriptTag({\nurl: url,\navailableTest: undefined\n});\n</code></pre> <ul> <li><code>availableTest</code> : Callback invoked after loading script tag, optional.      <pre><code>function() {        return true;\n}\n</code></pre><ul> <li>Wait until <code>availableTest</code> return <code>true</code>.</li> </ul> </li> </ul>"},{"location":"scripttagloader/#compare-with-script-loader","title":"Compare with script loader","text":"<ul> <li>Built-in script loader uses AJAX to load text as script, which might have CORS issue.</li> <li>Script tag loader uses <code>&lt;script&gt;</code> tag to load script.</li> </ul>"},{"location":"scroller/","title":"Scroller","text":""},{"location":"scroller/#introduction","title":"Introduction","text":"<p>Drag content. Slow down when dragging released, pull back when out of bounds.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"scroller/#live-demos","title":"Live demos","text":"<ul> <li>Scroller</li> </ul>"},{"location":"scroller/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scroller/#install-plugin","title":"Install plugin","text":""},{"location":"scroller/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscrollerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscrollerplugin.min.js', true);\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = scene.plugins.get('rexscrollerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScrollerPlugin from 'phaser3-rex-plugins/plugins/scroller-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScroller',\nplugin: ScrollerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = scene.plugins.get('rexScroller').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Scroller from 'phaser3-rex-plugins/plugins/scroller.js';\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = new Scroller(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#create-instance","title":"Create instance","text":"<pre><code>var scroller = scene.plugins.get('rexScroller').add(gameObject, {\nbounds: [\nbottomBound,\ntopBound\n],\nvalue: topBound,    // threshold: 10,\n// slidingDeceleration: 5000,\n// backDeceleration: 2000,\n\n// dragReverse: false,\n// dragRate: 1,\n\n// enable: true,\n// orientation: 'vertical',\n// pointerOutRelease: true,\n\n// valuechangeCallback: null,\n// valuechangeCallbackScope: null,\n\n// overmaxCallback: null,\n// overmaxCallbackScope: null,\n\n// overminCallback: null,\n// overminCallbackScope: null,\n});\n</code></pre> <ul> <li><code>bounds</code> : An array of 2 values <code>[bound0, bound1]</code></li> <li><code>value</code> : Initial value between bound0 and bound1<ul> <li>Map this value to position of content under event 'valuechange'</li> </ul> </li> <li><code>threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>dragReverse</code> :<ul> <li><code>false</code> : Dragging up will decrease value, dragging down will increase value. Default behavior.<ul> <li>Use this mode when scrolling by position of game object.</li> </ul> </li> <li><code>true</code> : Dragging up will increase value, dragging down will decrease value.<ul> <li>Use this mode when scrolling by camera.</li> </ul> </li> </ul> </li> <li><code>dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li><code>enable</code> : Set true to get dragging events.</li> <li><code>orientation</code> :<ul> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>0</code> : dragging on vertical/y axis.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : dragging on horizontal/x axis.</li> </ul> </li> <li><code>pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject. Default value is <code>true</code>.</li> <li><code>valuechangeCallback</code> , <code>valuechangeCallbackScope</code> : Bind this callback to <code>valuechange</code> event</li> <li><code>overminCallback</code> , <code>overmaxCallbackScope</code> : Bind this callback to <code>overmax</code> event</li> <li><code>overminCallback</code> , <code>overminCallbackScope</code> : Bind this callback to <code>overmin</code> event</li> </ul>"},{"location":"scroller/#set-bounds","title":"Set bounds","text":"<pre><code>this.setBounds(bounds);  // bounds: [bound0, bound1]\n// this.setBounds(bound0, bound1);\n</code></pre>"},{"location":"scroller/#set-deceleration","title":"Set deceleration","text":"<ul> <li>Deceleration of slow down when dragging released     <pre><code>scroller.setSlidingDeceleration(dec);\n</code></pre><ul> <li>Disable     <pre><code>scroller.setSlidingDeceleration(false);\n</code></pre></li> </ul> </li> <li>Deceleration of pull back when out of bounds     <pre><code>scroller.setBackDeceleration(dec);\n</code></pre><ul> <li>Disable     <pre><code>scroller.setBackDeceleration(false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"scroller/#get-value","title":"Get value","text":"<pre><code>var value = scroller.value;\n</code></pre>"},{"location":"scroller/#set-value","title":"Set value","text":"<ul> <li>Set value     <pre><code>scroller.value = newValue;\n// scroller.setValue(newValue);\n</code></pre></li> <li>Set value, clamp between minValue and maxValue     <pre><code>scroller.setValue(newValue, true);\n</code></pre></li> <li>Add value     <pre><code>scroller.value += inc;\n// scroller.addValue(inc);\n</code></pre></li> <li>Add value, clamp between minValue and maxValue     <pre><code>scroller.addValue(inc, true);\n</code></pre></li> </ul> <p>Fires <code>valuechange</code> event if new value is not equal to current value.</p>"},{"location":"scroller/#events","title":"Events","text":"<ul> <li>Value changed     <pre><code>scroller.on('valuechange', function(newValue, prevValue){ /* ... */ });\n</code></pre><ul> <li>Set position of content under this event</li> </ul> </li> <li>Value out of max/min bound     <pre><code>scroller.on('overmax', function(newValue, prevValue){ /* ... */ });\n</code></pre> <pre><code>scroller.on('overmin', function(newValue, prevValue){ /* ... */ });\n</code></pre></li> <li>On drag start     <pre><code>scroller.on('dragstart', function() { /* ... */ });\n</code></pre></li> <li>On drag end     <pre><code>scroller.on('dragend', function() { /* ... */ });\n</code></pre></li> </ul>"},{"location":"scroller/#drag","title":"Drag","text":""},{"location":"scroller/#drag-enable","title":"Drag enable","text":"<ul> <li>Get     <pre><code>var enable = scroller.enable;\n</code></pre></li> <li>Set     <pre><code>scroller.setEnable();\n// scroller.setEnable(enable);  // enable: true, or false\n</code></pre>     or     <pre><code>scroller.enable = enable; // enable: true, or false\n</code></pre></li> <li>Toggle     <pre><code>scroller.toggleEnable();\n</code></pre></li> </ul>"},{"location":"scroller/#is-dragging","title":"Is dragging","text":"<pre><code>var isDragging = scroller.isDragging;\n</code></pre>"},{"location":"scroller/#state-machine","title":"State machine","text":"<pre><code>graph TB\n\nIDLE[\"Idle\"] --&gt; |Drag| DRAG[\"Dragging&lt;br&gt;event 'valuechange'\"]\nDRAG --&gt; |Release| OnRelease{\"Under bounds?\"}\n\nOnRelease --&gt; |Yes| SLIDE[\"Sliding&lt;br&gt;Sliding-deceleration\"]\nSLIDE --&gt; |Stop| IDLE\nSLIDE --&gt; |Drag| DRAG\n\nOnRelease --&gt; |No| BACK[\"Pull back to bounds&lt;br&gt;Back-deceleration\"]\nBACK --&gt; |Stop| IDLE\nBACK --&gt; |Drag| DRAG</code></pre> <ul> <li>Get state     <pre><code>var state = scroller.state;\n</code></pre><ul> <li><code>'IDLE'</code> : No dragging, no sliding</li> <li><code>'DRAG'</code> : Dragging</li> <li><code>'SLIDE'</code> : Sliding when dragging released</li> <li><code>'BACK'</code> : Sliding back to bound when out of bound</li> </ul> </li> </ul>"},{"location":"sequence/","title":"Sequence","text":""},{"location":"sequence/#introduction","title":"Introduction","text":"<p>Run sequence commands in array.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"sequence/#live-demos","title":"Live demos","text":"<ul> <li>Sequence</li> </ul>"},{"location":"sequence/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"sequence/#install-plugin","title":"Install plugin","text":""},{"location":"sequence/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsequenceplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsequenceplugin.min.js', true);\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = this.plugins.get('rexsequenceplugin').add(config);\n</code></pre></li> </ul>"},{"location":"sequence/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SequencePlugin from 'phaser3-rex-plugins/plugins/sequence-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSequence',\nplugin: SequencePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = this.plugins.get('rexSequence').add(config);\n</code></pre></li> </ul>"},{"location":"sequence/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Sequence from 'phaser3-rex-plugins/plugins/sequence.js';\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = new Sequence(config);\n</code></pre></li> </ul>"},{"location":"sequence/#create-sequence-instance","title":"Create sequence instance","text":"<pre><code>var seq = this.plugins.get('rexSequence').add({\n// yoyo: false  // reverse sequence when it reaches the end\n// repeat: 0,   // repeat count\n// loop: false  // repeat forever\n});\n</code></pre>"},{"location":"sequence/#load-commands","title":"Load commands","text":"<pre><code>seq.load(commands, actionScope);\n</code></pre> <ul> <li>Format of command :     <pre><code>[fnName, param0, param1, ...]\n</code></pre></li> <li>Commands in nested array :     <pre><code>[\ncommand0,\ncommand1\n[\ncommand2,\ncommand3\n]\n]\n</code></pre></li> <li>ActionScope</li> </ul> <p>Format of command is the same as run-command.</p>"},{"location":"sequence/#run-commands","title":"Run commands","text":"<pre><code>seq.start();\n</code></pre> <ul> <li>Run command :     <pre><code>var eventEmitter = actionScope[fnName].call(actionScope, param0, param1 ...);\n</code></pre><ul> <li>Return an event emitter to pause the sequence, otherwise run next command  </li> <li>Sequence will continue when that event emitter fires <code>complete</code> event</li> </ul> </li> </ul>"},{"location":"sequence/#stop","title":"Stop","text":"<pre><code>seq.stop();\n</code></pre>"},{"location":"sequence/#events","title":"Events","text":"<ul> <li>On sequence completed :</li> </ul> <pre><code>seq.on('complete', function(actionScope, seq){ });\n</code></pre>"},{"location":"sequence/#action-of-commands","title":"Action of commands","text":"<p>Action of commands, extended from <code>Phaser.Events.EventEmitter</code>.</p> <pre><code>class ActionKlass extends Phaser.Events.EventEmitter {\nconstructor(scene) {\nsuper();\n\nthis.scene = scene;\nthis.myConsole = scene.add.text(100, 100, '');\n\nthis['wait-click'] = this.waitClick;\nthis['wait-time'] = this.waitTime;\n}\n\n// callbacks\nprint(msg) {\nthis.myConsole.setText(msg);\n// return undefined to run next command\n}\n\nwaitClick() {\nthis.scene.input.once('pointerup', this.complete, this);\nreturn this;  // return eventEmitter to pause the sequence\n}\n\nwaitTime(delay) {\nthis.scene.time.delayedCall(delay * 1000, this.complete, [], this);\nreturn this;  // return eventEmitter to pause the sequence\n}\n\ncomplete() {\nthis.emit('complete');  // resume sequence\n}\n}\nvar actionScope = new ActionKlass(scene);\n</code></pre> <p>Now this scope supports 3 commands</p> <ul> <li>print(msg): <code>['print', msg]</code></li> <li>waitClick(): <code>['wait-click']</code></li> <li>waitTime(delay): <code>['wait-time', delay]</code></li> </ul>"},{"location":"sequence/#state","title":"State","text":"<pre><code>var state = seq.state;\n</code></pre> <ul> <li><code>0</code> : Idle</li> <li><code>1</code> : Run</li> <li><code>2</code> : Last command</li> <li><code>3</code> : Completed</li> </ul> <pre><code>var completed = seq.completed; // seq.state === 3\n</code></pre>"},{"location":"sequence/#other-properties","title":"Other properties","text":"<ul> <li>Yoyo<ul> <li>Get     <pre><code>var yoyo = seq.yoyo;\n</code></pre></li> <li>Set     <pre><code>seq.setYoyo();\nseq.setYoyo(fals);\n// seq.yoyo = yoyo;\n</code></pre></li> </ul> </li> <li>Repeat<ul> <li>Get     <pre><code>var repeat = seq.repeat;\n</code></pre></li> <li>Set     <pre><code>seq.setRepeat(count);\n</code></pre></li> </ul> </li> <li>Loop<ul> <li>Get     <pre><code>var loop = seq.loop;\n</code></pre></li> <li>Set     <pre><code>seq.setLoop();\nseq.setLoop(fals);\n// seq.loop = loop;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/","title":"Barrel","text":"<p>Note</p> <p>Phaser3.60 has a built-in barrel effect.</p>"},{"location":"shader-barrel/#introduction","title":"Introduction","text":"<p>Barrel post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-barrel/#live-demos","title":"Live demos","text":"<ul> <li>Barrel</li> </ul>"},{"location":"shader-barrel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-barrel/#install-plugin","title":"Install plugin","text":""},{"location":"shader-barrel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbarrelpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbarrelpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexbarrelpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexbarrelpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BarrelPipelinePlugin from 'phaser3-rex-plugins/plugins/barrelpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBarrelPipeline',\nplugin: BarrelPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import BarrelPostFx from 'phaser3-rex-plugins/plugins/barrelpipeline.js';\nvar config = {\n// ...\npipeline: [BarrelPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(BarrelPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(BarrelPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 barrel effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(gameObject, {\n// shrink: false,\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// power: 0.5,\n// intensity: 1,\n\n// name: 'rexBarrelPostFx'\n});\n</code></pre><ul> <li><code>shrink</code> : <ul> <li><code>false</code> : Fish-eye effect</li> <li><code>true</code> : Anti fish-eye effect.</li> </ul> </li> <li><code>center.x</code>, <code>center.y</code> : Local position of barrel center.</li> <li><code>radius</code> : Barrel radius.</li> <li><code>power</code> : 0~1.</li> <li><code>intensity</code> : 0(original) ~ 1(barrel). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 barrel effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexBarrelPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexBarrelPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexBarrelPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexBarrelPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#shrink-mode","title":"Shrink mode","text":"<ul> <li>Get     <pre><code>var shrinkMode = pipelineInstance.shrinkMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setShrinkMode(true);\n// pipelineInstance.setShrinkMode(false);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#power","title":"Power","text":"<ul> <li>Get     <pre><code>var power = pipelineInstance.power;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.power = power;\n</code></pre>     or     <pre><code>pipelineInstance.setPower(power);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original) ~ 1(barrel)</li> </ul> </li> </ul>"},{"location":"shader-barrel/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-builtin/","title":"Effects","text":""},{"location":"shader-builtin/#introduction","title":"Introduction","text":"<p>Built-in pre-fx, and post-fx shader effects.</p> <ul> <li>Barrel Distortion : A nice pinch / bulge distortion effect.</li> <li>Bloom : Add bloom to any Game Object, with custom offset, blur strength, steps and color.</li> <li>Blur : 3 different levels of gaussian blur (low, medium and high) and custom distance and color.</li> <li>Bokeh / Tilt Shift : A bokeh and tiltshift effect, with intensity, contrast and distance settings.</li> <li>Circle Outline : Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.</li> <li>Color Matrix : Add a ColorMatrix to any Game Object with access to all of its methods, such as <code>sepia</code>, <code>greyscale</code>, <code>lsd</code> and lots more.</li> <li>Glow : Add a smooth inner or outer glow, with custom distance, strength and color.</li> <li>Displacement : Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.</li> <li>Gradient : Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.</li> <li>Pixelate : Make any Game Object appear pixelated, to a varying degree.</li> <li>Shine : Run a 'shine' effect across a Game Object, either additively or as part of a reveal.</li> <li>Shadow : Add a drop shadow behind a Game Object, with custom depth and color.</li> <li>Vignette : Apply a vignette around a Game Object, with custom offset position, radius and color.</li> <li>Wipe / Reveal : Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.</li> </ul> <p>Texture-based Game Objects also support Pre FX, including: Image, Sprite, TileSprite, Text, RenderTexture, Video.</p> <p>All Game Objects and camera support Post FX. These are effects applied after the Game Object has been rendered.</p> <ul> <li>Author: Richard Davey</li> <li>Pre-fx, and Post-fx shader effects</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-builtin/#live-demos","title":"Live demos","text":"<ul> <li>Official demos</li> </ul>"},{"location":"shader-builtin/#usage","title":"Usage","text":""},{"location":"shader-builtin/#barrel","title":"Barrel","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addBarrel(amount);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.</li> </ul> </li> <li><code>amount</code> : The amount of distortion applied to the barrel effect.<ul> <li><code>1</code> : No distortion</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBarrel(amount);\n</code></pre> <pre><code>var effect = camera.postFX.addBarrel(amount);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.amount = amount;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#bloom","title":"Bloom","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre><ul> <li><code>color</code> : The color of the Bloom, as a hex value.</li> <li><code>offsetX</code>, <code>offsetY</code> : The horizontal/vertical offset of the bloom effect. Default value is <code>1</code>.</li> <li><code>blurStrength</code> , <code>strength</code> : The strength of the blur/blend process of the bloom effect. Default value is <code>1</code>.</li> <li><code>steps</code> : The number of steps to run the Bloom effect for. This value should always be an integer. Default value is <code>4</code>.<ul> <li>The higher the value, the smoother the Bloom, but at the cost of exponentially more gl operations.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color = color;  // hex value\neffect.offsetX = offsetX;\neffect.offsetY = offsetY;\neffect.blurStrength = blurStrength;\neffect.strength = strength;\neffect.steps = steps; // integer\n</code></pre></li> </ul>"},{"location":"shader-builtin/#blur","title":"Blur","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre><ul> <li><code>quality</code> : The quality of the blur effect. Default value is <code>0</code>.<ul> <li><code>0</code> : Low Quality</li> <li><code>1</code> : Medium Quality</li> <li><code>2</code> : High Quality</li> </ul> </li> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the blur effect. Default value is <code>2</code></li> <li><code>strength</code> : The strength of the blur effect. Default value is <code>1</code>.</li> <li><code>color</code> : The color of the blur, as a hex value. Default value is <code>0xffffff</code>.</li> <li><code>steps</code> : The number of steps to run the blur effect for. This value should always be an integer.<ul> <li>The higher the value, the smoother the blur, but at the cost of exponentially more gl operations.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.quality = quality;\neffect.x = x;\neffect.y = y;\neffect.strength = strength;\neffect.color = color;\neffect.steps = steps;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#bokeh","title":"Bokeh","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBokeh(radius, amount, contrast);\n</code></pre><ul> <li><code>radius</code> : The radius of the bokeh effect. Default value is <code>0.5</code>.</li> <li><code>amount</code> : The amount of the bokeh effect. Default value is <code>1</code>.</li> <li><code>contrast</code> : The color contrast of the bokeh effect. Default value is <code>0.2</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBokeh(radius, amount, contrast);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.radius = radius;\neffect.amount = amount;\neffect.contrast = contrast;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#tilt-shift","title":"Tilt Shift","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre><ul> <li><code>radius</code> : The radius of the bokeh effect. Default value is <code>0.5</code>.</li> <li><code>amount</code> : The amount of the bokeh effect. Default value is <code>1</code>.</li> <li><code>contrast</code> : The color contrast of the bokeh effect. Default value is <code>0.2</code>.</li> <li><code>blurX</code>, <code>blurY</code> : The amount of horizontal/vertical blur.</li> <li><code>strength</code> : The strength of the blur.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre> <pre><code>var effect = camera.postFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.radius = radius;\neffect.amount = amount;\neffect.contrast = contrast;\neffect.blurX = blurX;\neffect.blurY = blurY;\neffect.strength = strength;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#circle-outline","title":"Circle Outline","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre><ul> <li><code>thickness</code> : The width of the circle around the texture, in pixels. Default value is <code>8</code>.</li> <li><code>color</code> : The color of the circular ring, given as a number value. Default value is <code>0xfeedb6</code>.</li> <li><code>backgroundColor</code> : The color of the background, behind the texture, given as a number value. Default value is <code>0xff0000</code>.</li> <li><code>scale</code> : The scale of the circle. Default value is <code>1</code>.<ul> <li><code>1</code> : Full size of the underlying texture.</li> </ul> </li> <li><code>feather</code> : The amount of feathering to apply to the circle from the ring. Default value is <code>0.005</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre> <pre><code>var effect = camera.postFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.thickness = thickness;\neffect.color = color;\neffect.backgroundColor = backgroundColor;\neffect.scale = scale;\neffect.feather = feather;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#colormatrix","title":"ColorMatrix","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addColorMatrix();\n</code></pre></li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addColorMatrix();\n</code></pre> <pre><code>var effect = camera.postFX.addColorMatrix();\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Methods<ul> <li>Brightness : Changes the brightness of this ColorMatrix by the given amount.     <pre><code>effect.brightness(value, multiply);\n</code></pre><ul> <li><code>value</code> : The amount of brightness to apply to this ColorMatrix. <code>0</code>(black)~<code>1</code>. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Saturate : Changes the saturation of this ColorMatrix by the given amount.     <pre><code>effect.saturate(value, multiply);\n</code></pre><ul> <li><code>value</code> :  The amount of saturation to apply to this ColorMatrix. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Desaturate : Desaturates this ColorMatrix (removes color from it).     <pre><code>effect.desaturate(value, multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Hue : Rotates the hues of this ColorMatrix by the value given.     <pre><code>effect.hue(rotation, multiply);\n</code></pre><ul> <li><code>rotation</code> : The amount of hue rotation to apply to this ColorMatrix, in degrees. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Grayscale : Sets this ColorMatrix to be grayscale.     <pre><code>effect.grayscale(value, multiply);\n</code></pre><ul> <li><code>value</code> : The grayscale scale <code>0</code>(black)~<code>1</code>. Default value is <code>1</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>BlackWhite : Sets this ColorMatrix to be black and white.     <pre><code>effect.blackWhite(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Contrast : Change the contrast of this ColorMatrix by the amount given.     <pre><code>effect.contrast(value, multiply);\n</code></pre><ul> <li><code>value</code> : The amount of contrast to apply to this ColorMatrix. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Negative : Converts this ColorMatrix to have negative values.     <pre><code>effect.negative(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>DesaturateLuminance : Apply a desaturated luminance to this ColorMatrix.     <pre><code>effect.desaturateLuminance(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Sepia : Applies a sepia tone to this ColorMatrix.     <pre><code>effect.sepia(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Night : Applies a night vision tone to this ColorMatrix.     <pre><code>effect.night(intensity, multiply);\n</code></pre><ul> <li><code>intensity</code> : The intensity of this effect. Default value is <code>0.1</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>LSD : Applies a trippy color tone to this ColorMatrix.     <pre><code>effect.lsd(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Brown : Applies a brown tone to this ColorMatrix.     <pre><code>effect.brown(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>VintagePinhole : Applies a vintage pinhole color effect to this ColorMatrix.     <pre><code>effect.vintagePinhole(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Kodachrome : Applies a kodachrome color effect to this ColorMatrix.     <pre><code>effect.kodachrome(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Technicolor : Applies a technicolor color effect to this ColorMatrix.     <pre><code>effect.technicolor(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Polaroid : Applies a polaroid color effect to this ColorMatrix.     <pre><code>effect.polaroid(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>ShiftToBGR : Shifts the values of this ColorMatrix into BGR order.     <pre><code>effect.shiftToBGR(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-builtin/#displacement","title":"Displacement","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addDisplacement(texture, x, y);\n</code></pre><ul> <li><code>texture</code> : The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager. Default value is <code>'__WHITE'</code>.<ul> <li>You can only use a whole texture, not a frame from a texture atlas or sprite sheet.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The amount of horizontal/vertical displacement to apply. Default value is <code>0.005</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addDisplacement(texture, x, y);\n</code></pre> <pre><code>var effect = camera.postFX.addDisplacement(texture, x, y);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;    </code></pre></li> <li>Methods<ul> <li>Set texture     <pre><code>effect.setTexture(key);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-builtin/#glow","title":"Glow","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addGlow(color, outerStrength, innerStrength, knockout);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.    </li> </ul> </li> <li><code>color</code> : The color of the glow effect as a number value. Default value is <code>0xffffff</code>.</li> <li><code>outerStrength</code>, <code>innerStrength</code> : The strength of the glow outward/inward from the edge of the Sprite. Default value is <code>4</code>/<code>0</code>.</li> <li><code>knockout</code> : <ul> <li><code>true</code> : Only the glow is drawn</li> <li><code>false</code> : Draw glow and texture. Default behavior.</li> </ul> </li> <li><code>quality</code> : Only available for PostFX. Sets the quality of this Glow effect. Default is 0.1. Cannot be changed post-creation.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addGlow(color, outerStrength, innerStrength, knockout, quality, distance);\n</code></pre> <pre><code>var effect = camera.postFX.addGlow(color, outerStrength, innerStrength, knockout, quality, distance);\n</code></pre><ul> <li><code>quality</code> : Sets the quality of this Glow effect. Default is <code>0.1</code>. Cannot be changed post-creation.</li> <li><code>distance</code> : Sets the distance of this Glow effect. Default is <code>10</code>. Cannot be changed post-creation.</li> </ul> </li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color = color;\neffect.outerStrength = outerStrength;\neffect.innerStrength = innerStrength;\neffect.knockout = knockout;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#gradient","title":"Gradient","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre><ul> <li><code>color1</code>, <code>color2</code> : The first/second gradient color, given as a number value. Default values are <code>0xff0000</code>/<code>0x00ff00</code>.</li> <li><code>alpha</code> : The alpha value of the gradient effect.</li> <li><code>fromX</code>, <code>fromY</code> : The horizontal/vertical position the gradient will start from. Value between <code>0</code> and <code>1</code>.</li> <li><code>toX</code>, <code>toY</code> : The horizontal/vertical position the gradient will end at. Value between <code>0</code> and <code>1</code>.</li> <li><code>size</code> : How many 'chunks' the gradient is divided in to, as spread over the entire height of the texture.<ul> <li><code>0</code> : Smooth gradient. Default behavior.</li> <li>Others : Retro chunky effect.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre> <pre><code>var effect = camera.postFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color1 = color1;\neffect.color2 = color2;\neffect.alpha = alpha;\neffect.fromX = fromX;\neffect.fromY = fromY;\neffect.toX = toX;\neffect.toY = toY;\neffect.size = size;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#pixelate","title":"Pixelate","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addPixelate(amount);\n</code></pre><ul> <li><code>amount</code> : The amount of pixelation to apply, in pixels.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addPixelate(amount);\n</code></pre> <pre><code>var effect = camera.postFX.addPixelate(amount);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.amount = amount;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#shadow","title":"Shadow","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.    </li> </ul> </li> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the shadow effect. Default value is <code>0</code>.</li> <li><code>decay</code> : The amount of decay for shadow effect. Default value is <code>0.1</code>.</li> <li><code>power</code> : The power of the shadow effect. Default value is <code>1</code>.</li> <li><code>color</code> : The color of the shadow. Default value is <code>0x000000</code>.</li> <li><code>samples</code> : The number of samples that the shadow effect will run for. An integer between <code>1</code> and <code>12</code>.</li> <li><code>intensity</code> : The intensity of the shadow effect. Default value is <code>1</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre> <pre><code>var effect = camera.postFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;\neffect.decay = decay;\neffect.power = power;\neffect.color = color;\neffect.samples = samples;\neffect.intensity = intensity;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#shine","title":"Shine","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre><ul> <li><code>speed</code> : The speed of the Shine effect. Default value is <code>0.5</code>.</li> <li><code>lineWidth</code> : The line width of the Shine effect. Default value is <code>0.5</code>.</li> <li><code>gradient</code> : The gradient of the Shine effect. Default value is <code>3</code>.</li> <li><code>reveal</code> : Does this Shine effect reveal or get added to its target?</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre> <pre><code>var effect = camera.postFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.speed = speed;\neffect.lineWidth = lineWidth;\neffect.gradient = gradient;\neffect.reveal = reveal;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#vignette","title":"Vignette","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addVignette(x, y, radius, strength);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the vignette effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.5</code>.</li> <li><code>radius</code> : The radius of the vignette effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.5</code>.</li> <li><code>strength</code> : The strength of the vignette effect. Default value is <code>0.5</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addVignette(x, y, radius, strength);\n</code></pre> <pre><code>var effect = camera.postFX.addVignette(x, y, radius, strength);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;\neffect.radius = radius;\neffect.strength = strength;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#wipe","title":"Wipe","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addWipe(wipeWidth, direction, axis);\n</code></pre><ul> <li><code>wipeWidth</code> : The width of the wipe effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.1</code>.</li> <li><code>direction</code> : The direction of the wipe effect.<ul> <li><code>0</code> : Left to right, or top to bottom</li> <li><code>1</code> : Right to left, or bottom to top</li> </ul> </li> <li><code>axis</code> : The axis of the wipe effect.<ul> <li><code>0</code> : Left to right, or right to left</li> <li><code>1</code> : Bottom to top, or top to bottom</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addWipe(wipeWidth, direction, axis);\n</code></pre> <pre><code>var effect = camera.postFX.addWipe(wipeWidth, direction, axis);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.progress = t; // 0~1\neffect.wipeWidth = wipeWidth;\neffect.direction = direction;  // 0, 1\neffect.axis = axis;  // 0, 1    \n</code></pre></li> </ul>"},{"location":"shader-builtin/#reveal","title":"Reveal","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addReveal(wipeWidth, direction, axis);\n</code></pre><ul> <li><code>wipeWidth</code> : The width of the wipe effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.1</code>.</li> <li><code>direction</code> : The direction of the wipe effect.<ul> <li><code>0</code> : Left to right, or top to bottom</li> <li><code>1</code> : Right to left, or bottom to top</li> </ul> </li> <li><code>axis</code> : The axis of the wipe effect.<ul> <li><code>0</code> : Left to right, or right to left</li> <li><code>1</code> : Bottom to top, or top to bottom</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addReveal(wipeWidth, direction, axis);\n</code></pre> <pre><code>var effect = camera.postFX.addReveal(wipeWidth, direction, axis);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.progress = t; // 0~1\neffect.wipeWidth = wipeWidth;\neffect.direction = direction;  // 0, 1\neffect.axis = axis;  // 0, 1\n</code></pre></li> </ul>"},{"location":"shader-builtin/#remove-all-effects","title":"Remove all effects","text":"<p><pre><code>gameObject.preFX.clear();\n</code></pre> <pre><code>gameObject.postFX.clear();\n</code></pre> <pre><code>camera.postFX.clear();\n</code></pre></p>"},{"location":"shader-builtin/#disable-all-effects","title":"Disable all effects","text":"<p><pre><code>gameObject.preFX.disable();\n// gameObject.preFX.disable(true);  // Also remove all effects\n</code></pre> <pre><code>gameObject.postFX.disable();\n// gameObject.postFX.disable(true);  // Also remove all effects\n</code></pre> <pre><code>camera.postFX.disable();\n// camera.postFX.disable(true);  // Also remove all effects\n</code></pre></p>"},{"location":"shader-colorreplace/","title":"Color replace","text":""},{"location":"shader-colorreplace/#introduction","title":"Introduction","text":"<p>Replace color post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-colorreplace/#live-demos","title":"Live demos","text":"<ul> <li>Color replace</li> </ul>"},{"location":"shader-colorreplace/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-colorreplace/#install-plugin","title":"Install plugin","text":""},{"location":"shader-colorreplace/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcolorreplacepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcolorreplacepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ColorReplacePipelinePlugin from 'phaser3-rex-plugins/plugins/colorreplacepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexColorReplacePipeline',\nplugin: ColorReplacePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ColorReplacePostFx from 'phaser3-rex-plugins/plugins/colorreplacepipeline.js';\nvar config = {\n// ...\npipeline: [ColorReplacePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ColorReplacePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ColorReplacePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 colorreplace effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, {\noriginalColor: 0xFF0000,\nnewColor: 0x000000,\n// epsilon: 0.4,\n\n// name: 'rexColorReplacePostFx'\n});\n</code></pre><ul> <li><code>originalColor</code> : The color (<code>0xRRGGBB</code>) that will be changed.</li> <li><code>newColor</code> : The resulting color (<code>0xRRGGBB</code>).</li> <li><code>epsilon</code> : Tolerance/sensitivity of the floating-point comparison between colors (lower = more exact, higher = more inclusive)    </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 colorreplace effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexColorReplacePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexColorReplacePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#original-color","title":"Original color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.originalColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setOriginalColor(value);\n</code></pre> <pre><code>pipelineInstance.originalColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#new-color","title":"New color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.newColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setNewColor(value);\n</code></pre> <pre><code>pipelineInstance.newColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#epsilon","title":"Epsilon","text":"<ul> <li>Get     <pre><code>var epsilon = pipelineInstance.epsilon;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.epsilon = epsilon;\n// pipelineInstance.epsilon += value;\n</code></pre>     or     <pre><code>pipelineInstance.setEpsilon(value);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/","title":"Cross-stitching","text":""},{"location":"shader-crossstitching/#introduction","title":"Introduction","text":"<p>Cross-stitching post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-crossstitching/#live-demos","title":"Live demos","text":"<ul> <li>Cross-stitching</li> </ul>"},{"location":"shader-crossstitching/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-crossstitching/#install-plugin","title":"Install plugin","text":""},{"location":"shader-crossstitching/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcrossstitchingpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcrossstitchingpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CrossStitchingPipelinePlugin from 'phaser3-rex-plugins/plugins/crossstitchingpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCrossStitchingPipeline',\nplugin: CrossStitchingPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import CrossStitchingPostFx from 'phaser3-rex-plugins/plugins/crossstitchingpipeline.js';\nvar config = {\n// ...\npipeline: [CrossStitchingPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(CrossStitchingPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(CrossStitchingPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 cross-stitching effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, {\n// stitchingWidth: 6,\n// stitchingHeight: 6,\n// brightness: 0,\n\n// name: 'rexCrossStitchingPostFx'\n});\n</code></pre><ul> <li><code>stitchingWidth</code>, <code>stitchingHeight</code> : Stitching size.</li> <li><code>brightness</code> : Brightness of stitching edges</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 cross-stitching effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexCrossStitchingPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexCrossStitchingPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#stitching-size","title":"Stitching size","text":"<ul> <li>Get     <pre><code>var stitchingWidth = pipelineInstance.stitchingWidth;\nvar stitchingHeight = pipelineInstance.stitchingHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.stitchingWidth = stitchingWidth;\npipelineInstance.stitchingHeight = stitchingHeight;\n// pipelineInstance.stitchingWidth += value;\n// pipelineInstance.stitchingHeight += value;\n</code></pre>     or     <pre><code>pipelineInstance.setStitchingWidth(stitchingWidth);\npipelineInstance.setStitchingHeight(stitchingHeight);\npipelineInstance.setStitchingSize(stitchingWidth, stitchingHeight);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#brightness","title":"Brightness","text":"<ul> <li>Get     <pre><code>var brightness = pipelineInstance.brightness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.brightness = brightness;\n// pipelineInstance.brightness += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBrightness(radius);\n</code></pre><ul> <li><code>brightness</code> : 0(black) ~ 1(white)</li> </ul> </li> </ul>"},{"location":"shader-dissolve/","title":"Dissolve","text":""},{"location":"shader-dissolve/#introduction","title":"Introduction","text":"<p>Dissolve transition post processing filter. (Reference)</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-dissolve/#live-demos","title":"Live demos","text":"<ul> <li>Dissolve</li> </ul>"},{"location":"shader-dissolve/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-dissolve/#install-plugin","title":"Install plugin","text":""},{"location":"shader-dissolve/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdissolvepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdissolvepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexdissolvepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexdissolvepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DissolvePipelinePlugin from 'phaser3-rex-plugins/plugins/dissolvepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDissolvePipeline',\nplugin: DissolvePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import DissolvePostFx from 'phaser3-rex-plugins/plugins/dissolvepipeline.js';\nvar config = {\n// ...\npipeline: [DissolvePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(DissolvePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(DissolvePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, {\n// toTexture: textureKey,\n// toFrame: frameName,\n// resizeMode: 1,\n\n// noiseX: undefined,\n// noiseY: undefined,\n// noiseZ: undefined,\n// fromEdgeStart: 0.01,\n// fromEdgeWidth: 0.05,\n// toEdgeStart: 0.01,\n// toEdgeWidth: 0.05,\n\n// progress: 0,\n\n// name: 'rexDissolvePostFx'\n});\n</code></pre><ul> <li><code>toTexture</code>, <code>toFrame</code> : Texture key and frame name of transition target texture.</li> <li><code>resizeMode</code> : Resize mode of transition target texture.<ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.</li> </ul> </li> <li><code>noiseX</code>, <code>noiseY</code>, <code>noiseZ</code> : Parameter of Perline noise.<ul> <li><code>undefined</code> : A random value.</li> </ul> </li> <li><code>fromEdgeStart</code>, <code>fromEdgeWidth</code> : Dissolve edge start, edge width of from-texture (texture of game object, or render result of camera).</li> <li><code>toEdgeStart</code>, <code>toEdgeWidth</code> : Reveal edge start, edge width of to-texture.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexDissolvePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexDissolvePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexDissolvePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexDissolvePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#transition-target-texture","title":"Transition target texture","text":"<ul> <li>Get     <pre><code>var textureKey = pipelineInstance.toFrame.texture.key;\nvar frameName = pipelineInstance.toFrame.name;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setTransitionTargetTexture(textureKey, frameName);\n// pipelineInstance.setTransitionTargetTexture(textureKey, frameName, resizeMode);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#progress","title":"Progress","text":"<ul> <li>Get     <pre><code>var progress = pipelineInstance.progress;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setProgress(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.progress = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#resize-mode","title":"Resize mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.resizeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setResizeMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.    </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-dissolve/#noise","title":"Noise","text":"<ul> <li>Get     <pre><code>var noiseX = pipelineInstance.noiseX;\nvar noiseY = pipelineInstance.noiseY;\nvar noiseZ = pipelineInstance.noiseZ;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.noiseX = noiseX;\npipelineInstance.noiseY = noiseY;\npipelineInstance.noiseZ = noiseZ;\n</code></pre>     or     <pre><code>pipelineInstance.setNoise(noiseX, noiseY, noiseZ);\n// pipelineInstance.setNoise(); // Passing 3 random float numbers\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#edge","title":"Edge","text":"<ul> <li>Get<ul> <li>From texture (texture of game object, or render result of camera)     <pre><code>var edgeStart = pipelineInstance.fromEdgeStart;\nvar edgeWidth = pipelineInstance.fromEdgeWidth;\n</code></pre></li> <li>To texture (transition target texture)     <pre><code>var edgeStart = pipelineInstance.toEdgeStart;\nvar edgeWidth = pipelineInstance.toEdgeWidth;\n</code></pre></li> </ul> </li> <li>Set<ul> <li>From texture (texture of game object, or render result of camera)     <pre><code>pipelineInstance.fromEdgeStart = edgeStart;\npipelineInstance.fromEdgeWidth = edgeWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setFromEdge(edgeStart, edgeWidth);\n</code></pre><ul> <li><code>edgeStart</code> : <code>0</code>~<code>1</code>, default value is <code>0.01</code></li> <li><code>edgeWidth</code> : <code>0</code>~<code>1</code>, default value is <code>0.05</code></li> </ul> </li> <li>To texture (transition target texture)     <pre><code>pipelineInstance.toEdgeStart = edgeStart;\npipelineInstance.toEdgeWidth = edgeWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setToEdge(edgeStart, edgeWidth);\n</code></pre><ul> <li><code>edgeStart</code> : <code>0</code>~<code>1</code>, default value is <code>0.01</code></li> <li><code>edgeWidth</code> : <code>0</code>~<code>1</code>, default value is <code>0.05</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-dropshadow/","title":"Drop shadow","text":""},{"location":"shader-dropshadow/#introduction","title":"Introduction","text":"<p>Drop-shadow post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-dropshadow/#live-demos","title":"Live demos","text":"<ul> <li>Drop-shadow</li> </ul>"},{"location":"shader-dropshadow/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-dropshadow/#install-plugin","title":"Install plugin","text":""},{"location":"shader-dropshadow/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdropshadowpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdropshadowpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DropShadowPipelinePlugin from 'phaser3-rex-plugins/plugins/dropshadowpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDropShadowPipeline',\nplugin: DropShadowPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import DropShadowPostFx from 'phaser3-rex-plugins/plugins/dropshadowpipeline.js';\nvar config = {\n// ...\npipeline: [DropShadowPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(DropShadowPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(DropShadowPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 dropshadow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, {\n// ** Offset **\n// rotation: \n// angle: 45,      // degrees\n// distance: 5,\n\n// ** Shadow color **\n// shadowColor: 0xffffff,\n// alpha: 0.5,\n\n// shadowOnly: false,\n\n// ** Parameters of KawaseBlur **\n// blur: 4,\n// quality: 3,\n// pixelWidth: 1,\n// pixelHeight: 1,\n\n// name: 'rexDropShadowPostFx'\n});\n</code></pre><ul> <li>Offset<ul> <li><code>rotation</code>, <code>angle</code> : The angle of the shadow in radians/degrees.</li> <li><code>distance</code> : Distance of shadow.</li> </ul> </li> <li>Color<ul> <li><code>shadowColor</code> : Color of the shadow.</li> <li><code>alpha</code> : Alpha of the shadow.</li> </ul> </li> <li><code>shadowOnly</code> : Whether render shadow only.</li> <li>Parameters of KawaseBlur<ul> <li><code>blur</code> : The blur of the filter. Should be greater than <code>0</code>. If value is an Array, setting kernels.</li> <li><code>quality</code> : The quality of the filter. Should be an integer greater than <code>1</code>.    </li> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Sets the pixel size of the filter. Large size is blurrier. For advanced usage.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 dropshadow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexDropShadowPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexDropShadowPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#rotation","title":"Rotation","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;   // radians\n// pipelineInstance.angle = angle;      // degrees\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(radians);\npipelineInstance.setAngle(degrees);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#distance","title":"Distance","text":"<ul> <li>Get     <pre><code>var distance = pipelineInstance.distance;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.distance = distance;\n// pipelineInstance.distance += value;\n</code></pre>     or     <pre><code>pipelineInstance.setDistance(distance);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#shadow-color","title":"Shadow color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.shadowColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setShadowColor(value);\n</code></pre> <pre><code>pipelineInstance.shadowColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = pipelineInstance.alpha;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.alpha = alpha;\n</code></pre>     or     <pre><code>pipelineInstance.setAlpha(alpha);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#shadow-only","title":"Shadow-only","text":"<ul> <li>Get     <pre><code>var enable = pipelineInstance.shadowOnly;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.shadowOnly = enable;\n</code></pre>     or     <pre><code>pipelineInstance.setShadowOnly(enable);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#blur","title":"Blur","text":"<ul> <li>Get     <pre><code>var blur = pipelineInstance.blur;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.blur = blur;\n// pipelineInstance.blur += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBlur(value);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#quality","title":"Quality","text":"<ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.quality = quality;\n// pipelineInstance.quality += value;\n</code></pre>     or     <pre><code>pipelineInstance.setQuality(value);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/","title":"Fisheye","text":""},{"location":"shader-fisheye/#introduction","title":"Introduction","text":"<p>Fish-eye post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-fisheye/#live-demos","title":"Live demos","text":"<ul> <li>FishEye</li> </ul>"},{"location":"shader-fisheye/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-fisheye/#install-plugin","title":"Install plugin","text":""},{"location":"shader-fisheye/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfisheyepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfisheyepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexfisheyepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexfisheyepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FishEyePipelinePlugin from 'phaser3-rex-plugins/plugins/fisheyepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFishEyePipeline',\nplugin: FishEyePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import FishEyePostFx from 'phaser3-rex-plugins/plugins/fisheyepipeline.js';\nvar config = {\n// ...\npipeline: [FishEyePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(FishEyePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(FishEyePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 fisheye effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// intensity: 1,\n// mode:0,  // 0|1|'asin'|'sin'\n\n// name: 'rexFishEyePostFx'\n});\n</code></pre><ul> <li><code>center.x</code>, <code>center.y</code> : Local position of fisheye center.</li> <li><code>radius</code> : FishEye radius.</li> <li><code>intensity</code> : 0(original) ~ 1(fisheye). Default value is <code>1</code>.</li> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'asin'</code> : asin mode. Defaule value is <code>0</code>.</li> <li><code>1</code>, or <code>'sin'</code> : sin mode.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 fisheye effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexFishEyePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexFishEyePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexFishEyePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexFishEyePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(intensity);\n</code></pre><ul> <li><code>intensity</code> : 0(original) ~ 1(fisheye)</li> </ul> </li> </ul>"},{"location":"shader-fisheye/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#mode","title":"Mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.fishEyeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setFishEyeMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'asin'</code> : asin mode.</li> <li><code>1</code>, or <code>'sin'</code> : sin mode.</li> </ul> </li> </ul>"},{"location":"shader-glowfilter/","title":"Glow","text":"<p>Note</p> <p>Phaser3.60 has a built-in Glow effect.</p>"},{"location":"shader-glowfilter/#introduction","title":"Introduction","text":"<p>Glow post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-glowfilter/#live-demos","title":"Live demos","text":"<ul> <li>Glow filter</li> </ul>"},{"location":"shader-glowfilter/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-glowfilter/#install-plugin","title":"Install plugin","text":""},{"location":"shader-glowfilter/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexglowfilterpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexglowfilterpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilterpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilterpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilterpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGlowFilterPipeline',\nplugin: GlowFilterPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilterpipeline.js';\nvar config = {\n// ...\npipeline: [GlowFilterPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 glow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, {\n// intensity: 0\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(white color)<ul> <li>Suggestion value : 0 ~ 0.02</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 glow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(white color)<ul> <li>Suggestion value : 0 ~ 0.02</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/","title":"Glow","text":"<p>Note</p> <p>Phaser3.60 has a built-in Glow effect.</p>"},{"location":"shader-glowfilter2/#introduction","title":"Introduction","text":"<p>Glow post processing filter, port from pixi. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-glowfilter2/#live-demos","title":"Live demos","text":"<ul> <li>Glow filter</li> </ul>"},{"location":"shader-glowfilter2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-glowfilter2/#install-plugin","title":"Install plugin","text":""},{"location":"shader-glowfilter2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexglowfilter2pipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexglowfilter2pipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilter2pipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilter2pipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilter2pipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGlowFilterPipeline',\nplugin: GlowFilterPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilter2pipeline.js';\nvar config = {\n// ...\npipeline: [GlowFilterPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 glowfilter effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, {    // outerStrength: 4,\n// innerStrength: 0,\n// glowColor: 0xffffff,\n// knockout: false,\n\n// distance: 10,\n// quality: 0.1,\n\n// name: 'rexGlowFilterPostFx'\n});\n</code></pre><ul> <li><code>outerStrength</code> : The strength of the glow outward from the edge of the texture.</li> <li><code>innerStrength</code> : The strength of the glow inward from the edge of the texture.</li> <li><code>glowColor</code> : The color of the glow.</li> <li><code>knockout</code> :<ul> <li><code>true</code> : Only show effect.</li> <li><code>false</code> : Show content and effect.</li> </ul> </li> <li><code>distance</code> : The distance of the glow. It can't be changed after filter creation.</li> <li><code>quality</code> : 0~1. The higher the number the less performant. It can't be changed after filter creation.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 glowfilter effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#outer-strength","title":"Outer strength","text":"<ul> <li>Get     <pre><code>var outerStrength = pipelineInstance.outerStrength;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.outerStrength = outerStrength;\n// pipelineInstance.outerStrength += value;\n</code></pre>     or     <pre><code>pipelineInstance.setOuterStrength(value);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#inner-strength","title":"Inner strength","text":"<ul> <li>Get     <pre><code>var innerStrength = pipelineInstance.innerStrength;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.innerStrength = innerStrength;\n// pipelineInstance.innerStrength += value;\n</code></pre>     or     <pre><code>pipelineInstance.setInnerStrength(value);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#glow-color","title":"Glow color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.glowColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setGlowColor(value);\n</code></pre> <pre><code>pipelineInstance.glowColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#distance","title":"Distance","text":"<p>The distance of the glow. Make it 2 times more for resolution=2.  It can't be changed after filter creation.</p> <ul> <li>Get     <pre><code>var distance = pipelineInstance.distance;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setDistance(distance);\n</code></pre>     or     <pre><code>pipelineInstance.distance = distance;\n</code></pre><ul> <li><code>distance</code> : The distance of the glow.</li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#quality","title":"Quality","text":"<p>A number between 0 and 1 that describes the quality of the glow.  The higher the number the less performant.</p> <ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setQuality(quality);\n</code></pre>     or     <pre><code>pipelineInstance.quality = quality;\n</code></pre><ul> <li><code>quality</code> : <code>0</code> ~ <code>1</code>, default is <code>0.1</code>.<ul> <li><code>0.1</code> : 10 sample points.</li> <li><code>0.08</code> : 8 sample points.</li> <li><code>1</code> : 100 sample points.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-grayscale/","title":"Gray scale","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-grayscale/#introduction","title":"Introduction","text":"<p>Gray scale post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-grayscale/#live-demos","title":"Live demos","text":"<ul> <li>Gray scale</li> </ul>"},{"location":"shader-grayscale/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-grayscale/#install-plugin","title":"Install plugin","text":""},{"location":"shader-grayscale/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgrayscalepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgrayscalepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexgrayscalepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexgrayscalepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GrayScalePipelinePlugin from 'phaser3-rex-plugins/plugins/grayscalepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGrayScalePipeline',\nplugin: GrayScalePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GrayScalePostFx from 'phaser3-rex-plugins/plugins/grayscalepipeline.js';\nvar config = {\n// ...\npipeline: [GrayScalePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GrayScalePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GrayScalePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(gameObject, {\n// intensity: 1,\n\n// name: 'rexGrayScalePostFx'\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(gray scale). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGrayScalePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGrayScalePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGrayScalePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGrayScalePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(gray scale)</li> </ul> </li> </ul>"},{"location":"shader-horrifi/","title":"Horri-fi","text":""},{"location":"shader-horrifi/#introduction","title":"Introduction","text":"<p>6-in-1 post processing filter</p> <ul> <li>Bloom</li> <li>Chromatic Abberation</li> <li>Scanlines</li> <li>VHS Distortion</li> <li>CRT TV Curve</li> <li>Noise</li> <li>Vignette</li> </ul> <p>Reference : Horri-fi shader effect</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-horrifi/#live-demos","title":"Live demos","text":"<ul> <li>Horrifi</li> </ul>"},{"location":"shader-horrifi/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-horrifi/#install-plugin","title":"Install plugin","text":""},{"location":"shader-horrifi/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhorrifipipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhorrifipipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexhorrifipipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexhorrifipipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HorrifiPipelinePlugin from 'phaser3-rex-plugins/plugins/horrifipipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHorrifiPipeline',\nplugin: HorrifiPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import HorrifiPostFx from 'phaser3-rex-plugins/plugins/horrifipipeline.js';\nvar config = {\n// ...\npipeline: [HorrifiPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(HorrifiPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(HorrifiPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 horrifi effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(gameObject, {\nenable: false,\n\n// Bloom\nbloomEnable: false,\nbloomRadius: 0, bloomIntensity: 0, bloomThreshold: 0,\nbloomTexelWidth: 0, bloomTexelHeight: 0,\n\n// Chromatic abberation\nchromaticEnable: false,\nchabIntensity: 0,\n\n// Vignette\nvignetteEnable: false,\nvignetteStrength: 0, vignetteIntensity: 0,\n\n// Noise\nnoiseEnable: false,\nnoiseStrength: 0,\nnoiseSeed: 0,\n\n// VHS\nvhsEnable: false,\nvhsStrength: 0,\n\n// Scanlines\nscanlinesEnable: false,\nscanStrength: 0,\n\n// CRT\ncrtEnable: false,\ncrtWidth: 0, crtHeight: 0,\n\n// name: 'rexHorrifiPostFx'\n});\n</code></pre><ul> <li><code>enable</code> : Default <code>enable</code> value for all shader effects.</li> <li>Bloom<ul> <li><code>bloomEnable</code> : Set <code>true</code> to enable bloom effect.</li> <li><code>bloomRadius</code>, <code>bloomIntensity</code>, <code>bloomThreshold</code></li> <li><code>bloomTexelWidth</code>, <code>bloomTexelHeight</code></li> </ul> </li> <li>Chromatic abberation<ul> <li><code>chromaticEnable</code> : Set <code>true</code> to enable chromatic abberation effect.</li> <li><code>chabIntensity</code></li> </ul> </li> <li>Vignette<ul> <li><code>vignetteEnable</code> : Set <code>true</code> to enable vignette effect.</li> <li><code>vignetteStrength</code>, <code>vignetteIntensity</code></li> </ul> </li> <li>Noise<ul> <li><code>noiseEnable</code> : Set <code>true</code> to enable noise effect.</li> <li><code>noiseStrength</code></li> <li><code>noiseSeed</code></li> </ul> </li> <li>VHS<ul> <li><code>vhsEnable</code> : Set <code>true</code> to enable VHS effect.</li> <li><code>vhsStrength</code></li> </ul> </li> <li>Scanlines<ul> <li><code>scanlinesEnable</code> : Set <code>true</code> to enable Scanlines effect.</li> <li><code>scanStrength</code></li> </ul> </li> <li>CRT<ul> <li><code>crtEnable</code> : Set <code>true</code> to enable Scanlines effect.</li> <li><code>crtWidth</code>, <code>crtHeight</code></li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 horrifi effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexHorrifiPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexHorrifiPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexHorrifiPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexHorrifiPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#bloom","title":"Bloom","text":""},{"location":"shader-horrifi/#enable","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setBloomEnable();\n// pipelineInstance.setBloomEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.bloomEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setBloomEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.bloomEnable = false;\n</code></pre></li> <li>Get     <pre><code>var bloomEnable = pipelineInstance.bloomEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setBloomRadius(value);\npipelineInstance.setBloomIntensity(value);\npipelineInstance.setBloomThreshold(value);\npipelineInstance.setBloomTexelSize(width, height);\n</code></pre>     or     <pre><code>pipelineInstance.bloomRadius = value;\npipelineInstance.bloomIntensity = value;\npipelineInstance.bloomThreshold = value;\npipelineInstance.bloomTexelWidth = width;\npipelineInstance.bloomTexelHeight = height;\n</code></pre></li> <li>Get     <pre><code>var bloomRadius = pipelineInstance.bloomRadius;\nvar bloomIntensity = pipelineInstance.bloomIntensity;\nvar bloomThreshold = pipelineInstance.bloomThreshold;\nvar bloomTexelWidth = pipelineInstance.bloomTexelWidth;\nvar bloomTexelHeight = pipelineInstance.bloomTexelHeight;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#chromatic-abberation","title":"Chromatic abberation","text":""},{"location":"shader-horrifi/#enable_1","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setChromaticEnable();\n// pipelineInstance.setChromaticEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.chromaticEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setChromaticEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.chromaticEnable = false;\n</code></pre></li> <li>Get     <pre><code>var chromaticEnable = pipelineInstance.chromaticEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_1","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setChabIntensity(value);\n</code></pre>     or     <pre><code>pipelineInstance.chabIntensity = value;\n</code></pre></li> <li>Get     <pre><code>var chabIntensity = pipelineInstance.chabIntensity;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#vignette","title":"Vignette","text":""},{"location":"shader-horrifi/#enable_2","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setVignetteEnable();\n// pipelineInstance.setVignetteEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setVignetteEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteEnable = false;\n</code></pre></li> <li>Get     <pre><code>var vignetteEnable = pipelineInstance.vignetteEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_2","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setVignetteStrength(value);\npipelineInstance.setVignetteIntensity(value);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteStrength = value;\npipelineInstance.vignetteIntensity = value;\n</code></pre></li> <li>Get     <pre><code>var vignetteStrength = pipelineInstance.vignetteStrength;\nvar vignetteIntensity = pipelineInstance.vignetteIntensity;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#noise","title":"Noise","text":""},{"location":"shader-horrifi/#enable_3","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setNoiseEnable();\n// pipelineInstance.setNoiseEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.noiseEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setNoiseEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.noiseEnable = false;\n</code></pre></li> <li>Get     <pre><code>var noiseEnable = pipelineInstance.noiseEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_3","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setNoiseStrength(value);\npipelineInstance.setNoiseSeed(value);\n</code></pre>     or     <pre><code>pipelineInstance.noiseStrength = value;\npipelineInstance.noiseSeed = value;\n</code></pre></li> <li>Get     <pre><code>var noiseStrength = pipelineInstance.noiseStrength;\nvar noiseSeed = pipelineInstance.noiseSeed;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#vhs","title":"VHS","text":""},{"location":"shader-horrifi/#enable_4","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setVHSEnable();\n// pipelineInstance.setVHSEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.vhsEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setVHSEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.vhsEnable = false;\n</code></pre></li> <li>Get     <pre><code>var vhsEnable = pipelineInstance.vhsEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_4","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setVhsStrength(value);\n</code></pre>     or     <pre><code>pipelineInstance.vhsStrength = value;\n</code></pre></li> <li>Get     <pre><code>var vhsStrength = pipelineInstance.vhsStrength;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#scanlines","title":"Scanlines","text":""},{"location":"shader-horrifi/#enable_5","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setScanlinesEnable();\n// pipelineInstance.setScanlinesEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.scanlinesEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setScanlinesEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.scanlinesEnable = false;\n</code></pre></li> <li>Get     <pre><code>var scanlinesEnable = pipelineInstance.scanlinesEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_5","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setScanStrength(value);\n</code></pre>     or     <pre><code>pipelineInstance.scanStrength = value;\n</code></pre></li> <li>Get     <pre><code>var scanStrength = pipelineInstance.scanStrength;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#crt","title":"CRT","text":""},{"location":"shader-horrifi/#enable_6","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setCRTEnable();\n// pipelineInstance.setCRTEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.crtEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setCRTEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.crtEnable = false;\n</code></pre></li> <li>Get     <pre><code>var crtEnable = pipelineInstance.crtEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_6","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setCrtSize(width, height);\n</code></pre>     or     <pre><code>pipelineInstance.crtWidth = width;\npipelineInstance.crtHeight = height;\n</code></pre></li> <li>Get     <pre><code>var crtWidth = pipelineInstance.crtWidth;\nvar crtHeight = pipelineInstance.crtHeight;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#enable-all-effects","title":"Enable all effects","text":"<ul> <li>Enable all     <pre><code>pipelineInstance.setEnable();\n// pipelineInstance.setEnable(true);\n</code></pre></li> <li>Disable all     <pre><code>pipelineInstance.setEnable(false);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/","title":"HSL adjust","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-hsladjust/#introduction","title":"Introduction","text":"<p>Adjust color in HSL domain, post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-hsladjust/#live-demos","title":"Live demos","text":"<ul> <li>HSL adjust</li> </ul>"},{"location":"shader-hsladjust/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-hsladjust/#install-plugin","title":"Install plugin","text":""},{"location":"shader-hsladjust/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhsladjustpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhsladjustpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexhsladjustpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexhsladjustpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HSLAdjustPipelinePlugin from 'phaser3-rex-plugins/plugins/hsladjustpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHSLAdjustPipeline',\nplugin: HSLAdjustPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHSLAdjustPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHSLAdjustPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import HSLAdjustPostFx from 'phaser3-rex-plugins/plugins/hsladjustpipeline.js';\nvar config = {\n// ...\npipeline: [HSLAdjustPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(HSLAdjustPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(HSLAdjustPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 hsl-adjust effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').add(gameObject, {\n// hueRotate: 0,\n// satAdjust: 1,\n// lumAdjust: 0.5,\n\n// name: 'rexHslAdjustPostFx'\n});\n</code></pre><ul> <li><code>hueRotate</code> : Hue rotation<ul> <li><code>0</code> : Rotate 0 degrees, original color (Default value)</li> <li><code>0.5</code> : Rotate 180 degrees</li> <li><code>1</code> : Rotate 360 degrees</li> </ul> </li> <li><code>satAdjust</code> : Saturation adjustment<ul> <li><code>0</code> : Gray</li> <li><code>1</code> : Original color (Default value)</li> <li> <p>1 :</p> </li> </ul> </li> <li><code>lumAdjust</code> : Lumen adjustment<ul> <li><code>0</code> : Dark</li> <li><code>0.5</code> : Original color (Default value)</li> <li><code>1</code> : White</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 hsl-adjust effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexHslAdjustPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexHslAdjustPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexHslAdjustPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexHslAdjustPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#hue-rotation","title":"Hue rotation","text":"<ul> <li>Get     <pre><code>var hueRotate = pipelineInstance.hueRotate;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.hueRotate = hueRotate;\n// pipelineInstance.hueRotate += value;\n</code></pre>     or     <pre><code>pipelineInstance.setHueRotate(value);\n</code></pre><ul> <li><code>0</code> : Rotate 0 degrees, original color</li> <li><code>0.5</code> : Rotate 180 degrees</li> <li><code>1</code> : Rotate 360 degrees</li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#saturation-adjustment","title":"Saturation adjustment","text":"<ul> <li>Get     <pre><code>var satAdjust = pipelineInstance.satAdjust;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.satAdjust = satAdjust;\n// pipelineInstance.satAdjust += value;\n</code></pre>     or     <pre><code>pipelineInstance.setSatAdjust(value);\n</code></pre><ul> <li><code>0</code> : Gray</li> <li><code>1</code> : Original color</li> <li> <p>1 :</p> </li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#lumen-adjustment","title":"Lumen adjustment","text":"<ul> <li>Get     <pre><code>var lumAdjust = pipelineInstance.lumAdjust;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.lumAdjust = lumAdjust;\n// pipelineInstance.lumAdjust += value;\n</code></pre>     or     <pre><code>pipelineInstance.setLumAdjust(value);\n</code></pre><ul> <li><code>0</code> : Dark</li> <li><code>0.5</code> : Original color</li> <li><code>1</code> : White</li> </ul> </li> </ul>"},{"location":"shader-inverse/","title":"Inverse","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-inverse/#introduction","title":"Introduction","text":"<p>Inverse color post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-inverse/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-inverse/#install-plugin","title":"Install plugin","text":""},{"location":"shader-inverse/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinversepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinversepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexinversepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexinversepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InversePipelinePlugin from 'phaser3-rex-plugins/plugins/inversepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInversePipeline',\nplugin: InversePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import InversePostFx from 'phaser3-rex-plugins/plugins/inversepipeline.js';\nvar config = {\n// ...\npipeline: [InversePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(InversePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(InversePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 inverse effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(gameObject, {\n// intensity: 1,\n\n// name: 'rexInversePostFx'\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(inverse scale). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 inverse effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexInversePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexInversePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexInversePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexInversePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(inverse color)</li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/","title":"Kawase blur","text":"<p>Note</p> <p>Phaser3.60 has a built-in blur effect.</p>"},{"location":"shader-kawaseblur/#introduction","title":"Introduction","text":"<p>Kawase-blur post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-kawaseblur/#live-demos","title":"Live demos","text":"<ul> <li>Kawase-blur</li> </ul>"},{"location":"shader-kawaseblur/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-kawaseblur/#install-plugin","title":"Install plugin","text":""},{"location":"shader-kawaseblur/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexkawaseblurpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkawaseblurpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexkawaseblurpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexkawaseblurpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import KawaseBlurPipelinePlugin from 'phaser3-rex-plugins/plugins/kawaseblurpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexKawaseBlurPipeline',\nplugin: KawaseBlurPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import KawaseBlurPostFx from 'phaser3-rex-plugins/plugins/kawaseblurpipeline.js';\nvar config = {\n// ...\npipeline: [KawaseBlurPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(KawaseBlurPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(KawaseBlurPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 kawaseblur effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(gameObject, {\n// blur: 4,\n// quality: 3,\n// pixelWidth: 1,\n// pixelHeight: 1,\n\n// name: 'rexKawaseBlurPostFx'\n});\n</code></pre><ul> <li><code>blur</code> : The blur of the filter. Should be greater than <code>0</code>. If value is an Array, setting kernels.</li> <li><code>quality</code> : The quality of the filter. Should be an integer greater than <code>1</code>.    </li> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Sets the pixel size of the filter. Large size is blurrier. For advanced usage.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 kawaseblur effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexKawaseBlurPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexKawaseBlurPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexKawaseBlurPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexKawaseBlurPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#blur","title":"Blur","text":"<ul> <li>Get     <pre><code>var blur = pipelineInstance.blur;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.blur = blur;\n// pipelineInstance.blur += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBlur(value);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#quality","title":"Quality","text":"<ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.quality = quality;\n// pipelineInstance.quality += value;\n</code></pre>     or     <pre><code>pipelineInstance.setQuality(value);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-outline/","title":"Outline","text":""},{"location":"shader-outline/#introduction","title":"Introduction","text":"<p>Outline post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-outline/#live-demos","title":"Live demos","text":"<ul> <li>Outline</li> </ul>"},{"location":"shader-outline/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-outline/#install-plugin","title":"Install plugin","text":""},{"location":"shader-outline/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexoutlinepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexoutlinepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexoutlinepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexoutlinepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexOutlinePipeline',\nplugin: OutlinePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import OutlinePostFx from 'phaser3-rex-plugins/plugins/outlinepipeline.js';\nvar config = {\n// ...\npipeline: [OutlinePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(OutlinePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(OutlinePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 outline effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(gameObject, {\n// thickness: 3,\n// outlineColor: 0x000000,\n\n// quality: 0.1,\n\n// name: 'rexOutlinePostFx'\n});\n</code></pre><ul> <li><code>thickness</code> : Thickness of outline.</li> <li><code>outlineColor</code> : Color of outline.</li> <li><code>quality</code> : 0~1. The higher the number the less performant. It can't be changed after filter creation.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 outline effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-outline/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexOutlinePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexOutlinePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-outline/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexOutlinePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexOutlinePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-outline/#thickness","title":"Thickness","text":"<ul> <li>Get     <pre><code>var thickness = pipelineInstance.thickness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.thickness = thickness;\n// pipelineInstance.thickness += value;\n</code></pre>     or     <pre><code>pipelineInstance.setThickness(value);\n</code></pre></li> </ul>"},{"location":"shader-outline/#outline-color","title":"Outline color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.outlineColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setOutlineColor(value);\n</code></pre> <pre><code>pipelineInstance.outlineColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-outline/#quality","title":"Quality","text":"<p>The quality of the outline from 0 to 1, using a higher quality setting will  result in slower performance and more accuracy.</p> <ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setQuality(quality);\n</code></pre>     or     <pre><code>pipelineInstance.quality = quality;\n</code></pre><ul> <li><code>quality</code> : <code>0</code> ~ <code>1</code>, default is <code>0.1</code>.<ul> <li><code>0.1</code> : 10 sample points.</li> <li><code>0.08</code> : 8 sample points.</li> <li><code>1</code> : 100 sample points.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-pixelation/","title":"Pixelation","text":"<p>Note</p> <p>Phaser3.60 has a built-in pixelate effect.</p>"},{"location":"shader-pixelation/#introduction","title":"Introduction","text":"<p>Pixelation post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-pixelation/#live-demos","title":"Live demos","text":"<ul> <li>Pixelation</li> </ul>"},{"location":"shader-pixelation/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-pixelation/#install-plugin","title":"Install plugin","text":""},{"location":"shader-pixelation/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpixelationpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpixelationpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexpixelationpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexpixelationpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PixelationPipelinePlugin from 'phaser3-rex-plugins/plugins/pixelationpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPixelationPipeline',\nplugin: PixelationPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import PixelationPostFx from 'phaser3-rex-plugins/plugins/pixelationpipeline.js';\nvar config = {\n// ...\npipeline: [PixelationPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(PixelationPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(PixelationPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 pixelation effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(gameObject, {\n// pixelWidth: 0,\n// pixelHeight: 0,\n\n// name: 'rexPixelationPostFx'\n});\n</code></pre><ul> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Pixel size.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 pixelation effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexPixelationPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexPixelationPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexPixelationPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexPixelationPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n// pipelineInstance.pixelWidth += value;\n// pipelineInstance.pixelHeight += value;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/","title":"Shockwave","text":""},{"location":"shader-shockwave/#introduction","title":"Introduction","text":"<p>Shockwave post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-shockwave/#live-demos","title":"Live demos","text":"<ul> <li>Shockwave</li> </ul>"},{"location":"shader-shockwave/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-shockwave/#install-plugin","title":"Install plugin","text":""},{"location":"shader-shockwave/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshockwavepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshockwavepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexshockwavepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexshockwavepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShockwavePipelinePlugin from 'phaser3-rex-plugins/plugins/shockwavepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShockwavePipeline',\nplugin: ShockwavePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ShockwavePostFx from 'phaser3-rex-plugins/plugins/shockwavepipeline.js';\nvar config = {\n// ...\npipeline: [ShockwavePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ShockwavePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ShockwavePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 shockwave effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// waveRadius: 0,\n// waveWidth: 20,\n// powBaseScale: 0.8,\n// powExponent: 0.1,\n\n// name: 'rexShockwavePostFx'\n});\n</code></pre><ul> <li><code>waveRadius</code> : Radius of shockwave, in pixels.</li> <li><code>waveWidth</code> : Width of shockwave, in pixels.</li> <li><code>powBaseScale</code>, <code>powExponent</code> : Parameters of shockwave.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 shockwave effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexShockwavePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexShockwavePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexShockwavePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexShockwavePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#wave-radius","title":"Wave radius","text":"<ul> <li>Get     <pre><code>var waveRadius = pipelineInstance.waveRadius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.waveRadius = waveRadius;\n</code></pre>     or     <pre><code>pipelineInstance.setWaveRadius(waveRadius);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#wave-width","title":"Wave width","text":"<ul> <li>Get     <pre><code>var waveWidth = pipelineInstance.waveWidth;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.waveWidth = waveWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setWaveWidth(waveWidth);\n</code></pre></li> </ul>"},{"location":"shader-split/","title":"Split","text":""},{"location":"shader-split/#introduction","title":"Introduction","text":"<p>Split image into 4 parts.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-split/#live-demos","title":"Live demos","text":"<ul> <li>Split</li> </ul>"},{"location":"shader-split/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-split/#install-plugin","title":"Install plugin","text":""},{"location":"shader-split/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsplitpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsplitpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SplitPipelinePlugin from 'phaser3-rex-plugins/plugins/splitpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSplitPipeline',\nplugin: SplitPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import SplitPostFx from 'phaser3-rex-plugins/plugins/splitpipeline.js';\nvar config = {\n// ...\npipeline: [SplitPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(SplitPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(SplitPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 split effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, {\n// x: undefined,  // renderer.width / 2\n// y: undefined,  // renderer.height / 2\n\n// width: undefined,\n// left: 0,\n// right: 0,\n// height: undefined,\n// top: 0,\n// bottom: 0,\n\n// angle: undefined,  // Degrees\n// rotation: 0,       // Radian\n\n// shiftEnable: true,\n\n// name: 'rexSplitPostFx'\n});\n</code></pre><ul> <li><code>x</code> : Vertical split position. Default value is center of render width.</li> <li><code>y</code> : Horizontal split position. Default value is center of render height.</li> <li><code>width</code>, <code>height</code> : Vertical/Horizontal split length.</li> <li><code>left</code>, <code>right</code> : Specify left/right part length of vertical split. Default value is half Vertical split length.</li> <li><code>top</code>, <code>bottom</code> : Specify top/bottom part length of horizontal split. Default value is half Horizontal split length.</li> <li><code>angle</code>, <code>rotation</code> : Rotation of split axis. Default value is <code>0</code>.</li> <li><code>shiftEnable</code> :<ul> <li><code>true</code> : Shift splitted parts out. Default value.</li> <li><code>false</code> : Don't shift splitted parts. Equal to apply mask on this image.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 split effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-split/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexSplitPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexSplitPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-split/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-split/#split-position","title":"Split position","text":"<ul> <li>Get     <pre><code>var splitX = pipelineInstance.splitX;\nvar splitY = pipelineInstance.splitY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.splitX = splitX;\npipelineInstance.splitY = splitY;\n</code></pre>     or     <pre><code>pipelineInstance.setSplit(x, y);\n</code></pre></li> </ul>"},{"location":"shader-split/#split-at-center-of-render","title":"Split at center of render","text":"<pre><code>pipelineInstance.splitAtCenter();\n// pipelineInstance.splitAtCenter(width, height);\n</code></pre>"},{"location":"shader-split/#split-length","title":"Split length","text":"<ul> <li>Get     <pre><code>var splittedWidth = pipelineInstance.splittedWidth;\nvar splittedHeight = pipelineInstance.splittedHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.splittedWidth = splittedWidth;\npipelineInstance.splittedHeight = splittedHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setSplittedWidth(splittedWidth);\npipelineInstance.setSplittedHeight(splittedHeight);\n</code></pre></li> </ul> <p>or specify left/right/top/bottom of split length</p> <ul> <li>Get     <pre><code>var left = pipelineInstance.spaceLeft;\nvar right = pipelineInstance.spaceRight;\nvar top = pipelineInstance.spaceTop;\nvar bottom = pipelineInstance.spaceBottom;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.spaceLeft = left;\npipelineInstance.spaceRight = right;\npipelineInstance.spaceTop = top;\npipelineInstance.spaceBottom = bottom;\n</code></pre>     or     <pre><code>pipelineInstance.setSpace(left, right, top, bottom);\n</code></pre></li> </ul>"},{"location":"shader-split/#rotation-axis-of-split-edge","title":"Rotation Axis of Split edge","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;\npipelineInstance.rotation += value;\n// pipelineInstance.angle = angle;\n// pipelineInstance.angle += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(rotation);\n// pipelineInstance.setAngle(angle);\n</code></pre></li> </ul>"},{"location":"shader-split/#shift-enable","title":"Shift enable","text":"<ul> <li>Get     <pre><code>var enable = pipelineInstance.shiftEnable;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.shiftEnable = enable;\n</code></pre>     or     <pre><code>pipelineInstance.setShiftEnable(enable);\n</code></pre></li> </ul>"},{"location":"shader-swirl/","title":"Swirl","text":""},{"location":"shader-swirl/#introduction","title":"Introduction","text":"<p>Swirl post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-swirl/#live-demos","title":"Live demos","text":"<ul> <li>Swirl</li> </ul>"},{"location":"shader-swirl/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-swirl/#install-plugin","title":"Install plugin","text":""},{"location":"shader-swirl/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexswirlpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexswirlpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexswirlpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexswirlpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SwirlPipelinePlugin from 'phaser3-rex-plugins/plugins/swirlpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSwirlPipeline',\nplugin: SwirlPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import SwirlPostFx from 'phaser3-rex-plugins/plugins/swirlpipeline.js';\nvar config = {\n// ...\npipeline: [SwirlPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(SwirlPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(SwirlPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 swirl effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// rotation: 0,  // or angle: 0,\n\n// name: 'rexSwirlPostFx'\n});\n</code></pre><ul> <li><code>center.x</code>, <code>center.y</code> : Local position of swirl center.</li> <li><code>radius</code> : Swirl radius.</li> <li><code>rotation</code> (<code>angle</code>) : Swirl angle.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 swirl effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexSwirlPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexSwirlPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexSwirlPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexSwirlPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#rotation","title":"Rotation","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;\npipelineInstance.rotation += value;\n// pipelineInstance.angle = angle;\n// pipelineInstance.angle += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(rotation);\n// pipelineInstance.setAngle(angle);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-toonify/","title":"Toonify","text":""},{"location":"shader-toonify/#introduction","title":"Introduction","text":"<p>Draw outlines and quantize color in HSV domain, post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-toonify/#live-demos","title":"Live demos","text":"<ul> <li>Toonify</li> </ul>"},{"location":"shader-toonify/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-toonify/#install-plugin","title":"Install plugin","text":""},{"location":"shader-toonify/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoonifypipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextoonifypipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rextoonifypipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rextoonifypipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ToonifyPipelinePlugin from 'phaser3-rex-plugins/plugins/toonifypipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexToonifyPipeline',\nplugin: ToonifyPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ToonifyPostFx from 'phaser3-rex-plugins/plugins/toonifypipeline.js';\nvar config = {\n// ...\npipeline: [ToonifyPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ToonifyPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ToonifyPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 toonify effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(gameObject, {\n// edgeThreshold: 0.2,\n// hueLevels: 0,\n// sLevels: 0,\n// vLevels: 0,\n// edgeColor: 0,\n\n// name: 'rexToonifyPostFx'\n});\n</code></pre><ul> <li><code>edgeThreshold</code> : Threshold of edge. Set <code>1.1</code> (or any number larger then <code>1</code>) to disable this feature.</li> <li><code>hueLevels</code> : Amount of hue levels. Set <code>0</code> to disable this feature.</li> <li><code>sLevels</code> : Amount of saturation levels. Set <code>0</code> to disable this feature.</li> <li><code>vLevels</code> : Amount of value levels. Set <code>0</code> to disable this feature.</li> <li><code>edgeColor</code> : Color of edge, could be a number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 toonify effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexToonifyPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexToonifyPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexToonifyPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexToonifyPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#edge-threshold","title":"Edge threshold","text":"<ul> <li>Get     <pre><code>var edgeThreshold = pipelineInstance.edgeThreshold;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.edgeThreshold = edgeThreshold;\n</code></pre>     or     <pre><code>pipelineInstance.setEdgeThreshold(value);\n</code></pre><ul> <li>Set <code>1.1</code> (or any number larger then <code>1</code>) to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#hue-levels","title":"Hue levels","text":"<ul> <li>Get     <pre><code>var hueLevels = pipelineInstance.hueLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.hueLevels = hueLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setHueLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#saturation-levels","title":"Saturation levels","text":"<ul> <li>Get     <pre><code>var satLevels = pipelineInstance.satLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.satLevels = satLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setSatLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#value-levels","title":"Value levels","text":"<ul> <li>Get     <pre><code>var valLevels = pipelineInstance.valLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.valLevels = valLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setValLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#edge-color","title":"Edge color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.edgeColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setEdgeColor(value);\n</code></pre>     or     <pre><code>pipelineInstance.edgeColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-warp-transition/","title":"Warp","text":""},{"location":"shader-warp-transition/#introduction","title":"Introduction","text":"<p>Warp transition post processing filter.</p> <ul> <li>Author: Richard Davey</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-warp-transition/#usage","title":"Usage","text":"<p>Reference</p>"},{"location":"shader-warp-transition/#install-plugin","title":"Install plugin","text":""},{"location":"shader-warp-transition/#import-class","title":"Import class","text":"<ul> <li>Get minify file from github</li> <li>Add to game config     <pre><code>import { WarpPostFX } from './dist/WarpPostFX.js';  // Path to your minify file\nvar config = {\n// ...\npipeline: { WarpPostFX }\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(WarpPostFX);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(WarpPostFX);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp-transition/#remove-effect","title":"Remove effect","text":"<pre><code>gameObject.removePostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre>"},{"location":"shader-warp-transition/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = gameObject.getPostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = camera.getPostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#set-texture","title":"Set texture","text":"<pre><code>pipelineInstance.setTexture(textureKey, resizeMode);\n</code></pre> <ul> <li><code>textureKey</code> : The key of the texture to use.</li> <li><code>resizeMode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.   </li> </ul> </li> </ul>"},{"location":"shader-warp-transition/#progress","title":"Progress","text":"<ul> <li>Get     <pre><code>var progress = pipelineInstance.progress;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setProgress(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.progress = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#direction","title":"Direction","text":"<ul> <li>Get     <pre><code>var direction = pipelineInstance.direction;  // {x, y}\n</code></pre><ul> <li>Default value is <code>{x:-1, y:1}</code></li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setDirection(x, y);  // x, y : 1, or -1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#smoothness","title":"Smoothness","text":"<ul> <li>Get     <pre><code>var smoothness = pipelineInstance.smoothness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setSmoothness(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.smoothness = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#resize-mode","title":"Resize mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.resizeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setResizeMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.    </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-warp/","title":"Warp","text":""},{"location":"shader-warp/#introduction","title":"Introduction","text":"<p>Warp post processing filter. </p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-warp/#live-demos","title":"Live demos","text":"<ul> <li>Warp</li> </ul>"},{"location":"shader-warp/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-warp/#install-plugin","title":"Install plugin","text":""},{"location":"shader-warp/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexwarppipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwarppipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexwarppipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexwarppipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WarpPipelinePlugin from 'phaser3-rex-plugins/plugins/warppipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWarpPipeline',\nplugin: WarpPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import WarpPostFx from 'phaser3-rex-plugins/plugins/warppipeline.js';\nvar config = {\n// ...\npipeline: [WarpPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(WarpPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(WarpPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#apply-effect","title":"Apply effect","text":"<ul> <li> <p>Apply effect to game object. A game object only can add 1 warp effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(gameObject, {\n// frequencyX: 10,\n// frequencyY: 10,\n\n// amplitudeX: 10,\n// amplitudeY: 10,\n\n// speedX: 0,\n// speedY: 0,\n// speedEnable: \n\n// name: 'rexWarpPostFx'\n});\n</code></pre></p> <ul> <li><code>frequencyX</code>, <code>frequencyY</code> : Horizontal/vertical frequency, in pixel.</li> <li><code>amplitudeX</code>, <code>amplitudeY</code> : Horizontal/vertical amplitude, in pixel.</li> <li><code>speedX</code>, <code>speedY</code> : Horizontal/vertical speed.</li> <li><code>speedEnable</code><ul> <li><code>true</code> : Enable speed. Default value if <code>speedX</code> or <code>speedY</code> is not <code>0</code>.</li> <li><code>false</code> : Disable speed. Default value if <code>speedX</code> and <code>speedY</code> are both <code>0</code>.</li> </ul> </li> </ul> </li> <li> <p>Apply effect to camera. A camera only can add 1 warp effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(camera, config);\n</code></pre></p> </li> </ul>"},{"location":"shader-warp/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexWarpPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexWarpPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-warp/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexWarpPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexWarpPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-warp/#frequency","title":"Frequency","text":"<p>Horizontal/vertical frequency, in pixel.</p> <ul> <li>Get     <pre><code>var frequencyX = pipelineInstance.frequencyX;\nvar frequencyY = pipelineInstance.frequencyY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.frequencyX = frequencyX;\npipelineInstance.frequencyY = frequencyY;\n// pipelineInstance.frequencyX += value;\n// pipelineInstance.frequencyY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setFrequencyX(frequencyX);\npipelineInstance.setFrequencyY(frequencyY);\npipelineInstance.setFrequency(frequencyX, frequencyY);\n</code></pre></li> </ul>"},{"location":"shader-warp/#amplitude","title":"Amplitude","text":"<p>Horizontal/vertical amplitude, in pixel.</p> <ul> <li>Get     <pre><code>var amplitudeX = pipelineInstance.amplitudeX;\nvar amplitudeY = pipelineInstance.amplitudeY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.amplitudeX = amplitudeX;\npipelineInstance.amplitudeY = amplitudeY;\n// pipelineInstance.amplitudeX += value;\n// pipelineInstance.amplitudeY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setAmplitudeX(amplitudeX);\npipelineInstance.setAmplitudeY(amplitudeY);\npipelineInstance.setAmplitude(amplitudeX, amplitudeY);\n</code></pre></li> </ul>"},{"location":"shader-warp/#speed","title":"Speed","text":"<p>Horizontal/vertical speed.</p> <ul> <li>Eanble/resume     <pre><code>pipelineInstance.setSpeedEnable();\n</code></pre></li> <li>Pause     <pre><code>pipelineInstance.setSpeedEnable(false);\n</code></pre></li> <li>Get     <pre><code>var speedX = pipelineInstance.speedX;\nvar speedY = pipelineInstance.speedY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.speedX = speedX;\npipelineInstance.speedY = speedY;\n// pipelineInstance.speedX += value;\n// pipelineInstance.speedY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setSpeedX(speedX);\npipelineInstance.setSpeedY(speedY);\npipelineInstance.setSpeed(speedX, speedY);\n</code></pre></li> </ul>"},{"location":"shader/","title":"Shader","text":""},{"location":"shader/#introduction","title":"Introduction","text":"<p>A quad with its own shader, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shader/#usage","title":"Usage","text":""},{"location":"shader/#load-glsl","title":"Load GLSL","text":"<pre><code>scene.load.glsl(key, url);\n</code></pre> <p>Reference: load glsl</p>"},{"location":"shader/#add-shader-object","title":"Add shader object","text":"<pre><code>var shader = scene.add.shader(key, x, y, width, height, textures);\n</code></pre> <ul> <li><code>key</code> : The key of the shader to use from the shader cache, or a BaseShader instance.</li> <li><code>x</code>, <code>y</code> : Position.</li> <li><code>width</code>, <code>height</code> : Size.</li> <li><code>textures</code> : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms.</li> </ul> <p>Note</p> <p>Lots of shaders expect textures to be power-of-two sized.</p> <p>Add shader object from JSON</p> <pre><code>var shader = scene.make.shader({\nx: 0,\ny: 0,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> : The key of the shader to use from the shader cache, or a BaseShader instance.<ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShader extends Phaser.GameObjects.Shader {\nconstructor(scene, key, x, y, width, height, textures) {\nsuper(scene, key, x, y, width, height, textures);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var shader = new MyShader(scene, key, x, y, width, height, textures);\n</code></pre></li> </ul>"},{"location":"shader/#sampler2d-uniform","title":"Sampler2D uniform","text":"<ul> <li>Default uniform mappings :<ul> <li><code>resolution</code> (2f) - Set to the size of this shader.<ul> <li><code>uniform vec2 resolution;</code> in GLSL.</li> </ul> </li> <li><code>time</code> (1f) - The elapsed game time, in seconds.<ul> <li><code>uniform float time;</code> in GLSL.</li> </ul> </li> <li><code>mouse</code> (2f) - If a pointer has been bound (with <code>setPointer</code>), this uniform contains its position each frame.<ul> <li><code>uniform vec2 mouse;</code> in GLSL.</li> </ul> </li> <li><code>date</code> (4fv) - A vec4 containing the year, month, day and time in seconds.<ul> <li><code>uniform vec4 date;</code> in GLSL.</li> </ul> </li> <li><code>sampleRate</code> (1f) - Sound sample rate. 44100 by default.<ul> <li><code>uniform float sampleRate;</code> in GLSL.</li> </ul> </li> <li><code>iChannel0...3</code> (sampler2D) - Input channels 0 to 3. <code>null</code> by default.     <code>uniform sampler2D iChannel0;</code> in GLSL.</li> </ul> </li> <li>Get uniform object     <pre><code>var uniform = shader.getUniform(key);\n</code></pre><ul> <li>Texture key     <pre><code>var textureKey = uniform.textureKey;\n</code></pre></li> <li>Get texture key of <code>iChannel0</code>, <code>iChannel1</code>, <code>iChannel2</code>, <code>iChannel3</code> sampler2D uniform.     <pre><code>var textureKey = shader.getUniform('iChannel0').textureKey;\nvar textureKey = shader.getUniform('iChannel1').textureKey;\nvar textureKey = shader.getUniform('iChannel2').textureKey;\nvar textureKey = shader.getUniform('iChannel3').textureKey;\n</code></pre></li> </ul> </li> <li>Sets a property of a uniform already present on this shader.     <pre><code>shader.setUniform(key, value);\n</code></pre><ul> <li><code>key</code> : The key of the uniform to modify. Use dots for deep properties, i.e. <code>resolution.value.x</code>.</li> </ul> </li> <li>Sets a sampler2D uniform from texture manager.     <pre><code>shader.setChannel0(textureKey);\nshader.setChannel1(textureKey);\nshader.setChannel2(textureKey);\nshader.setChannel3(textureKey);\n// shader.setChannel0(textureKey, textureData);\n// shader.setChannel1(textureKey, textureData);\n// shader.setChannel2(textureKey, textureData);\n// shader.setChannel3(textureKey, textureData);\n</code></pre>     or     <pre><code>shader.setSampler2D(uniformKey, textureKey, textureIndex);\n// shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData);\n</code></pre><ul> <li><code>uniformKey</code> : <code>'iChannel0'</code>, <code>'iChannel1'</code>, <code>'iChannel2'</code>, or <code>'iChannel3'</code>.</li> <li><code>textureIndex</code> : <code>0</code>(for iChannel0), <code>1</code>(for iChannel1), <code>2</code>(for iChannel2), <code>3</code>(for iChannel3).</li> <li><code>textureData</code> : Additional texture data.</li> <li><code>textureKey</code>: Key from the Texture Manager cache. It cannot be a single frame from a texture, only the full image. Lots of shaders expect textures to be power-of-two sized.</li> </ul> </li> <li>Sets a sampler2D uniform from a webgl texture.     <pre><code>shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex);\n// shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData);\n</code></pre><ul> <li><code>uniformKey</code> : <code>'iChannel0'</code>, <code>'iChannel1'</code>, <code>'iChannel2'</code>, or <code>'iChannel3'</code>.</li> <li><code>width</code>, <code>height</code> : The width, height of the texture.</li> <li><code>textureIndex</code> : <code>0</code>(for iChannel0), <code>1</code>(for iChannel1), <code>2</code>(for iChannel2), <code>3</code>(for iChannel3).</li> <li><code>textureData</code> : Additional texture data.</li> </ul> </li> </ul>"},{"location":"shader/#other-uniforms","title":"Other uniforms","text":"<ul> <li><code>mouse</code>, a pointer parameter.<ul> <li>Get     <pre><code>var pointer = shader.pointer;\n</code></pre></li> <li>Set     <pre><code>shader.setPointer(pointer);\n</code></pre><ul> <li><code>pointer</code> : <code>{x, y}</code></li> </ul> </li> </ul> </li> <li><code>time</code>, the elapsed game time, in seconds.<ul> <li>Get     <pre><code>var time = shader.getUniform('time').value;\n// var time = shader.uniforms.time.value\n</code></pre></li> <li>Set     <pre><code>shader.setUniform('time.value', time);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader/#output","title":"Output","text":"<ul> <li>Render to Display list, by default.</li> <li>Redirect render result to internal webgl texture.     <pre><code>shader.setRenderToTexture();\nvar texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to internal webgl texture, and sample2D from buffer.     <pre><code>shader.setRenderToTexture(undefined, true);\nvar texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to texture manager, for texture-based game object.     <pre><code>shader.setRenderToTexture(textureKey);\n// var texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to texture manager, and Sample2D from buffer.     <pre><code>shader.setRenderToTexture(textureKey, true);\n// var texture = shader.glTexture;\n</code></pre></li> </ul>"},{"location":"shader/#texture-routing","title":"Texture routing","text":"<pre><code>graph TB\n\nTextureManagerIn[\"Texture manager\"] --&gt; |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:&lt;br&gt;iChannel0&lt;br&gt;iChannel1&lt;br&gt;iChannel2&lt;br&gt;iChannel3\"]\nSampler2D--&gt; Shader[\"shader&lt;br&gt;Shader game object\"]\nShader --&gt; DisplayList[\"Display list\"]\nShader --&gt; |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"]\nInternalTexture -.-&gt; |\"Texture key\"| TextureManagerOut[\"Texture manager\"]\nTextureManagerOut -.-&gt; GameObject[\"Image game object\"]\nGameObject -.-&gt; DisplayList\n\nWebGLTexture[\"WebGl texture&lt;br&gt;gameObject.glTexture\"] --&gt; |\"shader.setSampler2DBuffer()\"| Sampler2D\nInternalTexture --&gt; WebGLTexture\n\nsubgraph Output\nDisplayList\nGameObject\nTextureManagerOut\nend\n\nsubgraph Input\nTextureManagerIn\nWebGLTexture\nend</code></pre>"},{"location":"shader/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shader/#baseshader","title":"BaseShader","text":"<pre><code>var baseShader = new Phaser.Display.BaseShader(key, fragmentSrc, vertexSrc, uniforms);\n</code></pre> <ul> <li><code>key</code> : The key of this shader</li> <li><code>fragmentSrc</code> : The fragment source for the shader.</li> <li><code>vertexSrc</code> : The vertex source for the shader.<ul> <li><code>undefined</code>, or <code>''</code> : Use default vertex source.</li> </ul> </li> <li><code>uniforms</code> : Optional object defining the uniforms the shader uses.     <pre><code>{\nuniformName : {type: uniformType, value: initValue},\n...\n}\n</code></pre><ul> <li><code>uniformName</code> : Uniform name in fragment source.</li> <li><code>uniformType</code>, <code>initValue</code> : Type and initial value of uniform.<ul> <li><code>'1f'</code> : <code>initValue</code> is a single float value. <ul> <li>Example : <code>time: { type: '1f', value: 0 }</code></li> </ul> </li> <li><code>'2f'</code> : <code>initValue</code> is float numbers <code>{x, y}</code>.<ul> <li>Example : <code>resolution: { type: '2f', value: { x: this.width, y: this.height } }</code></li> </ul> </li> <li><code>'3f'</code> : <code>initValue</code> is float numbers <code>{x, y, z}</code>.<ul> <li>Example : <code>color: { type: '3f', value: {x: 0, y: 0, z: 0}}</code></li> </ul> </li> <li><code>'4f'</code> : <code>initValue</code> is float numbers <code>{x, y, z, w}</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shake-position/","title":"Shake position","text":""},{"location":"shake-position/#introduction","title":"Introduction","text":"<p>Shake position of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"shake-position/#live-demos","title":"Live demos","text":"<ul> <li>Shake position</li> <li>Shake position on mutliple game objects</li> </ul>"},{"location":"shake-position/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shake-position/#install-plugin","title":"Install plugin","text":""},{"location":"shake-position/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshakepositionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshakepositionplugin.min.js', true);\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = scene.plugins.get('rexshakepositionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShakePositionPlugin from 'phaser3-rex-plugins/plugins/shakeposition-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShakePosition',\nplugin: ShakePositionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = scene.plugins.get('rexShakePosition').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ShakePosition from 'phaser3-rex-plugins/plugins/shakeposition.js';\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = new ShakePosition(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#create-instance","title":"Create instance","text":"<pre><code>var shake = scene.plugins.get('rexShake').add(gameObject, {\n// mode: 1, // 0|'effect'|1|'behavior'\n// duration: 500,\n// magnitude: 10,\n// magnitudeMode: 1, // 0|'constant'|1|'decay'\n// axis: 0,      //0|'both'|'h&amp;v'|1|'horizontal'|'h'|2|'vertical'|'v'\n});\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'effect'</code>, or <code>0</code> : Shake position in <code>'poststep'</code> game event, and restore in <code>'prestep'</code> game event.</li> <li><code>'behavior'</code>, or <code>1</code> : Shake position in <code>'preupdate'</code> scene event.</li> </ul> </li> <li><code>duration</code> : Duration of shaking, in millisecond.</li> <li><code>magnitude</code> : The strength of the shake, in pixels.</li> <li><code>magnitudeMode</code> :<ul> <li><code>'constant'</code>, or <code>0</code> : Constant strength of the shake.</li> <li><code>'decay'</code>, or <code>1</code> : Decay the strength of the shake.</li> </ul> </li> <li><code>axis</code> :<ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Changing position on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Changing position on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Changing position on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"shake-position/#start-shaking","title":"Start shaking","text":"<pre><code>shake.shake();\n// shake.shake(duration, magnitude);\n</code></pre> <p>or</p> <pre><code>shake.shake({\nduration: 500,\nmagnitude: 10\n});\n</code></pre>"},{"location":"shake-position/#stop-shakeing","title":"Stop shakeing","text":"<pre><code>shake.stop();\n</code></pre>"},{"location":"shake-position/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>shake.setEnable();\n</code></pre>     or     <pre><code>shake.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>shake.setEnable(false);\n</code></pre>     or     <pre><code>shake.enable = false;\n</code></pre></li> </ul>"},{"location":"shake-position/#set-updating-mode","title":"Set updating mode","text":"<pre><code>shake.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'effect'</code>, or <code>0</code> : Shake position in post-update stage, and restore in pre-update stage.</li> <li><code>'behavior'</code>, or <code>1</code> : Shake position in pre-update stage.</li> </ul> </li> </ul>"},{"location":"shake-position/#set-duration","title":"Set duration","text":"<pre><code>shake.setDuration(duration);\n// shake.duration = duration;\n</code></pre>"},{"location":"shake-position/#set-magnitude","title":"Set magnitude","text":"<pre><code>shake.setMagnitude(magnitude);\nshake.magnitude = magnitude;\n</code></pre> <ul> <li><code>magnitude</code> : The strength of the shake, in pixels.</li> </ul>"},{"location":"shake-position/#set-magnitude-mode","title":"Set magnitude mode","text":"<pre><code>shake.setMagnitudeMode(magnitudeMode);\n// shake.magnitudeMode = magnitudeMode;\n</code></pre> <ul> <li><code>magnitudeMode</code> :<ul> <li><code>'constant'</code>, or <code>0</code> : Constant strength of the shake.</li> <li><code>'decay'</code>, or <code>1</code> : Decay the strength of the shake.</li> </ul> </li> </ul>"},{"location":"shake-position/#set-axis-mode","title":"Set axis mode","text":"<pre><code>shake.setAxisMode(axis);\n</code></pre> <ul> <li><code>axis</code> : <ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"shake-position/#events","title":"Events","text":"<ul> <li>On reached target     <pre><code>shake.on('complete', function(gameObject, shake){});\n</code></pre></li> </ul>"},{"location":"shake-position/#status","title":"Status","text":"<ul> <li>Is shakeing     <pre><code>var isRunning = shake.isRunning;\n</code></pre></li> </ul>"},{"location":"shape-arc/","title":"Arc","text":""},{"location":"shape-arc/#introduction","title":"Introduction","text":"<p>Arc shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-arc/#usage","title":"Usage","text":""},{"location":"shape-arc/#create-shape","title":"Create shape","text":"<pre><code>var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n// var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-arc/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyArc extends Phaser.GameObjects.Arc {\nconstructor(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor) {\nsuper(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var arc = new MyArc(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-arc/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = arc.fillColor;\nvar alpha = arc.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>arc.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>arc.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = arc.strokeColor;\n</code></pre></li> <li>Set     <pre><code>arc.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>arc.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>arc.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-arc/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = arc.alpha;\n</code></pre></li> <li>Set     <pre><code>arc.setAlpha(alpha);\n// arc.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-arc/#angle","title":"Angle","text":"<ul> <li>Start angle, in degrees.<ul> <li>Get     <pre><code>var startAngle = arc.startAngle;\n</code></pre></li> <li>Set     <pre><code>arc.setStartAngle(startAngle);\n// arc.setStartAngle(startAngle, anticlockwise);\n</code></pre>     or     <pre><code>arc.startAngle = startAngle;\n</code></pre></li> </ul> </li> <li>End angle, in degrees.<ul> <li>Get     <pre><code>var endAngle = arc.endAngle;\n</code></pre></li> <li>Set     <pre><code>arc.seEndAngle(endAngle);\n</code></pre>     or     <pre><code>arc.endAngle = endAngle;\n</code></pre></li> </ul> </li> <li>Anticlockwise (<code>true</code>, or <code>false</code>)<ul> <li>Get     <pre><code>var anticlockwise = arc.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>arc.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-arc/#radius","title":"Radius","text":"<ul> <li>Radius<ul> <li>Get     <pre><code>var radius = arc.radius;\n</code></pre></li> <li>Set     <pre><code>arc.setRadius(radius);\n</code></pre>     or     <pre><code>arc.radius = radius;\n</code></pre></li> </ul> </li> <li>Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is <code>0.01</code><ul> <li>Get     <pre><code>var iterations = arc.iterations;\n</code></pre></li> <li>Set     <pre><code>arc.iterations = iterations;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-arc/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = arc.displayWidth;\nvar height = arc.displayHeight;\n</code></pre></li> <li>Set     <pre><code>arc.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>arc.displayWidth = width;\narc.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-arc/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-checkbox/","title":"Checkbox","text":""},{"location":"shape-checkbox/#introduction","title":"Introduction","text":"<p>Checkbox input with drawing checker path animation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-checkbox/#live-demos","title":"Live demos","text":"<ul> <li>Checkbox</li> </ul>"},{"location":"shape-checkbox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-checkbox/#install-plugin","title":"Install plugin","text":""},{"location":"shape-checkbox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcheckboxplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexcheckboxplugin.min.js', true);\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>var checkbox = scene.add.rexCheckboxShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CheckboxPlugin from 'phaser3-rex-plugins/plugins/checkbox-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCheckboxPlugin',\nplugin: CheckboxPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>var checkbox = scene.add.rexCheckboxShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Checkbox from 'phaser3-rex-plugins/plugins/checkbox.js';\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = new Checkbox(scene, x, y, width, height, color, config);\nscene.add.existing(checkbox);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>// import CheckboxShape from 'phaser3-rex-plugins/plugins/checkboxshape.js';\nvar checkbox = new CheckboxShape(scene, x, y, width, height, color, config);\nscene.add.existing(checkbox);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#create-checkbox-input","title":"Create checkbox input","text":"<pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre> <p>or</p> <pre><code>var checkbox = scene.add.rexCheckbox({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ncolor: 0x005cb2,\nboxFillAlpha: 1,\nuncheckedColor: null,\nuncheckedBoxFillAlpha: 1,\n\nboxLineWidth: 4,\nboxStrokeColor: 0x005cb2,\nboxStrokeAlpha: 1,\nuncheckedBoxStrokeColor: 0x005cb2,\nuncheckedBoxStrokeAlpha: 1,\n\ncheckerColor: 0xffffff,\ncheckerAlpha: 1,\n\n// boxSize: 1,\n// checkerSize: 1,\n\ncircleBox: false,\n\nanimationDuration: 150,\n\nchecked: false, // or value: false,\n\nclick: undefined,\n// click: {\n//     mode: 1,            // 0|'press'|1|'release'\n//     clickInterval: 100  // ms\n//     threshold: undefined\n// },\nreadOnly: false,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of checkbox.</li> <li>Box fill style<ul> <li><code>color</code>, <code>boxFillAlpha</code> : Box color and alpha of checked        </li> <li><code>uncheckedColor</code>, <code>uncheckedBoxFillAlpha</code> : Box color and alpha of unchecked</li> </ul> </li> <li>Box stroke style<ul> <li><code>boxLineWidth</code>, <code>boxStrokeColor</code>, <code>boxStrokeAlpha</code> : Box stroke color and alpha of checked.</li> <li><code>uncheckedBoxStrokeColor</code>, <code>uncheckedBoxStrokeAlpha</code> : Box stroke color and alpha of unchecked.</li> </ul> </li> <li>Checker style<ul> <li><code>checkerColor</code>, <code>checkerAlpha</code> : Checker color and alpha</li> </ul> </li> <li><code>circleBox</code> : Shape of box<ul> <li><code>false</code> : Rectangle shape box. Default behavior.</li> <li><code>true</code> : Circle shape box    </li> </ul> </li> <li><code>boxSize</code>, <code>checkerSize</code> : Size ratio of box, and checker. Default value is <code>1</code>.</li> <li><code>animationDuration</code> : Duration of drawing path of checker.</li> <li><code>checked</code> : Initial value of checked.</li> <li><code>click</code> : Configuration of click input<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>click.threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior. </li> </ul> </li> </ul> </li> <li><code>readOnly</code> : Set <code>ture</code> to disable input.</li> </ul>"},{"location":"shape-checkbox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCheckbox extends RexPlugins.GameObjects.Checkbox {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var checkbox = new MyCheckbox(scene, x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#check","title":"Check","text":"<ul> <li>Get     <pre><code>var checked = checkbox.checked;\n// var checked = checkbox.value;\n</code></pre></li> <li>Set<ul> <li>Check     <pre><code>checkbox.setChecked();\n// checkbox.setChecked(true);\n// checkbox.setValue(true);\n</code></pre>     or     <pre><code>checkbox.checked = true;\n// checkbox.value = true;\n</code></pre></li> <li>Uncheck     <pre><code>checkbox.setChecked(false);\n// checkbox.setValue(false);\n</code></pre>     or     <pre><code>checkbox.checked = false;\n// checkbox.value = false;\n</code></pre></li> <li>Toggle     <pre><code>checkbox.toggleChecked();\n// checkbox.setValue(!checkbox.checked);\n</code></pre>     or     <pre><code>checkbox.checked = !checkbox.checked;\n// checkbox.value = !checkbox.value;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-checkbox/#read-only","title":"Read only","text":"<ul> <li>Get     <pre><code>var readOnly = checkbox.readOnly;\n</code></pre></li> <li>Set     <pre><code>checkbox.setReadOnly();\n// checkbox.setReadOnly(true);\n</code></pre>     or     <pre><code>checkbox.readOnly = true;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#box-fill-style","title":"Box fill style","text":"<ul> <li>Get     <pre><code>var color = checkbox.boxFillColor;\nvar alpha = checkbox.boxFillAlpha;\n</code></pre> <pre><code>var color = checkbox.uncheckedBoxFillColor;\nvar alpha = checkbox.uncheckedBoxFillAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setBoxFillStyle(color, alpha);\n// checkbox.boxFillColor = color;\n// checkbox.boxFillAlpha = alpha;\n</code></pre> <pre><code>checkbox.setUncheckedBoxFillStyle(color, alpha);\n// checkbox.uncheckedBoxFillColor = color;\n// checkbox.uncheckedBoxFillAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#box-stroke-style","title":"Box stroke style","text":"<ul> <li>Get     <pre><code>var lineWidth = checkbox.boxLineWidth;\nvar color = checkbox.boxStrokeColor;\nvar alpah = checkbox.boxStrokeAlpha;\n</code></pre> <pre><code>var lineWidth = checkbox.uncheckedBoxLineWidth;\nvar color = checkbox.uncheckedBoxStrokeColor;\nvar alpah = checkbox.uncheckedBoxStrokeAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setBoxStrokeStyle(lineWidth, color, alpha);\n// checkbox.boxLineWidth = lineWidth;\n// checkbox.boxStrokeColor = color;\n// checkbox.boxStrokeAlpha = alpha;\n</code></pre> <pre><code>checkbox.setUncheckedBoxStrokeStyle(lineWidth, color, alpha);\n// checkbox.uncheckedBoxLineWidth = lineWidth;\n// checkbox.uncheckedBoxStrokeColor = color;\n// checkbox.uncheckedBoxStrokeAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#checker-style","title":"Checker style","text":"<ul> <li>Get     <pre><code>var color = checkbox.checkerColor;\nvar alpha = checkbox.checkAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setCheckerStyle(color, alpha);\n// checkbox.checkerColor = color;\n// checkbox.checkAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#checker-animation","title":"Checker animation","text":"<ul> <li>Duration<ul> <li>Get     <pre><code>var duration = checkbox.checkerAnimDuration;\n</code></pre></li> <li>Set     <pre><code>checkbox.setCheckerAnimDuration(duration);\ncheckbox.checkerAnimDuration = duration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-checkbox/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = checkbox.width;\nvar height = checkbox.height;\n</code></pre></li> <li>Set     <pre><code>checkbox.setSize(width, height);\n</code></pre>     or     <pre><code>checkbox.width = width;\ncheckbox.height = height;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = checkbox.displayWidth;\nvar height = checkbox.displayHeight;\n</code></pre></li> <li>Set     <pre><code>checkbox.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>checkbox.displayWidth = width;\ncheckbox.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#size-ratio","title":"Size ratio","text":"<ul> <li>Get     <pre><code>var boxSize = checkbox.boxSize;\nvar checkerSize =checkbox.checkerSize;\n</code></pre><ul> <li><code>boxSize</code>, <code>checkerSize</code> : Size ratio of box, and checker</li> </ul> </li> <li>Set     <pre><code>checkbox.setBoxSize(sizeRatio);\ncheckbox.setCheckerSize(sizeRatio);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#events","title":"Events","text":"<ul> <li>On value change     <pre><code>checkbox.on('valuechange', function(value) {\n// value: checked\n})\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-circle/","title":"Circle","text":""},{"location":"shape-circle/#introduction","title":"Introduction","text":"<p>Circle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-circle/#usage","title":"Usage","text":""},{"location":"shape-circle/#create-shape-object","title":"Create shape object","text":"<pre><code>var circle = scene.add.circle(x, y, radius, fillColor);\n// var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-circle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircle extends Phaser.GameObjects.Arc {\nconstructor(scene, x, y, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, radius, 0, 360, false, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circle = new MyCircle(scene, x, y, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-circle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = circle.fillColor;\nvar alpha = circle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>circle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>circle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = circle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>circle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>circle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>circle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-circle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = circle.alpha;\n</code></pre></li> <li>Set     <pre><code>circle.setAlpha(alpha);\n// circle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-circle/#radius","title":"Radius","text":"<ul> <li>Radius<ul> <li>Get     <pre><code>var radius = circle.radius;\n</code></pre></li> <li>Set     <pre><code>circle.setRadius(radius);\n</code></pre>     or     <pre><code>circle.radius = radius;\n</code></pre></li> </ul> </li> <li>Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is <code>0.01</code><ul> <li>Get     <pre><code>var iterations = circle.iterations;\n</code></pre></li> <li>Set     <pre><code>circle.iterations = iterations;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = circle.displayWidth;\nvar height = circle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>circle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>circle.displayWidth = width;\ncircle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-circle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-circularprogress/","title":"Circular progres","text":""},{"location":"shape-circularprogress/#introduction","title":"Introduction","text":"<p>Circular progress bar shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-circularprogress/#live-demos","title":"Live demos","text":"<ul> <li>Circular-progress</li> </ul>"},{"location":"shape-circularprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-circularprogress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-circularprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcircularprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcircularprogressplugin.min.js', true);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircularProgressPlugin from 'phaser3-rex-plugins/plugins/circularprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressPlugin',\nplugin: CircularProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircularProgress from 'phaser3-rex-plugins/plugins/circularprogress.js';\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = new CircularProgress(scene, x, y, radius, color, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressPlugin',\nplugin: CircularProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-circularprogress/#create-instance","title":"Create instance","text":"<pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, barColor, value, {    trackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var circularProgress = scene.add.rexCircularProgress({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},  });\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>radius</code> : Radius of this circle. Size will be <code>(radius*2, radius*2)</code>.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, circularProgress) {\n}\n</code></pre></li> </ul> <p>Add circular-progress from JSON</p> <pre><code>var circularProgress = scene.make.rexCircularProgress({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},  add: true\n});\n</code></pre>"},{"location":"shape-circularprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircularProgress extends CircularProgress {\nconstructor(scene, x, y, radius, color, value, config) {\nsuper(scene, x, y, radius, color, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circularProgress = new MyCircularProgress(scene, x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = circularProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = circularProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = circularProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>circularProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>circularProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>circularProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>circularProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>circularProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>circularProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>circularProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = circularProgress.radius;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setRadius(radius);\n// circularProgress.radius = radius;\n</code></pre><ul> <li>Also resize this game object to <code>(radius*2, radius*2)</code></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#circular-track","title":"Circular track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = circularProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setTrackColor(trackColor);\n// circularProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#circular-bar","title":"Circular bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = circularProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setBarColor(barColor);\n// circularProgress.barColor = barColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> <li>Start angle<ul> <li>Get     <pre><code>var startAngle = circularProgress.startAngle;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setStartAngle(startAngle);\ncircularProgress.startAngle = startAngle;\n</code></pre><ul> <li><code>startAngle</code> : Start angle of circular bar, in radians.</li> </ul> </li> </ul> </li> <li>Anticlockwise<ul> <li>Get     <pre><code>var anticlockwise = circularProgress.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAnticlockwise(anticlockwise);\n// circularProgress.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#center-circle","title":"Center circle","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var centerColor = circularProgress.centerColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setCenterColor(centerColor);\n// circularProgress.centerColor = centerColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>circularProgress.on('valuechange', function(newValue, oldValue, circularProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = circularProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAlpha(alpha);\n// circularProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#compare-with-circular-progress-canvas","title":"Compare with Circular-progress canvas","text":"<ul> <li>Circular-progress canvas creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Circular-progress canvas can draw text directly, circular progress shape can't draw any text.</li> </ul>"},{"location":"shape-cover/","title":"Cover","text":""},{"location":"shape-cover/#introduction","title":"Introduction","text":"<p>Rectangle shape covered full window, and block all touch events.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-cover/#live-demos","title":"Live demos","text":"<ul> <li>Cover</li> </ul>"},{"location":"shape-cover/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-cover/#install-plugin","title":"Install plugin","text":""},{"location":"shape-cover/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcoverplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcoverplugin.min.js', true);\n</code></pre></li> <li>Add cover object     <pre><code>var cover = scene.add.rexCover(config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CoverPlugin from 'phaser3-rex-plugins/plugins/cover-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCoverPlugin',\nplugin: CoverPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add cover object     <pre><code>var cover = scene.add.rexCover(config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Cover from 'phaser3-rex-plugins/plugins/cover.js';\n</code></pre></li> <li>Add cover object     <pre><code>var cover = new Cover(scene, config);\nscene.add.existing(cover);\n</code></pre></li> </ul>"},{"location":"shape-cover/#create-cover-object","title":"Create cover object","text":"<pre><code>var cover = scene.add.rexCover({\n// color: 0x0,\n// alpha: 0.8\n});\n</code></pre> <ul> <li><code>color</code> : Color of cover.</li> <li><code>alpha</code> : Alpha value of cover.</li> </ul>"},{"location":"shape-cover/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCover extends RexPlugins.GameObjects.Cover {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var cover = new MyCover(scene, config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#color","title":"Color","text":"<ul> <li>Tint<ul> <li>Get     <pre><code>var tint = cover.tint;\n</code></pre></li> <li>Set     <pre><code>cover.tint = tint;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = cover.alpha;\n</code></pre></li> <li>Set     <pre><code>cover.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Fill color<ul> <li>Get     <pre><code>var color = cover.fillColor;\nvar alpha = cover.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>cover.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>cover.setFillStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-cover/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-curve/","title":"Curve","text":""},{"location":"shape-curve/#introduction","title":"Introduction","text":"<p>Curve shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-curve/#usage","title":"Usage","text":""},{"location":"shape-curve/#create-shape-object","title":"Create shape object","text":"<pre><code>var curve = scene.add.curve(x, y, path, fillColor);\n// var curve = scene.add.curve(x, y, path, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>path</code> : Path object.</li> </ul>"},{"location":"shape-curve/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCurve extends Phaser.GameObjects.Curve {\nconstructor(scene, x, y, path, fillColor, fillAlpha) {\nsuper(scene, x, y, path, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var curve = new MyCurve(scene, x, y, path, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-curve/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = curve.fillColor;\nvar alpha = curve.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>curve.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>curve.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = curve.strokeColor;\n</code></pre></li> <li>Set     <pre><code>curve.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>curve.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>curve.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-curve/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = curve.alpha;\n</code></pre></li> <li>Set     <pre><code>curve.setAlpha(alpha);\n// curve.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-curve/#smoothness","title":"Smoothness","text":"<p>The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered.</p> <p><pre><code>curve.setSmoothness(smoothness);\n</code></pre> or <pre><code>curve.smoothness = smoothness;\n</code></pre></p>"},{"location":"shape-curve/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = curve.displayWidth;\nvar height = curve.displayHeight;\n</code></pre></li> <li>Set     <pre><code>curve.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>curve.displayWidth = width;\ncurve.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-curve/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-custom-progress/","title":"Custom progress","text":""},{"location":"shape-custom-progress/#introduction","title":"Introduction","text":"<p>Custom progress bar based on custom-shapes.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-custom-progress/#live-demos","title":"Live demos","text":"<ul> <li>React-circle-progress-bar</li> <li>Round rectangle</li> <li>Orb</li> <li>Trapezoid Mask</li> <li>Round rectangles mask</li> <li>Slash effect with rexUI</li> <li>Path segment animation</li> </ul>"},{"location":"shape-custom-progress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-custom-progress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-custom-progress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcustomprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcustomprogressplugin.min.js', true);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CustomProgressPlugin from 'phaser3-rex-plugins/plugins/customprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCustomProgressPlugin',\nplugin: CustomProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CustomProgress from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = new CustomProgress(scene, x, y, width, height, config);\nscene.add.existing(customProgress);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#add-custom-shapes-object","title":"Add custom shapes object","text":"<pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, {\n// type: 'rexCustomProgress',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or</p> <pre><code>var customProgress = scene.add.rexCustomProgress({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// type: 'rexCustomProgress',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\n\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>create</code> : Callback to create shapes<ul> <li>An array of object with <code>name</code> and <code>type</code> <pre><code>{ name: name0, type: shapeType }\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> </ul> </li> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <code>arc</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>rectangle</code>, <code>triangle</code></li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This custom shapes game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom custom shapes.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when refresh     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n\n// var fillColor = this.fillColor;\n// var fillAlpha = this.fillAlpha;\n// var lineWidth = this.lineWidth;\n// var strokeColor = this.strokeColor;\n// var strokeAlpha = this.strokeAlpha;\n// ...\n// var value = this.value;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed : <code>this.isSizeChanged</code></li> <li>Fill style : <code>this.fillColor</code>, <code>this.fillAlpha</code></li> <li>Stroke style : <code>this.strokeColor</code>, <code>this.strokeAlpha</code>, <code>this.lineWidth</code></li> <li>Current progress value : <code>this.value</code></li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, customProgress) {\n}\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#set-update-shape-callback","title":"Set update shape callback","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#size","title":"Size","text":"<p>See Size</p>"},{"location":"shape-custom-progress/#styles","title":"Styles","text":"<p>See Styles</p>"},{"location":"shape-custom-progress/#recreate-shapes","title":"Recreate shapes","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = customProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = customProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = customProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>customProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>customProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>customProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>customProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>customProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>customProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Set ease duration     <pre><code>customProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>customProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> <li>Ease value to     <pre><code>customProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>customProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Ease value repeat     <pre><code>customProgress.easeValueRepeat(from, to);  // from, to: 0 ~ 1\n// customProgress.easeValueRepeat(from, to, repeat, repeatDelay);\n</code></pre></li> <li>Stop ease     <pre><code>customProgress.stopEaseValue();\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#refresh","title":"Refresh","text":"<p>Redraw shapes when</p> <ul> <li>Value changed : <code>customProgress.setValue(newValue)</code>, <code>customProgress.easeValueTo(newValue)</code></li> <li>Resize : <code>customProgress.resize(width, height)</code></li> <li>Set dirty : <code>customProgress.setDirty()</code></li> <li>Set update shape callback : <code>customProgress.setUpdateShapesCallback(callback)</code></li> </ul>"},{"location":"shape-custom-progress/#shape-class","title":"Shape class","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>customProgress.on('valuechange', function(newValue, oldValue, customProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = customProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>customProgress.setAlpha(alpha);\n// customProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/","title":"Custom shapes","text":""},{"location":"shape-custom-shapes/#introduction","title":"Introduction","text":"<p>Custom shapes on shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-custom-shapes/#live-demos","title":"Live demos","text":"<ul> <li>Speech bubble</li> <li>Jigsaw</li> <li>Checkbox</li> <li>World to localXY</li> </ul>"},{"location":"shape-custom-shapes/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-custom-shapes/#install-plugin","title":"Install plugin","text":""},{"location":"shape-custom-shapes/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcustomshapesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcustomshapesplugin.min.js', true);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CustomShapesPlugin from 'phaser3-rex-plugins/plugins/customshapes-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCustomShapesPlugin',\nplugin: CustomShapesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CustomShapes from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = new CustomShapes(scene, x, y, width, height, config);\nscene.add.existing(customShapes);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#add-custom-shapes-object","title":"Add custom shapes object","text":"<pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, {\n// type: 'rexCustomShapes',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n});\n</code></pre> <p>or</p> <pre><code>var customShapes = scene.add.rexCustomShapes({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// type: 'rexCustomShapes',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>create</code> : Callback to create shapes<ul> <li>An array of object with <code>name</code> and <code>type</code> <pre><code>{ name: name0, type: shapeType }\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> </ul> </li> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <code>arc</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>rectangle</code>, <code>triangle</code></li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This custom shapes game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom custom shapes.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when refresh     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n\n// var fillColor = this.fillColor;\n// var fillAlpha = this.fillAlpha;\n// var lineWidth = this.lineWidth;\n// var strokeColor = this.strokeColor;\n// var strokeAlpha = this.strokeAlpha;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed : <code>this.isSizeChanged</code></li> <li>Fill style : <code>this.fillColor</code>, <code>this.fillAlpha</code></li> <li>Stroke style : <code>this.strokeColor</code>, <code>this.strokeAlpha</code>, <code>this.lineWidth</code></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#set-update-shape-callback","title":"Set update shape callback","text":"<pre><code>customShapes.setUpdateShapesCallback(callback);\n</code></pre> <ul> <li><code>callback</code> :     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed: <code>this.isSizeChanged</code></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#size","title":"Size","text":"<p><pre><code>customShapes.setSize(width, height);\n</code></pre> or <pre><code>customShapes.resize(width, height);\n</code></pre> or <pre><code>customShapes.width = width;\ncustomShapes.height = height;\n</code></pre></p> <p>Will set dirty and redraw shapes</p>"},{"location":"shape-custom-shapes/#styles","title":"Styles","text":"<ul> <li>Fill style     <pre><code>customShapes.setFillStyle(color, alpha);\n</code></pre>     or     <pre><code>customShapes.fillColor = color;\ncustomShapes.fillAlpha = alpha;\n</code></pre></li> <li>Stroke style     <pre><code>customShapes.setStrokeStyle(lineWidth, color, alpha);\n</code></pre>     or     <pre><code>customShapes.lineWidth = lineWidth;\ncustomShapes.strokeColor = color;\ncustomShapes.strokeAlpha = alpha;\n</code></pre></li> </ul> <p>Will set dirty and redraw shapes. Apply styles to shapes in update callback.</p>"},{"location":"shape-custom-shapes/#world-position-to-local-position","title":"World position to local position","text":"<pre><code>var localXY = customShapes.worldToLocalXY(worldX, worldY); // localXY: {x, y}\n</code></pre> <p>or</p> <pre><code>var out = customShapes.worldToLocalXY(worldX, worldY, camera, out);\n</code></pre>"},{"location":"shape-custom-shapes/#recreate-shapes","title":"Recreate shapes","text":"<ul> <li>Clear all shapes     <pre><code>customShapes.clear();\n</code></pre></li> <li>Add new shape     <pre><code>customShapes.createShape(shapeType, name);\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> <li><code>name</code> : A string name of this shape.</li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#refresh","title":"Refresh","text":"<p>Redraw shapes when</p> <ul> <li>Resize : <code>customShapes.resize(width, height)</code><ul> <li><code>customShapes.isSizeChanged</code> will also be <code>true</code>.</li> </ul> </li> <li>Set fill color : <code>customShapes.setFillStyle(color, alpha)</code></li> <li>Set stroke color : <code>customShapes.setStrokeStyle(lineWidth, color, alpha)</code></li> <li>Set dirty : <code>customShapes.setDirty()</code></li> <li>Set update shape callback : <code>customShapes.setUpdateShapesCallback(callback)</code></li> </ul>"},{"location":"shape-custom-shapes/#update-shape-data","title":"Update shape data","text":"<p>Shape data will be updated during rendering, or call <code>shape.updateData()</code> to update shape data before rendering.</p>"},{"location":"shape-custom-shapes/#shape-class","title":"Shape class","text":""},{"location":"shape-custom-shapes/#common-properties","title":"Common properties","text":"<ul> <li>Style<ul> <li>Get     <pre><code>var fillColor = shape.fillColor;\nvar fillAlpha = shape.fillAlpha;\nvar lineWidth = shape.lineWidth;\nvar strokeColor = shape.strokeColor;\nvar strokeAlpha = shape.strokeAlpha;\n</code></pre></li> <li>Set     <pre><code>shape.fillStyle(color, alpha);\nshape.lineStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>shape.fillStyle().lineStyle();\n</code></pre></li> </ul> </li> <li>Private data<ul> <li>Get     <pre><code>var data = shape.getData(key);\n// var data = shape.getData(key, defaultValue);\n</code></pre></li> <li>Set     <pre><code>shape.setData(key, value);\n</code></pre>     or     <pre><code>shape.setData({key:value, ...});\n</code></pre></li> <li>Inc     <pre><code>shape.incData(key, incValue);\n// shape.incData(key, incValue, defaultValue);\n</code></pre></li> <li>Mul     <pre><code>shape.mulData(key, mulValue);\n// shape.mulData(key, mulValue, defaultValue);\n</code></pre></li> <li>Clear     <pre><code>shape.clearData();\n</code></pre></li> </ul> </li> <li>Name<ul> <li>Get     <pre><code>var name = shape.name;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#line","title":"Line","text":"<ul> <li>End points<ul> <li>Get     <pre><code>var x0 = line.x0;\nvar y0 = line.y0;\nvar x1 = line.x1;\nvar y1 = line.y1;\n</code></pre></li> <li>Set     <pre><code>line.setP0(x, y);\nline.setP1(x, y);\n</code></pre>     or     <pre><code>line.x0 = x0;\nline.y0 = y0;\nline.x1 = x1;\nline.y1 = y1;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#lines","title":"Lines","text":""},{"location":"shape-custom-shapes/#create-path","title":"Create path","text":"<ul> <li>Start, clear points data     <pre><code>lines.start();\n</code></pre></li> <li>Start at position, clear points data     <pre><code>lines.startAt(x, y);\n</code></pre></li> <li>Line to<ul> <li>To position     <pre><code>lines.lineTo(x, y);\n</code></pre></li> <li>To relative position     <pre><code>lines.lineTo(x, y, true);\n</code></pre></li> <li>To vertical position     <pre><code>lines.verticalLineTo(x);\n</code></pre></li> <li>To relative vertical position     <pre><code>lines.verticalLineTo(x, true);\n</code></pre></li> <li>To horizontal position     <pre><code>lines.horizontalLineTo(y);\n</code></pre></li> <li>To relative horizontal position     <pre><code>lines.horizontalLineTo(y, true);\n</code></pre></li> </ul> </li> <li>Add arc composed of lines     <pre><code>lines.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise);\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start and end angle in degrees.</li> </ul> </li> <li>Add elliptical arc composed of lines     <pre><code>lines.ellipticalArc(centerX, centerY, radiusX, radiusY, startAngle, endAngle, anticlockwise);\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start and end angle in degrees.</li> </ul> </li> <li>Add quadratic bezier of lines     <pre><code>lines.quadraticBezierTo(cx, cy, x, y);\n</code></pre><ul> <li><code>cx</code>, <code>cy</code> : Control point</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add smooth quadratic bezier of lines     <pre><code>lines.smoothQuadraticBezierTo(x, y);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add cubic bezier of lines     <pre><code>lines.cubicBezierCurveTo(cx0, cy0, cx1, cy1, x, y);\n</code></pre><ul> <li><code>cx0</code>, <code>cy0</code> : Control point0</li> <li><code>cx1</code>, <code>cy1</code> : Control point1</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add smooth cubic bezier of lines     <pre><code>lines.smoothCubicBezierCurveTo(cx1, cy1, x, y);\n</code></pre><ul> <li><code>cx1</code>, <code>cy1</code> : Control point1</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>End commands<ul> <li>Close path, to fill color     <pre><code>lines.close();\n</code></pre></li> <li>End path, to draw lines only     <pre><code>lines.end();\n</code></pre></li> </ul> </li> <li>Copy path from another lines     <pre><code>lines.copyPathFrom(srcLine);\n</code></pre>     or     <pre><code>lines.copyPathFrom(srcLine, startT, endT);\n</code></pre></li> <li>Append path from another lines     <pre><code>lines.appendPathFrom(srcLine);\n</code></pre>     or     <pre><code>lines.appendPathFrom(srcLine, startT, endT);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#transform","title":"Transform","text":"<ul> <li>Offset all points     <pre><code>lines.offset(x, y);\n</code></pre></li> <li>Rotation all points     <pre><code>lines.rotateAround(centerX, centerY, angle);\n</code></pre><ul> <li><code>angle</code> : Rotate angle in degrees.</li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#display-path-segment","title":"Display path segment","text":"<ol> <li>Create path, under <code>customShapes.isSizeChanged</code> condition.</li> <li>Display segment of path     <pre><code>lines.setDisplayPathSegment(startT, endT);\n</code></pre>     or     <pre><code>lines.setDisplayPathSegment(endT);  // startT = 0\n</code></pre><ul> <li><code>startT</code>, <code>endT</code> : <code>0</code>~<code>1</code>. Start, end position on path, in percentage of path.<ul> <li><code>0</code> : Start position of path</li> <li><code>1</code> : End position of path</li> </ul> </li> </ul> </li> </ol>"},{"location":"shape-custom-shapes/#misc","title":"Misc","text":"<ul> <li>Get polygon     <pre><code>var polygon = lines.toPolygon();\n</code></pre><ul> <li>Can be used in <code>setInteractive method</code> <pre><code>shape.setInteractive({\nhitArea: shape.getShapes()[0].toPolygon(),\nhitAreaCallback: Phaser.Geom.Polygon.Contains,\n})\n</code></pre></li> </ul> </li> <li>Position of first or last point     <pre><code>var p0x = lines.firstPointX;\nvar p0y = lines.firstPointY;\nvar pNx = lines.lastPointX;\nvar pNy = lines.lastPointY;\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#rectangle","title":"Rectangle","text":"<ul> <li>Top-left<ul> <li>Get     <pre><code>var left = rectangle.x;\nvar top = rectangle.y;\n</code></pre></li> <li>Set     <pre><code>rectangle.setTopLeftPosition(x, y);\n</code></pre>     or     <pre><code>rectangle.x = left;\nrectangle.y = top;\n</code></pre></li> </ul> </li> <li>Center<ul> <li>Get     <pre><code>var centerX = rectangle.centerX;\nvar centerY = rectangle.centerY;\n</code></pre></li> <li>Set     <pre><code>rectangle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>rectangle.centerX = centerX;\nrectangle.centerY = centerY;\n</code></pre><ul> <li>Will change <code>rectangle.x</code>, <code>rectangle.y</code></li> </ul> </li> </ul> </li> <li>Size<ul> <li>Get     <pre><code>var width = rectangle.width;\nvar height = rectangle.height;\n</code></pre></li> <li>Set     <pre><code>rectangle.setSize(width, height);\n</code></pre>     or     <pre><code>rectangle.width = width;\nrectangle.height = height;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#round-rectangle","title":"Round rectangle","text":"<ul> <li>Top-left<ul> <li>Get     <pre><code>var left = roundRectangle.x;\nvar top = roundRectangle.y;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setTopLeftPosition(x, y);\n</code></pre>     or     <pre><code>roundRectangle.x = left;\nroundRectangle.y = top;\n</code></pre></li> </ul> </li> <li>Center<ul> <li>Get     <pre><code>var centerX = roundRectangle.centerX;\nvar centerY = roundRectangle.centerY;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>roundRectangle.centerX = centerX;\nroundRectangle.centerY = centerY;\n</code></pre><ul> <li>Will change <code>roundRectangle.x</code>, <code>roundRectangle.y</code></li> </ul> </li> </ul> </li> <li>Size<ul> <li>Get     <pre><code>var width = roundRectangle.width;\nvar height = roundRectangle.height;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setSize(width, height);\n</code></pre>     or     <pre><code>roundRectangle.width = width;\nroundRectangle.height = height;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radius = roundRectangle.radius;\n</code></pre>     or     <pre><code>var radiusTL = roundRectangle.radiusTL;\nvar radiusTR = roundRectangle.radiusTR;\nvar radiusBL = roundRectangle.radiusBL;\nvar radiusBR = roundRectangle.radiusBR;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setRadius(radius);\n// roundRectangle.radius = radius;\n</code></pre>     or     <pre><code>roundRectangle.setRadius({\ntl: radiusTL, tr: radiusTR,\nbl: radiusBL, br: radiusBR,\n});\n// roundRectangle.radiusTL = radiusTL;\n// roundRectangle.radiusTR = radiusTR;\n// roundRectangle.radiusBL = radiusBL;\n// roundRectangle.radiusBR = radiusBR;\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#triangle","title":"Triangle","text":"<ul> <li>Vertices<ul> <li>Get     <pre><code>var x0 = triangle.x0;\nvar y0 = triangle.x0;\nvar x1 = triangle.x1;\nvar y1 = triangle.x1;\nvar x2 = triangle.x2;\nvar y2 = triangle.x2;\n</code></pre></li> <li>Set     <pre><code>triangle.setP0(x, y);\ntriangle.setP1(x, y);\ntriangle.setP2(x, y);\n</code></pre>     or     <pre><code>triangle.x0 = x0;\ntriangle.x0 = y0;\ntriangle.x1 = x1;\ntriangle.x1 = y1;\ntriangle.x2 = x2;\ntriangle.x2 = y2;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#arc","title":"Arc","text":"<ul> <li>Center position<ul> <li>Get     <pre><code>var x = arc.x;\nvar y = arc.y;\n</code></pre></li> <li>Set     <pre><code>arc.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>arc.x = x;\narc.y = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radiusX = arc.radiusX;\nvar radiusY = arc.radiusY;\n</code></pre></li> <li>Set     <pre><code>arc.setRadius(radiusX, radiusY);\n// arc.setRadius(radius);\n</code></pre>     or     <pre><code>arc.radiusX = radiusX;\narc.radiusY = radiusY;\n</code></pre></li> </ul> </li> <li>Angles<ul> <li>Get     <pre><code>var startAngle = arc.startAngle;\nvar endAngle = arc.endAngle;\nvar anticlockwise = arc.anticlockwise; // boolean        \n</code></pre></li> <li>Set     <pre><code>arc.setAngle(startAngle, endAngle);  // anticlockwise = false\n// arc.setAngle(startAngle, endAngle, anticlockwise);\n</code></pre>     or     <pre><code>arc.startAngle = startAngle;\narc.endAngle = endAngle;\narc.anticlockwise = anticlockwise; // boolean\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start/end angle in degrees.</li> </ul> </li> </ul> </li> <li>Pie<ul> <li>Get     <pre><code>var pie = arc.pie; // boolean\n</code></pre></li> <li>Set     <pre><code>arc.setPie();\n</code></pre>     or     <pre><code>arc.pie = true;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#circle","title":"Circle","text":"<ul> <li>Center position<ul> <li>Get     <pre><code>var x = circle.x;\nvar y = circle.y;\n</code></pre></li> <li>Set     <pre><code>circle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>circle.x = x;\ncircle.y = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radiusX = circle.radiusX;\nvar radiusY = circle.radiusY;\n</code></pre></li> <li>Set     <pre><code>circle.setRadius(radiusX, radiusY);\n// arc.setRadius(radius);\n</code></pre>     or     <pre><code>circle.radiusX = radiusX;\ncircle.radiusY = radiusY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#ellipse","title":"Ellipse","text":"<p>The same as Circle.</p>"},{"location":"shape-custom-shapes/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = shape.alpha;\n</code></pre></li> <li>Set     <pre><code>shape.setAlpha(alpha);\n// shape.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#compare-with-similar-plugins","title":"Compare with similar plugins","text":"<ul> <li>Custom Shapes : Draw shapes.</li> <li>Custom Porgress : Similar with custom-shapes, plus a <code>value</code> property</li> <li>Custom Spinner : Similar with custom-progress, plus a <code>value</code> tween task.</li> </ul>"},{"location":"shape-ellipse/","title":"Ellipse","text":""},{"location":"shape-ellipse/#introduction","title":"Introduction","text":"<p>Ellipse shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-ellipse/#usage","title":"Usage","text":""},{"location":"shape-ellipse/#create-shape-object","title":"Create shape object","text":"<pre><code>var ellipse = scene.add.ellipse(x, y, width, height, fillColor);\n// var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-ellipse/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyEllipse extends Phaser.GameObjects.Ellipse {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ellipse = new MyEllipse(scene, x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = ellipse.fillColor;\nvar alpha = ellipse.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>ellipse.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>ellipse.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = ellipse.strokeColor;\n</code></pre></li> <li>Set     <pre><code>ellipse.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>ellipse.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>ellipse.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-ellipse/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = ellipse.alpha;\n</code></pre></li> <li>Set     <pre><code>ellipse.setAlpha(alpha);\n// ellipse.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = ellipse.width;\nvar height = ellipse.height;\n</code></pre></li> <li>Set     <pre><code>ellipse.setSize(width, height);\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = ellipse.displayWidth;\nvar height = ellipse.displayHeight;\n</code></pre></li> <li>Set     <pre><code>ellipse.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>ellipse.displayWidth = width;\nellipse.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#smoothness","title":"Smoothness","text":"<p>The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered.</p> <p><pre><code>ellipse.setSmoothness(smoothness);\n</code></pre> or <pre><code>ellipse.smoothness = smoothness;\n</code></pre></p>"},{"location":"shape-ellipse/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-fullwindowrectangle/","title":"Full window rectangle","text":""},{"location":"shape-fullwindowrectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape covered full window.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-fullwindowrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Cover</li> </ul>"},{"location":"shape-fullwindowrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-fullwindowrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"shape-fullwindowrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfullwindowrectangleplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexfullwindowrectangleplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FullWindowRectanglePlugin from 'phaser3-rex-plugins/plugins/fullwindowrectangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFullWindowRectanglePlugin',\nplugin: FullWindowRectanglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import FullWindowRectangle from 'phaser3-rex-plugins/plugins/fullwindowrectangle.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new FullWindowRectangle(scene, fillColor, fillAlpha);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-fullwindowrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFullWindowRectangle extends RexPlugins.GameObjects.FullWindowRectangle {\nconstructor(scene, fillColor, fillAlpha) {\nsuper(scene, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyFullWindowRectangle(scene, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#color","title":"Color","text":"<ul> <li>Tint<ul> <li>Get     <pre><code>var tint = rect.tint;\n</code></pre></li> <li>Set     <pre><code>rect.tint = tint;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-fullwindowrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-grid/","title":"Grid","text":""},{"location":"shape-grid/#introduction","title":"Introduction","text":"<p>Grid shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-grid/#usage","title":"Usage","text":""},{"location":"shape-grid/#create-shape-object","title":"Create shape object","text":"<pre><code>var grid = scene.add.grid(x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n</code></pre>"},{"location":"shape-grid/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGrid extends Phaser.GameObjects.Grid {\nconstructor(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha) {\nsuper(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var grid = new MyGrid(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-grid/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = grid.fillColor;\nvar alpha = grid.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>grid.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = grid.strokeColor;\n</code></pre></li> <li>Set     <pre><code>grid.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setStrokeStyle();\n</code></pre></li> </ul> </li> <li>Alternating color<ul> <li>Get     <pre><code>var color = grid.altFillColor;\n</code></pre></li> <li>Set     <pre><code>grid.setAltFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setAltFillStyle();\n</code></pre></li> </ul> </li> <li>Outline color<ul> <li>Get     <pre><code>var color = grid.outlineFillColor;\n</code></pre></li> <li>Set     <pre><code>grid.setOutlineStyle(color, alpha;\n</code></pre></li> <li>Clear     <pre><code>grid.setOutlineStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>grid.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-grid/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = grid.alpha;\n</code></pre></li> <li>Set     <pre><code>grid.setAlpha(alpha);\n// grid.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-grid/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = grid.displayWidth;\nvar height = grid.displayHeight;\n</code></pre></li> <li>Set     <pre><code>grid.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>grid.displayWidth = width;\ngrid.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-grid/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-isobox/","title":"Iso box","text":""},{"location":"shape-isobox/#introduction","title":"Introduction","text":"<p>Iso-box shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-isobox/#usage","title":"Usage","text":""},{"location":"shape-isobox/#create-shape-object","title":"Create shape object","text":"<pre><code>var isoBox = scene.add.isobox(x, y, width, height, fillTop, fillLeft, fillRight);\n</code></pre>"},{"location":"shape-isobox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyIsoBox extends Phaser.GameObjects.IsoBox {\nconstructor(scene, x, y, width, height, fillTop, fillLeft, fillRight) {\nsuper(scene, x, y, width, height, fillTop, fillLeft, fillRight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var isoBox = new MyIsoBox(scene, x, y, width, height, fillTop, fillLeft, fillRight);\n</code></pre></li> </ul>"},{"location":"shape-isobox/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>isoBox.setFillStyle(fillTop, fillLeft, fillRight);\n</code></pre></li> <li>Show face     <pre><code>isoBox.setFaces(showTop, showLeft, showRight);\n</code></pre><ul> <li><code>showTop</code>, <code>showLeft</code>, <code>showRight</code>: Set <code>true</code> to show that face</li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>isoBox.setFillStyle(fillTop, fillLeft, fillRight)</code> to change color.</p>"},{"location":"shape-isobox/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = isoBox.alpha;\n</code></pre></li> <li>Set     <pre><code>isoBox.setAlpha(alpha);\n// isoBox.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#projection","title":"Projection","text":"<ul> <li>Get    <pre><code>var projection = isoBox.projection;\n</code></pre></li> <li>Set    <pre><code>isoBox.setProjection(value)\n</code></pre>    or    <pre><code>isoBox.projection = value;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = isoBox.displayWidth;\nvar height = isoBox.displayHeight;\n</code></pre></li> <li>Set     <pre><code>isoBox.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>isoBox.displayWidth = width;\nisoBox.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-isotriangle/","title":"Iso triangle","text":""},{"location":"shape-isotriangle/#introduction","title":"Introduction","text":"<p>Iso-triangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-isotriangle/#usage","title":"Usage","text":""},{"location":"shape-isotriangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var isoTriangle = scene.add.isotriangle(x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n</code></pre>"},{"location":"shape-isotriangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyIsoTriangle extends Phaser.GameObjects.IsoTriangle {\nconstructor(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight) {\nsuper(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var isoTriangle = new MyIsoTriangle(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>isoTriangle.setFillStyle(fillTop, fillLeft, fillRight);\n</code></pre></li> <li>Show face     <pre><code>isoTriangle.setFaces(showTop, showLeft, showRight);\n</code></pre><ul> <li><code>showTop</code>, <code>showLeft</code>, <code>showRight</code>: Set <code>true</code> to show that face</li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>isoTriangle.setFillStyle(fillTop, fillLeft, fillRight)</code> to change color.</p>"},{"location":"shape-isotriangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = isoTriangle.alpha;\n</code></pre></li> <li>Set     <pre><code>isoTriangle.setAlpha(alpha);\n// isoTriangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#projection","title":"Projection","text":"<ul> <li>Get    <pre><code>var projection = isoTriangle.projection;\n</code></pre></li> <li>Set    <pre><code>isoTriangle.setProjection(value)\n</code></pre>    or    <pre><code>isoTriangle.projection = value;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#reverse","title":"Reverse","text":"<ul> <li>Get    <pre><code>var isReversed = isoTriangle.isReversed;\n</code></pre></li> <li>Set    <pre><code>isoTriangle.setReversed(reversed);\n</code></pre>    or    <pre><code>isoTriangle.reversed = reversed;\n</code></pre></li> <li>Set <code>true</code> to render upside down.</li> </ul>"},{"location":"shape-isotriangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = isoTriangle.displayWidth;\nvar height = isoTriangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>isoTriangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>isoTriangle.displayWidth = width;\nisoTriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-line/","title":"Line","text":""},{"location":"shape-line/#introduction","title":"Introduction","text":"<p>Line shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-line/#usage","title":"Usage","text":""},{"location":"shape-line/#create-shape-object","title":"Create shape object","text":"<pre><code>var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor);\n// var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha);\n</code></pre>"},{"location":"shape-line/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCurve extends Phaser.GameObjects.Line {\nconstructor(scene, x, y, x1, y1, x2, y2, strokeColor) {\nsuper(scene, x, y, x1, y1, x2, y2, strokeColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var line = new MyLine(scene, x, y, x1, y1, x2, y2, strokeColor);\n</code></pre></li> </ul>"},{"location":"shape-line/#set-color","title":"Set color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = line.fillColor;\nvar alpha = line.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>line.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>line.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = line.strokeColor;\n</code></pre></li> <li>Set     <pre><code>line.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>line.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>line.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-line/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = line.alpha;\n</code></pre></li> <li>Set     <pre><code>line.setAlpha(alpha);\n// line.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-line/#set-end-points","title":"Set end points","text":"<pre><code>line.setTo(x1, y1, x2, y2);\n</code></pre>"},{"location":"shape-line/#line-width","title":"Line width","text":"<pre><code>line.setLineWidth(startWidth, endWidth);\n</code></pre> <ul> <li><code>endWidth</code> : The end width of the line. Only used in WebGL.</li> </ul>"},{"location":"shape-line/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = line.displayWidth;\nvar height = line.displayHeight;\n</code></pre></li> <li>Set     <pre><code>line.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>line.displayWidth = width;\nline.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-line/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-lineprogress/","title":"Line progress","text":""},{"location":"shape-lineprogress/#introduction","title":"Introduction","text":"<p>Horizontal line progress bar shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-lineprogress/#live-demos","title":"Live demos","text":"<ul> <li>Line-progress</li> </ul>"},{"location":"shape-lineprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-lineprogress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-lineprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineprogressplugin.min.js', true);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LineProgressPlugin from 'phaser3-rex-plugins/plugins/lineprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressPlugin',\nplugin: LineProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LineProgress from 'phaser3-rex-plugins/plugins/lineprogress.js';\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = new LineProgress(scene, x, y, width, height, barColor, value, config);\nscene.add.existing(lineProgress);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressPlugin',\nplugin: LineProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-lineprogress/#create-instance","title":"Create instance","text":"<pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, {    trackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var lineProgress = scene.add.rexLineProgress({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>barColor</code> : Fill color of line bar, in number or css string value.</li> <li><code>trackColor</code> : Fill color of line track, in number or css string value.</li> <li><code>trackStrokeColor</code> : Stroke color of track, in number or css string value.</li> <li><code>trackStrokeThickness</code> : Stroke line width of track.</li> <li><code>skewX</code> : Horizontal skew of track and bar.</li> <li><code>rtl</code> : <ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, lineProgress) {\n}\n</code></pre></li> </ul> <p>Add line-progress from JSON</p> <pre><code>var lineProgress = scene.make.rexLineProgress({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"shape-lineprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLineProgress extends LineProgress {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var lineProgress = new MyLineProgress(scene, x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = lineProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = lineProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = lineProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>lineProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>lineProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>lineProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>lineProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>lineProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>lineProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>lineProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#line-track","title":"Line track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = lineProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(trackColor);\n// lineProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Stroke<ul> <li>Get     <pre><code>var trackStrokeColor = lineProgress.trackStrokeColor;\nvar trackStrokeThickness = lineProgress.trackStrokeThickness;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(color);\nlineProgress.setTrackStroke(lineWidth, color);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#line-bar","title":"Line bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = lineProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setBarColor(barColor);\n// lineProgress.barColor = barColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#horizontal-skew","title":"Horizontal skew","text":"<ul> <li>Get     <pre><code>var skewX = lineProgress.skewX;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setSkewX(skewX);\n// lineProgress.skewX = skewX;\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#right-to-left","title":"Right-to-left","text":"<ul> <li>Get     <pre><code>var rtl = lineProgress.rtl;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setRTL(rtl);\n// lineProgress.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>lineProgress.on('valuechange', function(newValue, oldValue, lineProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = lineProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setAlpha(alpha);\n// lineProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-polygon/","title":"Polygon","text":""},{"location":"shape-polygon/#introduction","title":"Introduction","text":"<p>Polygon shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-polygon/#usage","title":"Usage","text":""},{"location":"shape-polygon/#create-shape-object","title":"Create shape object","text":"<pre><code>var polygon = scene.add.polygon(x, y, points, fillColor);\n// var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>An array of number : <code>[x0, y0, x1, y1, ...]</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> </ul> </li> </ul> <p>Note</p> <p>Shift given points to align position (0, 0)</p>"},{"location":"shape-polygon/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPolygon extends Phaser.GameObjects.Polygon {\nconstructor(scene, x, y, points, fillColor) {\nsuper(scene, x, y, points, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var polygon = new MyPolygon(scene, x, y, points, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-polygon/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = polygon.fillColor;\nvar alpha = polygon.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>polygon.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>polygon.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = polygon.strokeColor;\n</code></pre></li> <li>Set     <pre><code>polygon.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>polygon.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>polygon.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-polygon/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = polygon.alpha;\n</code></pre></li> <li>Set     <pre><code>polygon.setAlpha(alpha);\n// polygon.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-polygon/#smooth","title":"Smooth","text":"<p>Smooths the polygon over the number of iterations specified.</p> <pre><code>polygon.smooth(iterations);\n</code></pre>"},{"location":"shape-polygon/#set-points","title":"Set points","text":"<pre><code>polygon.setTo(points);\n</code></pre> <ul> <li><code>point</code> :<ul> <li>A string containing paired values separated by a single space : <code>'40 0 40 20 100 20 100 80 40 80 40 100 0 50'</code></li> <li>An array of Point objects : <code>[new Phaser.Point(x1, y1), ...]</code></li> <li>An array of objects with public x/y properties : <code>[obj1, obj2, ...]</code></li> <li>An array of paired numbers that represent point coordinates : <code>[x1,y1, x2,y2, ...]</code></li> <li>An array of arrays with two elements representing x/y coordinates : <code>[[x1, y1], [x2, y2], ...]</code></li> </ul> </li> </ul>"},{"location":"shape-polygon/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = polygon.displayWidth;\nvar height = polygon.displayHeight;\n</code></pre></li> <li>Set     <pre><code>polygon.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>polygon.displayWidth = width;\npolygon.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-polygon/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-rectangle/","title":"Rectangle","text":""},{"location":"shape-rectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-rectangle/#usage","title":"Usage","text":""},{"location":"shape-rectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rectangle(x, y, width, height, fillColor);\n// var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-rectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRectangle extends Phaser.GameObjects.Rectangle {\nconstructor(scene, x, y, width, height, fillColor) {\nsuper(scene, x, y, width, height, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRectangle(scene, x, y, width, height, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);        </code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = rect.strokeColor;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>rect.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-rectangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.setAlpha(alpha);\n// rect.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = rect.displayWidth;\nvar height = rect.displayHeight;\n</code></pre></li> <li>Set     <pre><code>rect.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>rect.displayWidth = width;\nrect.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-roundrectangle/","title":"Round Rectangle","text":""},{"location":"shape-roundrectangle/#introduction","title":"Introduction","text":"<p>Round rectangle shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-roundrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Round rectangle</li> </ul>"},{"location":"shape-roundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-roundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"shape-roundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexroundrectangleplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexroundrectangleplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RoundRectanglePlugin from 'phaser3-rex-plugins/plugins/roundrectangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRoundRectanglePlugin',\nplugin: RoundRectanglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RoundRectangle from 'phaser3-rex-plugins/plugins/roundrectangle.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new RoundRectangle(scene, x, y, width, height, radius, fillColor, fillAlpha);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre> <p>or</p> <pre><code>var rect = scene.add.rexRoundRectangle({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\nradius: 0,\n\ncolor: undefined,\nalpha: undefined,\n\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: 2\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> : <ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-roundrectangle/#deform","title":"Deform","text":"<ul> <li>Rectangle, set radius of 4 corners to <code>0</code>.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y,  width, height, 0, fillColor, fillAlpha);\n</code></pre></li> <li>Circle, set width and height to <code>undefined</code>.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, radius, fillColor, fillAlpha);\n</code></pre></li> <li>Ellipse, set width and height to <code>undefined</code>, and radiusX/radiusY.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {x: radiusX, y: radiusY}, fillColor, fillAlpha);\n</code></pre></li> <li>Rhombus, set width and height to <code>undefined</code>, and assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {\nradius: radius,\niteration: 0\n}, fillColor, fillAlpha);\n</code></pre></li> <li>Octagon, assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, {\nradius: radius,\niteration: 0\n}, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangle extends RexPlugins.GameObjects.RoundRectangle {\nconstructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, radius, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangle(scene, x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = rect.strokeColor;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>rect.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-roundrectangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.setAlpha(alpha);\n// rect.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = rect.displayWidth;\nvar height = rect.displayHeight;\n</code></pre></li> <li>Set     <pre><code>rect.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>rect.displayWidth = width;\nrect.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = rect.radius;\nvar radiusTL = rect.radiusTL;\nvar radiusTR = rect.radiusTR;\nvar radiusBL = rect.radiusBL;\nvar radiusBR = rect.radiusBR;\n</code></pre>     or     <pre><code>var cornerRadius = rect.cornerRadius;\n</code></pre><ul> <li><code>radius</code> : Number, maximum radius of 4 corners.</li> <li><code>cornerRadius</code> : JSON object of 4 corners.     <pre><code>{\ntl: {x : radiusX, y: radiusY, convex : true},\ntr: {x : radiusX, y: radiusY, convex : true},\nbl: {x : radiusX, y: radiusY, convex : true},\nbr: {x : radiusX, y: radiusY, convex : true},\n}\n</code></pre></li> </ul> </li> <li>Set     <pre><code>rect.setRadius(value);\nrect.setRadiusTL(value);  // number, or {x,y}\nrect.setRadiusTR(value);  // number, or {x,y}\nrect.setRadiusBL(value);  // number, or {x,y}\nrect.setRadiusBR(value);  // number, or {x,y}\n</code></pre>     or     <pre><code>rect.radius = radius;\nrect.radiusTL = radius;  // number, or {x,y}\nrect.radiusTR = radius;  // number, or {x,y}\nrect.radiusBL = radius;  // number, or {x,y}\nrect.radiusBR = radius;  // number, or {x,y}\n</code></pre><ul> <li><code>radius</code> :<ul> <li>Number : 4 corners with the same radius.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     ```javascript     {         tl: {x : radiusX, y: radiusY},         tr: {x : radiusX, y: radiusY},         bl: {x : radiusX, y: radiusY},         br: {x : radiusX, y: radiusY},     }</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-roundrectangle/#iteration","title":"Iteration","text":"<ul> <li>Get     <pre><code>var iteration = rect.iteration;\n</code></pre></li> <li>Set     <pre><code>rect.setIteration(value);\n</code></pre>     or     <pre><code>rect.iteration = value;\n</code></pre></li> </ul> <p>Number of interpolation points in each round corner. Default value is <code>4</code>.</p> <ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul>"},{"location":"shape-roundrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-spinner/","title":"Spinner","text":""},{"location":"shape-spinner/#introduction","title":"Introduction","text":"<p>Loading animations on shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-spinner/#live-demos","title":"Live demos","text":"<ul> <li>Spinners</li> <li>Custom spinner</li> </ul>"},{"location":"shape-spinner/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-spinner/#install-plugin","title":"Install plugin","text":""},{"location":"shape-spinner/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexspinnerplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspinnerplugin.min.js\",\n\"rexSpinner\",\n\"rexSpinner\"\n);\n</code></pre></li> <li>Add spinner object   <pre><code>var audio = this.rexSpinner.add.audio(config);\nvar ball = this.rexSpinner.add.ball(config);\nvar bars = this.rexSpinner.add.bars(config);\nvar box = this.rexSpinner.add.box(config);\nvar clock = this.rexSpinner.add.clock(config);\nvar cube = this.rexSpinner.add.cube(config);\nvar dots = this.rexSpinner.add.dots(config);\nvar facebook = this.rexSpinner.add.facebook(config);\nvar grid = this.rexSpinner.add.grid(config);\nvar los = this.rexSpinner.add.los(config);\nvar orbit = this.rexSpinner.add.orbit(config);\nvar oval = this.rexSpinner.add.oval(config);\nvar pie = this.rexSpinner.add.pie(config);\nvar puff = this.rexSpinner.add.puff(config);\nvar radio = this.rexSpinner.add.radio(config);\nvar rings = this.rexSpinner.add.rings(config);\nvar spinner = this.rexSpinner.add.spinner(config);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SpinnerPlugin from \"phaser3-rex-plugins/templates/spinner/spinner-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexSpinner\",\nplugin: SpinnerPlugin,\nmapping: \"rexSpinner\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add spinner object   <pre><code>var audio = this.rexSpinner.add.audio(config);\nvar ball = this.rexSpinner.add.ball(config);\nvar bars = this.rexSpinner.add.bars(config);\nvar box = this.rexSpinner.add.box(config);\nvar clock = this.rexSpinner.add.clock(config);\nvar cube = this.rexSpinner.add.cube(config);\nvar dots = this.rexSpinner.add.dots(config);\nvar facebook = this.rexSpinner.add.facebook(config);\nvar grid = this.rexSpinner.add.grid(config);\nvar los = this.rexSpinner.add.los(config);\nvar orbit = this.rexSpinner.add.orbit(config);\nvar oval = this.rexSpinner.add.oval(config);\nvar pie = this.rexSpinner.add.pie(config);\nvar puff = this.rexSpinner.add.puff(config);\nvar radio = this.rexSpinner.add.radio(config);\nvar rings = this.rexSpinner.add.rings(config);\nvar spinner = this.rexSpinner.add.spinner(config);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { Audio, Ball, Bars, Box, Clock, Cube, Custom, Dots, Facebook, Grid, Los, Orbit, Oval, Puff, Radio, Rings, Spinner\n} from \"phaser3-rex-plugins/templates/spinner/spinner-components.js\";\n</code></pre></li> <li>Add spinner object   <pre><code>var spinner = new Audio(scene, config);\nscene.add.existing(spinner);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#add-spinner-object","title":"Add spinner object","text":"<pre><code>var spinner = scene.rexSpinner.add.audio({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// color: 0xffffff,\n\n// duration: 1000,\n// start: true,\n// delay: 0,\n// repeatDelay: 0,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>color</code> : Fill color, or stroke color. Default value is <code>0xffffff</code></li> <li><code>duration</code> : Duration of animation.</li> <li><code>start</code> : Start animation when object created.</li> <li><code>false</code> : Don't play animation at beginning.</li> <li><code>delay</code> : Delay time in ms before running.</li> <li><code>repeatDelay</code> : Delay time between 2 periods.</li> </ul>"},{"location":"shape-spinner/#play-animation","title":"Play animation","text":""},{"location":"shape-spinner/#start","title":"Start","text":"<ul> <li>Start playing, won't restart when playing     <pre><code>spinner.start();\n</code></pre></li> <li>Restart with new duration     <pre><code>spinner.start(duration);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#pause","title":"Pause","text":"<pre><code>spinner.pause();\n</code></pre>"},{"location":"shape-spinner/#resume","title":"Resume","text":"<pre><code>spinner.resume();\n</code></pre>"},{"location":"shape-spinner/#stop","title":"Stop","text":"<pre><code>spinner.stop();\n</code></pre>"},{"location":"shape-spinner/#play-animation-manually","title":"Play animation manually","text":"<ol> <li>Set <code>start</code> to <code>false</code> in config</li> <li>Set progress manually     <pre><code>spinner.setValue(t);\n</code></pre>     or     <pre><code>spinner.value = t;\n</code></pre><ul> <li><code>t</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ol>"},{"location":"shape-spinner/#is-running","title":"Is running","text":"<pre><code>var isRunning = spinner.isRunning;\n</code></pre>"},{"location":"shape-spinner/#color","title":"Color","text":"<ul> <li>Get     <pre><code>var color = spinner.color;\n</code></pre></li> <li>Set     <pre><code>spinner.setColor(color);\n</code></pre>     or     <pre><code>spinner.color = color;\n</code></pre><ul> <li><code>color</code> : Fill color, or stroke color, in number.</li> </ul> </li> </ul>"},{"location":"shape-spinner/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = spinner.alpha;\n</code></pre></li> <li>Set     <pre><code>spinner.setAlpha(alpha);\n// spinner.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#duration","title":"Duration","text":"<ul> <li>Get     <pre><code>var duration = spinner.duration;\n</code></pre></li> <li>Set, will apply to next animation playing.     <pre><code>spinner.setDuration(duration);\n</code></pre>     or     <pre><code>spinner.duration = duration;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#ease","title":"Ease","text":"<ul> <li>Get     <pre><code>var ease = spinner.ease;\n</code></pre></li> <li>Set, will apply to next animation playing.     <pre><code>spinner.setEasen(ease);\n</code></pre>     or     <pre><code>spinner.ease = ease;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#custom-spinner","title":"Custom spinner","text":"<pre><code>var customSpinner = this.rexSpinner.add.custom({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// color: 0xffffff,\n\n// duration: 1000,\n// start: true,\n\ncreate: {\n// shapeType: [name0, name1, ...],\n// shapeType: number,\n// shapeType: name,\n},\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n})\n</code></pre> <ul> <li><code>create</code> : Callback to create shapes<ul> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This spinner game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom spinner.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when porgressing     <pre><code>function() {\n// this : This spinner game object\nvar centerX = this.centerX;\nvar centerY = this.centerY;\nvar radius = this.radius;\nvar color = this.color;\nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\nvar t = this.value;\n// ...\n}\n</code></pre><ul> <li><code>this.value</code> : Progress, <code>0</code>~<code>1</code>.</li> <li>Position : <ul> <li><code>this.centerX</code>, <code>this.centerY</code> : Center position of this spinner. The coordinate of top-left point is <code>(0,0)</code></li> <li><code>this.radius</code> : Minimun value of <code>this.centerX</code>, <code>this.centerY</code>, to draw shape at square.</li> </ul> </li> <li>Color :<ul> <li><code>this.color</code> : Color property of this spinner.</li> </ul> </li> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-spinner/#shape-class","title":"Shape class","text":"<p>See Shape class</p>"},{"location":"shape-star/","title":"Star","text":""},{"location":"shape-star/#introduction","title":"Introduction","text":"<p>Star shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-star/#usage","title":"Usage","text":""},{"location":"shape-star/#create-shape-object","title":"Create shape object","text":"<pre><code>var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor);\n// var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>points</code> : The number of points on the star. Default is 5.</li> <li><code>innerRadius</code> : The inner radius of the star. Default is 32.</li> <li><code>outerRadius</code> : The outer radius of the star. Default is 64.</li> </ul>"},{"location":"shape-star/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStar extends Phaser.GameObjects.Star {\nconstructor(scene, x, y, points, innerRadius, outerRadius, fillColor) {\nsuper(scene, x, y, points, innerRadius, outerRadius, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var star = new MyStar(scene, x, y, points, innerRadius, outerRadius, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-star/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = star.fillColor;\nvar alpha = star.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>star.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>star.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = star.strokeColor;\n</code></pre></li> <li>Set     <pre><code>star.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>star.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>star.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-star/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = star.alpha;\n</code></pre></li> <li>Set     <pre><code>star.setAlpha(alpha);\n// star.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-star/#radius","title":"Radius","text":"<ul> <li>Inner radius<ul> <li>Get     <pre><code>var innerRadius = star.innerRadius;\n</code></pre></li> <li>Set     <pre><code>star.setInnerRadius(innerRadius);\n</code></pre>     or     <pre><code>star.innerRadius = innerRadius;\n</code></pre></li> </ul> </li> <li>Outer radius<ul> <li>Get     <pre><code>var outerRadius = star.outerRadius;\n</code></pre></li> <li>Set     <pre><code>star.setOuterRadius(outerRadius);\n</code></pre>     or     <pre><code>star.outerRadius = outerRadius;\n</code></pre></li> </ul> </li> <li>Points<ul> <li>Get     <pre><code>var points = star.points;\n</code></pre></li> <li>Set     <pre><code>star.setPoints(points);\n</code></pre>     or     <pre><code>star.points = points;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-star/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = star.displayWidth;\nvar height = star.displayHeight;\n</code></pre></li> <li>Set     <pre><code>star.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>star.displayWidth = width;\nstar.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-star/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-toggleswitch/","title":"Toggle switch","text":""},{"location":"shape-toggleswitch/#introduction","title":"Introduction","text":"<p>Toggle-switch input.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-toggleswitch/#live-demos","title":"Live demos","text":"<ul> <li>Toggle-switch</li> </ul>"},{"location":"shape-toggleswitch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-toggleswitch/#install-plugin","title":"Install plugin","text":""},{"location":"shape-toggleswitch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoggleswitchplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rextoggleswitchplugin.min.js', true);\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>var toggleSwitch = scene.add.rexToggleSwitchShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ToggleSwitchPlugin from 'phaser3-rex-plugins/plugins/toggleswitch-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexToggleSwitchPlugin',\nplugin: ToggleSwitchPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>var toggleSwitch = scene.add.rexToggleSwitchShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ToggleSwitch from 'phaser3-rex-plugins/plugins/toggleswitch.js';\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleswitch = new ToggleSwitch(scene, x, y, width, height, color, config);\nscene.add.existing(toggleSwitch);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>// import ToggleSwitchShape from 'phaser3-rex-plugins/plugins/toggleswitchshape.js';\nvar toggleSwitch = new ToggleSwitchShape(scene, x, y, width, height, color, config);\nscene.add.existing(toggleSwitch);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#create-toggle-switch-input","title":"Create toggle-switch input","text":"<pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre> <p>or</p> <pre><code>var toggleSwitch = scene.add.rexToggleSwitch({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ncolor: 0x005cb2,\ntrackFillAlpha: 1,\nfalseValueTrackColor: undefined,\nfalseValueTrackFillAlpha: 1,\n\nthumbColor: 0xffffff,\nthumbAlpha: 1,\n\ntrackWidth: 0.9,\ntrackHeight: 0.5,\ntrackCornerRadius: (trackHeight * 0.5),\n\nthumbHeight: (trackHeight * 0.9),\nthumbWidth: (thumbHeight),\nthumbCornerRadius: (thumbHeight * 0.5),\n\nthumbLeft: 0.3,\nthumbRight: (1 - thumbLeft),\nrtl: false,\n\nanimationDuration: 150,\n\nvalue: false,\n\nclick: undefined,\n// click: {\n//     mode: 1,            // 0|'press'|1|'release'\n//     clickInterval: 100  // ms\n//     threshold: undefined\n// },\nreadOnly: false,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of toggleswitch.</li> <li>Track fill style<ul> <li><code>color</code>, <code>trackFillAlpha</code> : Track color and alpha when value is <code>true</code>.</li> <li><code>falseValueTrackColor</code>, <code>falseValueTrackFillAlpha</code> : Track color and alpha when value is <code>false</code>.<ul> <li>Default value of <code>falseValueTrackColor</code> is the grayscale of <code>color</code>.    </li> </ul> </li> </ul> </li> <li>Thumb fill style<ul> <li><code>thumbColor</code>, <code>thumbAlpha</code> : Thumb color and alpha</li> </ul> </li> <li>Track size<ul> <li><code>trackWidth</code> : Width ration of track. Default value is <code>0.9</code>.</li> <li><code>thumbWidth</code> : Height ratio of track. Default value is <code>0.5</code>.</li> <li><code>trackCornerRadius</code> : Ratio of track corner. Default value is half of <code>trackHeight</code>.</li> </ul> </li> <li>Thumb size<ul> <li><code>thumbWidth</code> : Width ration of thumb. Default value is equal to <code>thumbHeight</code>.</li> <li><code>thumbHeight</code> : Height ratio of thumb. Default value <code>trackHeight * 0.5</code>.</li> <li><code>thumbCornerRadius</code> : Ratio of thumb corner. Default value is half of <code>thumbHeight</code>.</li> </ul> </li> <li>Thumb position<ul> <li><code>thumbLeft</code> : Thumb position if value is <code>false</code>. Default value is <code>0.3</code>.</li> <li><code>thumbRight</code> : Thumb position if value is <code>true</code>. Default value is <code>1 - thumbLeft</code>.</li> <li><code>rtl</code> : Moving direction of thumb when when value changes from <code>false</code> to <code>true</code>.<ul> <li><code>false</code> : Thumb moves from left to right. Default behavior.</li> <li><code>true</code> : Thumb moves from right to left.</li> </ul> </li> </ul> </li> <li><code>animationDuration</code> : Duration of drawing path of checker.</li> <li><code>value</code> : Initial value.</li> <li><code>click</code> : Configuration of click input<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>click.threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior. </li> </ul> </li> </ul> </li> <li><code>readOnly</code> : Set <code>ture</code> to disable input.</li> </ul>"},{"location":"shape-toggleswitch/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyToggleSwitch extends RexPlugins.GameObjects.ToggleSwitch {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var toggleSwitch = new MyToggleSwitch(scene, x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#value","title":"Value","text":"<ul> <li>Get     <pre><code>var value = toggleSwitch.value;\n// var value = toggleSwitch.value;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setValue(value);\n// toggleSwitch.setValue(value, duration);\n</code></pre>     or     <pre><code>toggleSwitch.value = value;\n</code></pre></li> <li>Toggle     <pre><code>toggleSwitch.toggleValue();\n// toggleSwitch.toggleValue(duration);\n</code></pre>     or     <pre><code>toggleSwitch.value = !toggleSwitch.value;\n// toggleSwitch.value = !toggleSwitch.value;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#read-only","title":"Read only","text":"<ul> <li>Get     <pre><code>var readOnly = toggleSwitch.readOnly;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setReadOnly();\n// toggleSwitch.setReadOnly(true);\n</code></pre>     or     <pre><code>toggleSwitch.readOnly = true;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-fill-style","title":"Track fill style","text":"<ul> <li>Get     <pre><code>var color = toggleSwitch.trackFillColor;\nvar alpha = toggleSwitch.trackFillAlpha;\n</code></pre> <pre><code>var color = toggleSwitch.falseValueTrackColor;\nvar alpha = toggleSwitch.falseValueTrackFillAlpha;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setTrackFillStyle(color, alpha);\n// toggleSwitch.trackFillColor = color;\n// toggleSwitch.trackFillAlpha = alpha;\n</code></pre> <pre><code>toggleSwitch.setFalseValueTrackFillStyle(color, alpha);\n// toggleSwitch.falseValueTrackColor = color;\n// toggleSwitch.falseValueTrackFillAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-fill-style","title":"Thumb fill style","text":"<ul> <li>Get     <pre><code>var color = toggleSwitch.thumbColor;\nvar alpha = toggleSwitch.thumbAlpha;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setThumbStyle(color, alpha);\n// toggleSwitch.thumbColor = color;\n// toggleSwitch.thumbAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#toggle-animation","title":"Toggle animation","text":"<ul> <li>Duration<ul> <li>Get     <pre><code>var duration = toggleSwitch.toggleAnimProgress;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setToggleAnimationDuration(duration);\ntoggleSwitch.toggleAnimProgress = duration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-toggleswitch/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = toggleSwitch.width;\nvar height = toggleSwitch.height;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setSize(width, height);\n</code></pre>     or     <pre><code>toggleSwitch.width = width;\ntoggleSwitch.height = height;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = toggleSwitch.displayWidth;\nvar height = toggleSwitch.displayHeight;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>toggleSwitch.displayWidth = width;\ntoggleSwitch.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-size-ratio","title":"Track size ratio","text":"<ul> <li>Get     <pre><code>var trackWidth = toggleSwitch.trackWidth;\nvar trackHeight = toggleSwitch.trackHeight;\n</code></pre><ul> <li><code>trackWidth</code>, <code>trackHeight</code> : Size ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setTrackSize(trackWidth, trackHeight);\n// toggleSwitch.trackWidth = trackWidth;\n// toggleSwitch.trackHeight = trackHeight;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-corner-ratio","title":"Track corner ratio","text":"<ul> <li>Get     <pre><code>var trackRadius = toggleSwitch.trackRadius;\n</code></pre><ul> <li><code>trackRadius</code> : Corner ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setTrackRadius(trackRadius);\n// toggleSwitch.trackRadius = trackRadius;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-size-ratio","title":"Thumb size ratio","text":"<ul> <li>Get     <pre><code>var thumbWidth = toggleSwitch.thumbWidth;\nvar thumbHeight = toggleSwitch.thumbHeight;\n</code></pre><ul> <li><code>trackWidth</code>, <code>trackHeight</code> : Size ratio of thumb</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setThumbSize(thumbWidth, thumbHeight);\n// toggleSwitch.thumbWidth = thumbWidth;\n// toggleSwitch.thumbHeight = thumbHeight;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-corner-ratio","title":"Thumb corner ratio","text":"<ul> <li>Get     <pre><code>var thumbRadius = toggleSwitch.thumbRadius;\n</code></pre><ul> <li><code>thumbRadius</code> : Corner ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setThumbRadius(thumbRadius);\n// toggleSwitch.thumbRadius = thumbRadius;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-position-ratio","title":"Thumb position ratio","text":"<ul> <li>Get     <pre><code>var thumbLeft = toggleSwitch.thumbLeftX;\nvar thumbRight = toggleSwitch.thumbRightX;\n</code></pre> <pre><code>var rtl = toggleSwitch.rtl;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setThumbPosition(thumbLeft, thumbRight);\n// toggleSwitch.thumbLeftX = thumbLeft;\n// toggleSwitch.thumbRightX = thumbRight;\n</code></pre> <pre><code>toggleSwitch.setRTL(rtl);\n// toggleSwitch.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#events","title":"Events","text":"<ul> <li>On value change     <pre><code>toggleSwitch.on('valuechange', function(value) {\n// value: checked\n})\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-triangle/","title":"Triangle","text":""},{"location":"shape-triangle/#introduction","title":"Introduction","text":"<p>Triangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-triangle/#usage","title":"Usage","text":""},{"location":"shape-triangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor);\n// var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-triangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTriangle extends Phaser.GameObjects.Triangle {\nconstructor(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor) {\nsuper(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var triangle = new MyTriangle(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-triangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = triangle.fillColor;\nvar alpha = triangle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = triangle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>triangle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>triangle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-triangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = triangle.alpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setAlpha(alpha);\n// triangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-triangle/#set-vertices","title":"Set vertices","text":"<pre><code>triangle.setTo(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"shape-triangle/#triangle-width","title":"Triangle width","text":"<pre><code>triangle.setLineWidth(startWidth, endWidth);\n</code></pre> <ul> <li><code>endWidth</code> : The end width of the triangle. Only used in WebGL.</li> </ul>"},{"location":"shape-triangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = triangle.displayWidth;\nvar height = triangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>triangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>triangle.displayWidth = width;\ntriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-triangle2/","title":"Triangle 2","text":""},{"location":"shape-triangle2/#introduction","title":"Introduction","text":"<p>Trangle shape inside a rectangle bounds.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-triangle2/#live-demos","title":"Live demos","text":"<ul> <li>Ease direction</li> <li>Rotate</li> </ul>"},{"location":"shape-triangle2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-triangle2/#install-plugin","title":"Install plugin","text":""},{"location":"shape-triangle2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextriangleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextriangleplugin.min.js', true);\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TrianglePlugin from 'phaser3-rex-plugins/plugins/triangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTrianglePlugin',\nplugin: TrianglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Triangle from 'phaser3-rex-plugins/plugins/triangle.js';\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = new Triangle(scene, x, y, width, height, fillColor, fillAlpha);\nscene.add.existing(triangle);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTrianglePlugin',\nplugin: TrianglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-triangle2/#create-instance","title":"Create instance","text":"<pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre> <p>or </p> <pre><code>var triangle = scene.add.rexTriangle({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\narrowOnly: false,\n\ndirection: 0,\neaseDuration: 0,\npadding: 0,\n// padding: {\n//     left: 0,\n//     right: 0,\n//     top: 0,\n//     bottom: 0,\n// },\n\nradius: undefined,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>arrowOnly</code> :<ul> <li><code>false</code> : Fill and stroke triangle shape. Default behavior.</li> <li><code>true</code> : Only stroke arrow of triangle shape.</li> </ul> </li> <li><code>direction</code> : Direction of triangle's arrow.<ul> <li><code>0</code>, or <code>'right'</code> : Arrow to right. Default value.</li> <li><code>1</code>, or <code>'down'</code> : Arrow to down.</li> <li><code>2</code>, or <code>'left'</code> : Arrow to left.</li> <li><code>3</code>, or <code>'up'</code> : Arrow to up.</li> </ul> </li> <li><code>easeDuration</code> : Ease duration when direction changed.<ul> <li><code>0</code> : No ease transform. Default value.</li> </ul> </li> <li><code>padding</code> : Space around triagnle.<ul> <li>A number. Default value is <code>0</code>.</li> <li>A plain object     <pre><code>{\nleft:0, right:0, top: 0, bottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>radius</code> : Put 3 vertices of trangle in a circle.<ul> <li><code>undefined</code> : Disable this mode. Default behavior.</li> <li><code>0</code>~<code>1</code> : Radius in ratio of min(half-width, half-height)</li> </ul> </li> </ul>"},{"location":"shape-triangle2/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTriangle extends Triangle {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var triangle = new MyTriangle(scene, x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = triangle.fillColor;\nvar alpha = triangle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = triangle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>triangle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>triangle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-triangle2/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = triangle.alpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setAlpha(alpha);\n// triangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = triangle.width;\nvar height = triangle.height;\n</code></pre></li> <li>Set     <pre><code>triangle.setSize(width, height);\n</code></pre>     or     <pre><code>triangle.width = width;\ntriangle.height = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = triangle.displayWidth;\nvar height = triangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>triangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>triangle.displayWidth = width;\ntriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#direction","title":"Direction","text":"<ul> <li>Get     <pre><code>var direction = triangle.direction;\n</code></pre><ul> <li><code>0</code> : Arrow to right. Default value.</li> <li><code>1</code> : Arrow to down.</li> <li><code>2</code> : Arrow to left.</li> <li><code>3</code> : Arrow to up.</li> </ul> </li> <li>Set     <pre><code>triangle.setDirection(direction);\n// triangle.direction = direction;\n</code></pre>     or     <pre><code>triangle.setDirection(direction, easeDuration);\n</code></pre><ul> <li><code>direction</code> :<ul> <li><code>0</code>, or <code>'right'</code> : Arrow to right.</li> <li><code>1</code>, or <code>'down'</code> : Arrow to down.</li> <li><code>2</code>, or <code>'left'</code> : Arrow to left.</li> <li><code>3</code>, or <code>'up'</code> : Arrow to up.</li> </ul> </li> <li><code>easeDuration</code> : Override current ease-duration time.</li> </ul> </li> <li>Toggle     <pre><code>triangle.toggleDirection();\n// triangle.direction += 2;\n</code></pre>     or     <pre><code>triangle.toggleDirection(easeDuration);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var padding = triangle.padding;\n</code></pre><ul> <li><code>padding</code> :     <pre><code>{ left, right, top, bottom }\n</code></pre></li> </ul> </li> <li>Set     <pre><code>triangle.setPadding(padding);\n</code></pre>     or     <pre><code>triangle.setPadding({\nleft, right, top, bottom\n});\n</code></pre>     or     <pre><code>triangle.setPadding({\nx, y\n});\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#ease-duration","title":"Ease duration","text":"<ul> <li>Get     <pre><code>var easeDuration = triangle.easeDuration;\n</code></pre></li> <li>Set     <pre><code>triangle.setEaseDuration(easeDuration);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#arrow-only","title":"Arrow only","text":"<ul> <li>Get    <pre><code>var arrowOnly = triangle.arrowOnly;\n</code></pre></li> <li>Set     <pre><code>triangle.setArrowOnly(enable);\n// triangle.arrowOnly = enable;\n</code></pre></li> </ul>"},{"location":"shatter-image/","title":"Image","text":""},{"location":"shatter-image/#introduction","title":"Introduction","text":"<p>Shatter image to triangle faces.</p> <p>Reference: Delaunay Triangulation</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"shatter-image/#live-demos","title":"Live demos","text":"<ul> <li>Shatter image</li> </ul>"},{"location":"shatter-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shatter-image/#install-plugin","title":"Install plugin","text":""},{"location":"shatter-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshatterimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshatterimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShatterImagePlugin from 'phaser3-rex-plugins/plugins/shatterimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShatterImagePlugin',\nplugin: ShatterImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ShatterImage } from 'phaser3-rex-plugins/plugins/shatterimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new ShatterImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shatter-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, {\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12\n// variation: 0.25,    \n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexShatterImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12,\n// variation: 0.25,\n\n});\n</code></pre> <ul> <li><code>ringRadiusList</code> :<ul> <li>A list of number. Default value is <code>[1 / 27, 3 / 27, 9 / 27]</code></li> <li>A callback to return a list of number     <pre><code>function(width, height) {\nreturn [1 / 27, 3 / 27, 9 / 27];\n}\n</code></pre></li> </ul> </li> </ul> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexShatterImage({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12,\n// variation: 0.25,\n\n\nadd: true\n});\n</code></pre>"},{"location":"shatter-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShatterImage( extends ShatterImage( {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyShatterImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#shatter-image","title":"Shatter image","text":"<pre><code>image.shatter(centerX, centerY);\n// image.shatter();\n</code></pre> <p>or</p> <pre><code>image.shatter(centerX, centerY, {\n// ringRadiusList:\n// samplesPerRing: \n// variation\n});\n</code></pre> <p>or</p> <pre><code>image.shatter({\n// centerX: \n// centerY: \n// ringRadiusList:\n// samplesPerRing: \n// variation\n});\n</code></pre> <ul> <li><code>centerX</code>, <code>centerY</code> : Center position of shatter.<ul> <li><code>undefined</code> : Default value is center of image.</li> </ul> </li> </ul> <p>Shatter image into triangle faces.</p>"},{"location":"shatter-image/#position-of-shatter-center","title":"Position of Shatter center","text":"<pre><code>var shatterCenter = image.shatterCenter; // {x, y}\n</code></pre>"},{"location":"shatter-image/#faces","title":"Faces","text":"<pre><code>var faces = image.faces;\n</code></pre> <p>Faces will be sorted nearby shatter-center to far away.</p>"},{"location":"shatter-image/#properties","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = face.alpha;\n</code></pre></li> <li>Set     <pre><code>face.alpha = alpha;\n</code></pre>     or     <pre><code>face.setAlpha(value);\n</code></pre></li> </ul> </li> <li>Tint color<ul> <li>Get     <pre><code>var color = face.tint;\n</code></pre></li> <li>Set     <pre><code>face.tint = color;\n</code></pre>     or     <pre><code>face.setTint(color);\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Get     <pre><code>var radians = face.rotation;\n// var degree = face.angle;\n</code></pre></li> <li>Set     <pre><code>face.rotation = radians;\n// face.angle = degree;\n</code></pre>     or     <pre><code>face.setRotation(radians);\n// face.setAngle(degree);\n</code></pre></li> </ul> </li> <li>Center position<ul> <li>Get     <pre><code>var x = face.x;\nvar y = face.y;\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> <li>Set     <pre><code>face.x = x;\nface.y = y;\n</code></pre>     or     <pre><code>face.translate(x, y);\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> </ul> </li> </ul>"},{"location":"shatter-image/#update-properties","title":"Update properties","text":"<ul> <li>Start updating     <pre><code>image.startUpdate();\n</code></pre>     or     <pre><code>image.ignoreDirtyCache = true;\n</code></pre></li> <li>Stop updating     <pre><code>image.stopUpdate();\n</code></pre>     or     <pre><code>image.ignoreDirtyCache = false;\n</code></pre></li> </ul>"},{"location":"shatter-image/#tween-properties","title":"Tween properties","text":"<pre><code>image.startUpdate();\nscene.tweens.add({\ntargets: image.faces,\nalpha: 0,\nangle: function () { return -90 + Math.random() * 180; },\ny: '-=0.5',\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\ndelay: scene.tweens.stagger(20),\nrepeat: 0,            // -1: infinity\nyoyo: false,\nonComplete: function () {\nimage.stopUpdate()\n}\n});\n</code></pre>"},{"location":"shatter-image/#reset-image","title":"Reset image","text":"<p>Display original image with 2 faces.</p> <pre><code>image.resetImage();\n</code></pre>"},{"location":"shatter-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/","title":"Render texture","text":""},{"location":"shatter-rendertexture/#introduction","title":"Introduction","text":"<p>Shatter render texture to triangle faces.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"shatter-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"shatter-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shatter-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"shatter-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshatterimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshatterimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexShatterRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShatterImagePlugin from 'phaser3-rex-plugins/plugins/shatterimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShatterImagePlugin',\nplugin: ShatterImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexShatterRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ShatterRenderTexture } from 'phaser3-rex-plugins/plugins/shatterimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new ShatterRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexShatterRenderTexturege(x, y, width, height, {\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexShatterRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexShatterRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"shatter-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShatterRenderTexturege extends ShatterRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyShatterRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"shatter-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"shatter-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"shatter-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"shatter-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"shatter-rendertexture/#other-properties","title":"Other properties","text":"<p>See Shatter image game object.</p>"},{"location":"ship/","title":"Ship","text":""},{"location":"ship/#introduction","title":"Introduction","text":"<p>Move game object as a space ship by cursor keys.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"ship/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ship/#install-plugin","title":"Install plugin","text":""},{"location":"ship/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshipplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshipplugin.min.js', true);\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = scene.plugins.get('rexshipplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import ShipPlugin from 'phaser3-rex-plugins/plugins/ship-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShip',\nplugin: ShipPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = scene.plugins.get('rexShip').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import Ship from 'phaser3-rex-plugins/plugins/ship.js';\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = new Ship(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#create-instance","title":"Create instance","text":"<pre><code>var ship = scene.plugins.get('rexShip').add(gameObject, {\n// maxSpeed: 200,\n// acceleration: 200,\n// drag: 0.99,\n// turnSpeed: 300,\n// wrap: true,\n// padding: 0,\n// enable: true,\n// cursorKeys: scene.input.keyboard.createCursorKeys()\n});\n</code></pre> <ul> <li>Movement<ul> <li><code>maxSpeed</code></li> <li><code>acceleration</code></li> <li><code>drag</code></li> </ul> </li> <li>Rotation<ul> <li><code>turnSpeed</code> : Angular velocity</li> </ul> </li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>true</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>cursorKeys</code> : CursorKey object, using keyboard's cursorKeys by default.</li> </ul>"},{"location":"ship/#set-max-speed","title":"Set max speed","text":"<pre><code>ship.setMaxSpeed(speed);\n</code></pre>"},{"location":"ship/#set-acceleration","title":"Set acceleration","text":"<pre><code>ship.setAcceleration(acc);\n</code></pre>"},{"location":"ship/#set-drag","title":"Set drag","text":"<pre><code>ship.setDrag(drag);\n</code></pre>"},{"location":"ship/#set-turn-speed","title":"Set turn speed","text":"<pre><code>ship.setTurnSpeed(angularVelocity);\n</code></pre>"},{"location":"ship/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>ship.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"skew-image/","title":"Image","text":""},{"location":"skew-image/#introduction","title":"Introduction","text":"<p>Skewable Image.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"skew-image/#live-demos","title":"Live demos","text":"<ul> <li>Skew image</li> </ul>"},{"location":"skew-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"skew-image/#install-plugin","title":"Install plugin","text":""},{"location":"skew-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SkewImage } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new SkewImage(scene, x, y, texture, frame);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"skew-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexSkewImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n});\n</code></pre> <p>Add quadimage from JSON</p> <pre><code>var quadimage = scene.make.rexSkewImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\nadd: true\n});\n</code></pre>"},{"location":"skew-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySkewImage extends SkewImage {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MySkewImage(scene, x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#skew","title":"Skew","text":"<ul> <li>Set     <pre><code>image.setSkewX(skewXRad);\nimage.setSkewXDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkewY(skewXRad);\nimage.setSkewYDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkew(skewXRad, skewYRad);\nimage.setSkewDeg(skewXDeg, skewYDeg);\n</code></pre> <pre><code>image.skewX = skewXRad;\nimage.skewXDeg = skewXDeg;\n</code></pre> <pre><code>image.skewY = skewYRad;\nimage.skewYDeg = skewYDeg;\n</code></pre></li> <li>Get     <pre><code>var skewXRad = image.skewX;\nvar skewXDeg = image.skewXDeg;\n</code></pre> <pre><code>var skewYRad = image.skewY;\nvar skewYDeg = image.skewYDeg;\n</code></pre></li> </ul>"},{"location":"skew-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object.</p>"},{"location":"skew-rendertexture/","title":"Render texture","text":""},{"location":"skew-rendertexture/#introduction","title":"Introduction","text":"<p>Skewable render texture.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"skew-rendertexture/#live-demos","title":"Live demos","text":""},{"location":"skew-rendertexture/#usage","title":"Usage","text":""},{"location":"skew-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"skew-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexSkewRenderTexture(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexSkewRenderTexturege(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SkewRenderTexture } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new SkewRenderTexture(scene, x, y, width, height);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexSkewRenderTexturege(x, y, width, height);\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexSkewRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexSkewRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"skew-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySkewRenderTexturege extends SkewRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MySkewRenderTexturege(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"skew-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"skew-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"skew-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"skew-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"skew-rendertexture/#other-properties","title":"Other properties","text":"<p>See Skew image game object.</p>"},{"location":"slider/","title":"Slider","text":""},{"location":"slider/#introduction","title":"Introduction","text":"<p>Drag thumb on a slider bar.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"slider/#live-demos","title":"Live demos","text":"<ul> <li>Slider</li> <li>Color picker</li> </ul>"},{"location":"slider/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"slider/#install-plugin","title":"Install plugin","text":""},{"location":"slider/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsliderplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsliderplugin.min.js', true);\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = scene.plugins.get('rexsliderplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SliderPlugin from 'phaser3-rex-plugins/plugins/slider-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSlider',\nplugin: SliderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = scene.plugins.get('rexSlider').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Slider from 'phaser3-rex-plugins/plugins/slider.js';\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = new Slider(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#create-instance","title":"Create instance","text":"<pre><code>var slider = scene.plugins.get('rexSlider').add(gameObject, {\n// endPoints: [\n//     {x:0, y:0},\n//     {x:0, y:0}\n// ],\n// value: 0,\n// enable: true,\n\n// valuechangeCallback: null,\n// valuechangeCallbackScope: null\n});\n</code></pre> <ul> <li><code>endPoints</code> : An array of 2 end-points (<code>[{x,y}, {x,y}]</code>)</li> <li><code>value</code> : Initial value between 0 to 1</li> <li><code>enable</code> : Set true to drag thumb</li> <li><code>valuechangeCallback</code> , <code>valuechangeCallbackScope</code> : Bind this callback to <code>valuechange</code> event</li> </ul>"},{"location":"slider/#set-end-points","title":"Set end-points","text":"<pre><code>slider.setEndPoints(p0x, p0y, p1x, p1y);\n// slider.setEndPoints(p0, p1); // p0, p1: {x, y}\n// slider.setEndPoints(points); // points: [p0, p1]\n</code></pre>"},{"location":"slider/#get-value","title":"Get value","text":"<pre><code>var value = slider.value;          // value: between 0 to 1\n// var value = slider.getValue();  // value: between 0 to 1\n// var value = slider.getValue(min, max);  // value: between min to max\n</code></pre>"},{"location":"slider/#set-value","title":"Set value","text":"<pre><code>slider.value = newValue;       // newValue: between 0 to 1\n// slider.setValue(newValue);  // newValue: between 0 to 1\n// slider.setValue(newValue, min, max);  // newValue: between min to max\n</code></pre> <pre><code>slider.addValue(inc);  // inc: between 0 to 1\n// slider.addValue(inc, min, max);  // inc: between min to max\n</code></pre> <p>Fires <code>valuechange</code> event if new value is not equal to current value.</p>"},{"location":"slider/#events","title":"Events","text":"<ul> <li>Value changed     <pre><code>slider.on('valuechange', function(newValue, prevValue){ /* ... */ });\n</code></pre><ul> <li>newValue: between 0 to 1</li> <li>prevValue: between 0 to 1</li> </ul> </li> </ul>"},{"location":"slider/#drag","title":"Drag","text":""},{"location":"slider/#drag-enable","title":"Drag enable","text":"<ul> <li>Get     <pre><code>var enable = slider.enable;\n</code></pre></li> <li>Set     <pre><code>slider.setEnable(enable);  // enable: true, or false\nslider.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>slider.toggleEnable();\n</code></pre></li> </ul>"},{"location":"slider/#is-dragging","title":"Is dragging","text":"<pre><code>var isDragging = slider.isDragging;\n</code></pre>"},{"location":"snap/","title":"Snap","text":""},{"location":"snap/#introduction","title":"Introduction","text":"<p>Snap a value to nearest grid slice, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"snap/#usage","title":"Usage","text":""},{"location":"snap/#round","title":"Round","text":"<pre><code>var out = Phaser.Math.Snap.To(value, gap);\n// var out = Phaser.Math.Snap.To(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>10</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>15</code></li> </ul>"},{"location":"snap/#ceil","title":"Ceil","text":"<pre><code>var out = Phaser.Math.Snap.Ceil(value, gap);\n// var out = Phaser.Math.Snap.Ceil(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>15</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>15</code></li> </ul>"},{"location":"snap/#floor","title":"Floor","text":"<pre><code>var out = Phaser.Math.Snap.Floor(value, gap);\n// var out = Phaser.Math.Snap.Floor(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>10</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>10</code></li> </ul>"},{"location":"snapshot/","title":"Snapshot","text":""},{"location":"snapshot/#introduction","title":"Introduction","text":"<p>Get snapshot image, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"snapshot/#usage","title":"Usage","text":""},{"location":"snapshot/#get-snapshot-image","title":"Get snapshot image","text":"<ul> <li>Whole canvas     <pre><code>game.renderer.snapshot(callback);\n// game.renderer.snapshot(callback, type, encoderOptions);\n</code></pre></li> <li>A rectangle area     <pre><code>game.renderer.snapshotArea(x, y, width, height, callback);\n// game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions);\n</code></pre><ul> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : Top-left position and size based on game viewport. (not the world)</li> </ul> </li> <li>A pixel     <pre><code>game.renderer.snapshotPixel(x, y, callback);\n</code></pre></li> </ul> <p>Parameters:</p> <ul> <li><code>type</code> : <code>'image/png'</code></li> <li><code>encoderOptions</code> : <code>0.92</code></li> <li><code>callback</code> :     <pre><code>function(image){ /* ... */};\n</code></pre><ul> <li><code>image</code> : Image element</li> </ul> </li> </ul>"},{"location":"sprite/","title":"Sprite","text":""},{"location":"sprite/#introduction","title":"Introduction","text":"<p>Display of both static and animated images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"sprite/#usage","title":"Usage","text":""},{"location":"sprite/#load-texture","title":"Load texture","text":"<p>Texture for static image</p> <pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"sprite/#load-atlas","title":"Load atlas","text":"<p>Atlas for animation images</p> <pre><code>scene.load.atlas(key, textureURL, atlasURL);\n</code></pre> <p>Reference: load atlas</p>"},{"location":"sprite/#add-sprite-object","title":"Add sprite object","text":"<pre><code>var sprite = scene.add.sprite(x, y, key);\n// var sprite = scene.add.sprite(x, y, key, frame);\n</code></pre> <p>Add sprite from JSON</p> <pre><code>var sprite = scene.make.sprite({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n\n// anims: {\n// key: ,\n// repeat: ,\n// ...\n// },\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> :<ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"sprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySprite extends Phaser.GameObjects.Sprite {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var sprite = new MySprite(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"sprite/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"sprite/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"sprite/#animation","title":"Animation","text":""},{"location":"sprite/#create-animation","title":"Create animation","text":"<ul> <li>Global animation for all sprites     <pre><code>scene.anims.create(config);\n</code></pre></li> <li>Private animation for this sprite     <pre><code>sprite.anims.create(config);\n</code></pre></li> </ul> <p><code>config</code> : See Add animation section.</p>"},{"location":"sprite/#create-aseprite-animation","title":"Create Aseprite animation","text":"<ul> <li>Global Aseprite animation for all sprites     <pre><code>scene.anims.createFromAseprite(key, tags);\n</code></pre></li> <li>Private Aseprite animation for this sprite     <pre><code>sprite.anims.createFromAseprite(key, tags);\n</code></pre></li> </ul>"},{"location":"sprite/#remove-animation","title":"Remove animation","text":"<ul> <li>Remove from global animation manager     <pre><code>scene.anims.remove(key);\n</code></pre>     or     <pre><code>sprite.anims.globalRemove(key);\n</code></pre></li> <li>Remove from private animation state     <pre><code>sprite.anims.remove(key);\n</code></pre></li> </ul>"},{"location":"sprite/#get-animation","title":"Get animation","text":"<ul> <li>Get global animation object <pre><code>var anim = scene.anims.get(key);\n</code></pre></li> <li>Get private animation object <pre><code>var anim = sprite.anims.get(key);\n</code></pre></li> </ul>"},{"location":"sprite/#has-animation","title":"Has animation","text":"<ul> <li>Has global animation object     <pre><code>var hasAnim = scene.anims.exists(key);\n</code></pre></li> <li>Get private animation object     <pre><code>var hasAnim = sprite.anims.exists(key);\n</code></pre></li> </ul>"},{"location":"sprite/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>sprite.play(key);\n// sprite.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>sprite.playReverse(key);\n// sprite.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>sprite.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>sprite.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"sprite/#chain","title":"Chain","text":"<ul> <li>Chain next animation     <pre><code>sprite.chain(key);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Chain next and next animation     <pre><code>sprite.chain(key0).chain(key1);\n</code></pre><ul> <li><code>key0</code>, <code>key1</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"sprite/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>sprite.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>sprite.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>sprite.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = sprite.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>sprite.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"sprite/#restart","title":"Restart","text":"<pre><code>sprite.anims.restart();\n// sprite.anims.restart(includeDelay, resetRepeats);\n</code></pre>"},{"location":"sprite/#properties","title":"Properties","text":"<ul> <li>Has started     <pre><code>var hasStarted = sprite.anims.hasStarted;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = sprite.anims.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = sprite.anims.isPaused;\n</code></pre></li> <li>Total frames count     <pre><code>var frameCount = sprite.anims.getTotalFrames();\n</code></pre></li> <li>Delay     <pre><code>var delay = sprite.anims.delay;\n</code></pre></li> <li>Repeat<ul> <li>Total repeat count     <pre><code>var repeatCount = sprite.anims.repeat;\n</code></pre></li> <li>Repeat counter     <pre><code>var repeatCount = sprite.anims.repeatCounter;\n</code></pre></li> <li>Repeat delay     <pre><code>var repeatDelay = sprite.anims.repeatDelay;\n</code></pre></li> <li>Yoyo     <pre><code>var repeatDelay = sprite.anims.yoyo;\n</code></pre></li> </ul> </li> <li>Current animation key     <pre><code>var key = sprite.anims.getName();\n</code></pre><ul> <li><code>key</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current frame name     <pre><code>var frameName = sprite.anims.getFrameName();\n</code></pre><ul> <li><code>frameName</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current animation     <pre><code>var currentAnim = sprite.anims.currentAnim;\n</code></pre></li> <li>Current frame     <pre><code>var currentFrame = sprite.anims.currentFrame;\n</code></pre></li> </ul>"},{"location":"sprite/#events","title":"Events","text":"<ul> <li>On start     <pre><code>sprite.on('animationstart', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationstart-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On restart     <pre><code>sprite.on('animationrestart', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationrestart-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On complete     <pre><code>sprite.on('animationcomplete', function(currentAnim, currentFramee, sprite){});\n</code></pre> <pre><code>sprite.on('animationcomplete-' + key, function(currentAnim, currentFramee, sprite){});\n</code></pre></li> <li>On stop     <pre><code>sprite.on('animationstop', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationstop-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On update     <pre><code>sprite.on('animationupdate', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationupdate-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On repeat     <pre><code>sprite.on('animationrepeat', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationrepeat-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> </ul>"},{"location":"statemanager/","title":"State manager","text":""},{"location":"statemanager/#introduction","title":"Introduction","text":"<p>Another version of Finite state machine.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"statemanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"statemanager/#install-plugin","title":"Install plugin","text":""},{"location":"statemanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexstatemanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexstatemanagerplugin.min.js', true);\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = scene.plugins.get('rexstatemanagerplugin').add(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import StateManagerPlugin from 'phaser3-rex-plugins/plugins/statemanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexStateManager',\nplugin: StateManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = scene.plugins.get('rexStateManager').add(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import StateManager from 'phaser3-rex-plugins/plugins/statemanager.js';\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = new StateManager(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#create-instance","title":"Create instance","text":"<pre><code>var states = scene.plugins.get('rexStateManager').add({\neventEmitter: undefined\n});\n</code></pre> <ul> <li><code>eventEmitter</code><ul> <li><code>undefined</code> : Create a private event emitter, default value.</li> <li><code>false</code> : Don't add any event emitter, i.e. no event will be fired.</li> <li>Event emitter object : Fire event through this event emitter.</li> </ul> </li> </ul>"},{"location":"statemanager/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStates extends StateManager {\nconstructor(config) {\nsuper(config);\n\nthis.addStates({\nA: {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n});\n}\n}\n</code></pre></li> <li>Create instance     <pre><code>var states = new MyStates(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#add-new-state","title":"Add new state","text":"<p><pre><code>states.addState(name, {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n})\n</code></pre> <pre><code>states.addState({\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n})\n</code></pre></p> <p>or</p> <p><pre><code>states.addStates({\n'A' : {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n})\n</code></pre> <pre><code>states.addStates([\n{\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n]);\n</code></pre></p>"},{"location":"statemanager/#read-state","title":"Read state","text":"<ul> <li>Current state     <pre><code>var curState = state.state;\n</code></pre></li> <li>Previous state     <pre><code>var preState = state.prevState;\n</code></pre></li> </ul>"},{"location":"statemanager/#start-at-state","title":"Start at state","text":"<p>Set new state without triggering any state-changing callbacks or events.</p> <pre><code>state.start(newState);\n</code></pre>"},{"location":"statemanager/#next-state","title":"Next state","text":"<pre><code>graph TB\n\nnext[\"states.next()\"] --&gt; next_A[\"stateA.next()&lt;br&gt;return 'B'\"]\n\nnext_A --&gt; eventStateChange[\"states.emit('statechange', states)&lt;br&gt;states.prevState -&gt; states.state\"]\n\nsubgraph State changing\n\neventStateChange --&gt; exit_A[\"stateA.exit()\"]\nexit_A --&gt; eventExitA[\"states.emit('exit_A', states)\"]\n\neventExitA --&gt; enter_B[\"stateB.enter()\"]\nenter_B --&gt; eventEnterB[\"states.emit('enter_B', states)\"]\n\nsubgraph Exit\nexit_A\neventExitA\nend\n\nsubgraph Enter\nenter_B\neventEnterB\nend\n\nend\n\ngoto[\"states.goto('B')\"] --&gt; eventStateChange\n\nsubgraph Request\n\nsubgraph Next\nnext\nnext_A\nend\n\nsubgraph Goto\ngoto\nend\n\nend</code></pre>"},{"location":"statemanager/#request","title":"Request","text":"<ul> <li>Get next state by callback     <pre><code>states.next();    // nextState = stateA.next()    \n</code></pre></li> <li>Goto state     <pre><code>states.goto(nextState);\n// states.state = nextState;\n</code></pre></li> </ul>"},{"location":"statemanager/#state-changing","title":"State-changing","text":"<p>These callbacks or events will be triggered if state is changing.</p> <p>For example, state is changing from 'A' to 'B'.</p> <ol> <li>event <code>statechange</code> <pre><code>states.on('statechange', function(states) {\nconsole.log( states.prevState + '-&gt;' + states.state );\n});\n</code></pre></li> <li>callback <code>stateA.exit</code></li> <li>event <code>exit_A</code> <pre><code>states.on('exit_A', function(states) {\n/*...*/\n});\n</code></pre></li> <li>callback <code>stateB.enter</code></li> <li>event <code>enter_B</code> <pre><code>states.on('enter_B', function(states) {\n/*...*/\n});\n</code></pre></li> </ol>"},{"location":"statemanager/#enable","title":"Enable","text":"<pre><code>states.setEnable();\n// states.setEnable(false); // disable\n</code></pre> <p>or</p> <pre><code>states.toggleEnable();\n</code></pre> <p><code>states.next()</code> and <code>states.goto()</code> will be ignored if disabled.</p>"},{"location":"statemanager/#update","title":"Update","text":"<ul> <li>Start     <pre><code>states.startUpdate();\nstates.startPreUpdate();\nstates.startPostUpdate();\n// Assume that `scene` is assigned in config of constructor\n</code></pre>     or     <pre><code>states.startUpdate(scene);\nstates.startPreUpdate(scene);\nstates.startPostUpdate(scene);\n</code></pre><ul> <li><code>scene</code> : Scene object</li> </ul> </li> <li>Stop     <pre><code>states.stopUpdate();\nstates.stopPreUpdate();\nstates.stopPostUpdate();\n</code></pre></li> <li>Get scene     <pre><code>var scene = states.getScene();\n// var scene = states._scene;\n</code></pre></li> </ul>"},{"location":"statemanager/#remove-state","title":"Remove state","text":"<ul> <li>Remve a state     <pre><code>states.removeState(stateName);\n</code></pre></li> <li>Remve all states     <pre><code>states.removeAllStates();\n</code></pre></li> </ul>"},{"location":"step/","title":"Step","text":""},{"location":"step/#introduction","title":"Introduction","text":"<p>Interpolate points between previous position and current position with fixed step length.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"step/#live-demos","title":"Live demos","text":"<ul> <li>Step</li> </ul>"},{"location":"step/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"step/#install-plugin","title":"Install plugin","text":""},{"location":"step/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexstepplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexstepplugin.min.js', true);\n</code></pre></li> <li>Add step behavior     <pre><code>var step = scene.plugins.get('rexstepplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import StepPlugin from 'phaser3-rex-plugins/plugins/step-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexStep',\nplugin: StepPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var step = scene.plugins.get('rexStep').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Step from 'phaser3-rex-plugins/plugins/step.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var step = new Step(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#create-instance","title":"Create instance","text":"<pre><code>var step = scene.plugins.get('rexStep').add(gameObject, {\n// enable: true,\n// stepLength: 5,    \n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>true</code> to fire <code>step</code> event for each interpolate point.</li> <li><code>stepLength</code> : Fixed length between each interpolate point.</li> </ul>"},{"location":"step/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>step.setEnable();\n</code></pre>     or     <pre><code>step.enable = true;\n</code></pre></li> <li>Disable     <pre><code>step.setEnable(false);\n</code></pre>     or     <pre><code>step.enable = false;\n</code></pre></li> </ul>"},{"location":"step/#set-step-length","title":"Set step length","text":"<pre><code>step.setStepLength(stepLength);\n// step.stepLength = stepLength;\n</code></pre>"},{"location":"step/#events","title":"Events","text":"<ul> <li>On each interpolate point     <pre><code>step.on('step', function(gameObject, step, x, y){\n\n}, scope);\n</code></pre><ul> <li>Invoke <code>step.cancelStep()</code> to cancel interpolation.</li> </ul> </li> <li>On interpolate points between previous position and current position     <pre><code>step.on('steps', function(gameObject, step, points){\n\n}, scope);\n</code></pre><ul> <li><code>points</code> : Array of point <code>{x, y}</code></li> </ul> </li> </ul>"},{"location":"structs-list/","title":"List","text":""},{"location":"structs-list/#introduction","title":"Introduction","text":"<p>An ordered list, built-in data structure of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"structs-list/#usage","title":"Usage","text":""},{"location":"structs-list/#create-instance","title":"Create instance","text":"<pre><code>var list = new Phaser.Structs.List();\n</code></pre>"},{"location":"structs-list/#add-child","title":"Add child","text":"<pre><code>list.add(child);\n</code></pre> <pre><code>list.addAt(child, index);\n</code></pre>"},{"location":"structs-list/#exist","title":"Exist","text":"<pre><code>var hasChild = list.exists(child);\n</code></pre>"},{"location":"structs-list/#get-child","title":"Get child","text":"<pre><code>var firstChild = list.first;\nvar nextChild = list.next;\nvar prevChild = list.previous;\nvar lastChild = list.last;\n</code></pre> <pre><code>var child = list.getByName(name);\n</code></pre> <pre><code>var child = list.getRandom(startIndex, length);\n</code></pre> <pre><code>var child = list.getFirst(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var child = list.getAll(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var child = list.count(property, value);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre>"},{"location":"structs-list/#get-children","title":"Get children","text":"<pre><code>var children = list.list;\n</code></pre>"},{"location":"structs-list/#sort-children","title":"Sort children","text":"<ul> <li>Sort by property     <pre><code>list.sort(property);\n// list.sort(property, handler);\n</code></pre><ul> <li><code>property</code> : The property to lexically sort by.</li> <li><code>handler</code> :     <pre><code>function (childA, childB) {\nreturn 0; // 0, 1, -1\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"structs-list/#remove-child","title":"Remove child","text":"<pre><code>list.remove(child);\n</code></pre> <pre><code>list.removeAt(index);\n</code></pre> <pre><code>list.removeBetween(startIndex, endIndex);\n</code></pre> <pre><code>list.removeAll();\n</code></pre>"},{"location":"structs-list/#order-of-child","title":"Order of child","text":"<pre><code>list.moveTo(child, index);\n</code></pre> <pre><code>list.bringToTop(child);\n</code></pre> <pre><code>list.sendToBack(child);\n</code></pre> <pre><code>list.moveUp(child);\n</code></pre> <pre><code>list.moveDown(child);\n</code></pre> <pre><code>list.moveAbove(child1, child2);  // Move child1 above child2\n</code></pre> <pre><code>list.moveBelow(child1, child2);  // Move child1 below child2\n</code></pre> <pre><code>list.swap(child1, child2);\n</code></pre> <pre><code>list.reverse();\n</code></pre> <pre><code>list.shuffle();\n</code></pre>"},{"location":"structs-list/#replace-child","title":"Replace child","text":"<pre><code>list.replace(oldChild, newChild);\n</code></pre>"},{"location":"structs-list/#set-properties","title":"Set properties","text":"<pre><code>list.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"structs-list/#for-each-child","title":"For each child","text":"<ul> <li>Iterate current children list     <pre><code>list.each(callback);\n// list.each(callback, context);\n// list.iterate(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"structs-list/#children-counts","title":"Children counts","text":"<pre><code>var size = list.length;\n</code></pre>"},{"location":"structs-set/","title":"Set","text":""},{"location":"structs-set/#introduction","title":"Introduction","text":"<p>A collection of unique elements, built-in data structure of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"structs-set/#usage","title":"Usage","text":""},{"location":"structs-set/#create-instance","title":"Create instance","text":"<pre><code>var set = new Phaser.Structs.Set();\n</code></pre> <p>or</p> <pre><code>var set = new Phaser.Structs.Set(elements);\n</code></pre>"},{"location":"structs-set/#add-an-element","title":"Add an element","text":"<pre><code>set.set(element);\n</code></pre>"},{"location":"structs-set/#remove-an-element","title":"Remove an element","text":"<pre><code>set.delete(element);\n</code></pre>"},{"location":"structs-set/#remove-all-elements","title":"Remove all elements","text":"<pre><code>set.clear();\n</code></pre>"},{"location":"structs-set/#has-element","title":"Has element","text":"<pre><code>set.contains(element);\n</code></pre>"},{"location":"structs-set/#get-elements","title":"Get elements","text":"<pre><code>var elements = set.entries;\n</code></pre> <p>or get a shallow copy of elements</p> <pre><code>var elements = set.getArray();\n</code></pre>"},{"location":"structs-set/#element-counts","title":"Element counts","text":"<pre><code>var size = set.size;\n</code></pre>"},{"location":"structs-set/#for-each-element","title":"For each element","text":"<ul> <li>For when you know this Set will be modified during the iteration.     <pre><code>set.each(function(element, index) {\n// return false;  // return false to cancel iteration\n}, scope)\n</code></pre></li> <li>For when you absolutely know this Set won't be modified during the iteration.     <pre><code>set.iterate(function(element, index) {\n// return false;  // return false to cancel iteration\n}, scope)\n</code></pre></li> </ul>"},{"location":"structs-set/#set-operations","title":"Set operations","text":"<ul> <li>C = A | B    <pre><code>var setC = setA.union(setB);\n</code></pre></li> <li>C = A &amp; B    <pre><code>var setC = setA.intersect(setB);\n</code></pre></li> <li>C = A - B    <pre><code>var setC = setA.difference(setB);\n</code></pre></li> </ul>"},{"location":"tagplayer/","title":"Tag player","text":""},{"location":"tagplayer/#introduction","title":"Introduction","text":"<p>Text commands to control sprites, texts, sound effect or backgroun music.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tagplayer/#live-demos","title":"Live demos","text":"<ul> <li>Sprite</li> <li>Textbox</li> <li>Custom game object</li> <li>Viewport-coordinate</li> </ul>"},{"location":"tagplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tagplayer/#install-plugin","title":"Install plugin","text":""},{"location":"tagplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextagplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextagplayerplugin.min.js', true);\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = scene.plugins.get('rextagplayerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TagPlayerPlugin from 'phaser3-rex-plugins/plugins/tagplayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTagPlayerPlugin',\nplugin: TagPlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = scene.plugins.get('rexTagPlayerPlugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TagPlayer from 'phaser3-rex-plugins/plugins/tagplayer.js';\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = new TagPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#create-instance","title":"Create instance","text":"<pre><code>var tagPlayer = scene.plugins.get('rexTagPlayerPlugin').add(scene, {\nparser: {\ndelimiters: '[]',\ncomment: '//',\n// translateTagNameCallback: undefined,\n}\n\nsprites: {\n// createGameObject: 'sprite',\n// fade: 500,  \n// fade: {mode: 'tint', time: 500},\n// viewportCoordinate: false,\n// symbols: undefined,  // { key:value }\n}, // sprites: false,\n\ntexts: {\n// createGameObject: undefined,        \n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n// viewportCoordinate: false,\n// symbols: undefined,  // { key:value }\n}\n// texts: false,\n\nsounds: {\nbgm: {\ninitial: undefinied,\nloop: true,\nfade: 500\n},\nbgm2: {\ninitial: undefinied,\nloop: true,\nfade: 500\n}\n},\n\nclickTarget: scene,\n});\n</code></pre> <ul> <li><code>parser</code> : Configuration of parser.<ul> <li><code>parser.delimiters</code> : Delimiters of tag.<ul> <li>A single string with 2 characters. Default value is <code>'[]'</code>.</li> <li>A array with 2 strings. e.x. <code>['[[',']]']</code>.</li> </ul> </li> <li><code>parser.comment</code> : Start word of a comment line. Default value is <code>'//'</code>.<ul> <li><code>null</code>, or <code>false</code> : No comment line.</li> </ul> </li> <li><code>parser.translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>sprites</code> : Configuration of sprites.<ul> <li><code>sprites.createGameObject</code> : <ul> <li><code>'sprite'</code> : Create sprite game object. Default behavior.</li> <li><code>'image'</code> : Create image game object.</li> <li>Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[sprite.name=a,b,c]</code> </li> </ul> </li> </ul> </li> <li><code>sprites.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>sprite.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>sprite.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>sprites.viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>sprites.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> <li><code>false</code>, <code>null</code> : No sprite manager</li> </ul> </li> <li><code>texts</code> : Configuration of texts.<ul> <li><code>texts.createGameObject</code> : <ul> <li><code>undefined</code>, or <code>'text'</code> : Create text game object. Default behavior.</li> <li>Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[text.name=a,b,c]</code> </li> </ul> </li> </ul> </li> <li><code>texts.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a text game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>texts.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>texts.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>texts.viewportCoordinate</code> : Apply viewportCoordinate behavior to text game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>texts.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> <li><code>false</code>, <code>null</code> : No text manager</li> </ul> </li> <li><code>sounds</code> : Configuration of sound effect, or background music.<ul> <li><code>sounds.bgm.initial</code>, <code>sounds.bgm2.initial</code> : Initial music instance created by <code>scene.sound.add(key)</code> before starting playing content.<ul> <li><code>undefined</code> : No initial music instance, default value.</li> </ul> </li> <li><code>sounds.bgm.loop</code>, <code>sounds.bgm2.loop</code> :<ul> <li><code>true</code> : Loop background music, default behavior.</li> <li><code>false</code> : Play background music once.</li> </ul> </li> <li><code>sounds.bgm.fade</code>, <code>sounds.bgm2.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when starting or stopping a background music.</li> <li>A number : Fade-in or fade-out (cross-fade) when starting or stopping a background music. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>clickTarget</code> : Click target.<ul> <li><code>scene</code> : Any pointer down on this scene. Default target.</li> </ul> </li> </ul>"},{"location":"tagplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTagPlayer extends TagPlayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tagPlayer = new MyTagPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#game-object-manager","title":"Game object manager","text":"<pre><code>tagPlayer.addGameObjectManager({\nname: goType,\ncreateGameObject: function(scene, ...) {\nreturn gameObject\n},\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\n// symbols: undefined,  // { key:value },\n})\n</code></pre> <ul> <li><code>name</code> : Name of this game object manager, a string.</li> <li><code>createGameObject</code> : Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[goType.name=a,b,c]</code> </li> </ul> </li> <li><code>fade</code> : Tint-fade (if game object has <code>tint</code> property) or alpha-fade game object when creating or destroying a game object.<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>false</code> : Do nothing, default behavior.</li> <li><code>true</code>, or an object :<ul> <li><code>viewport</code> : <ul> <li><code>undefined</code> : Rectangle of display area under main camera of current scene. Default value.</li> <li>A rectangle</li> </ul> </li> </ul> </li> </ul> </li> <li><code>symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul>"},{"location":"tagplayer/#built-in-commands","title":"Built-in commands","text":"<p><code>goType</code> : <code>name</code> parameter in config of <code>tagPlayer.addGameObjectManager</code> method</p> <ul> <li>Add game object : <code>[goType.name=a,b,c]</code><ul> <li>Tint-fade-in, or alpha-fade-in if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove game object : <code>[/goType.name]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all game objects : <code>[/goType]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[goType.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[goType.name.x=value]</code>, <code>[goType.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[goType.name.prop.easeMode=value,duration]\n[goType.name.prop.easeMode=value,duration,repeat]\n[goType.name.prop.easeMode=value,duration,easeFunction,repeat]\n[goType.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Wait ease task of game object's number property : <code>[wait=goType.name.prop]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a game objects are destroyed : <code>[wait=goType.name]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all game objects are destroyed : <code>[wait=goType]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in game object's data manager set to <code>true</code>/<code>false</code> : <code>[wait=goType.name.dataKey]</code>/<code>[wait=goType.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagplayer/#execute-commands","title":"Execute commands","text":"<pre><code>tagPlayer.play(commands);\n</code></pre> <p>or</p> <pre><code>tagPlayer.playPromise(commands)\n.then(function(){\n// Typing content complete\n})\n</code></pre>"},{"location":"tagplayer/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>tagPlayer.pause();\n</code></pre></li> <li>Pause until event     <pre><code>tagPlayer.pauseUntilEvent(eventEmitter, eventName);\n</code></pre></li> <li>Is paused (not playing)     <pre><code>var isPaused = !tagPlayer.isPlaying;\n</code></pre></li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"tagplayer/#resume","title":"Resume","text":"<pre><code>tagPlayer.resume();\n</code></pre>"},{"location":"tagplayer/#time-scale","title":"Time scale","text":"<p>Time scale of typing, typing animation, sprite animation and easing of sprite's properties.</p> <ul> <li>Get     <pre><code>var timeScale = tagPlayer.timeScale;\n</code></pre></li> <li>Set     <pre><code>tagPlayer.setTimeScale(timeScale);    </code></pre> <pre><code>tagPlayer.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"tagplayer/#events","title":"Events","text":"<ul> <li>On typing content complete     <pre><code>tagPlayer.on('complete', function() {\n\n})\n</code></pre></li> </ul>"},{"location":"tagplayer/#tags-of-content","title":"Tags of content","text":""},{"location":"tagplayer/#sprite","title":"Sprite","text":"<ul> <li>Add sprite : <code>[sprite.name=textureKey,frameKey]</code><ul> <li>Tint-fade-in if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove sprite : <code>[/sprite.name]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all sprites : <code>[/sprite]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[sprite.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[sprite.name.x=value]</code>, <code>[sprite.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.prop.easeMode=value,duration]\n[sprite.name.prop.easeMode=value,duration,repeat]\n[sprite.name.prop.easeMode=value,duration,easeFunction,repeat]\n[sprite.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Set texture : <code>[sprite.name.texture=textureKey,frameKey]</code></li> <li>Play animation : <code>[sprite.name.play=animationKey]</code>, or <code>[sprite.name.play=animationKey0,animationKey1,...]</code><ul> <li>Can play animation without adding sprite first.</li> </ul> </li> <li>Stop animation : <code>[/sprite.name.play]</code>, or <code>[sprite.name.stop]</code></li> <li>Pause animation : <code>[sprite.name.pause]</code></li> </ul>"},{"location":"tagplayer/#text","title":"Text","text":"<ul> <li>Add text : <code>[text.name]</code><ul> <li>Tint-fade-in if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove text : <code>[/text.name]</code><ul> <li>Tint-fade-out if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all texts : <code>[/text]</code><ul> <li>Tint-fade-out if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[text.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[text.name.x=value]</code>, <code>[text.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.prop.easeMode=value,duration]\n[sprite.name.prop.easeMode=value,duration,repeat]\n[sprite.name.prop.easeMode=value,duration,easeFunction,repeat]\n[sprite.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Set text     <pre><code>[text.name.text]\ncontent\\\\n\nnewline\\\\n\nnewline\n</code></pre></li> <li>Typing text     <pre><code>[text.name.typing]\n// [text.name.typing=speed]\ncontent\\\\n\nnewline\\\\n\nnewline\n</code></pre></li> </ul>"},{"location":"tagplayer/#sound-effect","title":"Sound effect","text":"<ul> <li>Play : <code>[se=key]</code>, <code>[se2=key]</code><ul> <li>Sound effect will be destroyed when complete</li> </ul> </li> <li>Play with fade in volume : <code>[se=key,1000]</code>, <code>[se2=key,1000]</code></li> <li>Fade in volume : <code>[se.fadein=1000]</code>, <code>[se2.fadein=1000]</code></li> <li>Fade out volume : <code>[se.fadeout=1000]</code>, <code>[se2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[se.fadeout=1000,stop]</code>, <code>[se2.fadeout=1000,stop]</code></li> <li>Set volume : <code>[se.volume=1]</code>, <code>[se2.volume=1]</code></li> </ul>"},{"location":"tagplayer/#background-music","title":"Background music","text":"<ul> <li>Play, stop : <code>[bgm=key]</code>, <code>[/bgm]</code>, <code>[bgm2=key]</code>, <code>[/bgm2]</code><ul> <li>Previous background music will be stopped and destroyed.</li> <li>Cross fade to next background music if <code>sounds.bgm.fade</code>/<code>sounds.bgm2.fade</code> is not <code>0</code></li> </ul> </li> <li>Play with fade in volume : <code>[bgm=key,1000]</code>, <code>[bgm2=key,1000]</code></li> <li>Pause, resume : <code>[bgm.pause]</code>, <code>[/bgm.pause]</code>, <code>[bgm2.pause]</code>, <code>[/bgm2.pause]</code></li> <li>Fade in volume : <code>[bgm.fadein=1000]</code>, <code>[bgm2.fadein=1000]</code></li> <li>Fade out volume : <code>[bgm.fadeout=1000]</code>, <code>[bgm2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[bgm.fadeout=1000,stop]</code>, <code>[bgm2.fadeout=1000,stop]</code></li> <li>Cross fade to another background music : <code>[bgm.cross=key,10000]</code>, <code>[bgm2.cross=key,10000]</code></li> <li>Set volume : <code>[bgm.volume=1]</code>, <code>[bgm2.volume=1]</code></li> <li>Mute : <code>[bgm.mute]</code>, <code>[bgm2.mute]</code>, <code>[bgm.unmute]</code>, <code>[bgm2.unmute]</code></li> </ul>"},{"location":"tagplayer/#camera","title":"Camera","text":"<ul> <li>Fade-in effect : <code>[camera.fadein]</code>, <code>[camera.fadein=1000]</code>, or <code>[camera.fadein=duration,red,green,blue]</code></li> <li>Fade-out effect : <code>[camera.fadeout]</code>, <code>[camera.fadeout=1000]</code>, or <code>[camera.fadeout=duration,red,green,blue]</code></li> <li>Flash effect : <code>[camera.flash]</code>, <code>[camera.flash=1000]</code>, or <code>[camera.flash=duration,red,green,blue]</code></li> <li>Shake effect : <code>[camera.shake]</code>, <code>[camera.shake=1000]</code>, or <code>[camera.shake=duration,intensity]</code></li> <li>Zoom<ul> <li>Set zoom : <code>[camera.zoom=2]</code></li> <li>Zoom to : <code>[camera.zoom.to=1,1000]</code>, or <code>[camera.zoom.to=zoomValue,duration,Cubic]</code></li> </ul> </li> <li>Rotate<ul> <li>Set angle : <code>[camera.rotate=90]</code>, angle in degrees</li> <li>Rotate to : <code>[camera.rotate.to=0,1000]</code>, or <code>[camera.rotate.to=deg,duration,Cubic]</code>, angle in degrees</li> </ul> </li> <li>Scroll<ul> <li>Scroll x,y : <code>[camera.scroll=0,200]</code></li> <li>Scroll x,y to : <code>[camera.scroll.to=0,200,1000]</code>, or <code>[camera.rotate.to=x,y,duration,Cubic]</code></li> </ul> </li> </ul>"},{"location":"tagplayer/#wait-conditions","title":"Wait conditions","text":"<ul> <li>Wait click : <code>[wait=click]</code>, <code>[click]</code><ul> <li>Also fire event <code>'wait.click'</code> <pre><code> tagPlayer.on('wait.click', function() {\n})\n</code></pre></li> </ul> </li> <li>Wait key-down : <code>[wait=enter]</code>, <code>[wait=space]</code>, ....<ul> <li>Also fire event <code>'wait.keydown'</code> <pre><code> tagPlayer.on('wait.keydown', function(keyName) {\n})\n</code></pre></li> </ul> </li> <li>Wait time : <code>[wait=1000]</code><ul> <li>Also fire event <code>'wait.time'</code> <pre><code> tagPlayer.on('wait.time', function(time) {\n})\n</code></pre></li> </ul> </li> <li>Wait sound effect : <code>[wait=se]</code>, <code>[wait=se2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> tagPlayer.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait background music : <code>[wait=bgm]</code>, <code>[wait=bgm2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> tagPlayer.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait camera effect : <code>[wait=camera.fadein]</code>, <code>[wait=camera.fadeout]</code>, <code>[wait=camera.flash]</code>, <code>[wait=camera.shake]</code>, <code>[wait=camera.zoom]</code>, <code>[wait=camera.rotate]</code>, <code>[wait=camera.scroll]</code><ul> <li>Also fire event <code>'wait.camera'</code> <pre><code> tagPlayer.on('wait.camera', function(effectName) {\n// effectName : 'camera.fadein', 'camera.fadeout', 'camera.flash', 'camera.shake', 'camera.zoom', 'camera.rotate', 'camera.scroll'\n})\n</code></pre></li> </ul> </li> <li>Wait ease task of sprite's property : <code>[wait=sprite.name.prop]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a sprite are destroyed : <code>[wait=sprite.name]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all sprites are destroyed : <code>[wait=sprite]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in sprite's data manager set to <code>true</code>/<code>false</code> : <code>[wait=sprite.name.dataKey]</code>/<code>[wait=sprite.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait callback : <code>[wait]</code>, or <code>[wait=xxx]</code> (<code>xxx</code> is any string which not been used in above case)<ul> <li>Fire event <code>'wait'</code> <pre><code>tagPlayer.on('wait', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> <li>Fire event <code>'wait.xxx'</code> <pre><code>tagPlayer.on('wait.xxx', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> </ul> </li> <li>Combine conditions : <code>[wait=cond0|cond1|...]</code><ul> <li>Wait click, or enter key down : <code>[wait=click|enter]</code></li> <li>Wait click, enter key down, or 100ms : <code>[wait=click|enter|1000]</code></li> </ul> </li> </ul>"},{"location":"tagplayer/#custom-tag","title":"Custom tag","text":"<p>Assume that adding a custom tag : <code>[custom=10,20][/custom]</code></p> <ul> <li>On parse/execute a <code>+custom</code> tag, will add a custom command child      <pre><code>tagPlayer.on('+custom', function(parser, a, b) {\n// console.log('Parse +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters after <code>=</code></li> <li>Set content callback, will invoke this callback when getting a content      <pre><code>var callback = function(content) {\n// ...\n}\ntagPlayer.setContentCallback(callback, scope);\n</code></pre></li> </ul> </li> <li>On parse/execute a <code>-custom</code> tag, will add a custom command child      <pre><code>tagPlayer.on('-custom', function(parser) {\n// console.log('Parse -custom tag')\n})\n</code></pre><ul> <li>Clear content callback     <pre><code>tagPlayer.setContentCallback();\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagplayer/#content","title":"Content","text":"<p>These lines will be skipped :</p> <ul> <li>Empty line, which only has space characters.</li> <li>Comment line, start with <code>'//'</code>.</li> </ul> <p>New line symbol <code>'\\n'</code> will be removed, use <code>\\\\n</code> to insert a new line character.</p> <p>Content will pass to one of these callback/event</p> <ol> <li>Set content callback     <pre><code>tagPlayer.setContentCallback(callback, scope);\n</code></pre><ul> <li>Clear content callback     <pre><code>tagPlayer.setContentCallback();\n</code></pre></li> </ul> </li> <li>On parse/execute a content, after a <code>[custom]</code> tag.     <pre><code>tagPlayer.on('custom#content', function(content) {   })\n</code></pre></li> <li>On parse/execute a content, after any tag.     <pre><code>tagPlayer.on('content', function(content) {   })\n</code></pre></li> </ol>"},{"location":"tagplayer/#game-objects","title":"Game objects","text":"<ul> <li>Get game object by name     <pre><code>var gameObject = tagPlayer.getGameObject(goType, name);\n</code></pre></li> <li>Get all game objects of a game object manager     <pre><code>var gameObjects = tagPlayer.getGameObject(goType);\n</code></pre><ul> <li><code>gameObjects</code> : <code>{name: gameObject}</code></li> </ul> </li> <li>Add existed game object into game object manager     <pre><code>tagPlayer.addGameObject(goType, name, gameObject);\n</code></pre></li> </ul>"},{"location":"tagplayer/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = tagPlayer.getData(key);\nvar values = tagPlayer.getData(keys); // keys: an array of keys\nvar value = tagPlayer.data.values[key];\n</code></pre></li> <li>Set     <pre><code>tagPlayer.setData(key, value);\ntagPlayer.incData(key, value);    tagPlayer.setData(obj); // obj: {key0:value0, key1:value1, ...}\ntagPlayer.data.values[key] = value;\ntagPlayer.data.values[key] += inc;\n</code></pre>     or     <pre><code>tagPlayer.toggleData(key);\n</code></pre></li> <li>Enable     <pre><code>tagPlayer.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>tagPlayer.on('setdata', function(tagPlayer, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>tagPlayer.on('changedata', function(tagPlayer, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>tagPlayer.on('changedata-' + key, function(tagPlayer, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"tagtext/","title":"Tag Text","text":""},{"location":"tagtext/#introduction","title":"Introduction","text":"<p>Displays text with multi-color, font face, or font size with tags.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"tagtext/#live-demos","title":"Live demos","text":"<ul> <li>Tag text</li> </ul>"},{"location":"tagtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tagtext/#install-plugin","title":"Install plugin","text":""},{"location":"tagtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextagtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextagtextplugin.min.js', true);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexTagText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"tagtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TagTextPlugin from 'phaser3-rex-plugins/plugins/tagtext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTagTextPlugin',\nplugin: TagTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexTagText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"tagtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TagText from 'phaser3-rex-plugins/plugins/tagtext.js';\n</code></pre></li> <li>Add text object     <pre><code>var txt = new TagText(scene, x, y, content, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"tagtext/#add-text-object","title":"Add text object","text":"<pre><code>var tags = {\ntag0: {\ncolor: 'red'\n},\ntag1: {\ncolor: 'blue'\n}\n};\nvar txt = scene.add.rexTagText(x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', {tags:tags});\n// var txt = scene.add.rexTagText(x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags });\n</code></pre> <ul> <li><code>tags</code> : <code>{tagName:tag}</code>, see Properties of tag.</li> </ul> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\nbackgroundColor2: null,\nbackgroundHorizontalGradient: true,\nbackgroundStrokeColor: null,\nbackgroundStrokeLineWidth: 2,\n\nbackgroundCornerRadius: 0,\n// 0   : no round corner, \n// &gt; 0 : convex round corner\n// &lt; 0 : concave round corner\n\nbackgroundCornerIteration: null, color: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nunderline: {\ncolor: '#000',\nthickness: 0,\noffset: 0\n},\nstrikethrough: {\ncolor: '#000',\nthickness: 0,\noffset: 0\n},    // align: 'left',  // Equal to halign\nhalign: 'left', // 'left'|'center'|'right'\nvalign: 'top',  // 'top'|'center'|'bottom'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nlineSpacing: 0,\ntestString: '|M\u00c9qgy',\nwrap: {\nmode: 'none'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: null\n},\n// rtl: false,\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// images: {\n//    key: { y:-8 }\n// }\n\ntags: {\n//tag0: {\n//  color: 'red'\n//},\n//tag1: {\n//  color: 'blue'\n//}\n}\n}\n</code></pre> <pre><code>var txt = scene.add.rexTagText({\nx: 0,\ny: 0,\ntext: '',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\ntags: {}\n}\n})\n</code></pre> <p>or</p> <pre><code>var txt = scene.make.rexTagText({\nx: 100,\ny: 100,\npadding: {\nleft: 64,\nright: 16,\ntop: 20,\nbottom: 40\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\ntags: {}\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre> <ul> <li>Alignment<ul> <li><code>halign</code>, or <code>align</code> : Horizontal alignment.<ul> <li><code>left</code>, <code>center</code>, <code>right</code></li> </ul> </li> <li><code>valign</code> : Vertical alignment.<ul> <li><code>top</code>, <code>center</code>, <code>bottom</code></li> </ul> </li> </ul> </li> <li><code>images</code> : See Image</li> </ul>"},{"location":"tagtext/#properties-of-tag","title":"Properties of tag","text":"<pre><code>{\nfontFamily: 'Courier',   // or 'family', 'font-family'\nfontSize: '16px',        // or 'size', 'font-size'\nfontStyle: 'bold italic',// or 'style', 'font-style'\ncolor: 'red',            // or 'font-color'\nstroke: {\ncolor: 'blue',\nthickness: 1\n},\nshadow: {\ncolor: 'black',\noffsetX: 2,\noffsetY: 2,\nblur: 2\n},\nunderline: {            // or 'u'\ncolor: 'blue',\nthickness: 3,\noffset: -1\n},\nstrikethrough: {        // or 's'\ncolor: 'red',\nthickness: 3,\noffset: -1\n},    y: 0,\nimg: textureKey,\narea: areaKey,\n}\n</code></pre>"},{"location":"tagtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends TagText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', {tags:tags});\n</code></pre></li> </ul>"},{"location":"tagtext/#add-tag","title":"Add tag","text":"<ul> <li>Add a tag     <pre><code>txt.addTag(name, prop);\n</code></pre><ul> <li><code>name</code> : Tag name.</li> <li><code>prop</code> : See Properties of tag</li> </ul> </li> <li>Add tags     <pre><code>txt.addTags({\nname: prop\n});\n</code></pre></li> </ul>"},{"location":"tagtext/#wrap","title":"Wrap","text":"<ul> <li>Wrap by word or character.     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwrap: {\nmode: 'word'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: 300\n}\n}\n});\n</code></pre></li> <li>Wrap mode<ul> <li>Get     <pre><code>var mode = txt.style.wrapMode;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapMode(mode);\n</code></pre><ul> <li><code>'none'</code>, or <code>0</code> : No wrap</li> <li><code>'word'</code>, or <code>1</code> : Word wrap</li> <li><code>'character'</code>, or <code>2</code> : Character wrap</li> </ul> </li> </ul> </li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wrapWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapWidth(width);\n// txt.setWordWrapWidth(width);\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagtext/#content","title":"Content","text":"<ul> <li>Get source text     <pre><code>var curContent = txt.text;\n</code></pre></li> <li>Get plain text     <pre><code>var plainText = txt.getPlainText();\n</code></pre></li> <li>Set     <pre><code>txt.setText('&lt;class=\"name1\"&gt;wor&lt;/class&gt;ld');\n// txt.text = '&lt;class=\"name1\"&gt;wor&lt;/class&gt;ld';\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"tagtext/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);  // font: {fontFamily, fontSize, fontStyle}\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"tagtext/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre></li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre></li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Underline color, thickness<ul> <li>Get     <pre><code>var color = txt.style.underlineColor;\nvar thickness = txt.style.underlineThickness;\nvar offset = txt.style.underlineOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setUnderline(color, thickness, ofset);\ntxt.setUnderlineColor(color);\ntxt.setUnderlineThinkness(thickness);\ntxt.setUnderlineOffset(ofset);\n</code></pre></li> </ul> </li> <li>Strikethrough color, thickness<ul> <li>Get     <pre><code>var color = txt.style.strikethroughColor;\nvar thickness = txt.style.strikethroughThickness;\nvar offset = txt.style.strikethroughOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setStrikethrough(color, thickness, ofset);\ntxt.setStrikethroughColor(color);\ntxt.setStrikethroughThinkness(thickness);\ntxt.setStrikethroughOffset(ofset);\n</code></pre></li> </ul> </li> <li>Background<ul> <li>Color, or gradient color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\nvar color2 = txt.style.backgroundColor2;\nvar isHorizontalGradient = txt.style.backgroundHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get    <pre><code>var color = txt.style.backgroundStrokeColor;\nvar lineWidth = txt.style.backgroundStrokeLineWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundStrokeColor(color, lineWidth);\n</code></pre></li> </ul> </li> <li>Round rectangle<ul> <li>Get     <pre><code>var radius = txt.style.backgroundCornerRadius;\nvar iteration = txt.style.backgroundCornerIteration;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration);\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : <ul> <li><code>undefined</code> : Round rectangle</li> <li><code>0</code> : Octagon</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagtext/#image","title":"Image","text":"<ul> <li>Uses texture key as image key by default.</li> <li>Add image render information     <pre><code>txt.addImage(imgKey, {\nkey: textureKey,\nframe: frameName,\nwidth: undefined,\nheight: undefined,\ny: 0,\nleft: 0,\nright: 0\n});\n</code></pre><ul> <li><code>imgKey</code> : Image key used in text content, i.e. <code>[img=imgKey]</code>.</li> <li><code>key</code> : Texture key.</li> <li><code>frame</code> : Frame name.</li> <li><code>width</code> : Render width, set <code>undefined</code> to use the cut width of frame.</li> <li><code>height</code> : Render height, set <code>undefined</code> to use the cut height of frame.</li> <li><code>y</code> : Extra offset y.</li> <li><code>left</code> : Left padding space.</li> <li><code>Right</code> : Right padding space.</li> </ul> </li> <li>Add some image render informations     <pre><code>txt.addImage(data);\n</code></pre><ul> <li><code>data</code> : <code>{imgKey, config}</code></li> </ul> </li> </ul>"},{"location":"tagtext/#hit-area-of-words","title":"Hit area of words","text":""},{"location":"tagtext/#hitting-events","title":"Hitting events","text":"<ul> <li>Pointer down     <pre><code>txt.on('areadown', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areadown-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer up     <pre><code>txt.on('areaup', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaup-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> </ul>"},{"location":"tagtext/#draw-hit-areas","title":"Draw hit-areas","text":"<pre><code>txt.drawAreaBounds(graphics, color);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul>"},{"location":"tagtext/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"tagtext/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"tagtext/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"tagtext/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"tagtext/#left-margin-of-text","title":"Left margin of text","text":"<pre><code>var leftMargin = txt.measureTextMargins(testString).left;\n</code></pre> <ul> <li><code>testString</code> : Measure left margin of this text.</li> </ul>"},{"location":"tagtext/#shift-start-position-of-text","title":"Shift start position of text","text":"<pre><code>txt.setXOffset(value);\n</code></pre>"},{"location":"tagtext/#resolution","title":"Resolution","text":"<ul> <li>Get     <pre><code>var resolution = txt.style.resolution;\n</code></pre></li> <li>Set     <pre><code>txt.setResolution(resolution);\n</code></pre></li> </ul>"},{"location":"tagtext/#inline-style","title":"Inline style","text":"<p>Define style inline text.</p> <ul> <li><code>&lt;style='color:red'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='size:30px'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='y:-12;size:20px'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='stroke:blue 1px'&gt;Some text&lt;/style&gt;</code> (color thickness)</li> <li><code>&lt;style='shadow:blue 2px 2px 2px'&gt;Some text&lt;/style&gt;</code> (color offsetX offsetY blur)</li> <li><code>&lt;style='underline:blue 3px -1px'&gt;Some text&lt;/style&gt;</code> (color thickness offset)</li> <li><code>&lt;style='strikethrough:blue 3px -1px'&gt;Some text&lt;/style&gt;</code> (color thickness offset)</li> </ul> <p>Or mix them</p> <ul> <li><code>&lt;style='color:red;size:30px'&gt;Some text&lt;/style&gt;</code></li> </ul>"},{"location":"tagtext/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"tagtext/#save-texture","title":"Save texture","text":"<pre><code>txt.generateTexture(key);\n// txt.generateTexture(key, x, y, width, height);\n</code></pre>"},{"location":"tagtext/#rtl","title":"RTL","text":"<ul> <li>Set <code>rtl</code> in style config when creating this text game object</li> <li>Change <code>rtl</code> during runtime     <pre><code>txt.setRTL(rtl).setText(newContent);\n</code></pre><ul> <li>Invoke <code>setRTL</code> method before setting new content.</li> </ul> </li> </ul>"},{"location":"tcrp-player/","title":"Player","text":""},{"location":"tcrp-player/#introduction","title":"Introduction","text":"<p>Player of T ime-C ommand-R ecorder-P layer, to run commands on time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tcrp-player/#live-demos","title":"Live demos","text":"<ul> <li>Replay drawing</li> </ul>"},{"location":"tcrp-player/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tcrp-player/#install-plugin","title":"Install plugin","text":""},{"location":"tcrp-player/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rextcrpplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/tcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/tcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var player = new TCRP.Player(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#create-instance","title":"Create instance","text":"<pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// dtMode: 0,          // 'abs'|'absolute'|0|'inc'|'increment'|1\n// commands: [],       // [[time, command], [time, command], ...]\n// timeScale: 1,\n// scope: undefined\n});\n</code></pre> <ul> <li><code>scene</code> : A scene object, or a game object.</li> <li><code>timeUnit</code> : see next section</li> <li><code>dtMode</code> : see next section</li> <li><code>commands</code> : see next section</li> <li><code>timeScale</code></li> </ul>"},{"location":"tcrp-player/#load-commands","title":"Load commands","text":"<pre><code>player.load(commands, scope, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// dtMode: 0           // 'abs'|'absolute'|0|'inc'|'increment'|1\n});\n</code></pre> <ul> <li>Commands : see also Run commands <pre><code>[\n[time, command],\n[time, command],\n...\n]\n</code></pre><ul> <li>Format of each row :     <pre><code>[time, fnName, param0, param1, ...]\n// [time, callback, param0, param1, ...]\n</code></pre> <pre><code>[time, [fnName, param0, param1, ...]]\n// [time, [callback, param0, param1, ...]]\n</code></pre> <pre><code>[time, [command0, command1, ...]]\n</code></pre></li> </ul> </li> <li>timeUnit: time-unit of time<ul> <li><code>'ms'</code>, or <code>0</code> : time in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : time in second</li> </ul> </li> <li>dtMode: mode of counting time<ul> <li><code>'abs'</code>, <code>'absolute'</code>, or <code>0</code> : timeout = time</li> <li><code>'inc'</code>, <code>'increment'</code>, <code>1</code> : timeout = time + previous-time</li> </ul> </li> </ul>"},{"location":"tcrp-player/#start-playing","title":"Start playing","text":"<pre><code>player.start();\n// player.start(startAt);  // Start-at time in ms\n</code></pre>"},{"location":"tcrp-player/#events","title":"Events","text":"<ul> <li>Start     <pre><code>player.on('start', function(scene, player){});\n</code></pre></li> <li>Pause     <pre><code>player.on('pause', function(scene, player){});\n</code></pre></li> <li>Resume     <pre><code>player.on('resume', function(scene, player){});\n</code></pre></li> <li>Stop     <pre><code>player.on('stop', function(scene, player){});\n</code></pre></li> <li>Complete     <pre><code>player.on('complete', function(scene, player){});\n</code></pre></li> <li>Run command     <pre><code>player.on('runcommand', function(commands, scope){});\n</code></pre></li> </ul>"},{"location":"tcrp-player/#pause-resume-stop-playing","title":"Pause, Resume, stop playing","text":"<pre><code>player.pause();\nplayer.resume();\nplayer.stop();\n</code></pre>"},{"location":"tcrp-player/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>player.seek(time);   // Elapsed time in ms\n</code></pre>"},{"location":"tcrp-player/#seek-to-next-command","title":"Seek to next command","text":"<pre><code>player.seekToNext();\n</code></pre> <p>Seek to time of next command.</p>"},{"location":"tcrp-player/#state-of-player","title":"State of player","text":"<pre><code>var isPlaying = player.isPlaying;\nvar completed = player.completed;\nvar now = player.now;\n</code></pre>"},{"location":"tcrp-player/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>player.setTimeScale(value);\n// player.timeScale = value;\n</code></pre></li> <li>Get     <pre><code>var timeScale = player.timeScale;\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/","title":"Recoder","text":""},{"location":"tcrp-recoder/#introduction","title":"Introduction","text":"<p>Recorder of T ime-C ommand-R ecorder-P layer, to store commands with time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tcrp-recoder/#live-demos","title":"Live demos","text":"<ul> <li>Replay drawing</li> </ul>"},{"location":"tcrp-recoder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tcrp-recoder/#install-plugin","title":"Install plugin","text":""},{"location":"tcrp-recoder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rextcrpplugin').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/tcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/tcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var recorder = new TCRP.Recorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#create-instance","title":"Create instance","text":"<pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre> <ul> <li>Destroy when scene stopped</li> </ul> <p>or</p> <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(gameObject);\n</code></pre> <ul> <li>Destroy when game object destroyed</li> </ul>"},{"location":"tcrp-recoder/#start-recording","title":"Start recording","text":"<pre><code>recorder.start();\n// recorder.start(startAt);  // start-at time in ms\n</code></pre>"},{"location":"tcrp-recoder/#push-commands","title":"Push commands","text":"<pre><code>recorder.addCommand([fnName, param0, param1, ...]);\n// recorder.addCommand([command0, command1, ...]);\n// recorder.addCommand([fnName, param0, param1, ...], offset);  // time-offset in ms\n</code></pre> <p>See also Run commands</p>"},{"location":"tcrp-recoder/#get-commands","title":"Get commands","text":"<pre><code>var commands = recorder.getCommands();        // Get a shallow copy of commands\n// var commands = recorder.getCommands(true); // Get reference of commands\n</code></pre> <p>Format of return commands:</p> <pre><code>[\n[time, [command]],\n[time, [command0,command1]],\n...\n]\n</code></pre>"},{"location":"tcrp-recoder/#clear-commands","title":"Clear commands","text":"<pre><code>recorder.clear();\n</code></pre>"},{"location":"tcrp-recoder/#pause-resume-stop-recording","title":"Pause, Resume, stop recording","text":"<pre><code>recorder.pause();\nrecorder.resume();\nrecorder.stop();\n</code></pre>"},{"location":"tcrp-recoder/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>recorder.seek(time);   // elapsed time in ms\n</code></pre>"},{"location":"tcrp-recoder/#state-of-recorder","title":"State of recorder","text":"<pre><code>var isRecording = recorder.isRecording;\nvar now = recorder.now;\n</code></pre>"},{"location":"tcrp-recoder/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>recorder.setTimeScale(value);\n// recorder.timeScale = value;\n</code></pre></li> <li>Get     <pre><code>var timeScale = recorder.timeScale;\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#events","title":"Events","text":"<ul> <li>Start     <pre><code>recorder.on('start', function(scene, recorder){});\n</code></pre></li> <li>Pause     <pre><code>recorder.on('pause', function(scene, recorder){});\n</code></pre></li> <li>Resume     <pre><code>recorder.on('resume', function(scene, recorder){});\n</code></pre></li> <li>Stop     <pre><code>recorder.on('stop', function(scene, recorder){});\n</code></pre></li> </ul>"},{"location":"text/","title":"Text","text":""},{"location":"text/#introduction","title":"Introduction","text":"<p>Drawing text on canvas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"text/#usage","title":"Usage","text":""},{"location":"text/#add-text-object","title":"Add text object","text":"<pre><code>var txt = scene.add.text(x, y, 'hello');\n// var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });\n</code></pre> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nrtl: false,\ntestString: '|M\u00c9qgy',\nwordWrap: {\nwidth: null,\ncallback: null,\ncallbackScope: null,\nuseAdvancedWrap: false\n},\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n}\n</code></pre> <p>Add text from JSON</p> <pre><code>var txt = scene.make.text({\nx: 100,\ny: 100,\npadding: {\nleft: 64,\nright: 16,\ntop: 20,\nbottom: 40\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',  // 'left'|'center'|'right'|'justify'\nbackgroundColor: '#ff00ff'\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"text/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.Text {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, 'hello');\n</code></pre></li> </ul>"},{"location":"text/#word-wrap","title":"Word wrap","text":"<ul> <li>Wrap by width     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwordWrap: { width: 300 }\n},\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre></li> <li>Wrap by callback     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 300,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: 0.5,\nstyle: {\nfont: 'bold 30px Arial',\nfill: 'white',\nwordWrap: { callback: wordWrap, scope: this }\n},\n// origin: {x: 0.5, y: 0.5},\n});\n\nfunction wordWrap (text, textObject)\n{\n// First parameter will be the string that needs to be wrapped\n// Second parameter will be the Text game object that is being wrapped currently\n\n// This wrap just puts each word on a separate line, but you could inject your own\n// language-specific logic here.\nvar words = text.split(' ');\n\n// You can return either an array of individual lines or a string with line breaks (e.g. \\n) in\n// the correct place.\nreturn words;\n}\n</code></pre></li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wordWrapWidth;\nvar useAdvancedWrap = txt.style.wordWrapUseAdvanced;\n</code></pre></li> <li>Set     <pre><code>txt.setWordWrapWidth(width);\n// txt.setWordWrapWidth(width, useAdvancedWrap);\n</code></pre></li> </ul> </li> <li>Wrap callback<ul> <li>Get     <pre><code>var callback = txt.style.wordWrapCallback;\nvar scope = txt.style.wordWrapCallbackScope;\n</code></pre></li> <li>Set     <pre><code>txt.setWordWrapCallback(callback, scope);\n</code></pre></li> </ul> </li> </ul>"},{"location":"text/#content","title":"Content","text":"<ul> <li>Get     <pre><code>var content = txt.text;\n</code></pre></li> <li>Set     <pre><code>txt.setText(text);\n// txt.text = text;\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"text/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"text/#set-align","title":"Set align","text":"<pre><code>txt.setAlign(align);\n</code></pre> <ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code>, <code>'justify'</code></li> </ul>"},{"location":"text/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre></li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre></li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Background color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n</code></pre></li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre></li> </ul> </li> </ul>"},{"location":"text/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"text/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"text/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"text/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"text/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.style.setTestString(text);\n</code></pre>"},{"location":"textedit/","title":"Edit","text":""},{"location":"textedit/#introduction","title":"Introduction","text":"<p>Create an input text object above a text object to edit string content.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"textedit/#live-demos","title":"Live demos","text":"<ul> <li>Text edit</li> <li>Text area</li> <li>Number edit</li> <li>With rexui-Label</li> </ul>"},{"location":"textedit/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textedit/#install-plugin","title":"Install plugin","text":""},{"location":"textedit/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextexteditplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexteditplugin.min.js', true);\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = scene.plugins.get('rextexteditplugin').add(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = scene.plugins.get('rextexteditplugin').edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextEditPlugin from 'phaser3-rex-plugins/plugins/textedit-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextEdit',\nplugin: TextEditPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = scene.plugins.get('rexTextEdit').add(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = scene.plugins.get('rexTextEdit').edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { TextEdit, Edit } from 'phaser3-rex-plugins/plugins/textedit.js';\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = new TextEdit(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = Edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#open-text-editor","title":"Open text editor","text":"<p>Open editor directly.</p> <pre><code>var editor = scene.plugins.get('rexTextEdit').edit(textObject, {\n// inputType: 'text',   // 'text'|'password'|'textarea'|...\n// type: 'text',    // 'text'|'password'|'textarea'|...\n\n// enterClose: true,\n// selectAll: false,\n\n// onOpen: undefined,\n// onTextChanged: undefined,\n// onClose: undefined,\n\n// text: '',\n});\n// var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose);\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, or tag text object.</li> <li><code>config</code> : <ul> <li><code>config.inputType</code>, or <code>config.type</code> : <ul> <li><code>'text'</code> (default), or </li> <li><code>'password'</code></li> <li><code>'number'</code></li> </ul> </li> <li><code>config.onOpen</code> : Callback invoked when input text is created.     <pre><code>function (textObject) {\n}\n</code></pre></li> <li><code>config.onTextChanged</code> : Callback invoked when input text changed.     <pre><code>function (textObject, text) {\ntextObject.text = text;\n}\n</code></pre></li> <li><code>config.onClose</code> : Callback invoked when input text is closed. This parameter is valid only when <code>onClose</code> parameter is not given.     <pre><code>function (textObject) {\n}\n</code></pre></li> <li><code>enterClose</code> : <ul> <li><code>true</code> : Close input text when enter-key was pressed. Default value is <code>true</code> if <code>inputType</code> is not <code>'textarea'</code>.</li> <li><code>false</code> : If <code>inputType</code> is set to <code>'textarea'</code>, default value will be <code>false</code>.</li> </ul> </li> <li><code>config.selectAll</code> : Set <code>true</code> to select all text.</li> <li><code>config.text</code> : Initial string content. Default is the string content of textObject.</li> <li>More configuration parameters...</li> </ul> </li> <li><code>onClose</code> : Callback invoked when input text is closed.     <pre><code>var callback = function(textObject) {\n}\n</code></pre></li> </ul> <p>Create a text editor (input element) above text object.</p> <ul> <li>Size, font size, font family, font color, background color of text editor will be equal to text object.</li> <li>Text object will be invisible when text editor is opened.</li> <li>Store reference of text editor at <code>textObject._editor</code>.</li> <li>Text editor will be closed when <ul> <li>Press enter key and <code>enterClose</code> is set, or</li> <li>Touch outside of editor, or</li> <li>Open another text editor, or</li> <li>Call <code>editor.close()</code></li> </ul> </li> </ul> <p>Limitation of text game object</p> <p>Don't assign height property of text game object. Because that text input element does not have vertical align setting, text will always align to middle/center.</p>"},{"location":"textedit/#create-instance","title":"Create instance","text":"<p>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.</p> <pre><code>var editor = scene.plugins.get('rexTextEdit').add(textGameObject, {\n// type: 'text',   //'text','password','number'\n// enterClose: true,\n// selectAll: false,\n\n// onOpen: undefined,\n// onTextChanged: undefined,\n// onClose: undefined,\n\n// text: '',\n});\n</code></pre>"},{"location":"textedit/#open-editor","title":"Open editor","text":"<pre><code>editor.open(config);\n// editor.open(config, onClose);\n</code></pre> <ul> <li><code>config</code><ul> <li><code>config.type</code> : <ul> <li><code>text</code> (default), or </li> <li><code>password</code></li> </ul> </li> <li><code>config.text</code> : Initial string content.</li> <li><code>config.onTextChanged</code> : Callback invoked when input text changed.     <pre><code>function (textObject, text) {\ntextObject.text = text;\n}\n</code></pre></li> <li>More configuration parameters...</li> </ul> </li> <li><code>onClose</code> : Callback invoked when text editor is closed.     <pre><code>var callback = function(textObject) {\n}\n</code></pre></li> </ul> <p>Create a text editor (input element) above text object.</p> <ul> <li>Size, font size, font family, font color, background color of text editor will be equal to text object.</li> <li>Text object will be invisible when text editor is opened.</li> </ul>"},{"location":"textedit/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = editor.isOpened;\n</code></pre>"},{"location":"textedit/#close-editor","title":"Close editor","text":"<pre><code>editor.close();\n</code></pre> <p>Text editor will be closed when </p> <ul> <li>Press enter key, or</li> <li>Touch outside of editor, or</li> <li>Open another text editor, or</li> <li>Call <code>editor.close()</code></li> </ul>"},{"location":"textedit/#get-dom","title":"Get DOM","text":"<pre><code>var inputText = editor.inputText.node;\n</code></pre>"},{"location":"textedit/#bypass-key-input","title":"Bypass key input","text":"<p>See InputText/Bypass key input</p>"},{"location":"textedit/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"textpage/","title":"Page","text":""},{"location":"textpage/#introduction","title":"Introduction","text":"<p>Display text page by page on text object, bbcode text object, or tag text object.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"textpage/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text + page + typing</li> </ul>"},{"location":"textpage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textpage/#install-plugin","title":"Install plugin","text":""},{"location":"textpage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextextpageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextextpageplugin.min.js', true);\n</code></pre></li> <li>Add page behavior     <pre><code>var page = scene.plugins.get('rextextpageplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextPagePlugin from 'phaser3-rex-plugins/plugins/textpage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextPage',\nplugin: TextPagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add page behavior     <pre><code>var page = scene.plugins.get('rexTextPage').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextPage from 'phaser3-rex-plugins/plugins/textpage.js';\n</code></pre></li> <li>Add page behavior     <pre><code>var page = new TextPage(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#create-instance","title":"Create instance","text":"<pre><code>var page = scene.plugins.get('rexTextPage').add(textGameObject, {\n// text: '',              // content in string or array\n// maxLines: undefined,\n// pageBreak: '\\f\\n',\n});\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>text</code> : content in string or array, optional</li> <li><code>maxLines</code> : Max lines of a page.<ul> <li><code>undefined</code> : Default value. For Text object, bbcode text object, tag text object<ul> <li>Use style property <code>maxLines</code>.</li> <li>Count number of lines if it has <code>fixedHeight</code> setting.</li> </ul> </li> <li>A number : Max lines of a page, for bitmap text object</li> </ul> </li> <li><code>pageBreak</code> : Symbol of page-break. Default value is <code>'\\f\\n'</code>. String after this page-break symbol will be placed to a new page. </li> </ul>"},{"location":"textpage/#set-content","title":"Set content","text":"<ul> <li>Set content     <pre><code>page.setText(content);\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Can insert <code>pageBreak</code> symbol.</li> </ul> </li> <li>Append content     <pre><code>page.appendText(content);\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Can insert <code>pageBreak</code> symbol.</li> </ul> </li> <li>Clear content     <pre><code>page.clearText()\n</code></pre></li> <li>Append page     <pre><code>page.appendPage(content);   // content in string or array\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Don't insert <code>pageBreak</code> symbol.</li> </ul> </li> </ul>"},{"location":"textpage/#show-page","title":"Show page","text":"<ul> <li>Display current page     <pre><code>page.showPage();\n</code></pre></li> <li>Display next page     <pre><code>page.showNextPage();\n</code></pre></li> <li>Display previous page     <pre><code>page.showPreviousPage();\n</code></pre></li> <li>Display first page     <pre><code>page.showFirstPage();\n</code></pre></li> <li>Display last page     <pre><code>page.showLastPage();\n</code></pre></li> <li>Display page by index     <pre><code>page.showPage(index);\n</code></pre></li> </ul> <p>Note</p> <p>Initial page index is <code>-1</code>, so user could call <code>page.showNextPage()</code> to display first page.</p>"},{"location":"textpage/#get-lines-of-page","title":"Get lines of page","text":"<ul> <li>Get lines of current page     <pre><code>var lines = page.getPage();\n</code></pre></li> <li>Get lines of next page     <pre><code>var lines = page.getNextPage();\n</code></pre></li> <li>Get lines of previous page     <pre><code>var lines = page.getPreviousPage();\n</code></pre></li> <li>Get lines of first page     <pre><code>var lines = page.getFirstPage();\n</code></pre></li> <li>Get lines of last page     <pre><code>var lines = page.getLastPage();\n</code></pre></li> <li>Get lines of page by index     <pre><code>var lines = page.getPage(index);\n</code></pre></li> </ul>"},{"location":"textpage/#other-properties","title":"Other properties","text":"<ul> <li>Is last page     <pre><code>var isLastPage = page.isLastPage;\n</code></pre></li> <li>Is first page     <pre><code>var isLastPage = page.isFirstPage;\n</code></pre></li> <li>Current page index     <pre><code>var pageIndex = page.pageIndex;\n</code></pre></li> <li>Number of pages     <pre><code>var pageIndex = page.pageCount;\n</code></pre></li> </ul>"},{"location":"textplayer/","title":"Text player","text":""},{"location":"textplayer/#introduction","title":"Introduction","text":"<p>Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"textplayer/#live-demos","title":"Live demos","text":"<ul> <li>Play</li> <li>Sprite control</li> <li>Show page</li> <li>Fast typing</li> <li>Custom game object</li> <li>Fade out page</li> <li>Choices</li> </ul>"},{"location":"textplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textplayer/#install-plugin","title":"Install plugin","text":""},{"location":"textplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextextplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextextplayerplugin.min.js', true);\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = scene.add.rexTextPlayer(config);\n</code></pre></li> </ul>"},{"location":"textplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextPlayerPlugin from 'phaser3-rex-plugins/plugins/textplayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextPlayerPlugin',\nplugin: TextPlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = scene.add.rexTextPlayer(config);\n</code></pre></li> </ul>"},{"location":"textplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextPlayer from 'phaser3-rex-plugins/plugins/textplayer.js';\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = new TextPlayer(scene, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"textplayer/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexTextPlayer({\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\noffsetX: 0,\noffsetY: 0,\nleftSpace: 0,\nrightSpace: 0,\n},\n\nparser: {\ndelimiters: '[]',\ncomment: '//',\n// translateTagNameCallback: undefined,\n}\n\nwrap: {\ncallback: undefined, // Default wrapping callback is dynamicText.runWordWrap()\nlineHeight:\n// maxLines: \npadding: { top: 0, left: 0, right: 0, bottom: 0 },\nletterSpacing: 0,\nhAlign: 0, // 0|'left'|1|'center'|2|'right'\nvAlign: 0, // 0|'top'|1|'center'|2|'bottom'\ncharWrap: false\n},\n\ntyping: {\nspeed: 250,\nonTypingStart: function (children) {\nfor (var i = 0, cnt = children.length; i &lt; cnt; i++) {\nchildren[i].setVisible(false);\n}\n},  // Default: set all children invisible\nanimation: undefined,  // Default: no typing animation, only invoke onStart callback\nanimation: {\nduration: 1000,\nyoyo: false,\nonStart: function(child) {\nchild.setVisible();\n},\nonProgress: function(child, t) {\n\n},\nonComplete: function(child) {\n\n}\n},\n\n// skipSpace: false,\n\n// minSizeEnable: false,\n\nfadeOutPage: undefined,  // Default: no fade-out-page animation\nfadeOutPage: function(children) {\nreturn eventEmitter;\nreturn promise;\n},\n\n},\n\nimages: {\n// key: {width, height}\n// key: {key, frame, width, height}\n},\n\nsprites: {\n// createCallback: 'sprite',\n// createCallback: function(scene, ...) { return gameObject; },\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\n}, sounds: {\nbgm: {\ninitial: undefinied,\nloop: true,\nfade: 500\n},\nbgm2: {\ninitial: undefinied,\nloop: true,\nfade: 500\n}\n},\n\nclickTarget: this,  // This text player    \nnextPageInput: null,\n// ignoreNextPageInput: false,\n\ntext: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this text-player game object.</li> <li><code>width</code> : Fixed width.<ul> <li>A number : Width of this text-player game object. <ul> <li>Wrap-width is <code>width - padding.left - padding.right</code>.</li> </ul> </li> <li><code>undefined</code> : Width of this text-player game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>height</code> : Fixed height.<ul> <li>A number : Height of this text-player game object. </li> <li><code>undefined</code> : Height of this text-player game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>padding</code> : Padding of bounds.<ul> <li>A number </li> <li><code>padding.left</code>, <code>padding.right</code>, <code>padding.top</code>, <code>padding.bottom</code></li> </ul> </li> <li><code>background</code> : Properties of background round-rectangle.<ul> <li><code>background.color</code> : Fill color.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>background.color2</code> : Gradient fill color.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>background.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>background.stroke</code> : Stroke color.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>background.strokeThickness</code> : Line width of stroke.</li> <li><code>background.cornerRadius</code> : Corner-radius of round rectangle.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner    </li> </ul> </li> <li><code>background.cornerIteration</code> : Iteration of corner-radius.<ul> <li><code>null</code> : Draw corner-radius via arc directly.</li> <li>A number : Draw corner-radius via lines</li> </ul> </li> </ul> </li> <li><code>innerBounds</code> : Properties of inner-bounds.<ul> <li><code>innerBounds.color</code> : Fill color.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>innerBounds.color2</code> : Gradient fill color.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>innerBounds.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>innerBounds.stroke</code> : Stroke color.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>innerBounds.strokeThickness</code> : Line width of stroke.</li> </ul> </li> <li><code>style</code> : Initial text-style.<ul> <li><code>style.bold</code> : Bold</li> <li><code>style.italic</code> : Italic</li> <li><code>style.fontSize</code> : Font size</li> <li><code>style.fontFamily</code> : Font family</li> <li><code>style.color</code> : Fill color</li> <li><code>style.stroke</code> : Stroke color</li> <li><code>style.strokeThickness</code> : Line width of stroke.</li> <li><code>style.shadowColor</code> : Shadow color.<ul> <li><code>null</code> : No shadow.</li> </ul> </li> <li><code>style.shadowOffsetX</code> : OffsetX of shadow.</li> <li><code>style.shadowOffsetY</code> : OffsetY of shadow.</li> <li><code>style.shadowBlur</code> : Blur of shadow.</li> <li><code>style.offsetX</code> : OffsetX.</li> <li><code>style.offsetY</code> : OffsetY.</li> <li><code>style.leftSpace</code> : Extra space between this character and previous character.</li> <li><code>style.rightSpace</code> : Extra space between this character and next character.</li> <li><code>style.align</code> : Override default line-alignment setting.<ul> <li><code>0</code>, <code>'left'</code>, <code>'top'</code> : Align remainder lines to left/top.</li> <li><code>1</code>, <code>'center'</code> : Align remainder lines to center.</li> <li><code>2</code>, <code>'right'</code>, <code>'bottom'</code> : Align remainder lines to right/bottom.</li> <li><code>undefined</code> : Use default line-alignment setting.</li> </ul> </li> </ul> </li> <li><code>wrap</code> : Default configuration Horizontal/Vertical wrapping.</li> <li><code>typing</code> :<ul> <li><code>typing.speed</code> : Default typing speed of each character.</li> <li><code>typing.onTypingStart</code> : Callback when typing start. Default is to set all children to invisible.     <pre><code>function (children) {\nfor (var i = 0, cnt = children.length; i &lt; cnt; i++) {\nchildren[i].setVisible(false);\n}\n</code></pre><ul> <li><code>children</code> : Array of child.</li> </ul> </li> <li><code>typing.animation</code> : Configuration of typing animation<ul> <li><code>undefined</code> : No typing animation, default behavior</li> </ul> </li> <li><code>typing.animation.duration</code> : Duration of typing animation.</li> <li><code>typing.animation.yoyo</code> :<ul> <li><code>false</code> : Mapping progress <code>t</code> to <code>0</code> - <code>1</code>. Default behavior.</li> <li><code>true</code> : Mapping progress <code>t</code> to <code>0</code> - <code>1</code> - <code>0</code>.</li> </ul> </li> <li><code>typing.animation.onStart</code> : Callback when typing start of a character. Default is to set this child to visible.     <pre><code>function(child) { child.setVisible(); }\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.animation.onProgress</code> : Callback when progress typing animation.      <pre><code>function(child, t) {\n}\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.animation.onComplete</code> : Callback when typing animation complete.      <pre><code>function(child) {\n}\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.skipSpace</code> :<ul> <li><code>false</code> : Will have delay when typing space character. Default behavior.</li> <li><code>true</code> : Typing space character immediately.</li> </ul> </li> <li><code>typing.minSizeEnable</code> : <ul> <li><code>true</code> : Resize to minimun size for showing all visible characters.</li> <li><code>false</code> : Won't resize during typing. Default behavior.</li> </ul> </li> <li><code>typing.fadeOutPage</code> : Callback to fade-out characters of previous page.<ul> <li><code>undefined</code> : Default value, no fade-out-page animation.</li> <li>Callback     <pre><code>function(characters) {\nreturn tween;  // eventEmitter\nreturn promise;\n}\n</code></pre><ul> <li><code>characters</code> : Fade out targets.</li> <li>Return value could be tween object (event emitter), or promise object.<ul> <li>Tween object : Wait until <code>'complete'</code> event triggering.</li> <li>Promise object : Wait until promoise resolving.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>parser</code> : Configuration of parser.<ul> <li><code>parser.delimiters</code> : Delimiters of tag. Default value is <code>'[]'</code>.</li> <li><code>parser.comment</code> : Start word of a comment line. Default value is <code>'//'</code>.<ul> <li><code>null</code>, or <code>false</code> : No comment line.</li> </ul> </li> <li><code>parser.translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>images</code> : Configuration of images.</li> <li><code>sprites</code> : Configuration of sprites.<ul> <li><code>sprites.createCallback</code> : <ul> <li><code>'sprite'</code> : Create sprite game object. Default behavior.</li> <li><code>'image'</code> : Create image game object.</li> <li>Callback to return a game object     <pre><code>function(scene, textureKey, frameName) {\n// return scene.add.sprite(0, 0, textureKey, frameName);\n}\n</code></pre></li> </ul> </li> <li><code>sprites.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>sprite.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>sprite.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>sprites.viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>sprites.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul> </li> <li><code>sounds</code> : Configuration of sound effect, or background music.<ul> <li><code>sounds.bgm.initial</code>, <code>sounds.bgm2.initial</code> : Initial music instance created by <code>scene.sound.add(key)</code> before starting playing content.<ul> <li><code>undefined</code> : No initial music instance, default value.</li> </ul> </li> <li><code>sounds.bgm.loop</code>, <code>sounds.bgm2.loop</code> :<ul> <li><code>true</code> : Loop background music, default behavior.</li> <li><code>false</code> : Play background music once.</li> </ul> </li> <li><code>sounds.bgm.fade</code>, <code>sounds.bgm2.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when starting or stopping a background music.</li> <li>A number : Fade-in or fade-out (cross-fade) when starting or stopping a background music. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>nextPageInput</code> : Wait condition to type next page<ul> <li><code>null</code>, or <code>false</code> : Stop tying next page. Default behavior<ul> <li>Typing next manually via <code>txt.typingNextPage()</code>.</li> </ul> </li> <li><code>'click'</code> : Wait click.</li> <li><code>'click|2000'</code> : Wait one of condition: click, or 2000ms.</li> <li><code>'click|enter|2000'</code> : Wait one of condition: click, enter key down, or 2000ms.</li> <li>A function callback :      <pre><code>function(callback) {\n// Invoke `callback()` to continue typing\n}\n</code></pre></li> </ul> </li> <li><code>clickTarget</code> : Click target, default is text player itself.<ul> <li><code>scene</code> : Any pointer down on this scene.</li> </ul> </li> <li><code>ignoreNextPageInput</code> : Set <code>true</code> to continue typing next page without any waiting.</li> <li><code>text</code> : Content of text to play.</li> </ul> <p>or</p> <pre><code>var txt = scene.add.rexTextPlayer(x, y, width, height, config);\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexTextPlayer(x, y, config);\n</code></pre> <p>Add textplayer from JSON</p> <pre><code>var txt = scene.make.rexTextPlayer({\nx: 0,\ny: 0,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"textplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextPlayer extends TextPlayer {\nconstructor(scene, x, y, config) {\nsuper(scene, x, y, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyTextPlayer(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"textplayer/#game-object-manager","title":"Game object manager","text":"<pre><code>txt.addGameObjectManager({\nname: goType,\ncreateGameObject: function(scene, ...) {\nreturn gameObject\n},\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() }\n\n// symbols: undefined,  // { key:value },\n})\n</code></pre> <ul> <li><code>name</code> : Name of this game object manager, a string.</li> <li><code>createGameObject</code> : Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[goType.name=a,b,c]</code> </li> </ul> </li> <li><code>fade</code> : Tint-fade (if game object has <code>tint</code> property) or alpha-fade game object when creating or destroying a game object.<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>false</code> : Do nothing, default behavior.</li> <li><code>true</code>, or an object :<ul> <li><code>viewport</code> : <ul> <li><code>undefined</code> : Rectangle of display area under main camera of current scene. Default value.</li> <li>A rectangle</li> </ul> </li> </ul> </li> </ul> </li> <li><code>symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul>"},{"location":"textplayer/#built-in-commands","title":"Built-in commands","text":"<p><code>goType</code> : <code>name</code> parameter in config of <code>txt.addGameObjectManager</code> method</p> <ul> <li>Add game object : <code>[goType.name=a,b,c]</code><ul> <li>Tint-fade-in, or alpha-fade-in if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove game object : <code>[/goType.name]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all game objects : <code>[/goType]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[goType.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[goType.name.x=value]</code>, <code>[goType.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[goType.name.prop.easeMode=value,duration]\n[goType.name.prop.easeMode=value,duration,repeat]\n[goType.name.prop.easeMode=value,duration,easeFunction,repeat]\n[goType.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Wait ease task of game object's number property : <code>[wait=goType.name.prop]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a game objects are destroyed : <code>[wait=goType.name]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all game objects are destroyed : <code>[wait=goType]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in game object's data manager set to <code>true</code>/<code>false</code> : <code>[wait=goType.name.dataKey]</code>/<code>[wait=goType.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> </ul>"},{"location":"textplayer/#typing-content","title":"Typing content","text":"<pre><code>txt.play(content);\n</code></pre> <p>or</p> <pre><code>txt.playPromise(content)\n.then(function(){\n// Typing content complete\n})\n</code></pre>"},{"location":"textplayer/#show-current-page","title":"Show current page","text":"<pre><code>txt.showPage();\n</code></pre> <ul> <li>Set typing speed to <code>0</code>.</li> <li>Set animation progress to <code>1</code>.</li> <li>Skip all waiting events.</li> <li>Stop current sound effects, and ignore remainder sound effects.</li> </ul>"},{"location":"textplayer/#typing-next-page","title":"Typing next page","text":"<pre><code>txt.typingNextPage();\n</code></pre> <ul> <li>Set <code>nextPageInput</code> to <code>null</code>, or <code>false</code> in config.</li> </ul>"},{"location":"textplayer/#ignore-next-page-input","title":"Ignore next page input","text":"<ul> <li>Ignore next page input     <pre><code>txt.setIgnoreNextPageInput();\n</code></pre></li> <li>Rollback waiting next page input     <pre><code>txt.setIgnoreNextPageInput(false);\n</code></pre></li> </ul>"},{"location":"textplayer/#pause","title":"Pause","text":"<ul> <li>Pause typing and typing animation     <pre><code>txt.pause();\n</code></pre></li> <li>Pause typing only     <pre><code>txt.pauseTyping();\n</code></pre></li> </ul>"},{"location":"textplayer/#resume","title":"Resume","text":"<ul> <li>Resume typing and typing animation     <pre><code>txt.resume();\n</code></pre></li> </ul>"},{"location":"textplayer/#typing-speed","title":"Typing speed","text":"<ul> <li>Get<ul> <li>Default typing speed     <pre><code>var speed = txt.defaultTypingSpeed;\n</code></pre></li> <li>Current typing speed     <pre><code>var speed = txt.typingSpeed;\n</code></pre></li> </ul> </li> <li>Set<ul> <li>Default typing speed     <pre><code>txt.setDefaultTypingSpeed(speed);\n</code></pre> <pre><code>txt.defaultTypingSpeed = speed;\n</code></pre></li> <li>Current typing speed     <pre><code>txt.setTypingSpeed(speed);\n// txt.setTypingSpeed();    // Set speed to default speed\n</code></pre> <pre><code>txt.typingSpeed = speed;\n</code></pre></li> </ul> </li> </ul>"},{"location":"textplayer/#time-scale","title":"Time scale","text":"<p>Time scale of typing, typing animation, sprite animation and easing of sprite's properties.</p> <ul> <li>Get     <pre><code>var timeScale = txt.timeScale;\n</code></pre></li> <li>Set     <pre><code>txt.setTimeScale(timeScale);    </code></pre> <pre><code>txt.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"textplayer/#status","title":"Status","text":"<ul> <li>Is playing : After <code>txt.play(content)</code>, before typing all pages completed     <pre><code>var isPlaying = txt.isPlaying\n</code></pre></li> <li>Is page typing : After <code>txt.play(content)</code>, or <code>txt.typingNextPage()</code>, before page typing completed     <pre><code>var isPageTyping = txt.isPageTYyping;\n</code></pre></li> </ul>"},{"location":"textplayer/#events","title":"Events","text":"<ul> <li>On typing content complete     <pre><code>txt.on('complete', function() {\n\n})\n</code></pre></li> <li>On typing a character or an image     <pre><code>txt.on('typing', function(child) {\nif (child.type === 'text') {\nvar character = child.text;\n} else {\nvar textureLey = child.key;\nvar frameKey = child.frame;\n}\n})\n</code></pre></li> <li>On typing a page start     <pre><code>txt.on('page.start', function() {\n\n})\n</code></pre></li> <li>On typing a page complete     <pre><code>txt.on('page.complete', function() {\n\n})\n</code></pre></li> </ul>"},{"location":"textplayer/#tags-of-content","title":"Tags of content","text":""},{"location":"textplayer/#content","title":"Content","text":"<p>These lines will be skipped :</p> <ul> <li>Empty line, which only has space characters.</li> <li>Comment line, start with <code>'//'</code>.</li> </ul> <p>New line symbol <code>'\\n'</code> will be removed, use <code>[r]</code> to insert a new line character.</p>"},{"location":"textplayer/#content-output-switch","title":"Content output switch","text":"<ul> <li>Turn off content output : <code>[content.off]</code></li> <li>Turn on content output : <code>[content.on]</code></li> </ul>"},{"location":"textplayer/#content-output-enable","title":"Content output enable","text":"<ul> <li>Content won't output if <code>parser.setContentOutputEnable(false)</code> under custom tag events<ul> <li>Fire <code>'parser.+custom#content'</code> event if conent is ignored now     <pre><code>txt.on('parser.+custom#content', function(parser, content) {\n\n})\n</code></pre></li> </ul> </li> <li>Invoke <code>parser.setContentOutputEnable()</code> to turn on content output back.</li> </ul>"},{"location":"textplayer/#text-style","title":"Text style","text":"<ul> <li>Font color : <code>[color=red]content[/color]</code>, <code>[color=#FF0000]content[/color]</code></li> <li>Font size : <code>[size=24]content[/size]</code></li> <li>Bold : <code>[b]content[/b]</code></li> <li>Italic : <code>[i]content[/i]</code></li> <li>Stroke : <code>[stroke]content[/stroke]</code>, <code>[stroke=red]content[/stroke]</code><ul> <li><code>strokeThickness</code> is set in config</li> </ul> </li> <li>Shadow : <code>[shadow]content[/shadow]</code>, <code>[shadow=red]content[/shadow]</code><ul> <li><code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code> are set in config</li> </ul> </li> <li>Character offset Y : <code>[y=-8]c[/y]ontent</code></li> <li>Character offset X : <code>[x=10]c[/x]ontent</code></li> <li>Left space : <code>[left=10]c[/left]ontent</code></li> <li>Right space : <code>conten[right=10]t[/right]</code></li> <li>Line-align : <code>[align=left]</code>, <code>[align=center]</code>, <code>[align=right]</code></li> </ul>"},{"location":"textplayer/#new-line","title":"New line","text":"<ul> <li>New line : <code>[r]</code><ul> <li>New line via <code>\\n</code> will be ignored.</li> </ul> </li> </ul>"},{"location":"textplayer/#page-break","title":"Page break","text":"<ul> <li><code>[pagebreak]</code>, or <code>[pb]</code> : Put remainder characters to next page. </li> </ul>"},{"location":"textplayer/#image","title":"Image","text":"<p><code>[img=key]</code></p>"},{"location":"textplayer/#render-size","title":"Render size","text":"<ul> <li>Set render size In config     <pre><code>{\nimages: {\n// key: {width, height},\n// key: {key, frame, width, height}\n}\n}\n</code></pre></li> <li>Set render size by method     <pre><code>txt.addImage({\n// key: {width, height},\n// key: {key, frame, width, height}\n})\n</code></pre></li> <li>Use origin render size by default</li> </ul>"},{"location":"textplayer/#space","title":"Space","text":"<p><code>[space=width]</code></p>"},{"location":"textplayer/#typing-speed_1","title":"Typing speed","text":"<ul> <li>No typing : <code>[speed=0]</code></li> <li>Set speed : <code>[speed=1000]</code></li> <li>Back to default speed : <code>[/speed]</code></li> </ul>"},{"location":"textplayer/#sprite","title":"Sprite","text":"<ul> <li>Add sprite : <code>[sprite.name=textureKey,frameKey]</code><ul> <li>Tint-fade-in if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove sprite : <code>[/sprite.name]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all sprites : <code>[/sprite]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[sprite.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[sprite.name.x=value]</code>, <code>[sprite.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.x.to=value,duration]\n</code></pre> <pre><code>[sprite.name.x.to=value,duration,repeat]\n</code></pre> <pre><code>[sprite.name.x.to=value,duration,easeFunction,repeat]\n</code></pre> <pre><code>[sprite.name.x.to=value]\n</code></pre><ul> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Yoyo ease property :      <pre><code>[sprite.name.x.yoyo=value,duration]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value,duration,repeat]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value,duration,easeFunction,repeat]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value]\n</code></pre></li> <li>Set texture : <code>[sprite.name.texture=textureKey,frameKey]</code></li> <li>Play animation : <code>[sprite.name.play=animationKey]</code>, or <code>[sprite.name.play=animationKey0,animationKey1,...]</code><ul> <li>Can play animation without adding sprite first.</li> </ul> </li> <li>Stop animation : <code>[/sprite.name.play]</code>, or <code>[sprite.name.stop]</code></li> <li>Pause animation : <code>[sprite.name.pause]</code></li> </ul>"},{"location":"textplayer/#sound-effect","title":"Sound effect","text":"<ul> <li>Play : <code>[se=key]</code>, <code>[se2=key]</code><ul> <li>Sound effect will be destroyed when complete</li> </ul> </li> <li>Play with fade in volume : <code>[se=key,1000]</code>, <code>[se2=key,1000]</code></li> <li>Fade in volume : <code>[se.fadein=1000]</code>, <code>[se2.fadein=1000]</code></li> <li>Fade out volume : <code>[se.fadeout=1000]</code>, <code>[se2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[se.fadeout=1000,stop]</code>, <code>[se2.fadeout=1000,stop]</code></li> <li>Set volume : <code>[se.volume=1]</code>, <code>[se2.volume=1]</code></li> </ul>"},{"location":"textplayer/#background-music","title":"Background music","text":"<ul> <li>Play, stop : <code>[bgm=key]</code>, <code>[/bgm]</code>, [bgm2=key]<code>,</code>[/bgm2]`<ul> <li>Previous background music will be stopped and destroyed.</li> <li>Cross fade to next background music if <code>sounds.bgm.fade</code>/<code>sounds.bgm2.fade</code> is not <code>0</code></li> </ul> </li> <li>Play with fade in volume : <code>[bgm=key,1000]</code>, <code>[bgm2=key,1000]</code></li> <li>Pause, resume : <code>[bgm.pause]</code>, <code>[/bgm.pause]</code>, <code>[bgm2.pause]</code>, <code>[/bgm2.pause]</code></li> <li>Fade in volume : <code>[bgm.fadein=1000]</code>, <code>[bgm2.fadein=1000]</code></li> <li>Fade out volume : <code>[bgm.fadeout=1000]</code>, <code>[bgm2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[bgm.fadeout=1000,stop]</code>, <code>[bgm2.fadeout=1000,stop]</code></li> <li>Cross fade to another background music : <code>[bgm.cross=key,10000]</code>, <code>[bgm2.cross=key,10000]</code></li> <li>Set volume : <code>[bgm.volume=1]</code>, <code>[bgm2.volume=1]</code></li> <li>Mute : <code>[bgm.mute]</code>, <code>[bgm2.mute]</code>, <code>[bgm.unmute]</code>, <code>[bgm2.unmute]</code></li> </ul>"},{"location":"textplayer/#camera","title":"Camera","text":"<ul> <li>Fade-in effect : <code>[camera.fadein]</code>, <code>[camera.fadein=1000]</code>, or <code>[camera.fadein=duration,red,green,blue]</code></li> <li>Fade-out effect : <code>[camera.fadeout]</code>, <code>[camera.fadeout=1000]</code>, or <code>[camera.fadeout=duration,red,green,blue]</code></li> <li>Flash effect : <code>[camera.flash]</code>, <code>[camera.flash=1000]</code>, or <code>[camera.flash=duration,red,green,blue]</code></li> <li>Shake effect : <code>[camera.shake]</code>, <code>[camera.shake=1000]</code>, or <code>[camera.shake=duration,intensity]</code></li> <li>Zoom<ul> <li>Set zoom : <code>[camera.zoom=2]</code></li> <li>Zoom to : <code>[camera.zoom.to=1,1000]</code>, or <code>[camera.zoom.to=zoomValue,duration,Cubic]</code></li> </ul> </li> <li>Rotate<ul> <li>Set angle : <code>[camera.rotate=90]</code>, angle in degrees</li> <li>Rotate to : <code>[camera.rotate.to=0,1000]</code>, or <code>[camera.rotate.to=deg,duration,Cubic]</code>, angle in degrees</li> </ul> </li> <li>Scroll<ul> <li>Scroll x,y : <code>[camera.scroll=0,200]</code></li> <li>Scroll x,y to : <code>[camera.scroll.to=0,200,1000]</code>, or <code>[camera.rotate.to=x,y,duration,Cubic]</code></li> </ul> </li> </ul>"},{"location":"textplayer/#wait-conditions","title":"Wait conditions","text":"<ul> <li>Wait click : <code>[wait=click]</code>, <code>[click]</code><ul> <li>Also fire event <code>'wait.click'</code> <pre><code> txt.on('wait.click', function() {\n})\n</code></pre></li> </ul> </li> <li>Wait key-down : <code>[wait=enter]</code>, <code>[wait=space]</code>, ....<ul> <li>Also fire event <code>'wait.keydown'</code> <pre><code> txt.on('wait.keydown', function(keyName) {\n})\n</code></pre></li> </ul> </li> <li>Wait time : <code>[wait=1000]</code><ul> <li>Also fire event <code>'wait.time'</code> <pre><code> txt.on('wait.time', function(time) {\n})\n</code></pre></li> </ul> </li> <li>Wait sound effect : <code>[wait=se]</code>, <code>[wait=se2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> txt.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait background music : <code>[wait=bgm]</code>, <code>[wait=bgm2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> txt.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait camera effect : <code>[wait=camera.fadein]</code>, <code>[wait=camera.fadeout]</code>, <code>[wait=camera.flash]</code>, <code>[wait=camera.shake]</code>, <code>[wait=camera.zoom]</code>, <code>[wait=camera.rotate]</code>, <code>[wait=camera.scroll]</code><ul> <li>Also fire event <code>'wait.camera'</code> <pre><code> txt.on('wait.camera', function(effectName) {\n// effectName : 'camera.fadein', 'camera.fadeout', 'camera.flash', 'camera.shake', 'camera.zoom', 'camera.rotate', 'camera.scroll'\n})\n</code></pre></li> </ul> </li> <li>Wait ease task of sprite's property : <code>[wait=sprite.name.prop]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code> txt.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait all sprites are destroyed : <code>[wait=sprite]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code> txt.on('wait.sprite', function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait callback : <code>[wait]</code>, or <code>[wait=xxx]</code> (<code>xxx</code> is any string which not been used in above case)<ul> <li>Fire event <code>'wait'</code> <pre><code>txt.on('wait', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> <li>Fire event <code>'wait.xxx'</code> <pre><code>txt.on('wait.xxx', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> </ul> </li> <li>Combine conditions : <code>[wait=cond0|cond1|...]</code><ul> <li>Wait click, or enter key down : <code>[wait=click|enter]</code></li> <li>Wait click, enter key down, or 100ms : <code>[wait=click|enter|1000]</code></li> </ul> </li> </ul>"},{"location":"textplayer/#custom-tag","title":"Custom tag","text":"<p>Assume that adding a custom tag : <code>[custom=10,20][/custom]</code></p> <ul> <li>On parse a <code>+custom</code> tag, will add a custom command child      <pre><code>txt.on('parser.+custom', function(parser, a, b, params) {\n// console.log('Parse +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters after <code>=</code></li> <li><code>params</code> : Arguments array used when executing <code>+custom</code>. Equal to <code>[a, b]</code> in this case.</li> <li>Disable content after this start tag     <pre><code>parser.setContentOutputEnable(false);\n</code></pre></li> </ul> </li> <li>On execute a <code>+custom</code> command child     <pre><code>txt.on('tag.+custom', function(a, b) {\n// console.log('Execute +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters passed from <code>params</code> in <code>'parser.+custom'</code> event.</li> </ul> </li> <li>On parse a <code>-custom</code> tag, will add a custom command child      <pre><code>txt.on('parser.-custom', function(parser, params) {\n// console.log('Parse -custom tag')\n})\n</code></pre><ul> <li><code>params</code> : Arguments array used when executing <code>-custom</code>. Equal to <code>[]</code> in this case.</li> <li>Enable content after this start tag     <pre><code>parser.setContentOutputEnable(true);\n</code></pre></li> </ul> </li> <li>On execute a <code>-custom</code> command child     <pre><code>txt.on('tag.-custom', function(...params) {\n// console.log('Execute -custom tag')\n})\n</code></pre><ul> <li><code>params</code> : Parameters passed from <code>params</code> in <code>'parser.-custom'</code> event.</li> </ul> </li> </ul>"},{"location":"textplayer/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"texttranslation/","title":"Translation","text":""},{"location":"texttranslation/#introduction","title":"Introduction","text":"<p>Apply translated string (i18next) to text object, bbcode text object, tag text object, bitmap text object, or label game object</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"texttranslation/#live-demos","title":"Live demos","text":"<ul> <li>Inline resources</li> <li>External resources</li> <li>External yaml resource</li> </ul>"},{"location":"texttranslation/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"texttranslation/#install-plugin","title":"Install plugin","text":""},{"location":"texttranslation/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in scene's config     <pre><code>class Demo extends Phaser.Scene {\nconstructor() {\nsuper({\nkey: 'Scnee',\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rextexttranslationplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttranslationplugin.min.js',\nstart: true,\nmapping: 'translation'  // Add text-translation plugin to `scene.translation`\n}]\n},\n// ...\n});\n}\n// ...\n}\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>scene.plugins.get('rextexttranslationplugin').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre></li> <li>Add translation behavior     <pre><code>var translation = scene.plugins.get('rextexttranslationplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextTranslationPlugin from 'phaser3-rex-plugins/plugins/texttranslation-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextTranslation',\nplugin: TextTranslationPlugin,\nstart: true,\nmapping: 'translation'  // Add text-translation plugin to `scene.translation`\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>scene.plugins.get('rexTextTranslation').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre></li> <li>Add translation behavior     <pre><code>var translation = scene.plugins.get('rexTextTranslation').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins, i18next, i18next-http-backend from npm     <pre><code>npm i phaser3-rex-plugins\nnpm i i18next\nnpm i i18next-http-backend\n</code></pre></li> <li>Import class     <pre><code>import TextTranslationBehavior from 'phaser3-rex-plugins/plugins/texttranslation.js';\nimport i18next from 'i18next';\nimport Backend from 'i18next-http-backend';\nimport Awaitloader from 'phaser3-rex-plugins/plugins/awaitloader.js';\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>Awaitloader.call(scene.load, function (successCallback, failureCallback) {\ni18next\n.use(Backend)\n.init({\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n}, successCallback);\n})\nTextTranslationBehavior.setI18Next(i18next);\n</code></pre><ul> <li><code>Awaitloader</code> : Using Awaitloader to load external resource.</li> <li><code>Backend</code> : <code>i18next-http-backend</code> module can be used to load external resource. </li> <li><code>TextTranslationBehavior.setI18Next(i18next)</code> : Pass <code>i18next</code> to TextTranslationBehavior.<ul> <li><code>TextTranslationBehavior.setI18Next</code> is a static method.    </li> </ul> </li> </ul> </li> <li>Add translation behavior     <pre><code>var translation = new TextTranslationBehavior(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#initialize-i18next","title":"Initialize i18next","text":"<pre><code>scene.plugins.get('rexTextTranslation').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre> <p>or</p> <pre><code>i18next\n.use(Backend)\n.init(config, onComplete);\n</code></pre> <ul> <li><code>lng</code> : Language to use. Will fallback to <code>'dev'</code>.</li> <li><code>ns</code> : String or array of namespaces to load. Default value is <code>'translation'</code>.</li> <li><code>debug</code> : Logs info level to console output. Helps finding issues with loading not working. Default value is <code>false</code>.</li> <li><code>resources</code> : Resources to initialize with.</li> <li><code>backend.loadPath</code> : Path where resources get loaded from, or a function returning a path.     <pre><code>function(lngs, namespaces) { return customPath; }\n</code></pre></li> <li><code>backend.parse</code> : Parse data after it has been fetched. Optional.     <pre><code>function(data) { return JSON.parse(data); }\n</code></pre></li> </ul> <p>See also Configuration Options, and Backend Options</p>"},{"location":"texttranslation/#create-instance","title":"Create instance","text":"<pre><code>var translation = scene.plugins.get('rexTextTranslation').add(textGameObject, {\n// translationKey: '',\n// interpolation: {},\n\n// updateText: true,\n\n// setText: function(gameObject, text) { \n//     gameObject.setText(text); \n// }\n});\n</code></pre> <ul> <li><code>textObject</code> : text object, bbcode text object, tag text object, bitmap text object, or label game object</li> <li><code>translationKey</code> : Key in translation resource. See Essentials</li> <li><code>interpolation</code> : Integrating dynamic values into translation result. See Interpolation</li> <li><code>updateText</code> : <ul> <li><code>true</code> : Update text object via <code>translationKey</code>, and <code>interpolation</code>. Default behavior.</li> <li><code>false</code> : Don't update text object now.</li> </ul> </li> <li><code>setText</code> : Callback invoked when updating text object. Default value is     <pre><code>function(gameObject, text) {\ngameObject.setText(text);\n}\n</code></pre></li> </ul>"},{"location":"texttranslation/#set-translation-key","title":"Set translation key","text":"<pre><code>translation\n.setTranslationKey(key)\n.updateText()\n</code></pre>"},{"location":"texttranslation/#set-interpolation","title":"Set interpolation","text":"<ul> <li>Assign interpolation object     <pre><code>translation\n.setInterpolation(object)\n.updateText()\n</code></pre></li> <li>Update current interpolation object     <pre><code>translation\n.updateInterpolation(key, value)\n.updateText()\n</code></pre>     or     <pre><code>translation\n.updateInterpolation(object)\n.updateText()\n</code></pre></li> </ul>"},{"location":"texttranslation/#update-text","title":"Update text","text":"<p>Update text object via <code>translationKey</code>, and <code>interpolation</code>.</p> <pre><code>translation.updateText()\n</code></pre>"},{"location":"texttranslation/#change-language","title":"Change language","text":"<pre><code>scene.plugins.get('rexTextTranslation').changeLanguage(language);\n// scene.plugins.get('rexTextTranslation').changeLanguage(language, onComplete);\n</code></pre> <p>or</p> <pre><code>i18next.changeLanguage(language, onComplete);\n</code></pre> <p>All translation behavior will update text object after changing language.</p>"},{"location":"texttranslation/#set-default-namespace","title":"Set default namespace","text":"<pre><code>scene.plugins.get('rexTextTranslation').setDefaultNamespace(namespace);\n</code></pre> <p>or</p> <pre><code>i18next.setDefaultNamespace(namespace);\n</code></pre>"},{"location":"texttranslation/#translate-string","title":"Translate string","text":"<pre><code>var result = scene.plugins.get('rexTextTranslation').t(translationKey, interpolation);\n</code></pre> <p>or</p> <pre><code>var result = i18next.t(translationKey, interpolation);\n</code></pre>"},{"location":"texttranslation/#events","title":"Events","text":"<ul> <li>On language changed, triggered by <code>changeLanguage</code> method.     <pre><code>scene.plugins.get('rexTextTranslation').on('languageChanged', function (lng) {\n});\n</code></pre>     or     <pre><code>i18next.on('languageChanged', function (lng) {\n});\n</code></pre></li> </ul>"},{"location":"texttyping/","title":"Typing","text":""},{"location":"texttyping/#introduction","title":"Introduction","text":"<p>Typing text on text object, bbcode text object, or tag text object.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"texttyping/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text + page + typing</li> <li>Text wrap enable</li> <li>TextBox, see text-box.</li> </ul>"},{"location":"texttyping/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"texttyping/#install-plugin","title":"Install plugin","text":""},{"location":"texttyping/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextexttypingplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttypingplugin.min.js', true);\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = scene.plugins.get('rextexttypingplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextTypingPlugin from 'phaser3-rex-plugins/plugins/texttyping-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextTyping',\nplugin: TextTypingPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = scene.plugins.get('rexTextTyping').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextTyping from 'phaser3-rex-plugins/plugins/texttyping.js';\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = new TextTyping(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#create-instance","title":"Create instance","text":"<pre><code>var typing = scene.plugins.get('rexTextTyping').add(textGameObject, {\n// wrap: false,\n// speed: 333,       // typing speed in ms\n// typeMode: 0,      //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle'\n// setTextCallback: function(text, isLastChar, insertIdx){ return text; }  // callback before set-text\n// setTextCallbackScope: null,   \n});\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>wrap</code> : <ul> <li><code>false</code> : Don't insert <code>\\n</code>, default behavior.</li> <li><code>true</code> : Insert <code>\\n</code> to wrap content according to style of text, to prevent typing jittering.</li> </ul> </li> <li><code>speed</code> : Typing speed in ms, default value is <code>333</code>.</li> <li><code>typeMode</code> :<ul> <li><code>'left-to-right'</code>, or <code>0</code> : Typing characters from left to right.</li> <li><code>'right-to-left'</code>, or <code>1</code> : Typing characters from right to left.</li> <li><code>'middle-to-sides'</code>, or <code>2</code> : Typing characters from middle to sides.</li> <li><code>'sides-to-middle'</code>, or <code>3</code> : Typing characters from sides to middle.</li> </ul> </li> <li><code>setTextCallback</code> : Callback befor set-text, to decorate display text.     <pre><code>function(text, isLastChar, insertIdx) { return text; }\n</code></pre></li> <li><code>setTextCallbackScope</code> : Scope of setTextCallback function.</li> </ul>"},{"location":"texttyping/#start-typing","title":"Start typing","text":"<pre><code>typing.start(text);\n// typing.start(text, speed); \n</code></pre> <ul> <li><code>text</code> : Typing content string.</li> <li><code>speed</code> : Typing speed in ms.</li> </ul>"},{"location":"texttyping/#typing-more-text","title":"Typing more text","text":"<pre><code>typing.appendText(text);\n</code></pre>"},{"location":"texttyping/#stop-typing","title":"Stop typing","text":"<pre><code>typing.stop();\n// typing.stop(true);;  // stop and show all text\n</code></pre>"},{"location":"texttyping/#pauseresume-typing","title":"Pause/Resume typing","text":"<ul> <li>Pause typing     <pre><code>typing.pause();\n</code></pre></li> <li>Resume typing     <pre><code>typing.resume();\n</code></pre></li> </ul>"},{"location":"texttyping/#set-typing-speed","title":"Set typing speed","text":"<pre><code>typing.setTypingSpeed(speed);  // speed in ms\n// typing.speed = speed;\n</code></pre> <p>Set speed in <code>typing</code> event or setTextCallback to change typing speed of remaining text.</p>"},{"location":"texttyping/#set-typing-mode","title":"Set typing mode","text":"<pre><code>typing.setTypeMode(mode);\n</code></pre> <ul> <li>typeMode :<ul> <li><code>'left-to-right'</code>, or <code>0</code> : typing characters from left to right.</li> <li><code>'right-to-left'</code>, or <code>1</code> : typing characters from right to left.</li> <li><code>'middle-to-sides'</code>, or <code>2</code> : typing characters from middle to sides, optional.</li> <li><code>'sides-to-middle'</code>, or <code>3</code> : typing characters from sides to middle.</li> </ul> </li> </ul>"},{"location":"texttyping/#events","title":"Events","text":"<ul> <li>On changing content of text game object :     <pre><code>typing.on('type', function(){\n\n});\n</code></pre></li> <li>On typing a character     <pre><code>typing.on('typechar', function(char){\n\n});\n</code></pre></li> <li>On typing completed :     <pre><code>typing.on('complete', function(typing, txt){});\n</code></pre></li> </ul>"},{"location":"texttyping/#status","title":"Status","text":"<ul> <li>Is typing     <pre><code>var isTyping = typing.isTyping;\n</code></pre></li> </ul>"},{"location":"textures/","title":"Textures","text":""},{"location":"textures/#introduction","title":"Introduction","text":"<p>Textures cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"textures/#usage","title":"Usage","text":""},{"location":"textures/#image-texture","title":"Image texture","text":"<ul> <li>Load image texture     <pre><code>scene.load.image(key, url);\n</code></pre>     Reference: Loader</li> <li>Load image texture via base64 string     <pre><code>scene.textures.addBase64(key, data)\n</code></pre></li> <li>Get image texture     <pre><code>var texture = scene.textures.get(key);\nvar image = texture.getSourceImage();\n// var width = image.width;\n// var height = image.height;\n</code></pre></li> <li>Get image texture from frame object     <pre><code>var texture = scene.textures.get(frameObject);\n</code></pre></li> </ul>"},{"location":"textures/#get-pixel","title":"Get pixel","text":"<pre><code>var color = scene.textures.getPixel(x, y, key);\n// var color = scene.textures.getPixel(x, y, key, frame);\n</code></pre> <p>Properties of <code>color</code></p> <ul> <li><code>r</code> : 0 ~ 255</li> <li><code>g</code> : 0 ~ 255</li> <li><code>b</code> : 0 ~ 255</li> <li><code>a</code> : 0 ~ 255</li> <li><code>color</code> : color integer</li> </ul> <pre><code>var alpha = scene.textures.getPixelAlpha(x, y, key);\n// var alpha = scene.textures.getPixelAlpha(x, y, key, frame);\n</code></pre> <p>alpha : 0 ~ 255</p> <p>Return <code>null</code> if the coordinates were out of bounds.</p>"},{"location":"textures/#generate-texture-from-array","title":"Generate texture from array","text":"<pre><code>var config = {\ndata: data,\n// 3x3:\n// [ '...',\n//   '...',\n//   '...' ]\npixelWidth: 1,    // pixel width of each data\npixelHeight: 1,   // pixel height of each data\npreRender: null,  // callback, function(canvas, ctx) {}\npostRender: null, // callback, function(canvas, ctx) {}\n\ncanvas: null,  // create a canvas if null\nresizeCanvas: true,\nclearCanvas: true\n};\nvar texture = scene.textures.generate(key, config);\n</code></pre>"},{"location":"textures/#has-key","title":"Has key","text":"<pre><code>var hasKey = scene.textures.exists(key);\n</code></pre>"},{"location":"textures/#remove-texture","title":"Remove texture","text":"<p>Remove texture stored in texture cache.</p> <pre><code>scene.textures.remove(key);\n</code></pre>"},{"location":"textures/#get-base64","title":"Get base64","text":"<pre><code>var s = scene.textures.getBase64(key);  // type= 'image/png', encoderOptions= 0.92\n// var s = scene.textures.getBase64(key, frame, type, encoderOptions);\n</code></pre>"},{"location":"textures/#texture","title":"Texture","text":""},{"location":"textures/#get-texture","title":"Get texture","text":"<pre><code>var texture = scene.textures.get(key);\n</code></pre>"},{"location":"textures/#has-frame","title":"Has frame","text":"<pre><code>var hasFrame = texture.has(frameName);\n</code></pre>"},{"location":"textures/#add-frame","title":"Add frame","text":"<pre><code>var frame = texture.add(frameName, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>frameName</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code>, <code>y</code> : The x/y coordinate of the top-left of this Frame.</li> <li><code>width</code>, <code>height</code> : The width/height of this Frame.</li> </ul>"},{"location":"textures/#remove-frame","title":"Remove frame","text":"<pre><code>var removed = texture.remove(frameName);\n</code></pre>"},{"location":"textures/#default-textures","title":"Default textures","text":"<ul> <li>Default : <code>'__DEFAULT'</code></li> <li>Missing : <code>'__MISSING'</code></li> <li>4x4 white : <code>'__WHITE'</code></li> </ul>"},{"location":"textures/#get-key-list-of-all-textures","title":"Get key list of all textures","text":"<pre><code>var keys = scene.textures.getTextureKeys();\n</code></pre>"},{"location":"textures/#frame-object","title":"Frame object","text":""},{"location":"textures/#get-frame","title":"Get frame","text":"<pre><code>var frame = scene.textures.getFrame(key, frame);\n</code></pre>"},{"location":"textures/#properties","title":"Properties","text":"<ul> <li><code>frame.source.image</code> : Image of texture source.</li> <li><code>frame.cutX</code> : X position within the source image to cut from.</li> <li><code>frame.cutY</code> : Y position within the source image to cut from.</li> <li><code>frame.cutWidth</code> : The width of the area in the source image to cut.</li> <li><code>frame.cutHeight</code> : The height of the area in the source image to cut.</li> </ul>"},{"location":"textures/#add-atlas","title":"Add atlas","text":"<pre><code>scene.textures.addAtlas(key, HTMLImageElement, data);\n// scene.textures.addAtlas(key, HTMLImageElement, data, dataSource);\n</code></pre> <ul> <li><code>key</code> : The unique string-based key of the Texture.</li> <li><code>HTMLImageElement</code> : HTML Image element/s.</li> <li><code>data</code> : The Texture Atlas data/s.     <pre><code>{\nframes: [\n{\n// Location of frame image\nframe: {\nx, y, w, h\n},\n\n// trimmed\ntrimmed:\nsourceSize: {\nw, h\n},\nspriteSourceSize: {\nx, y, w, h\n},\n\nrotated:\n\n// Custom origin\nanchor: pivot: {\nx, y\n},\n\n// Other custom properties of this frame ...\n}\n],\n\n// Other custom properties of this texture ...\n}\n</code></pre></li> <li><code>dataSource</code> : An optional data Image element (normal map).</li> </ul> <p>or</p> <pre><code>scene.textures.addAtlas(undefined, texture, data);\n// scene.textures.addAtlas(undefined, texture, data, dataSource);\n</code></pre> <ul> <li><code>texture</code> : Phaser Texture.</li> </ul>"},{"location":"textures/#add-sprite-sheet","title":"Add sprite sheet","text":"<pre><code>scene.textures.addSpriteSheet(key, HTMLImageElement, config);\n// scene.textures.addAtlas(key, HTMLImageElement, config, dataSource);\n</code></pre> <ul> <li><code>key</code> : The unique string-based key of the Texture.</li> <li><code>HTMLImageElement</code> : HTML Image element/s.</li> <li><code>config</code> : The configuration object for this Sprite Sheet.     <pre><code>{\nframeWidth: ,\nframeHeight: ,\nstartFrame: 0,\nendFrame: -1,\nmargin: 0,\nspacing: 0\n}\n</code></pre></li> <li><code>dataSource</code> : An optional data Image element (normal map).</li> </ul> <p>or</p> <pre><code>scene.textures.addSpriteSheet(undefined, texture, config);\n// scene.textures.addSpriteSheet(undefined, texture, config, dataSource);\n</code></pre> <ul> <li><code>texture</code> : Phaser Texture.</li> </ul>"},{"location":"textures/#events","title":"Events","text":"<ul> <li>Texture manager is ready     <pre><code>scene.textures.on('ready', function() {\n\n})\n</code></pre></li> <li>Add texture     <pre><code>scene.textures.on('addtexture', function(key) {\n\n})\n</code></pre>     or     <pre><code>scene.textures.on('addtexture-' + key, function() {\n\n})\n</code></pre></li> <li>Error when adding texture     <pre><code>scene.textures.on('onerror', function(key) {\n\n})\n</code></pre></li> <li>Remove texture     <pre><code>scene.textures.on('removetexture', function(key) {\n\n})\n</code></pre>     or     <pre><code>scene.textures.on('removetexture-' + key, function() {\n\n})\n</code></pre></li> </ul>"},{"location":"tiledmapdata/","title":"Tiled map data","text":""},{"location":"tiledmapdata/#introduction","title":"Introduction","text":"<p>Parses a Tiled JSON object into a new MapData object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tiledmapdata/#usage","title":"Usage","text":"<pre><code>var mapData = Phaser.Tilemaps.Parsers.Tiled.ParseJSONTiled(name, json, insertNull);\n</code></pre> <ul> <li><code>name</code> : The name of the tilemap, used to set the name on the MapData.</li> <li><code>json</code> : The Tiled JSON object.</li> <li><code>insertNull</code> : Controls how empty tiles, tiles with an index of <code>-1</code>.<ul> <li><code>true</code> : Empty locations will get a value of <code>null</code>.</li> <li><code>false</code> : Empty location will get a Tile object with an index of <code>-1</code>.</li> </ul> </li> </ul>"},{"location":"tiledmapdata/#map-data","title":"Map data","text":""},{"location":"tiledmapdata/#map-type","title":"Map type","text":"<pre><code>var mapType = mapData.orientation;\n</code></pre> <ul> <li><code>mapType</code> : <code>orthogonal</code>, <code>isometric</code>, <code>hexagonal</code></li> </ul>"},{"location":"tiledmapdata/#map-size","title":"Map size","text":"<ul> <li>Grid size     <pre><code>var mapWidth = mapData.width;\nvar mapHeight = mapData.height;\n</code></pre></li> <li>Pixel size     <pre><code>var mapWidth = mapData.widthInPixels;\nvar mapHeight = mapData.heightInPixels;\n</code></pre></li> </ul>"},{"location":"tiledmapdata/#tile-size","title":"Tile size","text":"<pre><code>var tileWidth = mapData.tileWidth;\nvar tileHeight = mapData.tileHeight;\n</code></pre>"},{"location":"tiledmapdata/#layer","title":"Layer","text":"<pre><code>var layers = mapData.layers;\n</code></pre> <pre><code>mapData.layers.forEach(function(layer){\nvar name = layer.name;\n\n\nvar alpha = layer.alpha;\nvar visible = layer.visible;\n\nvar x = layer.x;\nvar y = layer.y;\nvar width = layer.width;\nvar height = layer.height;\nvar data = layer.data;\n\nlayer.data.forEach(function(gid, index){\nvar tileX = index % width;\nvar tileY = Math.floor(index / width);\nif (gid === -1) { // Empty\n\n} else {\n\n}\n})\n})\n</code></pre>"},{"location":"tilemap/","title":"Tile map","text":""},{"location":"tilemap/#introduction","title":"Introduction","text":"<p>Display of tiles map, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tilemap/#usage","title":"Usage","text":""},{"location":"tilemap/#hierarchy","title":"Hierarchy","text":"<pre><code>graph TB\n\ntilemap --&gt; layerA[\"layerA&lt;br&gt;(Game object)\"]\ntilemap --&gt; layerB\n\nlayerA --&gt; tilesA[\"tiles&lt;br&gt;(layer.data[x][y])\"]\nlayerB --&gt; tilesB[\"tiles\"]</code></pre> <ul> <li><code>map</code> : A container for Tilemap data.</li> <li><code>layer</code> : A Game Object that renders LayerData from a map when used in combination with one or more tileset.</li> <li><code>tiles</code> : A 2d array of Tile object<ul> <li>Tile : A lightweight data representation, store position information without factoring in scroll, layer scale or layer position.</li> </ul> </li> <li><code>tileset</code> : Image and tileData of some kind of tiles.</li> </ul>"},{"location":"tilemap/#load-tile-map","title":"Load tile map","text":"<pre><code>scene.load.tilemapTiledJSON(key, url);   // JSON\nscene.load.tilemapCSV(key, url);         // CSV\n</code></pre>"},{"location":"tilemap/#add-tile-map-object","title":"Add tile map object","text":"<ol> <li>Create <code>map</code><ul> <li>Create map from tiled     <pre><code>var map = scene.add.tilemap(key);\n</code></pre>     or     <pre><code>var map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16\n});\n</code></pre><ul> <li>Support ORTHOGONAL, ISOMETRIC, STAGGERED, HEXAGONAL map</li> </ul> </li> <li>Create map from 2d array     <pre><code>var map = this.make.tilemap({\n// data: tileIdxArray,  // [ [], [], ... ]\ntileWidth: 32,\ntileHeight: 32,\nwidth: 10,\nheight: 10,\n});\n</code></pre><ul> <li>Only support ORTHOGONAL map</li> </ul> </li> <li>Create map from csv     <pre><code>var map = this.make.tilemap({\nkey: 'map',     // csv file\ntileWidth: 32,\ntileHeight: 32,\n});\n</code></pre><ul> <li>Only support ORTHOGONAL map</li> </ul> </li> </ul> </li> <li>Add <code>tileset</code> image     <pre><code>var tileset = map.addTilesetImage(tilesetName, key); // key: texture key\n// var tileset = map.addTilesetImage(tilesetName);  // key = tilesetName\n// var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid, tileOffset);\n</code></pre><ul> <li><code>key</code> : The key of the Phaser.Cache image used for this tileset.<ul> <li><code>undefined</code> , <code>null</code> : Use <code>tilesetName</code> as default value.</li> </ul> </li> <li><code>tileWidth</code> , <code>tileHeight</code> : The width/height of the tile (in pixels) in the Tileset Image.<ul> <li><code>undefined</code> : Default to the map's <code>tileWidth</code>/<code>tileHeight</code>.</li> </ul> </li> <li><code>tileMargin</code> : The margin around the tiles in the sheet (in pixels).<ul> <li><code>undefined</code> : Default to <code>0</code></li> </ul> </li> <li><code>tileSpacing</code> The spacing between each the tile in the sheet (in pixels).<ul> <li><code>undefined</code> : Default to <code>0</code> </li> </ul> </li> <li><code>gid</code> : If adding multiple tilesets to a blank map, specify the starting GID this set will use here.</li> <li><code>tileOffset</code> : <code>{x, y}</code> Tile texture drawing offset.</li> </ul> </li> <li>Create <code>layer</code><ul> <li>Create existed layer     <pre><code>var layer = map.createLayer(layerID, tileset);\n// var layer = map.createLayer(layerID, tileset, x, y);\n</code></pre><ul> <li><code>tileset</code> : The tileset, or an array of tilesets.<ul> <li>A string, or an array of string.</li> <li>A tileset object, or an array of tileset objects.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Offset in pixels. Default is <code>0</code>/<code>0</code>.</li> </ul> </li> <li>Create a new and empty layer     <pre><code>var layer = map.createBlankLayer(layerID, tileset);\n// var layer = map.createBlankLayer(layerID, tileset, x, y, width, height, tileWidth, tileHeight); // x, y : offset in pixels\n</code></pre><ul> <li><code>layerID</code> : The name of this layer. Must be unique within the map.</li> <li><code>tileset</code> : The tileset, or an array of tilesets.<ul> <li>A string, or an array of string.</li> <li>A tileset object, or an array of tileset objects.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Offset in pixels. Default is <code>0</code>/<code>0</code>.</li> <li><code>width</code>, <code>height</code> : The width/height of the layer in tiles. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>tileWidth</code>, <code>tileHeight</code> : The width/height of the tiles the layer uses for calculations. Default is map's tileWidth/tileHeight.</li> </ul> </li> </ul> </li> <li>Create game objects (optional)<ul> <li>Create game objects by Object-ID/Object-GID/Object-Name     <pre><code>var sprites = map.createFromObjects(layerName, {\n// gid: 26,\n// name: 'bonus',\n// id: 9,\n\n// classType: Sprite,\n// ignoreTileset\n// scene,\n// container: null,\n// key: null,\n// frame: null\n}, useTileset);\n</code></pre>     or     <pre><code>var sprites = map.createFromObjects(layerName, configArray, useTileset);\n</code></pre><ul> <li>One of filter<ul> <li><code>gid</code> : Object GID.</li> <li><code>id</code> : Object ID.</li> <li><code>name</code> : Object Name.</li> </ul> </li> <li><code>classType</code> : Class of game object, default is Sprite.</li> <li><code>ignoreTileset</code> : </li> <li><code>scene</code> : A Scene reference, passed to the Game Objects constructors. Default is map's scene.</li> <li><code>container</code> : Optional Container to which the Game Objects are added.</li> <li><code>key</code>, <code>frame</code> : Optional key of a Texture to be used.</li> </ul> </li> <li>Create game objects by tile     <pre><code>var sprites = map.createFromTiles(indexes, replacements, spriteConfig);\n// var sprites = map.createFromTiles(indexes, replacements, spriteConfig, scene, camera, layer);\n</code></pre><ul> <li><code>indexes</code> : The tile index, or array of indexes</li> <li><code>replacements</code> :<ul> <li><code>null</code> : Leave the tiles unchanged</li> <li>Array of indexes : One-to-one mapping <code>indexes</code> to <code>replacements</code>.</li> </ul> </li> <li><code>spriteConfig</code> : The config object to pass into the Sprite creator (i.e. <code>scene.make.sprite</code>).</li> <li><code>scene</code> : The Scene to create the Sprites within.</li> <li><code>camera</code> : The Camera to use when determining the world XY.</li> <li><code>layer</code> : The Tilemap Layer to act upon.</li> </ul> </li> </ul> </li> </ol>"},{"location":"tilemap/#map","title":"Map","text":""},{"location":"tilemap/#map-size","title":"Map size","text":"<pre><code>var mapWidth = map.width;\nvar mapHeight = map.height;\n</code></pre>"},{"location":"tilemap/#tile-size","title":"Tile size","text":"<ul> <li>Set     <pre><code>map.setBaseTileSize(tileWidth, tileHeight);\n</code></pre></li> <li>Get     <pre><code>var tileWidth = map.tileWidth;\nvar tileHeight = map.tileHeight;\n</code></pre></li> </ul>"},{"location":"tilemap/#tileworld-position","title":"Tile/world position","text":"<ul> <li>World position -&gt; Tile position     <pre><code>var tileXY = map.worldToTileXY(worldX, worldY);\n// var out = map.worldToTileXY(worldX, worldY, snapToFloor, out, camera, layer);\n</code></pre></li> <li>Tile position -&gt; World position     <pre><code>var worldXY = map.tileToWorldXY(tileX, tileY);\n// var out = map.tileToWorldXY(tileX, tileY, out, camera, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#tile-at-world-xy","title":"Tile at world XY","text":"<pre><code>var hasTile = map.hasTileAtWorldXY(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer);\n</code></pre>"},{"location":"tilemap/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>map.renderDebug(graphics);\n</code></pre> <p>or</p> <pre><code>map.renderDebug(graphics, {\ntileColor: new Phaser.Display.Color(105, 210, 231, 150),         // null\ncollidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // null\nfaceColor: new Phaser.Display.Color(40, 39, 37, 150)             // null\n});\n</code></pre> <p>or</p> <pre><code>map.renderDebug(graphics, styleConfig, layer);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object.</li> </ul>"},{"location":"tilemap/#layer","title":"Layer","text":"<p>A Game Object that renders LayerData from a map when used in combination with one or more tileset.</p>"},{"location":"tilemap/#get-layer","title":"Get layer","text":"<ul> <li>Get layer instance     <pre><code>var layer = map.getLayer(name);\n</code></pre></li> <li>Set current layer of map     <pre><code>map.setLayer(layer);  // layer name, layer index\n</code></pre>     or     <pre><code>map.layer = layer;\n</code></pre></li> </ul>"},{"location":"tilemap/#render-pipeline","title":"Render pipeline","text":"<pre><code>layer.setPipeline(pipelineName);\n</code></pre> <pre><code>layer.setPostPipeline(pipelineName);\n</code></pre> <p>See Render pipeline section of Game object.</p>"},{"location":"tilemap/#render-order","title":"Render order","text":"<pre><code>layer.setRenderOrder(renderOrder);\n</code></pre> <ul> <li><code>renderOrder</code><ul> <li><code>0</code>, or <code>'right-down'</code></li> <li><code>1</code>, or <code>'left-down'</code></li> <li><code>2</code>, or <code>'right-up'</code></li> <li><code>3</code>, or <code>'left-up'</code></li> </ul> </li> </ul>"},{"location":"tilemap/#fill-tiles","title":"Fill tiles","text":"<ul> <li>Fill current layer     <pre><code>map.fill(index);  // Fill all grids\n</code></pre>     or     <pre><code>map.fill(index, tileX, tileY, width, height);\n</code></pre></li> <li>Fill layer     <pre><code>layer.fill(index);  // Fill all grids\n</code></pre>     or     <pre><code>layer.fill(index, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#randomize","title":"Randomize","text":"<ul> <li>Randomize current layer     <pre><code>map.randomize(); // Randomize all grids\n</code></pre>     or     <pre><code>map.randomize(tileX, tileY, width, height, indexes);\n</code></pre><ul> <li><code>indexes</code> An array of tile indexes.<ul> <li><code>-1</code> : Empty tile.</li> </ul> </li> </ul> </li> <li>Weight randomize current layer     <pre><code>map.weightedRandomize(\n{\n{ index: 0, weight: 4 },\n{ index: [0, 1], weight: 4 }\n},\ntileX, tileY, width, height);\n</code></pre></li> <li>Randomize layer     <pre><code>layer.randomize();  // Randomize all grids\n</code></pre>     or     <pre><code>layer.randomize(tileX, tileY, width, height, indexes);\n</code></pre><ul> <li><code>indexes</code> An array of tile indexes.</li> </ul> </li> <li>Weight randomize layer     <pre><code>layer.weightedRandomize(\n{\n{ index: 0, weight: 4 },\n{ index: [0, 1], weight: 4 }\n},\ntileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#copy-tiles","title":"Copy tiles","text":"<ul> <li>Copy current layer     <pre><code>map.copy(srcTileX, srcTileY, width, height, destTileX, destTileY);\n</code></pre></li> <li>Copy layer     <pre><code>map.copy(srcTileX, srcTileY, width, height, destTileX, destTileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.copy(srcTileX, srcTileY, width, height, destTileX, destTileY, recalculateFaces);\n</code></pre></li> </ul>"},{"location":"tilemap/#put-tile-at","title":"Put tile at","text":"<ul> <li>Put on current layer     <pre><code>map.putTileAt(tile, tileX, tileY);\n</code></pre><ul> <li><code>tile</code> :<ul> <li>Tile index</li> <li>Tile object :      <pre><code>var tile = map.getTileAt(tileX, tileY);\n</code></pre>     or     <pre><code>var tile = map.getTileAtWorldXY(worldX, worldY);\n</code></pre></li> </ul> </li> </ul> </li> <li>Put on layer     <pre><code>map.putTileAt(tile, tileX, tileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.putTileAt(tile, tileX, tileY, recalculateFaces);\n</code></pre><ul> <li><code>tile</code> : Tile index, or tile object.</li> </ul> </li> </ul>"},{"location":"tilemap/#put-tiles-at","title":"Put tiles at","text":"<ul> <li>Put on current layer     <pre><code>map.putTilesAt(tilesArray, tileX, tileY);  // tilesArray: 1d/2d array of Tile object or tile index\n</code></pre><ul> <li><code>tilesArray</code> : 1d/2d array of tile objects or tile indexes</li> </ul> </li> <li>Put on layer     <pre><code>map.putTilesAt(tilesArray, tileX, tileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.putTilesAt(tilesArray, tileX, tileY, recalculateFaces);\n</code></pre><ul> <li><code>tilesArray</code> : 1d/2d array of tile objects or tile indexes</li> </ul> </li> </ul>"},{"location":"tilemap/#replace-tiles","title":"Replace tiles","text":"<ul> <li>Replace on current layer    <pre><code>map.replaceByIndex(findIndex, newIndex); // Search on all grids\n</code></pre>    or    <pre><code>map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height);\n</code></pre></li> <li>Replace on layer    <pre><code>map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer);\n</code></pre>    or    <pre><code>layer.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#swap-tiles","title":"Swap tiles","text":"<ul> <li>Swap on current layer     <pre><code>map.swapByIndex(indexA, indexB);\n</code></pre>     or     <pre><code>map.swapByIndex(indexA, indexB, tileX, tileY, width, height);\n</code></pre></li> <li>Swap on layer     <pre><code>map.swapByIndex(indexA, indexB, tileX, tileY, width, height, layer);\n</code></pre>     or     <pre><code>layer.swapByIndex(indexA, indexB, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#shuffle-tiles","title":"Shuffle tiles","text":"<ul> <li>Shuffle on current layer     <pre><code>map.shuffle();\n</code></pre>     or     <pre><code>map.shuffle(tileX, tileY, width, height);\n</code></pre></li> <li>Shuffle on layer     <pre><code>map.shuffle(tileX, tileY, width, height, layer);\n</code></pre>     or     <pre><code>layer.shuffle(tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#tile","title":"Tile","text":""},{"location":"tilemap/#get-tile","title":"Get tile","text":"<pre><code>var tile = map.getTileAt(tileX, tileY);\n// var tile = map.getTileAtWorldXY(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var tile = map.getTileAt(tileX, tileY, true, layer);  // Return a Tile object with an index of -1 for empty tile\n// var tile = map.getTileAtWorldXY(worldX, worldY, true, camera, layer);\n</code></pre> <ul> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tile</code> : A tile, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-a-rectangle-area","title":"Get tiles within a rectangle area","text":"<pre><code>var tiles = map.getTilesWithin(tileX, tileY, width, height);\n</code></pre> <p>or</p> <pre><code>var tiles = map.getTilesWithin(tileX, tileY, width, height, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, layer);\n</code></pre> <ul> <li><code>tileX</code> , <code>tileY</code> : The left/top most tile index (in tile coordinates) to use as the origin of the area. Default is <code>0</code>/<code>0</code>.</li> <li><code>width</code> , <code>height</code> : How many tiles wide/tall from the <code>tileX</code>/<code>tileY</code> index the area will be. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tiles</code> : An array of Tiles, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-world-xy","title":"Get tiles within world XY","text":"<pre><code>var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height);\n</code></pre> <p>or</p> <pre><code>var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height,  {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, camera, layer);\n</code></pre> <ul> <li><code>worldX</code> , <code>worldY</code> : The world x/y coordinate for the top-left of the area.</li> <li><code>width</code> , <code>height</code> : The width/height of the area. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>camera</code> : The Camera to use when factoring in which tiles to return. Default is main camera.</li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tiles</code> : An array of Tiles, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-shape","title":"Get tiles within shape","text":"<pre><code>vat tiles = map.getTilesWithinShape(shape);\n</code></pre> <p>or</p> <pre><code>vat tiles = map.getTilesWithinShape(shape, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, camera, layer);\n</code></pre> <p>Shape:</p> <ul> <li><code>new Phaser.Geom.Rectangle(x0, y0, width, height)</code></li> <li><code>new Phaser.Geom.Line(x0, y0, x1, y1)</code></li> <li><code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li><code>new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2)</code></li> </ul>"},{"location":"tilemap/#for-each-tile-in-layer","title":"For each tile in layer","text":"<pre><code>map.forEachTile(function(tile, index, tileArray) { /* ... */ }, context);\n</code></pre> <p>or</p> <pre><code>map.forEachTile(function(tile, index, tileArray) { /* ... */ }, context,\ntileX, tileY, width, height, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, layer);\n</code></pre> <ul> <li><code>tileX</code> , <code>tileY</code> : The left/top most tile index (in tile coordinates) to use as the origin of the area to search.</li> <li><code>width</code> , <code>height</code> : How many tiles wide/tall from the <code>tileX</code>/<code>tileY</code> index the area will be. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> </ul>"},{"location":"tilemap/#tile-index","title":"Tile index","text":"<ul> <li>Get index     <pre><code>var index = tile.index;\n</code></pre></li> <li>Copy index     <pre><code>tile.index = index;\n</code></pre></li> <li>Copy    <pre><code>tile.copy(tileSrc);\n</code></pre>    Copies the tile data &amp; properties from the given tile to this tile. This copies everything except for position and interesting faces.</li> </ul>"},{"location":"tilemap/#tile-position","title":"Tile position","text":"<pre><code>var x = tile.x;\nvar y = tile.y;\n</code></pre>"},{"location":"tilemap/#tile-corners","title":"Tile corners","text":"<pre><code>var points = map.getTileCorners(tileX, tileY, camera, layer);\n</code></pre> <ul> <li><code>points</code> : Array of vector2 corresponding to the world XY location of each tile corner.</li> </ul>"},{"location":"tilemap/#alpha","title":"Alpha","text":"<ul> <li>Set     <pre><code>tile.setAlpha(value);\n</code></pre>     or     <pre><code>tile.alpha = value;\n</code></pre></li> <li>Get     <pre><code>var alpha = tile.alpha;\n</code></pre></li> </ul>"},{"location":"tilemap/#visible","title":"Visible","text":"<ul> <li>Set     <pre><code>tile.setVisible(visible);\n</code></pre>     or     <pre><code>tile.visible = visible;\n</code></pre></li> <li>Get     <pre><code>var visible = visible;\n</code></pre></li> </ul>"},{"location":"tilemap/#flip","title":"Flip","text":"<ul> <li>Set     <pre><code>tile.setFlipX(flipX);\ntile.setFlipY(flipY);\n</code></pre>     or     <pre><code>tile.flipX = flipX;\ntile.flipY = flipY;\n</code></pre></li> <li>Toggle     <pre><code>tile.toggleFlipX();\ntile.toggleFlipY();\n</code></pre>     or     <pre><code>tile.flipX = !tile.flipX;\ntile.flipY = !tile.flipY;\n</code></pre></li> <li>Reset     <pre><code>tile.resetFlip();\n</code></pre>     or     <pre><code>tile.flipX = false;\ntile.flipY = false;\n</code></pre></li> <li>Get     <pre><code>var flipX = tile.flipX;\nvar flipY = tile.flipY;\n</code></pre></li> </ul>"},{"location":"tilemap/#bounds","title":"Bounds","text":"<ul> <li>Bounds rectangle <pre><code>var bounds = tile.getBounds();\n// var out = tile.getBounds(camera, out);\n</code></pre></li> <li>Left     <pre><code>var left = tile.getLeft();\n// var left = tile.getLeft(camera);\n</code></pre></li> <li>Right     <pre><code>var right = tile.getRight();\n// var right = tile.getRight(camera);\n</code></pre></li> <li>CenterX     <pre><code>var centerX = tile.getCenterX();\n// var centerX = tile.getCenterX(camera);\n</code></pre></li> <li>Top     <pre><code>var top = tile.getTop();\n// var top = tile.getTop(camera);\n</code></pre></li> <li>Bottom     <pre><code>var bottom = tile.getBottom();\n// var bottom = tile.getBottom(camera);\n</code></pre></li> <li>CenterY     <pre><code>var centerY = tile.getCenterY();\n// var centerY = tile.getCenterY(camera);\n</code></pre></li> </ul>"},{"location":"tilemap/#properties","title":"Properties","text":"<pre><code>var properties = tile.properties;  // object or null\nvar value = properties[key];\n</code></pre> <pre><code>tile.properties[key] = value;\n</code></pre>"},{"location":"tilemap/#collision","title":"Collision","text":""},{"location":"tilemap/#enable-collision","title":"Enable collision","text":"<ul> <li>Enable collision by tile index     <pre><code>map.setCollision(index);\n// map.setCollision(index, true, recalculateFaces, updateLayer);\n</code></pre><ul> <li><code>index</code> : Tile index, or an array of tile indexes.</li> </ul> </li> <li>Enable collision by tile index in a range     <pre><code>map.setCollisionBetween(start, stop);\n// map.setCollisionBetween(start, stop, true, recalculateFaces, layer);\n</code></pre><ul> <li><code>start</code> , <code>stop</code> :  The first/last index of the tile.</li> </ul> </li> <li>Enable collision excluded tile indexes     <pre><code>map.setCollisionByExclusion(indexes);\n// map.setCollisionByExclusion(indexes, true, recalculateFaces, layer);\n</code></pre><ul> <li><code>index</code> : An array of tile indexes.</li> </ul> </li> <li>Enable collision by properties matching<ul> <li>Enable collision if value of tile property 'key' is equal to 'value'     <pre><code>map.setCollisionByProperty({key:value});\n// map.setCollisionByProperty({key:value}, true, recalculateFaces, layer);\n</code></pre></li> <li>Enable collision if value of tile property 'key' is equal to 'value0', or 'value1'     <pre><code>map.setCollisionByProperty({key:[value0, value1]});\n// map.setCollisionByProperty({key:[value0, value1]}, true, recalculateFaces, layer);\n</code></pre></li> </ul> </li> <li>Enable collision by collision group <pre><code>map.setCollisionFromCollisionGroup();\n// map.setCollisionFromCollisionGroup(true, recalculateFaces, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#disable-collision","title":"Disable collision","text":"<ul> <li>Disable collision by tile index     <pre><code>map.setCollision(index, false);\n// map.setCollision(index, false, recalculateFaces, layer);\n</code></pre><ul> <li><code>index</code> : Tile index, or an array of tile indexes.</li> </ul> </li> <li>Disable collision by tile index in a range     <pre><code>map.setCollisionBetween(start, stop, false);\n// map.setCollisionBetween(start, stop, false, recalculateFaces, layer);\n</code></pre><ul> <li><code>start</code> , <code>stop</code> :  The first/last index of the tile.</li> </ul> </li> <li>Disable collision by properties matching<ul> <li>Disable collision if value of tile property 'key' is equal to 'value'     <pre><code>map.setCollisionByProperty({key:value}, false);\n// map.setCollisionByProperty({key:value}, false, recalculateFaces, layer);\n</code></pre></li> <li>Disable collision if value of tile property 'key' is equal to 'value0', or 'value1'     <pre><code>map.setCollisionByProperty({key:[value0, value1]}, false);\n// map.setCollisionByProperty({key:[value0, value1]}, false, recalculateFaces, layer);\n</code></pre></li> </ul> </li> <li>Disable collision by collision group <pre><code>map.setCollisionFromCollisionGroup(false);\n// map.setCollisionFromCollisionGroup(false, recalculateFaces, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#get-collision-group","title":"Get collision group","text":"<pre><code>var collisionGroup = tile.getCollisionGroup();\n</code></pre> <p>or</p> <pre><code>var collisionGroup = tileset.getTileCollisionGroup(tile.index); // array of collision shapes, or null\n</code></pre> <p>Types of collision shape (<code>collisionGroup.objects[i]</code>)</p> <ul> <li><code>object.rectangle</code> :     <pre><code>{\nrectangle: true,\nx, y,\nwidth, height\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Offset position related top-left of tile.     <pre><code>var worldX = tile.getLeft() + object.x;\nvar worldY = tile.getTop() + object.y;\n</code></pre></li> <li><code>width</code>, <code>height</code> : Width/height of rectangle area in pixels.</li> </ul> </li> <li><code>object.ellipse</code> :     <pre><code>{\nellipse: true,\nx, y,\nwidth, height\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Offset position related top-left of tile.     <pre><code>var centerX = tile.getLeft() + object.x + (object.width / 2);\nvar centerY = tile.getTop() + object.y + (object.height / 2);\n</code></pre></li> <li><code>width</code>, <code>height</code> : Width/height of ellipse area in pixels.</li> </ul> </li> <li><code>object.polygon</code> :     <pre><code>{\nx, y,\npolygon: [{x,y}, {x,y}, ...]\n}\n</code></pre><ul> <li>Each point :     <pre><code>{\nx: tile.getLeft() + object.x + polygon[i].x,\ny: tile.getTop() + object.y + polygon[i].y\n}\n</code></pre></li> </ul> </li> <li><code>object.polyline</code> :     <pre><code>{\nx, y,\npolyline: [{x,y}, {x,y}, ...]\n}\n</code></pre><ul> <li>Each point :     <pre><code>{\nx: tile.getLeft() + object.x + polyline[i].x,\ny: tile.getTop() + object.y + polyline[i].y\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"tilemap/#arcade-collision","title":"Arcade collision","text":"<pre><code>scene.physics.add.collider(arcadeGO, layer);\n</code></pre> <p>or, in update stage:</p> <pre><code>scene.physics.world.collide(arcadeGO, layer);\n</code></pre> <p>See Collision section of Arcade-world.</p>"},{"location":"tilemap/#matter-collision","title":"Matter collision","text":"<ul> <li>Any colliding tiles will be given a Matter body.     <pre><code>scene.matter.world.convertTilemapLayer(layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#tileset","title":"Tileset","text":""},{"location":"tilemap/#get-tileset","title":"Get tileset","text":"<pre><code>var tileset = map.getTileset(name);\n</code></pre>"},{"location":"tilemap/#change-texture-of-tileset","title":"Change texture of tileset","text":"<pre><code>var texture = scene.sys.textures.get(key);\ntileset.setImage(texture);\n</code></pre>"},{"location":"tilesprite/","title":"Tile sprite","text":""},{"location":"tilesprite/#introduction","title":"Introduction","text":"<p>Display of repeating texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tilesprite/#usage","title":"Usage","text":""},{"location":"tilesprite/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"tilesprite/#add-tile-sprite-object","title":"Add tile sprite object","text":"<pre><code>var image = scene.add.tileSprite(x, y, width, height, textureKey);\n</code></pre> <p>Add tile sprite from JSON</p> <pre><code>var image = scene.make.tileSprite({\nx: 0,\ny: 0,\nwidth: 512,\nheight: 512,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"tilesprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTileSprite extends Phaser.GameObjects.TileSprite {\nconstructor(scene, x, y, width, height, texture, frame) {\nsuper(scene, x, y, width, height, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyTileSprite(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"tilesprite/#properties-of-tiles","title":"Properties of tiles","text":"<ul> <li>Position     <pre><code>image.setTilePosition(x, y);\n</code></pre>     or     <pre><code>image.tilePositionX = x;\nimage.tilePositionY = y;\n</code></pre></li> <li>Scale     <pre><code>image.setTileScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>image.tileScaleX = scaleX;\nimage.tileScaleY = scaleY;\n</code></pre></li> </ul>"},{"location":"tilesprite/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"tilesprite/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"timeline/","title":"Timeline","text":""},{"location":"timeline/#introduction","title":"Introduction","text":"<p>Schedule events to happen at specific times in the future, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"timeline/#usage","title":"Usage","text":""},{"location":"timeline/#create-timeline","title":"Create timeline","text":"<pre><code>var timeline = scene.add.timeline([    {\nat: 0,\nin:\nfrom:\n\nset: {\nkey: value,\n},\n\ntween: {\ntargets: gameObject,\nalpha: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n},\n\nrun(target){ },\n\nsound: '',\n\nevent: '',\n\n// target: this,\n\n// once: false,\n// stop: false,\n},\n\n// ...\n])\n</code></pre> <ul> <li>Time<ul> <li><code>at</code> : Absolute delay time after starting in ms.</li> <li><code>in</code> : Absolute delay time after current time in ms.</li> <li><code>from</code> : Relative delay time after previous event in ms</li> </ul> </li> <li>Actions :<ul> <li><code>set</code> : A key-value object of properties to set on the <code>target</code>.</li> <li><code>tween</code> : tween config</li> <li><code>run</code> : A function which will be called when the Event fires.     <pre><code>function(target) {\n\n}\n</code></pre></li> <li><code>sound</code> : <ul> <li>A string : A key from the Sound Manager to play</li> <li>A config object for a sound to play when the Event fires.      <pre><code>{\nkey,\nconfig\n}\n</code></pre><ul> <li><code>key</code> : The key of the sound to play</li> <li><code>config</code> : config of playing sound</li> </ul> </li> </ul> </li> <li><code>event</code> : String-based event name to emit when the Event fires. The event is emitted from the Timeline instance.     <pre><code>timeline.on(eventName);\n</code></pre></li> <li><code>target</code> : The scope (<code>this</code> object) with which to invoke the <code>run</code>.</li> </ul> </li> <li>Control<ul> <li><code>once</code> : If set, the Event will be removed from the Timeline when it fires.</li> <li><code>stop</code> : If set, the Timeline will stop and enter a complete state when this Event fires, even if there are other events after it.</li> </ul> </li> </ul> <p>The Timeline always starts paused.</p>"},{"location":"timeline/#start","title":"Start","text":"<pre><code>timeline.play();\n</code></pre> <p>Restart</p> <pre><code>timeline.play(true);\n</code></pre>"},{"location":"timeline/#stop","title":"Stop","text":"<pre><code>timeline.stop();\n</code></pre>"},{"location":"timeline/#pause-resume","title":"Pause / Resume","text":"<pre><code>timeline.pause();\n// timeline.paused = true;\n</code></pre> <pre><code>timeline.resume();\n// timeline.paused = false;\n</code></pre>"},{"location":"timeline/#is-playing","title":"Is playing","text":"<p>Timeline is currently playing, not paused or not complete.</p> <pre><code>var isPlaying = timeline.isPlaying()\n</code></pre>"},{"location":"timeline/#add-event","title":"Add event","text":"<pre><code>timeline.add(config);\n</code></pre> <p>or</p> <pre><code>timeline.add([config0, config1, ...]);\n</code></pre>"},{"location":"timeline/#clear-all-events","title":"Clear all events","text":"<pre><code>timeline.clear();\n</code></pre>"},{"location":"timeline/#destroy","title":"Destroy","text":"<p>Also remove updating.</p> <pre><code>timeline.destroy();\n</code></pre>"},{"location":"timer/","title":"Timer","text":""},{"location":"timer/#introduction","title":"Introduction","text":"<p>Execute callback when time-out, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"timer/#usage","title":"Usage","text":""},{"location":"timer/#start-timer","title":"Start timer","text":"<ul> <li>Looped timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\n//args: [],\ncallbackScope: thisArg,\nloop: true\n});\n</code></pre></li> <li>Repeat timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\n//args: [],\ncallbackScope: thisArg,\nrepeat: 4\n});\n</code></pre></li> <li>Oneshot timer     <pre><code>var timer = scene.time.delayedCall(delay, callback, args, scope);  // delay in ms\n</code></pre></li> <li>All properties of timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\nargs: [],\ncallbackScope: thisArg,\nloop: false,\nrepeat: 0,\nstartAt: 0,\ntimeScale: 1,\npaused: false\n});\n</code></pre></li> <li>Reuse timer     <pre><code>timer.reset({\ndelay: 500,                // ms\ncallback: callback,\nargs: [],\ncallbackScope: thisArg,\nloop: false,\nrepeat: 0,\nstartAt: 0,\ntimeScale: 1,\npaused: false\n})\nscene.time.addEvent(timer);\n</code></pre></li> </ul> <p>Note</p> <p>Throw error message if <code>delay : 0</code> with (<code>repeat &gt; 0</code> or <code>loop: true</code>)</p>"},{"location":"timer/#pauseresume","title":"Pause/resume","text":"<ul> <li>Pause timer     <pre><code>timer.paused = true;\n</code></pre></li> <li>Resume timer     <pre><code>timer.paused = false;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = timer.paused;\n</code></pre></li> </ul>"},{"location":"timer/#stop","title":"Stop","text":"<ul> <li>Stop a running timer     <pre><code>timer.remove();\n</code></pre></li> <li>Remove from timeline's all internal lists, for timer re-using     <pre><code>scene.time.removeEvent(timer);\n</code></pre></li> </ul>"},{"location":"timer/#time-scale","title":"Time scale","text":"<ul> <li>Set     <pre><code>timer.timeScale = 2;\n</code></pre></li> <li>Get     <pre><code>var timeScale = timer.timeScale;\n</code></pre></li> </ul>"},{"location":"timer/#other-properties","title":"Other properties","text":"<ul> <li>Get elapsed time     <pre><code>var elapsed = timer.getElapsed();   // ms\nvar elapsed = timer.getElapsedSeconds(); // sec\n// var elapsed = timer.elapsed;  // ms\n</code></pre></li> <li>Get remaining time     <pre><code>var remaining = timer.getRemaining();   // ms\nvar remaining = timer.getRemainingSeconds(); // sec\n// var remaining = timer.getOverallRemaining();   // ms\n// var remaining = timer.getOverallRemainingSeconds(); // sec\n</code></pre></li> <li>Get repeat count     <pre><code>var repeat = timer.getRepeatCount();\n</code></pre></li> <li>Gets the progress of the current iteration     <pre><code>var progress = timer.getProgress();  // elapsed / delay\n</code></pre></li> <li>Gets the progress of the timer overall, factoring in repeats.     <pre><code>var progress = timer.getOverallProgress();  // totalElapsed / totalDuration\n</code></pre></li> <li>Get delay time     <pre><code>var delay = timer.delay;   // ms\n</code></pre></li> </ul>"},{"location":"tintrgb/","title":"TintRGB","text":""},{"location":"tintrgb/#introduction","title":"Introduction","text":"<p>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties to a game object.</p> <p>Note</p> <p>This behavior will override default <code>tint</code> property</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"tintrgb/#live-demos","title":"Live demos","text":"<ul> <li>Fade</li> <li>Yellow to green</li> </ul>"},{"location":"tintrgb/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tintrgb/#install-plugin","title":"Install plugin","text":""},{"location":"tintrgb/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextintrgbplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextintrgbplugin.min.js', true);\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>scene.plugins.get('rextintrgbplugin').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TintRGBPlugin from 'phaser3-rex-plugins/plugins/tintrgb-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTintRGB',\nplugin: TintRGBPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>scene.plugins.get('rexTintRGB').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddTintRGBProperties from 'phaser3-rex-plugins/plugins/tintrgb.js';\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>AddTintRGBProperties(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexTintRGB').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n// gameObject.tintR = 128;\n// gameObject.tintG = 128;\n// gameObject.tintB = 128;\n</code></pre> <ul> <li><code>tintRGB</code> : Initial tintRGB value in <code>0xRRGGBB</code>.</li> <li><code>tintR</code> : color R of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintG</code> : color G of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintB</code> : color B of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintGray</code> :\u3000Gray tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.<ul> <li>Set <code>gameObject.tintGray</code> is equal to set <code>tintR</code>, <code>tintG</code>, <code>tintB</code> with the same value.</li> </ul> </li> </ul>"},{"location":"tintrgb/#fade","title":"Fade","text":"<pre><code>scene.tweens.add({\ntargets: gameObject,\ntintR: 0,\ntintG: 0,\ntintB: 0,\n// tintGray: 0,\nduration: 3000\n})\n</code></pre>"},{"location":"tools/","title":"Tools","text":""},{"location":"tools/#texture-atlas","title":"Texture atlas","text":""},{"location":"tools/#texture-packer","title":"Texture-packer","text":"<p>Texture-packer</p>"},{"location":"tools/#free-texture-packer","title":"Free texture packer","text":"<p>Free texture packer, Web app</p>"},{"location":"tools/#leshy-spritesheet-tool","title":"Leshy SpriteSheet Tool","text":"<p>Leshy SpriteSheet Tool</p> <p>Export to JSON-TP-Hash</p>"},{"location":"tools/#aseprite","title":"Aseprite","text":"<p>Aseprite</p> <ol> <li>Go to \"File - Export Sprite Sheet\"</li> <li>On the Layout tab:</li> <li>Set the \"Sheet type\" to \"Packed\"</li> <li>Set the \"Constraints\" to \"None\"</li> <li>Check the \"Merge Duplicates\" checkbox</li> <li>On the Sprite tab:<ol> <li>Set \"Layers\" to \"Visible layers\"</li> <li>Set \"Frames\" to \"All frames\", unless you only wish to export a sub-set of tags</li> </ol> </li> <li>On the Borders tab:<ol> <li>Check the \"Trim Sprite\" and \"Trim Cells\" options</li> <li>Ensure \"Border Padding\", \"Spacing\" and \"Inner Padding\" are all &gt; 0 (1 is usually enough)    </li> </ol> </li> <li>On the Output tab:<ol> <li>Check \"Output File\", give your image a name and make sure you choose \"png files\" as the file type</li> <li>Check \"JSON Data\" and give your json file a name</li> <li>The JSON Data type can be either a Hash or Array, Phaser doesn't mind.</li> <li>Make sure \"Tags\" is checked in the Meta options</li> <li>In the \"Item Filename\" input box, make sure it says just \"{frame}\" and nothing more.</li> </ol> </li> <li>Click export</li> </ol> <p>Tested with Aseprite 1.2.25</p>"},{"location":"tools/#atlas-packer","title":"Atlas-packer","text":"<ul> <li>gammafp/Atlas-packer</li> </ul>"},{"location":"tools/#animation","title":"Animation","text":"<ul> <li>gammafp/Animator</li> </ul>"},{"location":"tools/#bitmap-font","title":"Bitmap font","text":"<ul> <li>SnowB BMF</li> <li>71squared-glyphdesigner</li> <li>Bitmap Font Generator</li> <li>TTF to PNG</li> </ul>"},{"location":"touchevents/","title":"Touch events","text":""},{"location":"touchevents/#introduction","title":"Introduction","text":"<p>Built-in touch/mouse events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>Note</p> <p>No touch input event fired in preload stage.</p>"},{"location":"touchevents/#usage","title":"Usage","text":""},{"location":"touchevents/#quick-start","title":"Quick start","text":"<ul> <li>Is touching     <pre><code>var pointer = scene.input.activePointer;\nif (pointer.isDown) {\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}\n</code></pre></li> <li>On any touching start     <pre><code>scene.input.on('pointerdown', function(pointer){\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}, scope);\n</code></pre></li> <li>On any touching end     <pre><code>scene.input.on('pointerup', function(pointer){\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}, scope);\n</code></pre></li> <li>On touch game object start     <pre><code>gameObject.setInteractive().on('pointerdown', function(pointer, localX, localY, event){\n// ...\n}, scope);\n</code></pre></li> <li>On touch game object end     <pre><code>gameObject.setInteractive().on('pointerup', function(pointer, localX, localY, event){\n// ...\n}, scope);\n</code></pre></li> <li>Drag game object     <pre><code>gameObject\n.setInteractive({ draggable: true })\n.on('dragstart', function(pointer, dragX, dragY){\n// ...\n}, scope);\n.on('drag', function(pointer, dragX, dragY){\ngameObject.setPosition(dragX, dragY);\n}, scope);\n.on('dragend', function(pointer, dragX, dragY, dropped){\n// ...\n}, scope);\n</code></pre></li> </ul> <p>Reference : Properties of point</p>"},{"location":"touchevents/#register-interactive","title":"Register interactive","text":"<p>Call <code>gameObject.setInteractive(...)</code> to register touch input of Game Object before listening touching events.</p> <ul> <li>Set hit area from width &amp; height (rectangle) of the texture     <pre><code>gameObject.setInteractive();\n</code></pre></li> <li>Set hit area from game object     <pre><code>gameObject.setInteractive(shape, callback);\n</code></pre><ul> <li>Circle<ul> <li>shape : <code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li>callback : <code>Phaser.Geom.Circle.Contains</code></li> </ul> </li> <li>Ellipse<ul> <li>shape : <code>new Phaser.Geom.Ellipse(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Ellipse.Contains</code></li> </ul> </li> <li>Rectangle<ul> <li>shape : <code>new Phaser.Geom.Rectangle(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Rectangle.Contains</code></li> </ul> </li> <li>Triangle<ul> <li>shape : <code>new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3)</code></li> <li>callback : <code>Phaser.Geom.Triangle.Contains</code></li> </ul> </li> <li>Polygon<ul> <li>shape : <code>new Phaser.Geom.Polygon(points)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Hexagon<ul> <li>shape : <code>new Phaser.Geom.rexHexagon(x, y, size, type)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Rhombus<ul> <li>shape : <code>new Phaser.Geom.rexRhombus(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Note: <code>x</code>, <code>y</code> relate to the top-left of the gameObject.</li> </ul> </li> <li>Set hit area from input plugin     <pre><code>scene.input.setHitArea(gameObjects, shape, callback);\n</code></pre><ul> <li>Circle     <pre><code>scene.input.setHitAreaCircle(gameObjects, x, y, radius);\n// scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains\n</code></pre></li> <li>Ellipse     <pre><code>scene.input.setHitAreaEllipse(gameObjects, x, y, width, height);\n// scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains\n</code></pre></li> <li>Rectangle     <pre><code>scene.input.setHitAreaRectangle(gameObjects, x, y, width, height);\n// scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains\n</code></pre></li> <li>Triangle     <pre><code>scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3);\n// scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains\n</code></pre></li> <li>Note: <code>x</code>, <code>y</code> relate to the top-left of the gameObject.</li> </ul> </li> <li>Set interactive configuration     <pre><code>gameObject.setInteractive({\nhitArea: shape,\nhitAreaCallback: callback,\nhitAreaDebug: shape,\ndraggable: false,\ndropZone: false,\nuseHandCursor: false,\ncursor: CSSString,\npixelPerfect: false,\nalphaTolerance: 1\n});\n</code></pre><ul> <li>Hit area<ul> <li>shape</li> <li>Pixel alpha<ul> <li><code>pixelPerfect</code> : <code>true</code></li> <li><code>alphaTolerance</code> : <code>1</code> (0-255)</li> </ul> </li> <li>Custom hit-testing function<ul> <li><code>hitAreaCallback</code> <pre><code>function(shape, x, y, gameObject) {\nreturn hit;  // true/false\n}\n</code></pre><ul> <li><code>shape</code> : Hit area object</li> <li><code>x</code>, <code>y</code> : Local position of texture.</li> <li><code>gameObject</code> : Game object.</li> </ul> </li> </ul> </li> <li><code>hitAreaDebug</code> : Debug shape.</li> </ul> </li> <li>Dragging<ul> <li><code>draggable</code> : <code>true</code></li> </ul> </li> <li>Drop zone<ul> <li><code>dropZone</code> : <code>true</code></li> </ul> </li> <li>Cursor<ul> <li><code>cursor</code> : CSS string</li> <li><code>useHandCursor</code> : <code>true</code></li> </ul> </li> </ul> </li> </ul> <p>Pixel perfect hit-testing</p> <p>This is an expensive process, should only be enabled on Game Objects that really need it.</p>"},{"location":"touchevents/#disable-interactive","title":"Disable interactive","text":"<ul> <li>Disable temporary     <pre><code>gameObject.disableInteractive();\n</code></pre></li> <li>Remove interaction     <pre><code>gameObject.removeInteractive();\n</code></pre></li> </ul>"},{"location":"touchevents/#top-only","title":"Top only","text":"<p>When set to <code>true</code> this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to <code>false</code> it will emit events from all Game Objects below a Pointer, not just the top one.</p> <ul> <li>Get     <pre><code>var topOnly = scene.input.topOnly;\n</code></pre></li> <li>Set     <pre><code>scene.input.topOnly = topOnly;\nscene.input.setTopOnly(topOnly);\n</code></pre></li> </ul> <p>Each scene can has its own <code>scene.input.topOnly</code> setting.</p>"},{"location":"touchevents/#touch-events","title":"Touch events","text":"<p>Trigger these events from top scene to bottom scene.</p> <ol> <li>Events on touched Game object     <pre><code>gameObject.on('pointerdown', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerup', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointermove', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerover', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerout', function(pointer, event){ /* ... */ }, scope);\n</code></pre><ul> <li>Cancel remaining touched events     <pre><code>function(pointer, localX, localY, event) {\nevent.stopPropagation();\n}\n</code></pre></li> </ul> </li> <li>Event on input plugin for each touched Game object     <pre><code>scene.input.on('gameobjectdown', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectup', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectmove', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectover', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectout', function(pointer, gameObject, event){ /* ... */ }, scope);\n</code></pre><ul> <li>Cancel remaining touched events     <pre><code>function(pointer, gameObject, event) {\nevent.stopPropagation();\n}\n</code></pre></li> </ul> </li> <li>Events to get all touched Game Objects     <pre><code>scene.input.on('pointerdown', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerdownoutside', function(pointer){ /* ... */ }, scope);\nscene.input.on('pointerup', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerupoutside', function(pointer){ /* ... */ }, scope);\nscene.input.on('pointermove', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerover', function(pointer, justOver){ /* ... */ }, scope);\nscene.input.on('pointerout', function(pointer, justOut){ /* ... */ }, scope);\nscene.input.on('gameout', function(timeStamp, domEvent){ /* ... */ }, scope);\nscene.input.on('gameover', function(timeStamp, domEvent){ /* ... */ }, scope);\n</code></pre></li> </ol>"},{"location":"touchevents/#game-canvas","title":"Game canvas","text":"<pre><code>scene.input.on('gameout', function(timeStamp, event){ /* ... */ }, scope);\nscene.input.on('gameover', function(timeStamp, event){ /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#dragging","title":"Dragging","text":""},{"location":"touchevents/#enable-dragging","title":"Enable dragging","text":"<ul> <li>Enable dragging when registering interactive <pre><code>gameObject.setInteractive({ draggable: true });\n</code></pre></li> <li>Enable dragging and add it to dragging detecting list after registered interactive     <pre><code>scene.input.setDraggable(gameObject);\n</code></pre></li> <li>Enable dragging     <pre><code>gameObject.input.draggable = true;\n</code></pre></li> </ul>"},{"location":"touchevents/#disable-dragging","title":"Disable dragging","text":"<ul> <li>Remove Game Object from dragging detecting list     <pre><code>scene.input.setDraggable(gameObject, false);\n</code></pre></li> <li>Disable dragging but keep it in dragging detecting list     <pre><code>gameObject.input.draggable = false;\n</code></pre></li> </ul>"},{"location":"touchevents/#dragging-events","title":"Dragging events","text":"<pre><code>gameObject.on('dragstart', function(pointer, dragX, dragY){ /* ... */ }, scope);\ngameObject.on('drag', function(pointer, dragX, dragY){ /* ... */ }, scope);\ngameObject.on('dragend', function(pointer, dragX, dragY, dropped){ /* ... */ }, scope);\n</code></pre> <pre><code>scene.input.on('dragstart', function(pointer, gameObject){ /* ... */ }, scope);\nscene.input.on('drag', function(pointer, gameObject, dragX, dragY){ /* ... */ }, scope);\nscene.input.on('dragend', function(pointer, gameObject, dropped){ /* ... */ }, scope);\n</code></pre> <ul> <li><code>dropped</code> : <code>'dragend'</code> and also <code>'drop'</code>.</li> </ul>"},{"location":"touchevents/#dragging-properties","title":"Dragging properties","text":"<pre><code>scene.input.dragDistanceThreshold = 16;\nscene.input.dragTimeThreshold = 500;\n</code></pre>"},{"location":"touchevents/#drop-zone","title":"Drop zone","text":""},{"location":"touchevents/#enable-drop-zone","title":"Enable drop zone","text":"<ul> <li>Enable dropping when registering interactive <pre><code>gameObject.setInteractive({ dropZone: true });\n</code></pre></li> <li>Enable dropping after registered interactive     <pre><code>gameObject.input.dropZone = true;\n</code></pre></li> </ul>"},{"location":"touchevents/#disable-drop-zone","title":"Disable drop zone","text":"<pre><code>gameObject.input.dropZone = false;\n</code></pre>"},{"location":"touchevents/#dropping-events","title":"Dropping events","text":"<pre><code>gameObject.on('drop', function(pointer, target){ /* ... */ }, scope);\n\ngameObject.on('dragenter', function(pointer, target){ /* ... */ }, scope);\ngameObject.on('dragover', function(pointer, target){ /* ... */ }, scope);\ngameObject.on('dragleave', function(pointer, target){ /* ... */ }, scope);\n</code></pre> <pre><code>scene.input.on('drop', function(pointer, gameObject, target){ /* ... */ }, scope);\n\nscene.input.on('dragenter', function(pointer, gameObject, target){ /* ... */ }, scope);\nscene.input.on('dragover', function(pointer, gameObject, target){ /* ... */ }, scope);\nscene.input.on('dragleave', function(pointer, gameObject, target){ /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#first-event-of-all","title":"First event of all","text":"<pre><code>scene.input.on('preupdate', function() { /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#single-touch","title":"Single touch","text":""},{"location":"touchevents/#pointer","title":"Pointer","text":"<pre><code>var pointer = scene.input.activePointer;\n</code></pre>"},{"location":"touchevents/#multi-touch","title":"Multi-touch","text":""},{"location":"touchevents/#amount-of-active-pointers","title":"Amount of active pointers","text":"<p>Set amount of active pointers in game configuration</p> <pre><code>var config = {\n// ...\ninput: {\nactivePointers: 1,\n// ...\n}\n};\nvar game = new Phaser.Game(config);\n</code></pre> <p>Or add pointers in run-time.</p> <pre><code>scene.input.addPointer(num);  // total points = num + 1\n</code></pre>"},{"location":"touchevents/#pointers","title":"Pointers","text":"<ul> <li>pointer 1 ~ 10     <pre><code>var pointer = scene.input.pointer1;\n// ...\nvar pointer = scene.input.pointer10;\n</code></pre></li> <li>pointer n     <pre><code>var pointer = scene.input.manager.pointers[n];\n</code></pre></li> <li>Amount of total pointers     <pre><code>var amount = scene.input.manager.pointersTotal;\n</code></pre><ul> <li><code>1</code> in desktop</li> <li><code>2</code> in touch device. (<code>0</code> for mouse, <code>1</code> for 1 touch pointer)</li> </ul> </li> </ul>"},{"location":"touchevents/#pointer_1","title":"Pointer","text":"<ul> <li>Position<ul> <li>Current touching<ul> <li>Position in screen : <code>pointer.x</code> , <code>pointer.y</code></li> <li>Position in camera :<ul> <li>Single camera :     <pre><code>var worldX = pointer.worldX;\nvar worldY = pointer.worldY;\n</code></pre></li> <li>Multiple cameras :     <pre><code>var worldXY = pointer.positionToCamera(camera);  // worldXY: {x, y}\n// var worldXY = pointer.positionToCamera(camera, worldXY);\nvar worldX = worldXY.x;\nvar worldY = worldXY.y;\n</code></pre></li> </ul> </li> <li>Position of previous moving : <code>pointer.prevPosition.x</code> , <code>pointer.prevPosition.y</code><ul> <li>Updating when pointer-down, potiner-move, or pointer-up.</li> </ul> </li> <li>Interpolated position :     <pre><code>var points = pointer.getInterpolatedPosition(step);\n// var out = pointer.getInterpolatedPosition(step, out);\n</code></pre></li> </ul> </li> <li>Drag<ul> <li>Touching start : <code>pointer.downX</code>, <code>pointer.downY</code></li> <li>Touching end : <code>pointer.upX</code>, <code>pointer.upY</code></li> <li>Drag distance between pointer-down to latest pointer : <code>pointer.getDistance()</code><ul> <li>Horizontal drag distance : <code>pointer.getDistanceX()</code></li> <li>Vertical drag distance : <code>pointer.getDistanceY()</code></li> </ul> </li> <li>Drag angle : <code>pointer.getAngle()</code></li> </ul> </li> </ul> </li> <li>Time<ul> <li>Touching start : <code>pointer.downTime</code></li> <li>Touching end : <code>pointer.upTime</code></li> <li>Drag : <code>pointer.getDuration()</code></li> </ul> </li> <li>Touch state<ul> <li>Is touching/any button down :  <code>pointer.isDown</code></li> <li>Is primary button down : <code>pointer.primaryDown</code></li> </ul> </li> <li>Button state : <code>pointer.button</code><ul> <li>On Touch devices the value is always <code>0</code>.</li> </ul> </li> <li>Button down<ul> <li>No button down : <code>pointer.noButtonDown()</code></li> <li>Is primary (left) button down : <code>pointer.leftButtonDown()</code></li> <li>Is secondary (right) button down : <code>pointer.rightButtonDown()</code></li> <li>Is middle (mouse wheel) button down : <code>pointer.middleButtonDown()</code></li> <li>Is back button down : <code>pointer.backButtonDown()</code></li> <li>Is forward button down : <code>pointer.forwardButtonDown()</code></li> </ul> </li> <li>Button released<ul> <li>Is primary (left) button released : <code>pointer.leftButtonReleased()</code></li> <li>Is secondary (right) button released : <code>pointer.rightButtonReleased()</code></li> <li>Is middle (mouse wheel) button released : <code>pointer.middleButtonReleased()</code></li> <li>Is back button released : <code>pointer.backButtonReleased()</code></li> <li>Is forward button released : <code>pointer.forwardButtonReleased()</code></li> </ul> </li> <li>Index in <code>scene.input.manager.pointers</code> : <code>pointer.id</code></li> <li>Motion<ul> <li>Angle: <code>pointer.angle</code></li> <li>Distance: <code>pointer.distance</code></li> <li>Velocity: <code>pointer.velocity</code><ul> <li><code>pointer.velocity.x</code>, <code>`pointer.velocity.y</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"touchevents/#input-object","title":"Input object","text":"<ul> <li><code>gameObject.input</code> : Game object's input object.</li> <li><code>gameObject.input.localX</code>, <code>gameObject.input.localY</code> : Pointer to local position of texture.</li> <li><code>gameObject.input.dragStartX</code>, <code>gameObject.input.dragStartY</code> : The x/y coordinate of the Game Object    that owns this Interactive Object when the drag started.</li> <li><code>gameObject.input.dragStartXGlobal</code>, <code>gameObject.input.dragStartYGlobal</code> : The x/y coordinate that    the Pointer started dragging this Interactive Object from.</li> <li><code>gameObject.input.dragX</code>, <code>gameObject.input.dragY</code> : The x/y coordinate that this Interactive Object    is currently being dragged to.</li> </ul>"},{"location":"touchevents/#smooth","title":"Smooth","text":"<p>Get touch position from interpolation of previous touch position and current touch position.</p> <pre><code>Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor))\n</code></pre> <ol> <li>Set smooth factor. In game configuration <pre><code>var config = {\n// ....\ninput: {\nsmoothFactor: 0\n}\n}\n</code></pre></li> <li>Get touch position     <pre><code>var x = pointer.x;\nvar y = pointer.y;\nvar worldX = pointer.worldX;\nvar worldY = pointer.worldY;\n</code></pre></li> </ol>"},{"location":"touchevents/#debug","title":"Debug","text":"<ul> <li>Enable, draw shape of (shape) hit area.     <pre><code>scene.input.enableDebug(gameObject);\n// scene.input.enableDebug(gameObject, color);\n</code></pre></li> <li>Disable     <pre><code>scene.input.removeDebug(gameObject);\n</code></pre></li> <li>Get debug shape game object     <pre><code>var shape = gameObject.input.hitAreaDebug;\n</code></pre></li> </ul>"},{"location":"touchevents/#poll-rate","title":"Poll rate","text":"<ul> <li>Poll when touches moved, or updated. Default behavior.     <pre><code>scene.input.setPollOnMove();\n</code></pre></li> <li>Poll every tick.     <pre><code>scene.input.setPollAlways();\n</code></pre></li> <li>Set poll rate.     <pre><code>scene.input.setPollRate(rate);\n</code></pre></li> </ul>"},{"location":"toucheventstop/","title":"Touch event stop","text":""},{"location":"toucheventstop/#introduction","title":"Introduction","text":"<p>Stop touch events propagation.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"toucheventstop/#live-demos","title":"Live demos","text":"<ul> <li>Stop touch events</li> </ul>"},{"location":"toucheventstop/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"toucheventstop/#install-plugin","title":"Install plugin","text":""},{"location":"toucheventstop/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoucheventstopplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextoucheventstopplugin.min.js', true);\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = scene.plugins.get('rextoucheventstopplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TouchEventStopPlugin from 'phaser3-rex-plugins/plugins/toucheventstop-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTouchEventStop',\nplugin: TouchEventStopPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = scene.plugins.get('rexTouchEventStop').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import TouchEventStop from 'phaser3-rex-plugins/plugins/toucheventstop.js';\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = newe TouchEventStop(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#create-instance","title":"Create instance","text":"<pre><code>var touchEventStop = scene.plugins.get('rexTouchEventStop').add(gameObject, {\n// hitAreaMode: 0,    // 0|1|'default'|'fullWindow'\n// enable: true\n});\n</code></pre> <ul> <li><code>hitAreaMode</code> : Mode of hit-area<ul> <li><code>0</code>, or <code>'default'</code> : Set hit-area to size of game object, only touch events on this game object will be stopped..</li> <li><code>1</code>, or <code>'fullWindow'</code> : Set hit-area to whole window, all touch events will be stopped.</li> </ul> </li> <li><code>enable</code> : Set <code>false</code> to disable touch-event-stop behavior.</li> </ul>"},{"location":"toucheventstop/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = touchEventStop.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>touchEventStop.setEnable(enable);  // enable: true, or false\n// touchEventStop.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>touchEventStop.toggleEnable();\n</code></pre></li> </ul>"},{"location":"touchstate/","title":"Touch state","text":""},{"location":"touchstate/#introduction","title":"Introduction","text":"<p>Store current touch input properties.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"touchstate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"touchstate/#install-plugin","title":"Install plugin","text":""},{"location":"touchstate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextouchstateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextouchstateplugin.min.js', true);\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = scene.plugins.get('rextouchstateplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TouchStatePlugin from 'phaser3-rex-plugins/plugins/touchstate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTouchState',\nplugin: TouchStatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = scene.plugins.get('rexTouchState').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TouchState from 'phaser3-rex-plugins/plugins/touchstate.js';\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = new TouchState(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#create-instance","title":"Create instance","text":"<pre><code>var touchState = scene.plugins.get('rexTouchState').add(gameObject, {\n// enable: true,\n});\n</code></pre> <ul> <li><code>enable</code> : Can touch.</li> </ul>"},{"location":"touchstate/#properties","title":"Properties","text":"<ul> <li>Is pointer down, is pointer up     <pre><code>var isDown = touchState.isDown;\nvar isUp = touchState.isUp;\n</code></pre></li> <li>Is in touching     <pre><code>var isInTouching = touchState.isInTouching;\n</code></pre></li> <li>Pointer in local position     <pre><code>var localX = touchState.localX;\nvar localY = touchState.localY;\n</code></pre></li> <li>Drag speed     <pre><code>var speed = touchState.speed;\nvar speedX =  touchState.speedX;\nvar speedY =  touchState.speedY;\n</code></pre> <pre><code>var dx = touchState.dx;\nvar dy = touchState.dy;\nvar dt = touchState.dt;    </code></pre></li> </ul>"},{"location":"touchstate/#events","title":"Events","text":"<ul> <li>Touch start (pointer down)     <pre><code>touchState.on('touchstart', function (touchState, gameObject, pointer, localX, localY, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Touch end (pointer up)     <pre><code>touchState.on('touchend', function (touchState, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Touch move (pointer move)     <pre><code>touchState.on('touchmove', function (touchState, gameObject, pointer, localX, localY, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"touchstate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = touchState.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>touchState.setEnable(enabled);  // enabled: true, or false\n// touchState.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>touchState.toggleEnable();\n</code></pre></li> </ul>"},{"location":"transitionimage/","title":"Transition image","text":""},{"location":"transitionimage/#introduction","title":"Introduction","text":"<p>Transit texture to another one. A containerLite game object with 2 image game objects.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"transitionimage/#live-demos","title":"Live demos","text":"<ul> <li>Ease property of current/next image<ul> <li>Cross-fade</li> <li>Scale</li> <li>Slide</li> </ul> </li> <li>Apply shader effect to current/next image, then ease property this shader effect.<ul> <li>Split</li> <li>Dissolve</li> </ul> </li> <li>Grid cut current/next image to cell images, then ease property of cell images<ul> <li>Grid cut</li> <li>3 columns</li> </ul> </li> <li>Morph custom mask game object<ul> <li>Pie mask</li> </ul> </li> <li>Transition modes</li> </ul>"},{"location":"transitionimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"transitionimage/#install-plugin","title":"Install plugin","text":""},{"location":"transitionimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextransitionimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextransitionimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TransitionImagePlugin from 'phaser3-rex-plugins/plugins/transitionimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTransitionImagePlugin',\nplugin: TransitionImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TransitionImage from 'phaser3-rex-plugins/plugins/transitionimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new TransitionImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"transitionimage/#create-instance","title":"Create instance","text":"<p><pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, {\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,    \n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre> or</p> <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, {\n// x: 0,\n// y: 0,\n// key: \n// frame: \n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,    \n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre> <ul> <li><code>dir</code> : Transition direction.<ul> <li><code>0</code>, or <code>'out'</code> : Transit current texture/image out.</li> <li><code>1</code>, or <code>'in'</code> : Transit next texture/image in.</li> </ul> </li> <li><code>onStart</code>, <code>onStartScope</code> : Callback and scope of transition-start. See Set transition callbacks</li> <li><code>onProgress</code>, <code>onProgressScope</code> : Callback and scope of transition-progress. See Set transition callbacks</li> <li><code>onComplete</code>, <code>onCompleteScope</code> : Callback and scope of transition-complete. See Set transition callbacks</li> <li><code>duration</code> : Duration of transition.</li> <li><code>ease</code> : Ease function of transition-progress.</li> <li><code>mask</code> : Mask game object.<ul> <li><code>true</code> : Default graphics game object.</li> <li>Any shape game object, or custom shape, custom progress game object.</li> </ul> </li> </ul> <p>If <code>onStart</code>, <code>onProgress</code> and <code>onComplete</code> are all <code>undefined</code>, it will use cross-fade as default transition callbacks.</p> <p>Add transitionimage from JSON</p> <pre><code>var image = scene.make.rexTransitionImage({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"transitionimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTransitionImage extends TransitionImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var transitionimage = new MyTransitionImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#transit","title":"Transit","text":"<pre><code>image\n// .setTransitionDirection(dir)\n// .setTransitionStartCallback(onStart, onStartScope)\n// .setTransitionProgressCallback(onProgress, onProgressScope)\n// .setTransitionCompleteCallback(onComplete, onCompleteScope)\n// .setDuration(duration)\n// .setEaseFunction(ease)\n// .setMaskEnable(enable)\n.transit(texture, frame)\n</code></pre> <p>or</p> <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n})\n</code></pre> <ul> <li><code>mask</code> : Mask game object.<ul> <li><code>true</code> : Default graphics game object. Also apply this mask to current and next textures/images</li> <li>Any shape game object, or custom shape, custom progress game object.<ul> <li>Apply mask to current texture :      <pre><code>image.setCurrentImageMaskEnable();\n// image.setCurrentImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to next texture :      <pre><code>image.setNextImageMaskEnable();\n// image.setNextImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to both current and next trextures :     <pre><code>image.setMaskEnable();\n// image.setMaskEnable(enable, invertAlpha);\n</code></pre></li> </ul> </li> </ul> </li> </ul> <p>Fire <code>'complete'</code> event when transition completed.</p>"},{"location":"transitionimage/#register-transtion-mode","title":"Register transtion mode","text":"<ul> <li>Register transtion mode     <pre><code>image.addTransitionMode(modeName, {\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre></li> <li>Trnasit by transition mode     <pre><code>image.transit(texture, frame, modeName);\n// image.transit(texture, frame, modeNames);\n</code></pre>     or     <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n\nmode: modeName, // or modeName\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n})\n</code></pre><ul> <li>Can override configuration of transition mode</li> <li><code>modeName</code> : A string, or an array of string to pick a random mode.</li> </ul> </li> <li>Current transition mode     <pre><code>var modeName = image.currentTransitionMode;\n</code></pre></li> </ul>"},{"location":"transitionimage/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"transitionimage/#transition-callbacks","title":"Transition callbacks","text":"<ul> <li>Set transition direction     <pre><code>image.setTransitionDirection(dir);\n</code></pre><ul> <li><code>0</code>, or <code>'out'</code> : Transit current texture out.</li> <li><code>1</code>, or <code>'in'</code> : Transit next texture in.</li> </ul> </li> <li>Set transition-start callback     <pre><code>image.setTransitionStartCallback(onStart, onStartScope)\n</code></pre><ul> <li><code>onStart</code> <pre><code>function(parent, currentImage, nextImage, t) { }\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.</li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. It is <code>0</code> in this case.</li> </ul> </li> </ul> </li> <li>Set transition-progress callback     <pre><code>image.setTransitionProgressCallback(onProgress, onProgressScope)\n</code></pre><ul> <li><code>onProgress</code> <pre><code>function(parent, currentImage, nextImage, t) { // parent.setChildLocalAlpha(currentImage, 1 - t);\n// parent.setChildLocalScale(currentImage, 1 - t);\n// parent.setChildLocalPosition(currentImage, x, 0);\n}\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.<ul> <li>Set alpha of currentImage, or nextImage by <code>parent.setChildLocalAlpha(currentImage, alpha)</code>.</li> <li>Set scale of currentImage, or nextImage by <code>parent.setChildLocalScale(currentImage, scale)</code>.</li> <li>Set position of currentImage, or nextImage by <code>parent.setChildLocalScale(currentImage, x, y)</code>.        </li> </ul> </li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> <li>Set transition-complete callback     <pre><code>image.setTransitionCompleteCallback(onComplete, onCompleteScope)\n</code></pre><ul> <li><code>onComplete</code> <pre><code>function(parent, currentImage, nextImage, t) { }\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.</li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. It is <code>1</code> in this case.</li> </ul> </li> </ul> </li> </ul>"},{"location":"transitionimage/#transition-duration","title":"Transition duration","text":"<ul> <li>Set     <pre><code>image.setDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = image.duration;\n</code></pre></li> </ul>"},{"location":"transitionimage/#ease-function","title":"Ease function","text":"<ul> <li>Set     <pre><code>image.setEaseFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function of transition-progress.</li> </ul> </li> <li>Get     <pre><code>var ease = image.easeFunction;\n</code></pre></li> </ul>"},{"location":"transitionimage/#mask","title":"Mask","text":"<ul> <li>Apply mask to current texture :      <pre><code>image.setCurrentImageMaskEnable();\n// image.setCurrentImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to next texture :      <pre><code>image.setNextImageMaskEnable();\n// image.setNextImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to both current and next trextures :     <pre><code>image.setMaskEnable();\n// image.setMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Assign default mask game object     <pre><code>image.setMaskGameObject(true);\n</code></pre></li> <li>Assign custom mask game object     <pre><code>image.setMaskGameObject(maskGameObject);\n</code></pre><ul> <li><code>maskGameObject</code> : A graphics game object, or any shape game objects, custom-progress shape game object</li> </ul> </li> </ul>"},{"location":"transitionimage/#grid-cut","title":"Grid cut","text":"<p>Grid cut texture to cells.</p> <ul> <li>Grid cut current texture :     <pre><code>var cellImageGameObjects = image.gridCutCurrentImage(columns, rows);\n</code></pre><ul> <li><code>cellImageGameObjects</code> : Array of cell game objects.</li> </ul> </li> <li>Grid cut next texture :     <pre><code>var cellImageGameObjects = image.gridCutNextImage(columns, rows);\n</code></pre><ul> <li><code>cellImageGameObjects</code> : Array of cell game objects.</li> </ul> </li> <li>Get cut cell image game objects, after cutting.     <pre><code>var cellImageGameObjects = image.getCellImages();\n</code></pre></li> <li>Apply mask to cell images     <pre><code>image.setCellImagesMaskEnable();\n// image.setCellImagesMaskEnable(enable, invertAlpha);\n</code></pre></li> </ul> <p>Cut cell image game objects will be set to invisible after transition complete.</p>"},{"location":"transitionimage/#pauseresume","title":"Pause/Resume","text":"<pre><code>image.pause();\n</code></pre> <pre><code>image.resume();\n</code></pre>"},{"location":"transitionimage/#stop","title":"Stop","text":"<pre><code>image.stop();\n</code></pre> <p>Also will fire <code>'complete'</code> event.</p>"},{"location":"transitionimage/#events","title":"Events","text":"<ul> <li>On complete    <pre><code>image.on('complete', function(){\n})\n</code></pre></li> </ul>"},{"location":"transitionimage/#flip","title":"Flip","text":"<ul> <li>Flip     <pre><code>image.flipX(value);\nimage.flipY(value);\nimage.flip(x, y);\n</code></pre></li> <li>Toggle     <pre><code>image.toggleFlipX();\nimage.toggleFlipY();\n</code></pre></li> </ul>"},{"location":"transitionimage/#use-cases","title":"Use cases","text":"<ul> <li>Ease property of current/next image.<ul> <li>Scale</li> <li>Slide, apply mask to current/next image.</li> </ul> </li> <li>Apply shader effect to current/next image, then ease property this shader effect.<ul> <li>Dissolve</li> <li>Split</li> </ul> </li> <li>Grid cut current/next image to cell images, then ease property of cell images<ul> <li>Grid cut</li> <li>Three-columns, apply mask to cell images.</li> </ul> </li> <li>Morph custom mask game object<ul> <li>Pie-mask, mask current/next image by a custom-progress game object.</li> </ul> </li> </ul>"},{"location":"transitionimagepack/","title":"Transition image pack","text":""},{"location":"transitionimagepack/#introduction","title":"Introduction","text":"<p>Transit texture to another one, with some pre-build effects, extended from TransitionImage</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"transitionimagepack/#live-demos","title":"Live demos","text":"<ul> <li>Effect list</li> <li>Slide modes</li> <li>Fade modes</li> <li>Mask modes</li> <li>Shader effect modes</li> </ul>"},{"location":"transitionimagepack/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"transitionimagepack/#install-plugin","title":"Install plugin","text":""},{"location":"transitionimagepack/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextransitionimagpackplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextransitionimagpackplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TransitionImagePackPlugin from 'phaser3-rex-plugins/templates/transitionimagepack/transitionimagepack-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTransitionImagePackPlugin',\nplugin: TransitionImagePackPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TransitionImagePack from 'phaser3-rex-plugins/templates/transitionimagepack/TransitionImagePack.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new TransitionImagePack(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#create-instance","title":"Create instance","text":"<p><pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, {   // duration: 1000,\n});\n</code></pre> or</p> <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, {\n// x: 0,\n// y: 0,\n// key: \n// frame: \n// duration: 1000,\n});\n</code></pre> <ul> <li><code>duration</code> : Duration of transition.</li> </ul> <p>Add transitionimage from JSON</p> <pre><code>var image = scene.make.rexTransitionImagePack({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// duration: 1000,\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"transitionimagepack/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTransitionImagePack extends TransitionImagePack {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var transitionimage = new MyTransitionImagePack(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#transit","title":"Transit","text":"<pre><code>image\n// .setDuration(duration)\n// .setEaseFunction(ease)\n.transit(texture, frame, modeName)\n</code></pre> <p>or</p> <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n// duration: 1000,\n// ease: 'Linear',\nmode: modeName\n})\n</code></pre> <ul> <li><code>duration</code> : Override default <code>duration</code> setting.</li> <li><code>ease</code> : Override default <code>ease</code> setting.</li> <li><code>mode</code> : Pre-build effects<ul> <li>Fade effects : <ul> <li><code>'fade'</code> : Tint old image to black, then tint new image from black to origin color.</li> <li><code>'crossFade'</code> : Ease alpha of old image from 1 to 0, and ease alpha of new image from 0 to 1 at the same time.</li> </ul> </li> <li>Slide effects : <code>'slideLeft'</code>, <code>'slideRight'</code>, <code>'slideUp'</code>, <code>'slideDown'</code>,    <code>'slideAwayLeft'</code>, <code>'slideAwayRight'</code>, <code>'slideAwayUp'</code>, <code>'slideAwayDown'</code>,    <code>'pushLeft'</code>, <code>'pushRight'</code>, <code>'pushUp'</code>, <code>'pushDown'</code>.</li> <li>Zoom(scale) effects : <code>'zoomOut'</code>, <code>'zoomIn'</code>, <code>'zoomInOut'</code>.</li> <li>Mask effects : <code>'wipeLeft'</code>, <code>'wipeRight'</code>, <code>'wipeUp'</code>, <code>'wipeDown'</code>,   <code>'irisOut'</code>, <code>'irisIn'</code>,  <code>'irisInOut'</code>, <code>'pieOut'</code>, <code>'pieIn'</code>, <code>'pieInOut'</code>,    <code>'blinds'</code>, <code>'squares'</code>, <code>'diamonds'</code>, <code>'circles'</code>, <code>'curtain'</code>.</li> <li>Shader effects : <code>'pixellate'</code>, <code>'dissolve'</code>,    <code>'revealLeft'</code>, <code>'revealRight'</code>, <code>'revealUp'</code>, <code>'revealDown'</code></li> </ul> </li> </ul>"},{"location":"transitionimagepack/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"transitionimagepack/#transition-duration","title":"Transition duration","text":"<ul> <li>Set     <pre><code>image.setDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = image.duration;\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#ease-function","title":"Ease function","text":"<ul> <li>Set     <pre><code>image.setEaseFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function of transition-progress.</li> </ul> </li> <li>Get     <pre><code>var ease = image.easeFunction;\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#pauseresume","title":"Pause/Resume","text":"<pre><code>image.pause();\n</code></pre> <pre><code>image.resume();\n</code></pre>"},{"location":"transitionimagepack/#stop","title":"Stop","text":"<pre><code>image.stop();\n</code></pre> <p>Also will fire <code>'complete'</code> event.</p>"},{"location":"transitionimagepack/#events","title":"Events","text":"<ul> <li>On complete    <pre><code>image.on('complete', function(){\n})\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#flip","title":"Flip","text":"<ul> <li>Flip     <pre><code>image.flipX(value);\nimage.flipY(value);\nimage.flip(x, y);\n</code></pre></li> <li>Toggle     <pre><code>image.toggleFlipX();\nimage.toggleFlipY();\n</code></pre></li> </ul>"},{"location":"tween-timeline/","title":"Timeline","text":""},{"location":"tween-timeline/#introduction","title":"Introduction","text":"<p>Chain a series of tween tasks, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tween-timeline/#usage","title":"Usage","text":""},{"location":"tween-timeline/#create-timeline-then-chain-tween-tasks","title":"Create timeline, then chain tween tasks","text":"<ol> <li>Create timeline     <pre><code>var timeline = scene.tweens.createTimeline();\n</code></pre></li> <li>Add tween task configuration     <pre><code>timeline.add({\ntargets: gameObject,\nx: 400,               // '+=100'\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\n// offset: '-=500',   // starts 500ms before previous tween ends\n})\n</code></pre><ul> <li><code>offset</code> : Start this tween task with a time offset.<ul> <li>A number : Absolute offsets, start this tween task after timeline start.</li> <li>A string, <code>'-=n'</code> : Relative offsets, start this tween task before previous tween ends.</li> </ul> </li> </ul> </li> <li>Start tween tasks     <pre><code>timeline.play();\n</code></pre></li> </ol>"},{"location":"tween-timeline/#create-timeline-included-tween-tasks","title":"Create timeline, included tween tasks","text":"<pre><code>var timeline = scene.tweens.timeline({\ntargets: gameObject,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\neaseParams:\n\nduration: 1000,\ndelay: 0,\nloop: 0,\nhold: 0,\nrepeat: 0,\nloopDelay: 0,\ncompleteDelay: 0,\nyoyo: false,\n\npaused: false,\nuseFrames: false,\nflipX: false,\nflipY: false,\n\n\ntweens: [\n{\ntargets: gameObject,\nx: 400,               // '+=100'\n// ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\n// duration: 1000,\n// repeat: 0,            // -1: infinity\n// yoyo: false,\n// offset: '-=500',   // starts 500ms before previous tween ends\n},\n// ...\n],\n\n\ncallbackScope: timeline,\n\nonStart: function () {},\nonStartScope: onStartParams: [],\n\nonUpdate: function () {},\nonUpdateScope:\nonUpdateParams: [],\n\nonLoop: function () {},\nonLoopScope:\nonLoopParams: [],\n\nonYoyo: function () {},\nonYoyoScope:\nonYoyoParams: [],\n\nonComplete: function () {},\nonCompleteScope:\nonCompleteParams: [],\n\ntotalDuration: 0,\n\n});\n</code></pre>"},{"location":"tween/","title":"Tween task","text":""},{"location":"tween/#introduction","title":"Introduction","text":"<p>Change properties by tween equations, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tween/#usage","title":"Usage","text":""},{"location":"tween/#create-tween-task","title":"Create tween task","text":"<pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\nx: 1,\n// x: '+=1',\n// x: '-=1',\n// x: '*=1',\n// x: '/=1',\n// x: 'random(0.25, 0.75)',\n// x: 'int(10, 100)',\n// x: [100, 300, 200, 600],\n// x: { from: 0, to: 1 },\n// x: { start: 0, to: 1 },  \n// x: { start: value0, from: value1, to: value2 },  \n// x: {\n//      getActive: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },\n//      getStart: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },\n//      getEnd: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; }\n// },\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\n\n// interpolation: null,\n});\n</code></pre> <ul> <li><code>key: value2</code> : Tween to <code>value2</code>.</li> <li><code>key: '+=deltaValue'</code> : Tween to current value + deltaValue<ul> <li>Support these expressions : <code>key: '+=deltaValue'</code>, <code>key: '-=deltaValue'</code>, <code>key: '*=deltaValue'</code>, <code>key: '/=deltaValue'</code></li> </ul> </li> <li><code>key: 'random(10, 100)'</code> : Tween to a random float value.</li> <li><code>key: 'int(10, 100)'</code> : Tween to a random int value.</li> <li><code>key: [100, 300, 200, 600]</code> : Use <code>interpolation</code> to determine the value.</li> <li><code>key: { from: value1, to: value2 }</code> : Set the property to <code>value11</code> when tween started after delay, then tween to <code>value2</code>.</li> <li><code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)   </li> <li><code>key: { start: value0, to: value2 }</code> : Set the property to <code>value0</code> immediately, then tween to <code>value2</code>.<ul> <li><code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)  </li> </ul> </li> <li><code>key: { start: value0, from: value1, to: value2 }</code> : Set the property to <code>value0</code> immediately, then set to <code>value1</code> when tween started after delay, then tween to <code>value2</code>.<ul> <li><code>value0</code>, <code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)  </li> </ul> </li> <li><code>key: function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code><ul> <li><code>target</code> :\u3000The tween target.</li> <li><code>key</code> : The target property.</li> <li><code>value</code> : The current value of the target property.</li> <li><code>targetIndex</code> : The index of the target within the Tween.</li> <li><code>totalTargets</code> : The total number of targets in this Tween.</li> <li><code>tween</code> : The Tween that invoked this callback.</li> </ul> </li> <li><code>key: { getActive:callback, getStart:callback, getEnd:callback}</code><ul> <li><code>callback</code> : <code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code></li> </ul> </li> </ul> <p>or</p> <pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\npaused: false,\ncallbackScope: tween,\n\n// timming/callback of each state\nonStart: function () {},\nonStartParams: [],\n\n// initial delay\ndelay: 0,  // function(target, targetKey, value, targetIndex, totalTargets, tween) { },\n\n// tween duration\nduration: 1000,\nease: 'Linear',\neaseParams: null,\n\nonActive: function () {},\nonUpdate: function (tween, target, key, current, previous, param) {},\nonUpdateParams: [],\n\n// delay between tween and yoyo\nhold: 0,\nyoyo: false,  // true to tween backward\nflipX: false,\nflipY: false,\nonYoyo: function (tween, target, key, current, previous, param) {},\nonYoyoParams: [],\n\n// repeat count (-1: infinite)\nrepeat: 0,\nonRepeat: function (tween, target, key, current, previous, param) {},\nonRepeatParams: [],\n// delay to next pass\nrepeatDelay: 0,\n\n// loop count (-1: infinite)\nloop: 0,\nonLoop: function () {},\nonLoopParams: [],\n// delay to next loop\nloopDelay: 0,\n\n// delay to onComplete callback\ncompleteDelay: 0,\nonComplete: function () {},\nonCompleteParams: [],\n// timming/callback of each state\n\nonStop: function () {}, onPause: function () {}, onResume: function () {}, // properties:\nx: '+=600',        // start from current value\ny: 500,\nrotation: ...\nangle: ...\nalpha: ...\n// ...\n\n// or\nprops: {\nx: { value: '+=600', duration: 3000, ease: 'Power2' },\ny: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }\n},\n\n// or\nprops: {\nx: {\nduration: 400,\nyoyo: true,\nrepeat: 8,\nease: 'Sine.easeInOut',\nvalue: {\ngetActive: function (target, key, value, targetIndex, totalTargets, tween)\n{\nreturn value;\n},\ngetStart: function (target, key, value, targetIndex, totalTargets, tween)\n{\nreturn value + 30;\n},\ngetEnd: function (target, key, value, targetIndex, totalTargets, tween)\n{\ndestX -= 30;\nreturn destX;\n}\n}\n},\n....\n},\n\npersist: false,\n\ninterpolation: null,\ninterpolationData: null,\n\n});\n</code></pre> <ul> <li><code>targets</code> : The targets the tween is updating.</li> <li><code>delay</code> : The time the tween will wait before it first starts<ul> <li>A number, for all targets</li> <li>A callback function, built via stagger builder :<ul> <li>From <code>0</code> to <code>endValue</code> : <ul> <li><code>scene.tweens.stagger(endValue)</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code> : <ul> <li><code>scene.tweens.stagger([startValue, endValue])</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific ease function : <ul> <li><code>scene.tweens.stagger(endValue, {ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, with specific ease function : <ul> <li><code>scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific start index :<ul> <li><code>scene.tweens.stagger(endValue, {from: 'last'})</code></li> <li><code>scene.tweens.stagger(endValue, {from: 'center'})</code></li> <li><code>scene.tweens.stagger(endValue, {from: index})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, , with specific start index :<ul> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'last'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'center'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {from: index})</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific ease function, with specific start index : <ul> <li><code>scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, with specific ease function , with specific start index :<ul> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'})</code></li> </ul> </li> <li>Grid mode. From <code>0</code> to <code>endValue</code>.<ul> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], })</code></li> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'})</code></li> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'})</code></li> </ul> </li> <li>Grid mode. From <code>startValue</code> to <code>endValue</code>.<ul> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], })</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'})</code></li> </ul> </li> </ul> </li> </ul> </li> <li><code>duration</code> : The duration of the tween</li> <li><code>ease</code> : The ease function used by the tween</li> <li><code>easeParams</code> : The parameters to go with the ease function (if any)</li> <li><code>hold</code> : The time the tween will pause before running a yoyo</li> <li><code>repeat</code> : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once)</li> <li><code>repeatDelay</code> : The time the tween will pause for before starting a repeat. The tween holds in the start state.</li> <li><code>yoyo</code> : boolean - Does the tween reverse itself (yoyo) when it reaches the end?</li> <li><code>flipX</code> : flip X the GameObject on tween end</li> <li><code>flipY</code> : flip Y the GameObject on tween end</li> <li><code>offset</code> : Used when the Tween is part of a Timeline</li> <li><code>completeDelay</code> : The time the tween will wait before the onComplete event is dispatched once it has     completed</li> <li><code>loop</code> : <code>-1</code> for an infinite loop</li> <li><code>loopDelay</code></li> <li><code>paused</code> : Does the tween start in a paused state, or playing?</li> <li><code>props</code> : The properties being tweened by the tween</li> <li><code>onActive</code> : Tween becomes active within the Tween Manager.     <pre><code>function(tween, target) { }\n</code></pre></li> <li><code>onStart</code> : A tween starts.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onUpdate</code> : Callback which fired when tween task updated     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onComplete</code> : Tween completes or is stopped.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onYoyo</code> : A function to call each time the tween yoyos. Called once per property per target.     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onLoop</code> : A function to call each time the tween loops.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onRepeat</code> : A function to call each time the tween repeats. Called once per property per target.     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onStop</code> : A function to call when the tween is stopped.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onPause</code> : A function to call when the tween is paused.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onResume</code> : A function to call when the tween is resumed after being paused.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>persist</code> : Will the Tween be automatically destroyed on completion, or retained for future playback?</li> <li><code>interpolation</code> : The interpolation function to use if the <code>value</code> given is an array of numbers.<ul> <li><code>'linear'</code>, <code>'bezier'</code>, <code>'catmull'</code> (or <code>'catmullrom'</code>)</li> </ul> </li> </ul> <p>Note</p> <p>Tween task will not manipulate any property that begins with an underscore.</p>"},{"location":"tween/#ease-equations","title":"Ease equations","text":"<ul> <li><code>Power0</code> : Linear</li> <li><code>Power1</code> : Quadratic.Out</li> <li><code>Power2</code> : Cubic.Out</li> <li><code>Power3</code> : Quartic.Out</li> <li><code>Power4</code> : Quintic.Out</li> <li><code>Linear</code></li> <li><code>Quad</code> : Quadratic.Out</li> <li><code>Cubic</code> : Cubic.Out</li> <li><code>Quart</code> : Quartic.Out</li> <li><code>Quint</code> : Quintic.Out</li> <li><code>Sine</code> : Sine.Out</li> <li><code>Expo</code> : Expo.Out</li> <li><code>Circ</code> : Circular.Out</li> <li><code>Elastic</code> : Elastic.Out</li> <li><code>Back</code> : Back.Out</li> <li><code>Bounce</code> : Bounce.Out</li> <li><code>Stepped</code></li> <li><code>Quad.easeIn</code></li> <li><code>Cubic.easeIn</code></li> <li><code>Quart.easeIn</code></li> <li><code>Quint.easeIn</code></li> <li><code>Sine.easeIn</code></li> <li><code>Expo.easeIn</code></li> <li><code>Circ.easeIn</code></li> <li><code>Back.easeIn</code></li> <li><code>Bounce.easeIn</code></li> <li><code>Quad.easeOut</code></li> <li><code>Cubic.easeOut</code></li> <li><code>Quart.easeOut</code></li> <li><code>Quint.easeOut</code></li> <li><code>Sine.easeOut</code></li> <li><code>Expo.easeOut</code></li> <li><code>Circ.easeOut</code></li> <li><code>Back.easeOut</code></li> <li><code>Bounce.easeOut</code></li> <li><code>Quad.easeInOut</code></li> <li><code>Cubic.easeInOut</code></li> <li><code>Quart.easeInOut</code></li> <li><code>Quint.easeInOut</code></li> <li><code>Sine.easeInOut</code></li> <li><code>Expo.easeInOut</code></li> <li><code>Circ.easeInOut</code></li> <li><code>Back.easeInOut</code></li> <li><code>Bounce.easeInOut</code></li> </ul> <p>Demo</p>"},{"location":"tween/#pause-resume-task","title":"Pause / Resume task","text":"<pre><code>tween.pause();\n</code></pre> <pre><code>tween.resume();\n</code></pre>"},{"location":"tween/#stop-task","title":"Stop task","text":"<pre><code>tween.stop();\n</code></pre>"},{"location":"tween/#play-task","title":"Play task","text":"<pre><code>tween.play();\n</code></pre>"},{"location":"tween/#restart-task","title":"Restart task","text":"<pre><code>tween.restart();\n</code></pre>"},{"location":"tween/#seek","title":"Seek","text":"<pre><code>tween.seek(amount);\n// tween.seek(amount, delta, emit);\n</code></pre> <ul> <li><code>amount</code> : The number of milliseconds to seek into the Tween from the beginning.</li> <li><code>delta</code> : The size of each step when seeking through the Tween. Default value is <code>16.6</code> (1000/60)</li> <li><code>emit</code> : While seeking, should the Tween emit any of its events or callbacks? The default is <code>false</code>.</li> </ul>"},{"location":"tween/#remove-task","title":"Remove task","text":"<p>Removes this Tween from the TweenManager</p> <pre><code>tween.remove();\n</code></pre>"},{"location":"tween/#destroy-task","title":"Destroy task","text":"<p>Free tween task from memory</p> <pre><code>tween.destroy();\n</code></pre> <p>Note</p> <p>A Tween that has been destroyed cannot ever be played or used again.</p>"},{"location":"tween/#get-tweens","title":"Get tweens","text":"<ul> <li>Tweens of a target     <pre><code>var tweens = scene.tweens.getTweensOf(target);\n// var tweens = scene.tweens.getTweensOf(target, includePending);\n</code></pre><ul> <li><code>tweens</code> : Array of tweens, or timelines.</li> <li><code>includePending</code> : Set <code>true</code> to search pending tweens.</li> </ul> </li> <li>All tweens     <pre><code>var tweens = scene.tweens.getTweens();\n</code></pre></li> </ul>"},{"location":"tween/#destroy-task-of-a-target","title":"Destroy task of a target","text":"<pre><code>scene.tweens.killTweensOf(target);\n</code></pre> <ul> <li><code>target</code> : The target to kill the tweens of. Provide an array to use multiple targets.</li> </ul>"},{"location":"tween/#time-scale","title":"Time-scale","text":"<pre><code>tween.setTimeScale(v);\n// tween.timeScale = timescale;\n</code></pre> <pre><code>var timeScale = tween.getTimeScale();\n// var timeScale = tween.timeScale;\n</code></pre>"},{"location":"tween/#global-time-scale","title":"Global time-scale","text":"<pre><code>var timeScale = scene.tweens.timeScale;\n</code></pre> <pre><code>scene.tweens.timeScale = timescale;\n</code></pre>"},{"location":"tween/#events","title":"Events","text":"<ul> <li>Tween becomes active within the Tween Manager.     <pre><code>tween.on('active', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>Tween completes or is stopped.     <pre><code>tween.on('complete', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween loops, after any loop delay expires.     <pre><code>tween.on('loop', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween property repeats, after any repeat delay expires.     <pre><code>tween.on('repeat', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween starts.     <pre><code>tween.on('start', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween property updates.     <pre><code>tween.on('update', function(tween, key, target, current, previous){\n\n}, scope);\n</code></pre><ul> <li><code>tween</code> : A reference to the Tween instance that emitted the event.</li> <li><code>key</code> : The property that was updated, i.e. <code>x</code> or <code>scale</code>.</li> <li><code>target</code> : The target object that was updated. Usually a Game Object, but can be of any type.</li> <li><code>current</code> : The current value of the property that was tweened.</li> <li><code>previous</code> : The previous value of the property that was tweened, prior to this update.</li> </ul> </li> <li>A tween property pause.     <pre><code>tween.on('pause', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween property resume.     <pre><code>tween.on('resume', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween property yoyos.     <pre><code>tween.on('yoyo', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween stopped.     <pre><code>tween.on('stop', function(tween, targets){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"tween/#set-callbacks","title":"Set callbacks","text":"<pre><code>tween.setCallback(type, callback, param);\n</code></pre> <ul> <li><code>type</code> : <ul> <li><code>'onActive'</code> : When the Tween is first created it moves to an 'active' state when added to the Tween Manager. 'Active' does not mean 'playing'.</li> <li><code>'onStart'</code> : When the Tween starts playing after a delayed or paused state. This will happen at the same time as <code>onActive</code> if the tween has no delay and isn't paused.</li> <li><code>'onLoop'</code> : When a Tween loops, if it has been set to do so. This happens after the <code>loopDelay</code> expires, if set.</li> <li><code>'onComplete'</code> : When the Tween finishes playback fully. Never invoked if the Tween is set to repeat infinitely.</li> <li><code>'onStop'</code> : Invoked only if the <code>Tween.stop</code> method is called.</li> <li><code>'onPause'</code> : Invoked only if the <code>Tween.pause</code> method is called. Not invoked if the Tween Manager is paused.</li> <li><code>'onResume'</code> : Invoked only if the <code>Tween.resume</code> method is called. Not invoked if the Tween Manager is resumed.</li> <li><code>'onYoyo'</code> : When a TweenData starts a yoyo. This happens after the <code>hold</code> delay expires, if set.</li> <li><code>'onRepeat'</code> : When a TweenData repeats playback. This happens after the <code>repeatDelay</code> expires, if set.</li> <li><code>'onUpdate'</code> : When a TweenData updates a property on a source target during playback.</li> </ul> </li> <li><code>callback</code> :<ul> <li><code>'onRepeat'</code>, <code>'onUpdate'</code>, <code>'onYoyo'</code> <pre><code>function(tween, targets, key, current, previous, param) {\n\n}\n</code></pre></li> <li><code>'onActive'</code>, <code>'onLoop'</code>, <code>'onPause'</code>, <code>'onResume'</code>, <code>'onComplete'</code>, <code>'onStart'</code>, <code>'onStop'</code>,      <pre><code>function(tween, targets, param) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"tween/#state","title":"State","text":"<ul> <li>Is playing     <pre><code>var isPlaying = tween.isPlaying();\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = tween.isPaused();\n</code></pre></li> <li>Is actively and not just in a delayed state     <pre><code>var hasStarted = tween.hasStarted;\n</code></pre></li> </ul>"},{"location":"tween/#custom-ease-function","title":"Custom ease function","text":"<pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\n// ...\nease: function (t) {  // t: 0~1\nreturn value;     // value: 0~1\n},\n// ...\n});\n</code></pre>"},{"location":"tween/#has-target","title":"Has target","text":"<pre><code>var hasTarget = tween.hasTarget(gameObject);\n</code></pre>"},{"location":"tween/#tween-value","title":"Tween value","text":"<ul> <li>Create tween task     <pre><code>var tween = scene.tweens.addCounter({\nfrom: 0,\nto: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\nonUpdate(tween, targets, key, current, previous, param) {\n// var value = current;\n// var value = tween.getValue();\n}\n});\n</code></pre><ul> <li>More config parameters...</li> </ul> </li> <li>Get value     <pre><code>var value = tween.getValue();\n</code></pre></li> </ul>"},{"location":"tween/#chain","title":"Chain","text":""},{"location":"tween/#create-chain","title":"Create chain","text":"<pre><code>var chain = scene.tweens.chain({\ntargets: null,\ntweens: [\n{\n// targets: gameObject,\nalpha: 1,            ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n},        // ...\n],\n\ndelay: 0,\ncompleteDelay: 0,\nloop: 0,  // repeat: 0,\nrepeatDelay: 0,\npaused: false,\npersist: true,\n// callbackScope: this,\n})\n</code></pre> <ul> <li><code>targets</code>, or <code>tweenConfig.targets</code></li> <li><code>tweens</code> : Array of tween config</li> </ul>"},{"location":"tween/#pause-resume-chain","title":"Pause / Resume chain","text":"<pre><code>chain.pause();\n</code></pre> <pre><code>chain.resume();\n</code></pre>"},{"location":"tween/#restart-chain","title":"Restart chain","text":"<pre><code>chain.restart();\n</code></pre>"},{"location":"tween/#add-tween-task","title":"Add tween task","text":"<pre><code>chain.add({\ntargets: gameObject,\nalpha: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n})\n</code></pre> <p>or</p> <pre><code>chain.add([tweenConfig0, tweenConfig1, ...]);\n</code></pre>"},{"location":"tween/#remove-tween-task","title":"Remove tween task","text":"<pre><code>chain.remove(tweenTask);\n</code></pre>"},{"location":"tween/#has-target_1","title":"Has target","text":"<pre><code>var hasTarget = chain.hasTarget(gameObject);\n</code></pre>"},{"location":"tween/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nStart((Start)) --&gt; CallbackOnStart\nCallbackOnStart&gt;\"Callback: onStart\"] --&gt; ActiveDelay((\"delay\"))\nActiveDelay --&gt; DurationForward\n\nDurationForward((\"Tween forward&lt;br&gt;Callback: onUpdate&lt;br&gt;(duration)\")) --&gt; Hold[\"hold\"]\nHold((hold)) --&gt; IsYoyo{Is yoyo}\nIsYoyo --&gt; |Yes| CallbackOnYoyo&gt;\"Callback: onYoyo\"]\nCallbackOnYoyo --&gt; DurationBackward((\"Tween backword&lt;br&gt;Callback: onUpdate&lt;br&gt;(duration)\"))\nDurationBackward --&gt; IsRepeat{\"Repeat count &gt; 0\"}\nIsYoyo --&gt; |No| IsRepeat\nIsRepeat --&gt; |Yes| CallbackOnRepeat&gt;\"Callback: onRepeat\"]\nCallbackOnRepeat --&gt; RepeatDelay((\"repeatDelay\"))\nRepeatDelay --&gt; DurationForward\n\nIsRepeat --&gt; |No| IsLoop{\"Loop count &gt; 0\"}\n\nIsLoop --&gt; |Yes| CallbackOnLoop\nCallbackOnLoop&gt;\"Callback: onLoop\"] --&gt; LoopDelay((\"loopDelay\"))\nLoopDelay --&gt; DurationForward\n\nIsLoop --&gt; |No| CompleteDelay\nCompleteDelay((\"completeDelay\")) --&gt; CallbackOnComplete&gt;\"Callback: onComplete\"]\nCallbackOnComplete --&gt; End((End))</code></pre>"},{"location":"tween/#tween-data","title":"Tween data","text":"<ul> <li><code>tween.data</code> : An array of TweenData objects, each containing a unique property and target being tweened.<ul> <li><code>tween.data[i].key</code> : The property of the target to tween.</li> <li><code>tween.data[i].start</code>, <code>tween.data[i].end</code>, <code>tween.data[i].current</code> : Ease Value Data.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/","title":"Badge label","text":""},{"location":"ui-badgelabel/#introduction","title":"Introduction","text":"<p>A container with badges above a main item.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-badgelabel/#live-demos","title":"Live demos","text":"<ul> <li>Badge</li> </ul>"},{"location":"ui-badgelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-badgelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-badgelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = scene.rexUI.add.badgeLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = scene.rexUI.add.badgeLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { BadgeLabel } from 'phaser3-rex-plugins/templates/ui/uiComponents.js';\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = new BadgeLabel(scene, config);\nscene.add.existing(badgeLabel);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#add-badgelabel-object","title":"Add badgeLabel object","text":"<pre><code>var badgeLabel = scene.rexUI.add.badgeLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\nmain: mainItemGameObject,\n\nleftTop: leftTopBadgeGameObject,\ncenterTop: centerTopBadgeGameObject,\nrightTop: rightTopBadgeGameObject,\nleftCenter: leftCenterBadgeGameObject,\ncenter: centerBadgeGameObject,\nrightCenter: rightCenterBadgeGameObject,\nleftBottom: leftBottomBadgeGameObject,\ncenterBottom: centerBottomBadgeGameObject,\nrightBottom: rightBottomBadgeGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly.    </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of badgeLabel.</li> <li><code>main</code> : Game object of main item, optional.</li> <li><code>leftTop</code> : Badge game object at leftTop side, optional.</li> <li><code>centerTop</code> : Badge game object at centerTop side, optional.</li> <li><code>rightTop</code> : Badge game object at rightTop side, optional.</li> <li><code>leftCenter</code> : Badge game object at leftCenter side, optional.</li> <li><code>center</code> : Badge game object at center side, optional.</li> <li><code>rightCenter</code> : Badge game object at rightCenter side, optional.</li> <li><code>leftBottom</code> : Badge game object at leftBottom side, optional.</li> <li><code>centerBottom</code> : Badge game object at centerBottom side, optional.</li> <li><code>rightBottom</code> : Badge game object at rightBottom side, optional.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.<ul> <li>Positive number : Indent badge game objects inside background.</li> <li>Negative number : Exceed badge game objects out of background.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBadgeLabel extends RexPlugins.UI.BadgeLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var badgeLabel = new MyBadgeLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>badgeLabel.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-badgelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = badgeLabel.getElement('background');\n</code></pre></li> <li>Main item game object     <pre><code>var item = badgeLabel.getElement('main');\n</code></pre></li> <li>LeftTop badge game object     <pre><code>var badge = badgeLabel.getElement('leftTop');\n</code></pre></li> <li>CenterTop badge game object     <pre><code>var badge = badgeLabel.getElement('centerTop');\n</code></pre></li> <li>RightTop badge game object     <pre><code>var badge = badgeLabel.getElement('rightTop');\n</code></pre></li> <li>LeftCenter badge game object     <pre><code>var badge = badgeLabel.getElement('leftCenter');\n</code></pre></li> <li>Center badge game object     <pre><code>var badge = badgeLabel.getElement('center');\n</code></pre></li> <li>RightCenter badge game object     <pre><code>var badge = badgeLabel.getElement('rightCenter');\n</code></pre></li> <li>LeftBottom badge game object     <pre><code>var badge = badgeLabel.getElement('leftBottom');\n</code></pre></li> <li>CenterBottom badge game object     <pre><code>var badge = badgeLabel.getElement('centerBottom');\n</code></pre></li> <li>RightBottom badge game object     <pre><code>var badge = badgeLabel.getElement('rightBottom');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = badgeLabel.getElement('#' + name);\n// var gameObject = badgeLabel.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = badgeLabel.getByName(name);\n// var gameObject = badgeLabel.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/#other-properties","title":"Other properties","text":"<p>See overlap sizer object, base sizer object, container-lite.</p>"},{"location":"ui-basesizer/","title":"Base sizer","text":""},{"location":"ui-basesizer/#introduction","title":"Introduction","text":"<p>Base class of all ui plugins.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"ui-basesizer/#usage","title":"Usage","text":""},{"location":"ui-basesizer/#background","title":"Background","text":"<pre><code>sizer.addBackground(gameObject);\n// sizer.addBackground(gameObject, key);\n// sizer.addBackground(gameObject, paddingConfig, key);\n</code></pre> <ul> <li><code>gameObject</code> : Background game object will be resized after <code>sizer.layout()</code> method.<ul> <li>Round rectangle game object     <pre><code>var gameObject = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);\n</code></pre></li> <li>Nine-slice game object     <pre><code>var gameObject = scene.add.nineslice(x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre>     or     <pre><code>var gameObject = scene.make.nineslice({\nkey: key, frame: frameName,\nleftWidth: 0, rightWidth: 0,\ntopHeight: 0, bottomHeight: 0\n});\n</code></pre></li> <li>Nine-patch game object     <pre><code>var gameObject = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);\n</code></pre></li> <li>Custom game object which has <code>resize(width, height)</code> method.<ul> <li>Display width, display height will be changed if this background game object does not have <code>resize</code> method.</li> </ul> </li> </ul> </li> <li><code>paddingConfig</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>key</code> : A string key. Get background game object back via     <pre><code>var child = sizer.getElement(key);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#remove-background","title":"Remove background","text":"<ul> <li>Remove background child     <pre><code>sizer.removeBackground(gameObject);\n</code></pre></li> <li>Remove background child and destroy it     <pre><code>sizer.removeBackground(gameObject, true);\n</code></pre></li> <li>Remove all background children     <pre><code>sizer.removeAllBackgrounds();\n</code></pre></li> <li>Remove all background children and destroy them     <pre><code>sizer.removeAllBackgrounds(true);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#depth-of-background","title":"Depth of background","text":"<p>Send this background child to bottom of sizer.</p> <pre><code>sizer.sendChildToBack(gameObject);\n</code></pre>"},{"location":"ui-basesizer/#minimum-size","title":"Minimum size","text":"<ul> <li>Get     <pre><code>var minWidth = sizer.minWidth;\nvar minHeight = sizer.minHeight;\n</code></pre></li> <li>Set     <pre><code>sizer.setMinSize(width, height);\n</code></pre>     or     <pre><code>sizer.setMinWidth(width);\nsizer.setMinHeight(height);\n</code></pre></li> </ul> <p>Resize top-most sizer</p> <pre><code>sizer.setMinSize(width, height).layout()\n</code></pre>"},{"location":"ui-basesizer/#dirty","title":"Dirty","text":"<p>Don't layout this sizer if <code>sizer.dirty</code> is <code>false</code>. i.e. Size of this sizer won't be changed, but won't layout children neither.</p> <p>Default value is <code>true</code>.</p> <ul> <li>Get     <pre><code>var dirty = sizer.dirty;\n</code></pre></li> <li>Set     <pre><code>sizer.setDirty();\n// sizer.setDirty(true);\n</code></pre>     or     <pre><code>sizer.dirty = true;\n</code></pre></li> <li>Clear     <pre><code>sizer.setDirty(false);\n</code></pre>     or     <pre><code>sizer.dirty = false;\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#bounds-of-sizer","title":"Bounds of sizer","text":"<ul> <li>Get     <pre><code>var leftBound = sizer.left;\nvar rightBound = sizer.right;\nvar topBound = sizer.top;\nvar bottomBound = sizer.bottom;\nvar centerX = sizer.centerX;\nvar centerY = sizer.centerY;\n</code></pre></li> <li>Set     <pre><code>sizer.left = leftBound;\nsizer.right = rightBound;\nsizer.top = topBound;\nsizer.bottom = bottomBound;\nsizer.centerX = centerXBound;\nsizer.centerY = centerYBound;\n</code></pre>     or     <pre><code>sizer.alignLeft(leftBound);\nsizer.alignRight(rightBound);\nsizer.alignTop(topBound);\nsizer.alignBottom(bottomBound);\nsizer.alignCenterX(centerXBound);\nsizer.alignCenterY(centerYBound);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#size-of-sizer","title":"Size of sizer","text":"<ul> <li>Size     <pre><code>var width = sizer.width;\nvar height = sizer.height;\n</code></pre></li> <li>Display size     <pre><code>var displayWidth = sizer.displayWidth;\nvar displayHeight = sizer.displayHeight;\n</code></pre></li> <li>Inner size     <pre><code>var innerWidth = sizer.innerWidth;\nvar innerHeight = sizer.innerHeight;\n</code></pre></li> <li>Minimum size     <pre><code>var minWidth = sizer.minWidth;\nvar minHeight = sizer.minHeight;\n</code></pre></li> <li>Minimum inner size     <pre><code>var minInnerWidth = sizer.minInnerWidth;\nvar minInnerHeight = sizer.minInnerHeight;\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#push-into-bounds","title":"Push into bounds","text":"<p>Align sizer to bound if overlapping it.</p> <pre><code>sizer.pushIntoBounds();\n</code></pre> <p>or</p> <pre><code>sizer.pushIntoBounds(bounds);\n</code></pre> <ul> <li><code>bounds</code> : Bounds in rectangle object.</li> </ul>"},{"location":"ui-basesizer/#scale","title":"Scale","text":"<ul> <li>Scale up from <code>0</code> to current scale of game object.<ul> <li>Pop-up width and height     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUp(duration);\n\n// sizer.popUp(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUpPromise(duration)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop-up width only     <pre><code>sizer\n//.setScaleX(scaleX)\n.popUp(duration, 'x');\n\n// sizer.popUp(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleX(scaleX)\n.popUpPromise(duration, 'x')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Pop-up height only     <pre><code>sizer\n//.setScaleY(scaleY)\n.popUp(duration, 'y');\n\n// sizer.popUp(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleY(scaleY)\n.popUpPromise(duration, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Pop-up via config     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUp({\nduration: undefined,\norientation: undefined,\nease: undefined,\n})\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUpPromise(config)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>orientation</code> : <code>undefined</code>, <code>x</code>, or <code>y</code></li> </ul> </li> </ul> </li> <li>Scale-down destroy<ul> <li>Scale-down width and height     <pre><code>sizer.scaleDownDestroy(duration);\n// sizer.scaleDownDestroy(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li>Scale-down width only     <pre><code>sizer.scaleDownDestroy(duration, 'x');\n// sizer.scaleDownDestroy(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration, 'x');\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down height only     <pre><code>sizer.scaleDownDestroy(duration, 'y');\n// sizer.scaleDownDestroy(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> </ul> </li> <li>Scale-down without destroy<ul> <li>Scale-down width and height     <pre><code>sizer.scaleDown(duration);\n// sizer.scaleDown(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, undefined, ease)\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down width only     <pre><code>sizer.scaleDowny(duration, 'x');\n// sizer.scaleDowny(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, 'x', ease)\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down height only     <pre><code>sizer.scaleDown(duration, 'y');\n// sizer.scaleDown(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, 'y', ease)\n.then(function() {\n// ....\n})\n</code></pre></li> </ul> </li> <li>Scale up/down, then scale back (yoyo)<ul> <li>Scale up/down, then scale back width and height     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyo(duration, peakValue);\n\n// sizer.scaleYoyo(duration, peakValue, repeat, undefined, ease);\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyoPromise(duration, peakValue, repeat)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>peakValue</code> : Scale to this peak value, then scale back</li> <li><code>repeat</code> : Yoyo repeat, default value is <code>0</code>.</li> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Scale up/down, then scale back width only     <pre><code>sizer\n//.setScaleX(scaleX)\n.scaleYoyo(duration, peakValue, 0, 'x');\n\n// sizer.popUp(duration, peakValue, repeat, 'x', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleX(scaleX)\n.scaleYoyoPromise(duration, peakValue, repeat, 'x')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale up/down, then scale back height only     <pre><code>sizer\n//.setScaleY(scaleY)\n.scaleYoyo(duration, peakValue, 0, 'y');\n\n// sizer.popUp(duration, peakValue, repeat, 'y', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleY(scaleY)\n.scaleYoyoPromise(duration, peakValue, repeat, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale up/down via config     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyo({\nduration: undefined,\npeakValue: 1.2,\nrepeat: 0,\norientation: undefined,\nease: undefined,\n})\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyoPromise(config)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>orientation</code> : <code>undefined</code>, <code>x</code>, or <code>y</code></li> </ul> </li> </ul> </li> <li>Events<ul> <li>Pop-up complete     <pre><code>sizer.on('popup.complete', function(sizer) { });\n</code></pre></li> <li>Scale-down, scale-down destroy complete     <pre><code>sizer.on('scaledown.complete', function(sizer) { });\n</code></pre></li> <li>Scale up/down, then scale back (yoyo)     <pre><code>sizer.on('scaleyoyo.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#fade","title":"Fade","text":"<ul> <li>Fade-in     <pre><code>sizer.fadeIn(duration);\n</code></pre>     or     <pre><code>sizer.fadeIn(duration, endAlpha);\n</code></pre>     or     <pre><code>sizer.fadeIn(duration, {start:0, end:1});\n</code></pre>     or     <pre><code>sizer.fadeInPromise(duration, endAlpha)\n.then(function(){\n// ...\n})\n</code></pre>     or     <pre><code>sizer.fadeInPromise(duration, {start:0, end:1})\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Fade-out destroy     <pre><code>sizer.fadeOutDestroy(duration);\n</code></pre>     or     <pre><code>sizer.fadeOutDestroyPromise(duration)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Fade-out without destroy     <pre><code>sizer.fadeOut(duration);\n</code></pre>     or     <pre><code>sizer.fadeOutPromise(duration)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Events<ul> <li>Fade-in complete     <pre><code>sizer.on('fadein.complete', function(sizer) { });\n</code></pre></li> <li>Fade-out, fade-out destroy complete     <pre><code>sizer.on('fadeout.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#ease-move","title":"Ease move","text":"<ul> <li>Move from     <pre><code>sizer.moveFrom(duration, x, y);\n// sizer.moveFrom(duration, x, y, ease);\n// sizer.moveFrom({x, y, duration, ease});\n// sizer.moveFrom({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveFromPromise(duration, x, y, ease)\n// .moveFromPromise({x, y, duration, ease})\n// .moveFromPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre><ul> <li><code>x</code>, <code>y</code> : Start position.<ul> <li>Number : Start position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Current position x/y.</li> </ul> </li> <li><code>speed</code> : Get <code>duration</code> according to <code>speed</code> and distance between current sizer position to <code>{x, y}</code></li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> </ul> </li> <li>Move-from destroy     <pre><code>sizer.moveFromDestroy(duration, x, y);\n// sizer.moveFrom(duration, x, y, ease);\n// sizer.moveFrom({x, y, duration, ease});\n// sizer.moveFrom({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveFromDestroyPromise(duration, x, y, ease)\n// .moveFromDestroyPromise({x, y, duration, ease})\n// .moveFromDestroyPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre></li> <li>Move to     <pre><code>sizer.moveTo(duration, x, y);\n// sizer.moveTo(duration, x, y, ease);\n// sizer.moveTo({x, y, duration, ease});\n// sizer.moveTo({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveToPromise(duration, x, y, ease)\n// .moveToPromise({x, y, duration, ease})\n// .moveToPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre><ul> <li><code>x</code>, <code>y</code> : End position.<ul> <li>Number : End position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Current position x/y.</li> </ul> </li> <li><code>speed</code> : Get <code>duration</code> according to <code>speed</code> and distance between current sizer position to <code>{x, y}</code></li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> </ul> </li> <li>Move-to destroy     <pre><code>sizer.moveToDestroy(duration, x, y);\n// sizer.moveTo(duration, x, y, ease);\n// sizer.moveTo({x, y, duration, ease});\n// sizer.moveTo({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveToDestroyPromise(duration, x, y, ease)\n// .moveToDestroyPromise({x, y, duration, ease})\n// .moveToDestroyPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre></li> <li>Move-stop     <pre><code>sizer.moveStop();\n// sizer.moveStop(true);  // Set to end position\n</code></pre></li> <li>Events<ul> <li>Move-from complete     <pre><code>sizer.on('movefrom.complete', function(sizer) { });\n</code></pre></li> <li>Move-to complete     <pre><code>sizer.on('moveto.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#shake","title":"Shake","text":"<ul> <li>Start     <pre><code>sizer.shake(duration);\n// sizer.shake(duration, magnitude);\n</code></pre>     or     <pre><code>sizer.shakePromise(duration, magnitude)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Events<ul> <li>Shake complete     <pre><code>sizer.on('shake.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#ease-data","title":"Ease data","text":"<ul> <li>Start     <pre><code>sizer.easeDataTo(key, value, duration);\n// sizer.easeDataTo(key, value, duration, ease);\n// sizer.easeDataTo({ key, value, duration, ease });\n// sizer.easeDataTo({ key, value, speed, ease });\n</code></pre>     or     <pre><code>sizer.easeDataToPromise(key, value, duration, ease)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Stop     <pre><code>sizer.stopEaseData(key);           // Set to end value\n// sizer.stopEaseData(key, false); // Stop at current value\n</code></pre>     or     <pre><code>sizer.stopAllEaseData();           // Set to end value\n// sizer.stopAllEaseData(false);   // Stop at current value\n</code></pre></li> <li>Events<ul> <li>Easing complete     <pre><code>sizer.on('easedata.' + key + '.complete', function(sizer) { });\n</code></pre> <pre><code>sizer.on('easedata.complete', function(key, sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#modal","title":"Modal","text":"<ol> <li>Assign <code>sizer.onCreateModalBehavior</code> callback, or register events to close modal sizer directly.<ul> <li>onCreateModalBehavior :      <pre><code>sizer.onCreateModalBehavior = function(sizer, config) {\n// ...\nsizer.modalClose(data);\n}\n</code></pre><ul> <li><code>config</code> : Passed from <code>sizer.modal(config)</code></li> </ul> </li> <li>Close modal sizer     <pre><code>sizer.modalClose(data);\n</code></pre></li> </ul> </li> <li>Pop this modal sizer     <pre><code>sizer.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true\n});\n// sizer.modal(config, onClose);\n</code></pre>     or     <pre><code>sizer\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre><ul> <li><code>config</code> : See Modal behavior</li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {      }\n</code></pre><ul> <li><code>data</code> : Object passed from <code>sizer.modalClose(data)</code>.</li> </ul> </li> </ul> </li> </ol>"},{"location":"ui-basesizer/#set-properties-of-child","title":"Set properties of child","text":"<pre><code>sizer.setChildPosition(child, x, y);\nsizer.setChildRotation(child, rotation);\nsizer.setChildScale(child, scaleX, scaleY);\nsizer.setChildDisplaySize(child, width, height);\nsizer.setChildVisible(child, visible);\nsizer.setChildAlpha(child, alpha);\n</code></pre>"},{"location":"ui-basesizer/#depth","title":"Depth","text":"<ul> <li>Get depth of sizer     <pre><code>var depth = sizer.depth;\n</code></pre></li> <li>Set depth of sizer     <pre><code>sizer.setDepth(value, true);\n// sizer.depth = depth;\n</code></pre></li> <li>Set depth of sizer and all children     <pre><code>sizer.setDepth(value);\n</code></pre></li> <li>Bring this sizer and its children to top     <pre><code>sizer.bringToTop();\n</code></pre></li> <li>Swap depth with another sizer     <pre><code>sizerA.swapDepth(sizerB);\n</code></pre></li> <li>Increase of sizer and all children     <pre><code>sizer.incDepth(value);\n</code></pre></li> <li>Move game object below this sizer and all children     <pre><code>sizer.moveDepthBelow(gameObject);\n</code></pre></li> <li>Move game object above this sizer and all children     <pre><code>sizer.moveDepthAbove(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Set scroll factor to children    <pre><code>sizer.setScrollFactor(x, y);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#change-origin","title":"Change origin","text":"<pre><code>sizer.changeOrigin(originX, originY);\n</code></pre> <p>This method also will reset all local state of children.</p>"},{"location":"ui-basesizer/#destroy","title":"Destroy","text":"<pre><code>sizer.destroy();\n</code></pre>"},{"location":"ui-basesizer/#drag-top-most-sizer","title":"Drag top-most sizer","text":"<ul> <li>Draggable child<ul> <li>Enable     <pre><code>sizer.setDraggable(child);\n// sizer.setDraggable(child, true)\n</code></pre>     or     <pre><code>sizer.setDraggable(elementName);\n// sizer.setDraggable(elementName, true)\n</code></pre></li> <li>Disable     <pre><code>sizer.setDraggable(child, false);\n</code></pre>     or     <pre><code>sizer.setDraggable(elementName, false);\n</code></pre></li> </ul> </li> <li>Draggable sizer object<ul> <li>Enable     <pre><code>sizer.setDraggable();\n// sizer.setDraggable(true);\n</code></pre></li> <li>Disalbe     <pre><code>sizer.setDraggable(false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#click","title":"Click","text":"<ul> <li>Add click event     <pre><code>sizer.onClick(callback, scope);\n// sizer.onClick(callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See Button</li> <li><code>callback</code> :     <pre><code>function(button, gameObject, pointer, event) {\n\n}\n</code></pre><ul> <li><code>button</code> : Button behavior.</li> </ul> </li> </ul> </li> <li>Turn off click event     <pre><code>sizer.offClick(callback, scope);\n</code></pre></li> <li>Enable click event     <pre><code>sizer.enableClick();\n</code></pre></li> <li>Disable click event     <pre><code>sizer.disableClick();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var click = scene.rexUI.add.click(sizer, config);\nclick.on('click', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#click-child","title":"Click child","text":"<ul> <li>Add click event     <pre><code>sizer.onClick(child, callback, scope);\n// sizer.onClick(child, callback, scope, config);\n</code></pre></li> <li>Turn off click event     <pre><code>sizer.offClick(child, callback, scope);\n</code></pre></li> <li>Enable click event     <pre><code>sizer.enableClick(child);\n</code></pre></li> <li>Disable click event     <pre><code>sizer.disableClick(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#click-outside","title":"Click outside","text":"<ul> <li>Add click-outside event     <pre><code>sizer.onClickOutside(callback, scope);\n// sizer.onClickOutside(callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See ClickOutside</li> <li><code>callback</code> :     <pre><code>function(clickOutside, gameObject, pointer) {\n\n}\n</code></pre><ul> <li><code>clickOutside</code> : ClickOutside behavior.</li> </ul> </li> </ul> </li> <li>Turn off click-outside event     <pre><code>sizer.offClickOutside(callback, scope);\n</code></pre></li> <li>Enable click-outside event     <pre><code>sizer.enableClickOutside();\n</code></pre></li> <li>Disable click-outside event     <pre><code>sizer.disableClickOutside();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var clickOutside = scene.rexUI.add.clickOutside(sizer, config);\nclickOutside.on('clickoutside', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#click-outside-of-child","title":"Click outside of child","text":"<ul> <li>Add click-outside event     <pre><code>sizer.onClickOutside(child, callback, scope);\n// sizer.onClickOutside(child, callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See ClickOutside</li> <li><code>callback</code> :     <pre><code>function(clickOutside, gameObject, pointer) {\n\n}\n</code></pre><ul> <li><code>clickOutside</code> : ClickOutside behavior.</li> </ul> </li> </ul> </li> <li>Turn off click-outside event     <pre><code>sizer.offClickOutside(child, callback, scope);\n</code></pre></li> <li>Enable click-outside event     <pre><code>sizer.enableClickOutside(child);\n</code></pre></li> <li>Disable click-outside event     <pre><code>sizer.disableClickOutside(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#is-pointer-in-bounds","title":"Is pointer in bounds","text":"<ul> <li>Is current sizer clicking     <pre><code>var isClicked = sizer.isPointerInBounds();\n</code></pre></li> <li>Is a child clicking     <pre><code>var isClicked = sizer.isPointerInBounds(child);\n</code></pre>     or     <pre><code>var isClicked = sizer.isPointerInBounds(elementName);\n</code></pre><ul> <li><code>child</code> : Game object of child</li> <li><code>elementName</code> : Element name for retrieveing child game object.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#in-touching","title":"In touching","text":"<p>Invoke callbeack if pointer is inside hitarea every tick.</p> <ul> <li>Add in-touching event     <pre><code>sizer.onTouching(callback, scope);\n// sizer.onTouching(callback, scope, config);\n</code></pre></li> <li>Turn off in-touching event     <pre><code>sizer.offTouching(callback, scope);\n</code></pre></li> <li>Add touching-end event     <pre><code>sizer.onTouchingEnd(callback, scope);\n// sizer.onTouchingEnd(callback, scope, config);\n</code></pre></li> <li>Turn off touching-end event     <pre><code>sizer.offTouchingEnd(callback, scope);\n</code></pre></li> <li>Enable in-touching event     <pre><code>sizer.enableTouching();\n</code></pre></li> <li>Disable in-touching event     <pre><code>sizer.disableTouching();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var inTouching = scene.rexUI.add.inTouching(sizer, config);\ninTouching.on('intouch', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#in-touching-child","title":"In touching child","text":"<ul> <li>Add in-touching event     <pre><code>sizer.onTouching(child, callback, scope);\n// sizer.onClick(child, callback, scope, config);\n</code></pre></li> <li>Turn off in-touching event     <pre><code>sizer.offTouching(child, callback, scope);\n</code></pre></li> <li>Enable in-touching event     <pre><code>sizer.enableTouching(child);\n</code></pre></li> <li>Disable in-touching event     <pre><code>sizer.disableTouching(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#set-children-interactive","title":"Set children interactive","text":"<p>Applies click, tap, press, swipe behaviors on this sizer, to detect input events of children.</p> <pre><code>sizer.setChildrenInteractive({\n// down: undefined,\n// up: undefined,\n// over: undefined,\n\n// click: {mode: 'release', clickInterval: 100},\n\n// press: {time: 251, threshold: 9},\n\n// tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, \n//       taps: undefined, minTaps: undefined, maxTaps: undefined,},\n\n// swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},\n\n// inputEventPrefix: 'child.',\n})\n</code></pre> <ul> <li><code>down</code> :<ul> <li><code>false</code> : Don't fire (pointer-) down events</li> </ul> </li> <li><code>up</code> :<ul> <li><code>false</code> : Don't fire (pointer-) up events</li> </ul> </li> <li><code>over</code> :<ul> <li><code>false</code> : Don't fire (pointer-) over/out events</li> </ul> </li> <li><code>click</code> : Configuration of Button behavior.<ul> <li><code>false</code> : Don't install Button behavior.</li> </ul> </li> <li><code>press</code> : Configuration of Press behavior.<ul> <li><code>false</code> : Don't install Press behavior.</li> </ul> </li> <li><code>tap</code> : Configuration of Tap behavior.<ul> <li><code>false</code> : Don't install Tap behavior.</li> </ul> </li> <li><code>swipe</code> : Configuration of Swipe behavior.<ul> <li><code>false</code> : Don't install Swipe behavior.</li> </ul> </li> <li><code>inputEventPrefix</code> : Prefix string of each event, default is <code>'child.'</code>.</li> </ul> <p>Note</p> <p>Input behaviors are installed to this Sizer game object, not each child. And it assumes that all children are not overlapped. Use Button if user needs to enable/disable input behaviors of each child individually.</p>"},{"location":"ui-basesizer/#events","title":"Events","text":"<ul> <li>Pointer-down     <pre><code>sizer.on('child.down', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-up     <pre><code>sizer.on('child.up', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-over     <pre><code>sizer.on('child.over', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out     <pre><code>sizer.on('child.out', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Click     <pre><code>sizer.on('child.click', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>child</code> : Triggered child game object.</li> <li><code>pointer</code> : Pointer object.    </li> </ul> </li> <li>Press     <pre><code>sizer.on('child.pressstart', function(child, pointer) { // ...\n}, scope);\n</code></pre> <pre><code>sizer.on('child.pressend', function(child, pointer) { // ...\n}, scope);\n</code></pre></li> <li>Tap     <pre><code>sizer.on(tapEventName, function(child, pointer) { // ...\n}, scope);\n</code></pre><ul> <li><code>tapEventName</code> :  <code>'child.1tap'</code>, <code>'child.2tap'</code>, <code>'child.3tap'</code>, etc ...</li> </ul> </li> <li>Swipe     <pre><code>sizer.on(swipeEventName, function(child, pointer) { // ...\n}, scope);\n</code></pre><ul> <li><code>swipeEventName</code> :  <code>'child.swipeleft'</code>, <code>'child.swiperight'</code>, <code>'child.swipeup'</code>, <code>'child.swipedown'</code>.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#pin-game-object","title":"Pin game object","text":"<pre><code>sizer.pin(gameObject);\n</code></pre> <p>Note</p> <p>Method <code>sizer.add</code> is override in each sizer class usually.</p>"},{"location":"ui-basesizer/#un-pin-game-object","title":"Un-pin game object","text":"<p><pre><code>sizer.unpin(child);\n// sizer.unpin(child, destroyChild);\n</code></pre> - <code>destroyChild</code> : Set true to destroy child. Default is <code>false</code>.</p> <p>Note</p> <p>Method <code>sizer.remove</code> is override in each sizer class usually.</p>"},{"location":"ui-basesizer/#draw-bounds","title":"Draw bounds","text":"<ul> <li>Draw bounds of shown game object on a graphics game object     <pre><code>sizer.drawBounds(graphics);\n// sizer.drawBounds(graphics, color);\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul> </li> <li>Draw bounds of shown game object, and display name of child     <pre><code>sizer.drawBounds(graphics, {\n// color: 0xffffff,\n// lineWidth: 2,\n\n// name: false, \n// name: true, \n// name: {\n//     createTextCallback: function(scene) {\n//         return scene.add.text(0, 0, '');\n//     },\n//     createTextCallbackScope: undefined,\n//     align: 'left-top'\n// }\n});\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code>.</li> <li><code>lineWidth</code> : Default value is <code>1</code>.</li> <li><code>name</code> :<ul> <li><code>false</code> : Don't display child name, default value</li> <li><code>true</code> : Display child name with default text game object, aligned at left-top of child bounds.</li> <li>Plain object : <ul> <li><code>name.createTextCallback</code> : Callback of creating customized text game object for child name     <pre><code>function(scene, child, childBoundsRect) {\n// return scene.add.text(0, 0, ''); \n}\n</code></pre></li> <li><code>name.createTextCallbackScope</code> : Callback scope of <code>name.createTextCallback</code>, default is <code>undefined</code></li> <li><code>name.align</code> : <ul> <li><code>'left-top'</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> : Align text game object at left-top. Default value</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align text game object at center</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align text game object at left-center</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align text game object at right-center</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game text object at top-center</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game text object at bottom-center</li> <li><code>'left-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code> : Align text game object at left-bottom</li> <li><code>'right-top'</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align text game object at right-top</li> <li><code>'right-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code> : Align text game object at right-bottom</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game objects of these children's name will be attached on graphics game object, <code>graphics.clear()</code>, or <code>graphics.destroy()</code> will also destroy these text game objects</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#hide","title":"Hide","text":"<ul> <li>Set invisible, won't layout it     <pre><code>sizer.hide();\n</code></pre>     or     <pre><code>sizer.hide(gameObject);\n</code></pre></li> <li>Set visible, will layout it     <pre><code>sizer.show();\n</code></pre>     or     <pre><code>sizer.show(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#padding","title":"Padding","text":"<ul> <li>Set inner padding, will indent children position.<ul> <li>Set inner padding via config     <pre><code>sizer.setInnerPadding({\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n});\n</code></pre></li> <li>Set inner padding via single number     <pre><code>sizer.setInnerPadding(value);\n</code></pre></li> <li>Set specific inner padding     <pre><code>sizer.setInnerPadding(key, value);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get inner padding<ul> <li>Get inner padding values     <pre><code>var innerPadding = sizer.getInnerPadding();\n</code></pre></li> <li>Get specific inner padding     <pre><code>var value = sizer.getInnerPadding(key);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Set outer padding, which is equal to <code>padding</code> parameter when adding this sizer to parent sizer.<ul> <li>Set outer padding via config     <pre><code>sizer.setOuterPadding({\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n});\n</code></pre></li> <li>Set outer padding via single number     <pre><code>sizer.setOuterPadding(value);\n</code></pre></li> <li>Set specific outer padding     <pre><code>sizer.setOuterPadding(key, value);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get outer padding<ul> <li>Get outer padding values     <pre><code>var outerPadding = sizer.getOuterPadding();\n</code></pre></li> <li>Get specific outer padding     <pre><code>var value = sizer.getOuterPadding(key);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Set outer padding of child, which is equal to <code>padding</code> parameter when adding this sizer to parent sizer.<ul> <li>Set outer padding via config     <pre><code>sizer.setChildOuterPadding(\nchild,\n{\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n}\n);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Set outer padding via single number     <pre><code>sizer.setChildOuterPadding(child, value);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Set specific outer padding     <pre><code>sizer.setChildOuterPadding(child, key, value);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get outer padding of child<ul> <li>Get outer padding values     <pre><code>var outerPadding = sizer.getChildOuterPadding(child);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Get specific outer padding     <pre><code>var value = sizer.getChildOuterPadding(child, key);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-basesizer/#anchor","title":"Anchor","text":"<pre><code>sizer.setAnchor({\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0'\n})\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: 0~100<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code></li> </ul> </li> </ul> <p>For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center :</p> <pre><code>{\nleft: 'left+10',\ncenterY: 'center'\n}\n</code></pre>"},{"location":"ui-basesizer/#get-child","title":"Get child","text":"<ul> <li>Get child by specific key<ol> <li>Add child     <pre><code>sizer.addChildrenMap(key, child);\n</code></pre><ul> <li>Remove children map :     <pre><code>sizer.removeChildrenMap(key);\n</code></pre>     or     <pre><code>sizer.removeChildrenMap(child);\n</code></pre></li> </ul> </li> <li>Get child     <pre><code>var child = sizer.getElement(key);\n</code></pre></li> </ol> </li> <li>Get child by name     <pre><code>var child = sizer.getByName(name);\n// var child = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.    </li> </ul> </li> </ul>"},{"location":"ui-basesizer/#get-parent","title":"Get parent","text":"<ul> <li>Get parent sizer     <pre><code>var parentSizer = sizer.getParentSizer();\n</code></pre></li> <li>Get ancestor sizer matched given name     <pre><code>var parentSizer = sizer.getParentSizer(name);\n</code></pre></li> <li>Get topmost sizer     <pre><code>var topmostSizer = sizer.getTopmostSizer();\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#has-parentchild","title":"Has parent/child","text":"<ul> <li>Has parent     <pre><code>var hasParent = sizer.hasParentSizer(parentGameObject);\n</code></pre></li> <li>Has child     <pre><code>var hasChild = sizer.hasParentSizer(childGameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#is-in-touching","title":"Is in touching","text":"<ul> <li>Is this sizer in touching?     <pre><code>var isTouching = sizer.isInTouching();\n</code></pre></li> <li>Is child of this sizer in touching?     <pre><code>var isTouching = sizer.isInTouching(child);\n</code></pre>     or     <pre><code>var isTouching = sizer.isInTouching(childKey);\n</code></pre><ul> <li><code>child</code> : Child game object.</li> <li><code>childKey</code> : Get child game object back via <code>sizer.getElement(childKey)</code>. See also sizer.addChildrenMap(key, child)</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#change-properties-of-child","title":"Change properties of child","text":"<ul> <li>Set property of child from sizer</li> <li>Set property of child, then reset local state of child</li> <li>Tween local state of child</li> </ul>"},{"location":"ui-basesizer/#add-to-container","title":"Add to container","text":"<ul> <li>Add to built-in container <pre><code>p3Container.add(sizer);\n</code></pre>     or     <pre><code>sizer.addToContainer(p3Container);\n</code></pre><ul> <li><code>container</code> : Container game object.</li> </ul> </li> <li>Add to Layer <pre><code>sizer.addToLayer(layer);\n</code></pre><ul> <li><code>layer</code> : Layer game object.</li> </ul> </li> </ul> <p>Note</p> <p><code>container.add(sizer)</code>, or <code>layer.add(sizer)</code> won't add children of sizer.</p>"},{"location":"ui-basesizer/#layer","title":"Layer","text":"<p>A sizer can have a layer.  Current children and new children will draw on this layer, instead of display list of scene.</p> <ul> <li>Enable layer. Do nothing if layer is existed.     <pre><code>sizer.enableLayer();\n</code></pre></li> <li>Get layer game object. Will enable layer if layer is not existed.     <pre><code>var layer = sizer.getLayer();\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#shader-effects","title":"Shader effects","text":"<p>Apply post-fx pipeline on layer of sizer.</p>"},{"location":"ui-basesizer/#snapshot","title":"Snapshot","text":"<ul> <li>Draw all visible children on a render-texture.     <pre><code>var renderTexture = container.snapshot({\nrenderTexture: undefined,\npadding: 0\n});\n</code></pre><ul> <li><code>renderTexture</code> : Draw on this render-texture<ul> <li><code>undefined</code> : Create a new render-texture</li> </ul> </li> <li><code>padding</code> : <ul> <li><code>0</code> : No extra padding space. Default value.</li> <li>A number : Add extra padding space around this render-texture.</li> </ul> </li> </ul> </li> <li>Draw all visible children on a texture     <pre><code>container.snapshot({\npadding: 0,\nsaveTexture: textureKey\n});\n</code></pre><ul> <li><code>saveTexture</code> : Save render result to texture manager.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#events_1","title":"Events","text":""},{"location":"ui-basesizer/#dragging","title":"Dragging","text":"<ul> <li>Fire <code>'sizer.drag'</code> on top-most sizer when dragging <pre><code>topmostSizer.on('sizer.drag', function(pointer, dragX, dragY) {\n\n})\n</code></pre></li> <li>Fire <code>'sizer.dragstart'</code> on top-most sizer when dragging start.     <pre><code>topmostSizer.on('sizer.dragstart', function(pointer, dragX, dragY) {\n\n})\n</code></pre></li> <li>Fire <code>'sizer.dragend'</code> on top-most sizer when dragging dragend.     <pre><code>topmostSizer.on('sizer.dragend', function(pointer, dragX, dragY, dropped) {\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#layout-children","title":"Layout children","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.postlayout'</code> event to all children after layout.     <pre><code>child.on('sizer.postlayout', function(child, sizer){\nvar prevState = sizer.getChildPrevState(child);\n})\n</code></pre><ul> <li><code>prevState</code> : Properties before layout.<ul> <li><code>prevState.x</code>, <code>prevState.y</code> : Child position before layout.</li> <li><code>prevState.width</code>, <code>prevState.height</code>,    <code>prevState.displayWidth</code>, <code>prevState.displayHeight</code>,    <code>prevState.scaleX</code>, <code>prevState.scaleY</code> : Child size before layout.</li> </ul> </li> </ul> </li> <li>Fire <code>'postlayout'</code> event.     <pre><code>sizer.on('postlayout', function(children, sizer) {\nfor(var i=0, cnt=children.length; i&lt;cnt; i++) {\nvar prevState = sizer.getChildPrevState(children[i]);\n// ...\n}\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#remove-child","title":"Remove child","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.remove'</code> event to removed without destroyed child.     <pre><code>child.on('sizer.remove', function(child, sizer){\n\n})\n</code></pre></li> <li>Fire <code>'remove'</code> event.     <pre><code>sizer.on('remove', function(child, sizer){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#add-child","title":"Add child","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.add'</code> event to added child.     <pre><code>child.on('sizer.add', function(child, sizer){\n\n})\n</code></pre></li> <li>Fire <code>'add'</code> event.     <pre><code>sizer.on('add', function(child, sizer){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#broadcast-event","title":"Broadcast event","text":"<p>Fire event to sizer itself and all children</p> <pre><code>sizer.broadcastEvent(eventName, parameter0, parameter1, ...);\n</code></pre> <p>Receive event</p> <pre><code>child.on(eventName, function(parameter0, parameter1, ...) {\n\n}, scope);\n</code></pre>"},{"location":"ui-basesizer/#other-properties","title":"Other properties","text":"<p>This game object inherits from ContainerLite.</p>"},{"location":"ui-buttons/","title":"Buttons","text":""},{"location":"ui-buttons/#introduction","title":"Introduction","text":"<p>A container with a group of buttons.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-buttons/#live-demos","title":"Live demos","text":"<ul> <li>Buttons with header and footer</li> <li>Expand</li> <li>Space</li> <li>Checkboxes/radio</li> <li>Popup each button</li> </ul>"},{"location":"ui-buttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-buttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-buttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.buttons(config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.buttons(config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Buttons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = new Buttons(scene, config);\nscene.add.existing(buttons);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#add-buttons-object","title":"Add Buttons object","text":"<pre><code>var buttons = scene.rexUI.add.buttons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n// buttonsType: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nexpand: false,\nalign: undefined,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: 0,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of button game objects.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange button game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange button game objects from top to bottom.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : Array of button game objects, or Space (<code>scene.rexUI.add.space()</code>).</li> <li><code>expand</code> : Set <code>true</code> to expand width, or height of buton game objects.</li> <li><code>align</code> : Note: Add Space (<code>scene.rexUI.add.space()</code>) into buttons parameter to have more flexible alignment style. Alignment of these button game objects. Only valid when <code>expand</code> is <code>false</code>.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.    </li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>space</code> :<ul> <li>A number: Space between 2 button game objects.</li> <li>An object: Padding of button game objects.<ul> <li><code>space.top</code>, <code>space.bottom</code>, <code>space.left</code>, <code>space.right</code> : Padding around bottons.</li> <li><code>space.item</code> : Space between 2 button game objects.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game object, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>setValueCallback</code>, or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-buttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyButtons extends RexPlugins.UI.Buttons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-buttons/#other-properties","title":"Other properties","text":"<p>See sizer object</p>"},{"location":"ui-buttons/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>buttons.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>groupName</code> : Optional group name.</li> <li><code>button</code> : Triggered button game object.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>buttons.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out button     <pre><code>buttons.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-down button     <pre><code>buttons.on('button.down', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.down', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-up button     <pre><code>buttons.on('button.up', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.up', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable button's input     <pre><code>buttons.on('button.enable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.enable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable button's input     <pre><code>buttons.on('button.disable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.disable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>buttons.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul>"},{"location":"ui-buttons/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable a button's input     <pre><code>buttons.setButtonEnable(index);\n// buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Enable all buttons' input     <pre><code>buttons.setButtonEnable();\n// buttons.setButtonEnable(true);\n</code></pre></li> <li>Disable     <pre><code>buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Disable all buttons' input     <pre><code>buttons.setButtonEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>buttons.toggleButtonEnable(index);\n</code></pre></li> <li>Toggle all buttons's input     <pre><code>buttons.toggleButtonEnable();\n</code></pre></li> <li>Get button's input enable     <pre><code>var enabled = bottons.getButtonEnable(index);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-buttons/#add-child","title":"Add child","text":"<ul> <li>Add button child     <pre><code>buttons.addButton(gameObject)\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add non-button child, see <code>sizer.add()</code> method.     <pre><code>buttons.add(gameObject,\n{\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nindex: undefined,\nminWidth: undefined,\nminHeight: undefined\n}\n)\n</code></pre></li> </ul>"},{"location":"ui-buttons/#remove-child","title":"Remove child","text":"<ul> <li>Remove button child     <pre><code>buttons.removeButton(gameObject, destroyChild);\n</code></pre><ul> <li><code>gameObject</code> : <ul> <li>Game object, or array of game objects : Button game object.</li> <li>A number, or array of numbers : Index of button game object.</li> <li>A string, or array of strings : Name of button game object.</li> </ul> </li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttton children     <pre><code>buttons.clearButtons(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove a button or non-button child, see <code>sizer.remove()</code> method.     <pre><code>buttons.remove(gameObject, destroyChild);\n</code></pre></li> <li>Remove all button or non-button children, see <code>sizer.remove()</code> method.     <pre><code>buttons.removeAll(destroyChild);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>buttons.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show button     <pre><code>buttons.showButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Hide button.     <pre><code>buttons.hideButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-buttons/#for-each-button","title":"For each button","text":"<pre><code>buttons.forEachButtton(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>function(button, index, buttonArray) {\n// ...\n}\n</code></pre></li> </ul>"},{"location":"ui-buttons/#checkboxesradio","title":"Checkboxes/radio","text":"<ul> <li>Configure buttons to checkboxes/radio     <pre><code>var buttons = scene.rexUI.add.buttons({\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nbuttonsType: 'checkboxes', // or 'radio'\nsetValueCallback: function(button, value, previousValue) {\n// ...\n}, // or setButtonStateCallback\n});\n</code></pre><ul> <li><code>buttons</code> : Array of button game objects.<ul> <li>Property <code>name</code> of each button game object will be used as a key in <code>buttons.data</code></li> </ul> </li> <li><code>buttonsType</code> : Set type to <code>'checkboxes'</code>, or <code>'radio'</code>.</li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.     <pre><code>function(button, value) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> <li>Also trigger <code>'button.statechange'</code> event.</li> </ul> </li> <li>State of a button : Stored in <code>buttons.data</code></li> <li>Get states of all buttons :     <pre><code>var states = buttons.getAllButtonsState();  // { key: boolean }\n</code></pre></li> <li>Clear states of all button :     <pre><code>buttons.clearAllButtonsState();\n</code></pre><ul> <li>Will trigger setValueCallback and <code>'button.statechange'</code> event.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-buttons/#checkboxes","title":"Checkboxes","text":"<ul> <li>Read state     <pre><code>var state = buttons.getButtonState(key);\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> <li><code>state</code> : <code>true</code>, or <code>false</code></li> </ul> </li> <li>Set state     <pre><code>buttons.setButtonState(key, state);\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> <li><code>state</code> : <code>true</code>, or <code>false</code></li> </ul> </li> </ul>"},{"location":"ui-buttons/#radio","title":"Radio","text":"<ul> <li>Read state     <pre><code>var value = buttons.getSelectedButtonName();\n</code></pre>     or     <pre><code>var value = buttons.value;\n</code></pre><ul> <li><code>value</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> </ul> </li> <li>Set state     <pre><code>buttons.setSelectedButtonName(key);\n</code></pre>     or     <pre><code>buttons.value = key;\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> </ul> </li> </ul>"},{"location":"ui-buttons/#events_1","title":"Events","text":"<ul> <li>On button state changed. For Checkboxes/radio     <pre><code>buttons.on('button.statechange', function(button, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.statechange', function(button, groupName, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre><ul> <li>Can be used to replace setValueCallback.</li> </ul> </li> </ul>"},{"location":"ui-chart/","title":"Chart","text":""},{"location":"ui-chart/#introduction","title":"Introduction","text":"<p>Draw chart on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-chart/#live-demos","title":"Live demos","text":"<ul> <li>Radar chart</li> </ul>"},{"location":"ui-chart/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-chart/#install-plugin","title":"Install plugin","text":""},{"location":"ui-chart/#install-chartjs","title":"Install chart.js","text":"<p>Chart.js is not included in rexUI, installs it before creating any chart.</p> <p><pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js');\n</code></pre> or <pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js');\n</code></pre></p>"},{"location":"ui-chart/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/Chart.min.js');\nscene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add chart object     <pre><code>var chart = scene.rexUI.add.chart(config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add chart object     <pre><code>var chart = scene.rexUI.add.chart(config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Chart } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add chart object     <pre><code>var chart = new Chart(scene, config);\nscene.add.existing(chart);\n</code></pre></li> </ul>"},{"location":"ui-chart/#add-chart-object","title":"Add chart object","text":"<pre><code>var chart = scene.rexUI.add.chart(x, y, width, height, config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Canvas size.</li> <li><code>config</code> : Configuration for creating chart.<ul> <li>Set <code>undefined</code> to not create chart at beginning.</li> </ul> </li> </ul>"},{"location":"ui-chart/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyChart extends RexPlugins.UI.Chart {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var chart = new MyChart(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#create-chart","title":"Create chart","text":"<p>Create chart (if not creating at beginning).</p> <pre><code>chart.setChart(config);\n</code></pre> <ul> <li><code>config</code> : Configuration for creating chart.</li> </ul>"},{"location":"ui-chart/#chart-data","title":"Chart data","text":"<ul> <li>Get dataset     <pre><code>var dataset = chart.getChartDataset(datasetIndex);\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> </ul> </li> <li>Get data     <pre><code>var data = chart.getChartData(datasetIndex, dataIndex);\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> <li><code>dataIndex</code> : Index number or label string.</li> </ul> </li> <li>Set     <pre><code>chart.setChartData(datasetIndex, dataIndex, value).updateChart();\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> <li><code>dataIndex</code> : Index number or label string.</li> </ul> </li> </ul>"},{"location":"ui-chart/#manipulate-chart-object","title":"Manipulate chart object","text":"<ol> <li>Get chart object     <pre><code>var chart = chart.chart;\n</code></pre></li> <li>Set properties of chart<ul> <li>Array of dataset     <pre><code>var datasets = chart.data.datasets;\n</code></pre><ul> <li>Label of dataset     <pre><code>var label = chart.data.datasets[i].label;\n</code></pre></li> </ul> </li> <li>Labels     <pre><code>var labels = chart.data.labels;\n</code></pre></li> <li>Set chart data     <pre><code>chart.data.datasets[datasetIndex].data[dataIndex] = value;\n</code></pre></li> </ul> </li> <li>Update chart     <pre><code>chart.update();\n</code></pre></li> </ol>"},{"location":"ui-colorcomponents/","title":"Color components","text":""},{"location":"ui-colorcomponents/#introduction","title":"Introduction","text":"<p>Edit color value by RGB, or HSV input fields. Clicking fist label can switch color format between RGB and HSV</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorcomponents/#live-demos","title":"Live demos","text":"<ul> <li>Color components</li> </ul>"},{"location":"ui-colorcomponents/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorcomponents/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorcomponents/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = scene.rexUI.add.colorComponents(config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = scene.rexUI.add.colorComponents(config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorComponents } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = new ColorComponents(scene, config);\nscene.add.existing(colorComponents);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#add-colorcomponents-object","title":"Add colorComponents object","text":"<pre><code>var colorComponents = scene.rexUI.add.colorComponents({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nformatLabel: {\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n},\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n},\n\n// formatLabel: labelGameObject,\n\ninputText: {\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n\n// Style when focus\n// 'focus.color': ...\n// 'focus.color2': ...\n// 'focus.stroke': ...\n},\nfocusStyle: undefined,\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0,\n\n// Style when cursor move on\n// 'cursor.color': ...\n// 'cursor.backgroundColor': ...\n// 'cursor.xxx': ...\n},\ncursorStyle: undefined,\n\nwrap: {\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nlineHeight: undefined,\nmaxLines: undefined,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 'center',  // For single line text input\ncharWrap: true,    // For single line text input\n},\n\n// enterClose: true,\n// readOnly: false,\n\n// Callbacks\n// onOpen: function (textObject, hiddenInputText) {\n// },\n\n// onClose: function (textObject, hiddenInputText) {\n// },\n\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },   \n\n// onAddChar: function(child, index, canvasInput) {\n//    child.modifyStyle({...})\n// },\n\n// onCursorOut: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// onCursorIn: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n},\n\n// inputText0: canvasInputGameObject,\n// inputText1: canvasInputGameObject,\n// inputText2: canvasInputGameObject,\n\n// proportion: { formatLabel: 0 },\n\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\nitem: 0\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorComponents.</li> <li><code>formatLabel</code> : Clicking this label can switch color format between RGB and HSV<ul> <li>A label game object, or a text game object.</li> <li>A plain object     <pre><code>{\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: textStyle,\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n}\n</code></pre><ul> <li><code>formatLable.background</code> : Parameters to create round rectangle game object.</li> <li><code>formatLable.text</code> : Text style to create [text.md] game object.</li> <li><code>formatLabel.space</code> : Padding space around format label.    </li> </ul> </li> </ul> </li> <li><code>inputText</code> : Configuration of canvasInput</li> <li><code>inputText0</code>, <code>inputText1</code>, <code>inputText2</code> : 3 canvas input game objects if parameter <code>inputText</code> is not given.</li> <li><code>proportion</code> :<ul> <li><code>proportion.formatLabel</code> : Default value is <code>0</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between swatch and inputText.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorcomponents/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorComponents extends RexPlugins.UI.ColorComponents {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorComponents = new MyColorComponents(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorComponents.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorcomponents/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorComponents.getElement('background');\n</code></pre></li> <li>Format-label game object     <pre><code>var icon = colorComponents.getElement('formatLabel');\n</code></pre></li> <li>Color component input text game objects     <pre><code>var textObjects = colorComponents.getElement('components');\n</code></pre><ul> <li><code>textObjects</code> : An arrray with 3 canvas input game objects.</li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorComponents.getElement('#' + name);\n// var gameObject = colorComponents.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorComponents.getByName(name);\n// var gameObject = colorComponents.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorcomponents/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorComponents.value;\n// var value = colorComponents.color;\n</code></pre></li> <li>Set color value     <pre><code>colorComponents.setValue(value);\n// colorComponents.setColor(value);\n</code></pre>     or     <pre><code>colorComponents.value = value;\ncolorComponents.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorComponents.on('valuechange', function(newValue, oldValue, colorComponents){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-colorinput/","title":"Color input","text":""},{"location":"ui-colorinput/#introduction","title":"Introduction","text":"<p>Color number (<code>0x0</code>~<code>0xffffff</code>) or color string (<code>'#000000'</code>~<code>'#ffffff'</code>, or <code>'red'</code>) input field.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorinput/#live-demos","title":"Live demos","text":"<ul> <li>Color input</li> </ul>"},{"location":"ui-colorinput/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorinput/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorinput/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = scene.rexUI.add.colorInput(config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = scene.rexUI.add.colorInput(config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorInput } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = new ColorInput(scene, config);\nscene.add.existing(colorInput);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#add-colorinput-object","title":"Add colorInput object","text":"<pre><code>var colorInput = scene.rexUI.add.colorInput({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nswatch: undefined,\n// swatch: { shape: 'circle' },\n// swatch: { size: 30 },\n// swatch: swatchGameObject,\n// swatch: false,\n\n// swatchSize: undefined,  // or swatch: { size }\n// squareExpandSwatch: true,\n\ninputText: inputTextConfig,\n// inputText: false,\n\ncolorPicker : {\nwidth: 160, height: 170,\n\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n// createBackgroundCallback: function(scene) {\n//     return gameObject;\n// }\n\n// hPalettePosition: 'bottom',\n\n// space: { left: 10, right: 10, top: 10, bottom: 10, item: 8 }\n},\n\ncolorComponents: {\n// height: undefined,\n\n// formatLabel: undefined,\n\n// inputText: undefined,\n\n// space: { item: 8 }\n},\n// colorComponents: false,\n\nvaluechangeCallback: function(newValue, oldValue, colorInput) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorInput.</li> <li><code>swatch</code> : Display color value on a square, circle shape, or an image game object with tint.<ul> <li><code>undefein</code> : A square swatch. Default game object.</li> <li>A plain object : A circle, or a round square swatch.     <pre><code>{ shape: 'circle' }\n</code></pre>     or     <pre><code>{ radius: 10 }\n</code></pre>     or     <pre><code>{ radius: 10, size: 30 }\n</code></pre><ul> <li><code>shape</code> : (Round-) Rectangle or circle<ul> <li><code>0</code>, or <code>'rectangle'</code> : (Round-) Rectangle shape.</li> <li><code>1</code>, or <code>'circle'</code> : Circle shape.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle.</li> <li><code>size</code> : Size of swatch. Equal to <code>swatchSize</code> parameter.</li> </ul> </li> <li>An Image or Sprite game object : Tint this game object for displaying color value.</li> <li><code>false</code> : No swatch game object.</li> </ul> </li> <li><code>swatchSize</code> :<ul> <li>A number : Size of swatch.</li> <li><code>undefined</code> : Expand size to fit inner height of color input. Default behavior.</li> </ul> </li> <li><code>squareExpandSwatch</code><ul> <li><code>true</code> : Expand size to fit inner height of color input. Default behavior if <code>swatchSize</code> is set to <code>undefined</code>, or not given</li> <li><code>false</code> : Keep current size of swatch.</li> </ul> </li> <li><code>inputText</code> : Configuration of canvasInput</li> <li><code>colorPicker</code> : Configuration of a drop-down color picker, triggered by clicking swatch.<ul> <li><code>colorPicker.width</code>, <code>colorPicker.height</code> : Sizer of color picker. Default value is <code>180</code>x<code>170</code></li> <li><code>colorPicker.background</code> : Parameters to create round rectangle game object, optional.</li> <li><code>colorPicker.createBackgroundCallback</code> : Callback to create background game object, optional.     <pre><code>function(scene) {\nreturn gameObject;\n}\n</code></pre></li> <li><code>colorPicker.hPalettePosition</code> : Position of h-palette.<ul> <li><code>'bottom'</code> or <code>0</code> : Place h-palette at bottom side of sv-palette.</li> <li><code>'left'</code> or <code>1</code> : Place h-palette at left side of sv-palette.</li> <li><code>'top'</code> or <code>2</code> : Place h-palette at top side of sv-palette.</li> <li><code>'right'</code> or <code>3</code> : Place h-palette at right side of sv-palette.</li> </ul> </li> <li><code>colorPicker.space</code> : Padding space around color picker. Default value is     <pre><code>{ left: 10, right: 10, top: 10, bottom: 10, item: 8 }\n</code></pre></li> <li><code>false</code> : No color picker.</li> </ul> </li> <li><code>colorComponents</code> : Configuration of color components inside the drop down color picker.<ul> <li><code>colorComponents.height</code> : Height of color components.</li> <li><code>colorComponents.formatLabel</code> : Clicking this label can switch color format between RGB and HSV <ul> <li><code>undefined</code> : Will create a label with default text game object.</li> <li>A plain object     <pre><code>{\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: textStyle,\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n}            </code></pre></li> </ul> </li> <li><code>colorComponents.inputText</code> : Configuration of canvasInput used in this color components. Will use <code>inputText</code> of color input if this parameter is not given.</li> <li><code>colorComponents.space</code> : Padding space around color components. Default value is     <pre><code>{ item: 8 }\n</code></pre></li> <li><code>false</code> : No color components.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).<ul> <li>Number :  0 ~ 0xffffff</li> <li>String : <ul> <li><code>0x0</code>~<code>0xffffff</code></li> <li><code>'#000000'</code>~<code>'#ffffff'</code></li> <li><code>'red'</code></li> </ul> </li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between swatch and inputText.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorinput/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorInput extends RexPlugins.UI.ColorInput {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorInput = new MyColorInput(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorInput.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorinput/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorInput.getElement('background');\n</code></pre></li> <li>Swatch game object     <pre><code>var icon = colorInput.getElement('swatch');\n</code></pre></li> <li>Input text game object     <pre><code>var textObject = colorInput.getElement('inputText');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorInput.getElement('#' + name);\n// var gameObject = colorInput.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorInput.getByName(name);\n// var gameObject = colorInput.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorinput/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorInput.value;\n// var value = colorInput.color;\n</code></pre></li> <li>Set color value     <pre><code>colorInput.setValue(value);\n// colorInput.setColor(value);\n</code></pre>     or     <pre><code>colorInput.value = value;\ncolorInput.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorInput.on('valuechange', function(newValue, oldValue, colorInput){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-colorpicker/","title":"Color picker","text":""},{"location":"ui-colorpicker/#introduction","title":"Introduction","text":"<p>Pick color value from H and SV palettes.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorpicker/#live-demos","title":"Live demos","text":"<ul> <li>Color picker</li> </ul>"},{"location":"ui-colorpicker/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorpicker/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorpicker/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = scene.rexUI.add.colorPicker(config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = scene.rexUI.add.colorPicker(config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorPicker } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = new ColorPicker(scene, config);\nscene.add.existing(colorPicker);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#add-colorpicker-object","title":"Add colorPicker object","text":"<pre><code>var colorPicker = scene.rexUI.add.colorPicker({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nhPalette: {\nposition: 'bottom',\nsize: 10,\nwidth: undefined,\nheight: undefined,       },\n\nsvPalette: {\nwidth: undefined,\nheight: undefined,\n},\n\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorPicker.</li> <li><code>hPalette</code> : Configuration of h-palette. H-palette is rendered on a canvas game object.<ul> <li><code>hPalette.position</code> : Position of h-palette.<ul> <li><code>'bottom'</code> or <code>0</code> : Place h-palette at bottom side of sv-palette.</li> <li><code>'left'</code> or <code>1</code> : Place h-palette at left side of sv-palette.</li> <li><code>'top'</code> or <code>2</code> : Place h-palette at top side of sv-palette.</li> <li><code>'right'</code> or <code>3</code> : Place h-palette at right side of sv-palette.</li> </ul> </li> <li><code>hPalette.size</code> : Width (if position of h-palette is at left or right side) or height (if position of h-palette is at top or bottom side) of h-palette.</li> <li><code>hPalette.width</code> : Width (if position of h-palette is at left or right side) of h-palette.</li> <li><code>hPalette.height</code> : Height (if position of h-palette is at top or bottom side) of h-palette.</li> </ul> </li> <li><code>svPalette</code> : Configuration of sv-palette. SV-palette is rendered on a canvas game object.<ul> <li><code>svPalette.width</code> : Width of sv-palette.</li> <li><code>svPalette.height</code> : Height of sv-palette.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between sv-palette and h-palette.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorpicker/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorPicker extends RexPlugins.UI.ColorPicker {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorPicker = new MyColorPicker(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorPicker.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorpicker/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorPicker.getElement('background');\n</code></pre></li> <li>H-palette game object     <pre><code>var icon = colorPicker.getElement('hPalette');\n</code></pre></li> <li>SV-palette game object     <pre><code>var textObject = colorPicker.getElement('svPalette');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorPicker.getElement('#' + name);\n// var gameObject = colorPicker.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorPicker.getByName(name);\n// var gameObject = colorPicker.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorpicker/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorPicker.value;\n// var value = colorPicker.color;\n</code></pre></li> <li>Set color value     <pre><code>colorPicker.setValue(value);\n// colorPicker.setColor(value);\n</code></pre>     or     <pre><code>colorPicker.value = value;\ncolorPicker.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorPicker.on('valuechange', function(newValue, oldValue, colorPicker){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-confirmdialog/","title":"Confirm dialog","text":""},{"location":"ui-confirmdialog/#introduction","title":"Introduction","text":"<p>Using json style to create confirm dialog, composed of simple-label title, simple-label content, with simple-label 0, 1, or 2 action button(s).</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-confirmdialog/#live-demos","title":"Live demos","text":"<ul> <li>Yes-no buttons</li> <li>Ok button</li> <li>Any-touch closing</li> <li>TextArea content</li> <li>Radio-choices</li> </ul>"},{"location":"ui-confirmdialog/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-confirmdialog/#install-plugin","title":"Install plugin","text":""},{"location":"ui-confirmdialog/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);\n// var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);\n// var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ConfirmDialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new ConfirmDialog(scene, config);\n// var dialog = new ConfirmDialog(scene, config, creators);\nscene.add.existing(dialog);\ndialog.resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#add-dialog-object","title":"Add dialog object","text":"<pre><code>var dialog = scene.rexUI.add.confirmDialog({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\n// SimpleLabelConfig\ntitle: {\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n// expandTextWidth: false,\n// expandTextHeight: false,\n\n// squareFitAction: false,\n// actionMask: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\nalign: undefined,  // 'left' | 'top' | 'right' | 'bottom' | 'center        \n},\n\ncontent: SimpleLabelConfig,\n\n/* TextArea\n    content: {\n        space: { left: 0, right: 0, top: 0, bottom: 0, text: 0, },\n\n        background: {\n            radius: 0,\n            // radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\n            color: undefined,\n            alpha: undefined,\n            strokeColor: undefined,\n            strokeAlpha: undefined,\n            strokeWidth: undefined,\n        },\n\n        text: {\n            fontFamily: 'Courier',\n            fontSize: '16px',\n            fontStyle: '',\n            backgroundColor: null,\n            color: '#fff',\n            stroke: '#fff',\n            strokeThickness: 0,\n            shadow: {\n                offsetX: 0,\n                offsetY: 0,\n                color: '#000',\n                blur: 0,\n                stroke: false,\n                fill: false\n            },                  \n            padding: {\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n            },\n            // more text styles\n        },\n\n        // textWidth: undefined,\n        // textHeight: undefined,\n        // textMask: false,\n        // alwaysScrollable: false,\n\n        slider: {\n            track: { \n                width: 1, height: 1,\n                radius: 0, \n                color: undefined, alpha: 1,\n                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n                shape: undefined\n            },\n\n            thumb: { \n                width: 1, height: 1,\n                radius: 0, \n                color: undefined, alpha: 1,\n                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n                shape: undefined\n            },\n\n            // input: 'drag',\n            // position: 'right',\n\n            // hideUnscrollableSlider: false,\n            // adaptThumbSize: false,\n            // minThumbSize: undefined,\n        },\n\n        // scroller: {\n        //     threshold: 10,\n        //     slidingDeceleration: 5000,\n        //     backDeceleration: 2000,\n        //     pointerOutRelease: true,\n        //     dragRate: 1,\n        // },\n\n        mouseWheelScroller: false,\n        // mouseWheelScroller: {\n        //     focus: false,\n        //     speed: 0.1\n        // },\n\n        clamplChildOY: false,\n    }\n    */\n\nbuttonMode: 0,  // 0|1|2\n\nbutton: SimpleLabelConfig,\n// buttonA: SimpleLabelConfig\n// buttonB: SimpleLabelConfig\n\n// choice: SimpleLabelConfig,\n// choicesType\n// choicesWidth: undefined,\n// choicesHeight: undefined,\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntitle: 0,\ntitleLeft: 0,\ntitleRight: 0,\n\ncontent: 0,\ncontentLeft: 0,\ncontentRight: 0,\n\nactionsLeft: 0,\nactionsRight: 0,\naction: 0,\n\nchoices: 0,\nchoicesLeft: 0,\nchoicesRight: 0,\nchoice: 0,\nchoiceLine: 0,\nchoiceColumn: 0, choiceRow: 0,\nchoicesBackgroundLeft: 0,\nchoicesBackgroundRight: 0,\nchoicesBackgroundTop: 0,\nchoicesBackgroundBottom: 0,\n},\n\nproportion: {\ntitle: 0,\ncontent: 0,\nactions: 0,\nchoices: 0,\n},\n\nexpand: {\ntitle: true,\ncontent: true,\nactions: false,\nchoices: true,\n},\n\nalign: {\ntitle: 'center',\ncontent: 'center',\nactions: 'center',\nchoices: 'center',\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n}, creators);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Styles of simple-label</li> <li><code>title</code> : Styles of simple-label</li> <li><code>content</code> : Styles of simple-label, or TextArea<ul> <li>Style with <code>slider</code>, or <code>scroller</code> properties : TextArea</li> <li>Otherwise : SimpleLabel</li> </ul> </li> <li><code>buttonMode</code> : <code>0</code>, <code>1</code>, or <code>2</code><ul> <li><code>0</code> : No action button, any touch can close modal dialog</li> <li><code>1</code>, <code>2</code> : Dialog with 1 or 2 action buttons, clicking any action button to close modal dialog.</li> </ul> </li> <li><code>button</code> : Styles of simple-label, optional.</li> <li><code>choice</code> : Styles of simple-label, optional.</li> <li><code>choicesType</code> : Sizer type (Buttons/FixWidthButtons/GridButtons) and behavior (<code>''</code>/<code>'radio'</code>/<code>'checkboxes'</code>) of choice buttons.<ul> <li><code>undefined</code>, <code>''</code>, or <code>'y'</code> : Buttons in vertical/horizontal without any extra behavior, default behavior.</li> <li><code>'radio'</code>, or <code>'x-radio'</code> : Buttons in vertical/horizontal, with radio behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code>.</li> </ul> </li> <li><code>'checkboxes'</code>, or <code>'x-checkboxes'</code> : Buttons in vertical/horizontal, with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'wrap'</code> : FixWidthButtons without any extra behavior, default behavior.</li> <li><code>'wrap-radio'</code> : FixWidthButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'wrap-checkboxes'</code> : FixWidthButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.    </li> </ul> </li> </ul> </li> <li><code>choicesWidth</code>, <code>choicesHeight</code> : Minimum width, minimum height of choices.<ul> <li>Must assign <code>choicesHeight</code> value if using GridButtons choices.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.title</code> : Space between title game object and below game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Extra left/right padding of title game object.</li> <li><code>space.content</code> : Space between content game object and below game object.</li> <li><code>space.contentLeft</code>, <code>space.contentRight</code> : Extra left/right padding of content game object.        </li> <li><code>space.action</code> : Space between each action-button game objects.</li> </ul> </li> <li><code>proportion</code> : Keep height of element, or expand height of element.<ul> <li><code>proportion.title</code> : Set to <code>1</code> to expand height of title. Default is <code>0</code>.</li> <li><code>proportion.content</code> : Set to <code>1</code> to expand height of content. Default is <code>0</code>.    </li> <li><code>proportion.actions</code> : Set to <code>1</code> to expand height of actions. Default is <code>0</code>.</li> </ul> </li> <li><code>expand</code> : Expand width of element<ul> <li><code>expand.title</code> : Set <code>true</code> to expand width of title game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand width of content game object. Default is <code>true</code>.    </li> <li><code>expand.actions</code> : Set <code>true</code> to expand width of actions game object. Default is <code>false</code>.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.title</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value. Will add Spaces at right and left sides.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center. Will add a Space at right side.</li> </ul> </li> <li><code>align.content</code> : Align content game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.content</code> is <code>false</code>.    </li> <li><code>align.actions</code> : Align action game objects to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.actions</code> is <code>false</code>.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>creators</code> : Callbacks for creating components.     <pre><code>{\nbackground: undefined,\ntitle: undefined,\ncontent: undefined,\nbutton: undefined,\nbuttonA: undefined,\nbuttonB: undefined,\n}\n</code></pre><ul> <li><code>creators.background</code> : Callback to create background of dialog. Default behavior is creating a round-rectangle-shape.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.title</code>, <code>creators.content</code>, <code>creators.button</code>, <code>creators.buttonA</code>, <code>creators.buttonB</code> : Creators of simple-label, included these properties     <pre><code>{\nbackground: undefined,\ntext: undefined,\nicon: undefined,\naction: undefined,\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDialog extends RexPlugins.UI.ConfirmDialog {\nconstructor(scene, config, creators) {\nsuper(scene, config, creators);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dialog = new MyDialog(scene, config, creators);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#reset-display-content","title":"Reset display content","text":"<pre><code>dialog.resetDisplayContent({\ntitle: '',\ncontent: '',\nbuttonA: '',\nbuttonB: '',\n});\n</code></pre> <p>or</p> <pre><code>dialog.resetDisplayContent({\ntitle: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\ncontent: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nbuttonA: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nbuttonB: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nchoices: [\n{\ntext: '', value: undefined,\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n},        // ...\n]\n});\n</code></pre> <ul> <li><code>title</code>, <code>content</code>,<code>buttonA</code>, <code>buttonB</code> : Display content<ul> <li>A string : Set text of simple lable</li> <li>Configuration of <code>simpleLabel.resetDisplayContent(config)</code> : Set icon, text, action icon of simple label.</li> </ul> </li> <li><code>choices</code> : Array of display content<ul> <li>A string : Set text of simple lable, also use this string as option value.</li> <li>Configuration of <code>simpleLabel.resetDisplayContent(config)</code> : Set icon, text, action icon of simple label.<ul> <li>Property <code>value</code> : Option value.</li> </ul> </li> </ul> </li> </ul> <p>Run <code>dialog.layout()</code> after this method, to layout children again.</p>"},{"location":"ui-confirmdialog/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>dialog.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-confirmdialog/#modal","title":"Modal","text":"<p>Pop this dialog as modal dialog, clicking any action button to close this modal dialog.</p> <pre><code>dialog.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true\n});\n// dialog.modal(config, onClose);\n</code></pre> <p>or</p> <pre><code>dialog\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior<ul> <li><code>config.defaultBehavior</code> :<ul> <li><code>undefined</code>, or <code>true</code> : Will close modal dialog when clicking any action button.</li> <li><code>false</code> : Disable default behavior.</li> </ul> </li> </ul> </li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {\n// var index = data.index;\n// var text = data.text;\n// var value = data.value;\n// var button = data.button;\n// var dialog = data.dialog;\n}\n</code></pre><ul> <li><code>data</code> : Contains these properties<ul> <li><code>data.index</code> : Index of clicking action button</li> <li><code>data.text</code> : <code>button.text</code>, this property is valided if button game object is a label.</li> <li><code>data.value</code> :<ul> <li>A single value : Return selected value, if <code>choicesType</code> is <code>'radio'</code></li> <li>A dictionary contains <code>{value: boolean}</code> : Return selected values, if <code>choicesType</code> is <code>'checkboxes'</code></li> <li><code>undefined</code> : Default value</li> </ul> </li> <li><code>data.button</code> : Clicked button game object.</li> <li><code>data.dialog</code> : This dialog game object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = dialog.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var title = dialog.getElement('title');\n</code></pre></li> <li>Content game object     <pre><code>var content = dialog.getElement('content');\n</code></pre></li> <li>Buttons game object     <pre><code>var buttonA = dialog.getElement('buttonA');\nvar buttonB = dialog.getElement('buttonB');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = dialog.getElement('#' + name);\n// var gameObject = dialog.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = dialog.getByName(name);\n// var gameObject = dialog.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#other-properties","title":"Other properties","text":"<p>See dialog, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dialog/","title":"Dialog","text":""},{"location":"ui-dialog/#introduction","title":"Introduction","text":"<p>A container with a title, content, buttons and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-dialog/#live-demos","title":"Live demos","text":"<ul> <li>Dialog</li> <li>Yes-no dialog</li> <li>Action buttons with Space</li> <li>Radio choices dialog</li> <li>Horizontal-radio choices dialog</li> <li>Wrap-radio choices dialog</li> <li>Wrap-checkboxes choices dialog</li> <li>Grid-checkboxes choices dialog</li> <li>Pop-up dialog</li> <li>Ease-in, ease-out</li> <li>Show/hide buttons</li> <li>Add button</li> <li>Wrap label</li> <li>Modal dialog</li> </ul>"},{"location":"ui-dialog/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-dialog/#install-plugin","title":"Install plugin","text":""},{"location":"ui-dialog/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.dialog(config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.dialog(config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Dialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new Dialog(scene, config);\nscene.add.existing(dialog);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#add-dialog-object","title":"Add dialog object","text":"<pre><code>var dialog = scene.rexUI.add.dialog({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\ntoolbarBackground: toolbarBackgroundGameObject,\ntoolbar: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nleftToolbarBackground: leftToolbarBackgroundGameObject,\nleftToolbar: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\ncontent: contentGameObject,\n\ndescription: descriptionGameObject,\n\nchoicesType: '',\n// choicesWidth: undefined,\n// choicesHeight: undefined,  // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\nchoicesBackground: choicesBackgroundGameObject,\nchoices: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nactionsBackground: actionsBackgroundGameObject,\nactions: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntitle: 0,\ntitleLeft: 0,\ntitleRight: 0,\ncontent: 0,\ncontentLeft: 0,\ncontentRight: 0,\ndescription: 0,\ndescriptionLeft: 0,\ndescriptionRight: 0\nchoices: 0,\nchoicesLeft: 0,\nchoicesRight: 0,\nactionsLeft: 0,\nactionsRight: 0,\n\ntoolbarItem: 0,\nleftToolbarItem: 0,\n\nchoice: 0,\n// choiceLine: 0,   // Used when choicesType is `'wrap'`, `'wrap-radio'`, or `'wrap-checkboxes'`\n// choiceColumn: 0, // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\n// choiceRow: 0,    // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\nchoicesBackgroundLeft: 0,\nchoicesBackgroundRight: 0,\nchoicesBackgroundTop: 0,\nchoicesBackgroundBottom: 0,\n\naction: 0,\n},\n\nproportion: {\ntitle: 0,\ncontent: 0,\ndescription: 0,\nchoices: 0,\nactions: 0,\n},\n\nexpand: {\ntitle: true,\ncontent: true,\ndescription: true,\nchoices: true,\nactions: false,\n},\n\nalign: {\ntitle: 'center',\ncontent: 'center',\ndescription: 'center',\nchoices: 'center',\nactions: 'center',\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>title</code> : Game object of title, optional.</li> <li><code>toolbar</code> : Array of Game objects for toolbar-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>toolbarBackground</code> : Game object of toolbar buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>leftToolbar</code> : Array of Game objects for left-toolbar-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>leftToolbarBackground</code> : Game object of leftToolbar buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>content</code> : Game object of content, optional.</li> <li><code>description</code> : Game object of description, optional.</li> <li><code>choices</code> : Array of Game objects for choice-buttons group which arranged from top to bottom, optional.<ul> <li>Array of Game objects, for Buttons/FixWidthButtons choices.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li>2d Array of Game objects, for GridButtons choices..</li> </ul> </li> <li><code>choicesBackground</code> : Game object of choices buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>choicesType</code> : Sizer type (Buttons/FixWidthButtons/GridButtons) and behavior (<code>''</code>/<code>'radio'</code>/<code>'checkboxes'</code>) of choice buttons.<ul> <li><code>undefined</code>, <code>''</code>, or <code>'y'</code> : Buttons in vertical/horizontal without any extra behavior, default behavior.</li> <li><code>'radio'</code>, or <code>'x-radio'</code> : Buttons in vertical/horizontal, with radio behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code>.</li> </ul> </li> <li><code>'checkboxes'</code>, or <code>'x-checkboxes'</code> : Buttons in vertical/horizontal, with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'wrap'</code> : FixWidthButtons without any extra behavior, default behavior.</li> <li><code>'wrap-radio'</code> : FixWidthButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'wrap-checkboxes'</code> : FixWidthButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'grid'</code> : GridButtons without any extra behavior, default behavior.</li> <li><code>'grid-radio'</code> : GridButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'grid-checkboxes'</code> : GridButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.        </li> </ul> </li> </ul> </li> <li><code>choicesWidth</code>, <code>choicesHeight</code> : Minimum width, minimum height of choices.<ul> <li>Must assign <code>choicesHeight</code> value if using GridButtons choices.</li> </ul> </li> <li><code>actions</code> : Array of Game objects, or Space (<code>scene.rexUI.add.space()</code>) for action-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>choicesBackground</code> : Game object of choices buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.title</code> : Space between title game object and below game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Extra left/right padding of title game object.</li> <li><code>space.content</code> : Space between content game object and below game object.</li> <li><code>space.contentLeft</code>, <code>space.contentRight</code> : Extra left/right padding of content game object.</li> <li><code>space.description</code> : Space between description game object and below game object.</li> <li><code>space.descriptionLeft</code>, <code>space.descriptionRight</code> : Extra left/right padding of description game object.</li> <li><code>space.choices</code> : Space between last choice-button and below game object.</li> <li><code>space.choicesLeft</code>, <code>space.choicesRight</code> : Extra left/right padding of choice buttons.</li> <li><code>space.actionsLeft</code>, <code>space.actionsRight</code> : Extra left/right padding of actions buttons.</li> <li><code>space.toolbarItem</code> : Space between each toolbar item game objects.</li> <li><code>space.leftToolbarItem</code> : Space between each left-toolbar item game objects.</li> <li><code>space.choice</code> : Space between each choice-button game objects.</li> <li><code>space.choicesBackgroundLeft</code>, <code>space.choicesBackgroundRight</code>, <code>space.choicesBackgroundTop</code>, <code>space.choicesBackgroundBottom</code> : Padding space around choices-background. </li> <li><code>space.action</code> : Space between each action-button game objects.</li> </ul> </li> <li><code>proportion</code> : Keep height of element, or expand height of element.<ul> <li><code>proportion.title</code> : Set to <code>1</code> to expand height of title. Default is <code>0</code>.</li> <li><code>proportion.content</code> : Set to <code>1</code> to expand height of content. Default is <code>0</code>.</li> <li><code>proportion.description</code> : Set to <code>1</code> to expand height of description. Default is <code>0</code>.</li> <li><code>proportion.choices</code> : Set to <code>1</code> to expand height of choices. Default is <code>0</code>.</li> <li><code>proportion.actions</code> : Set to <code>1</code> to expand height of actions. Default is <code>0</code>.</li> </ul> </li> <li><code>expand</code> : Expand width of element<ul> <li><code>expand.title</code> : Set <code>true</code> to expand width of title game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand width of content game object. Default is <code>true</code>.</li> <li><code>expand.description</code> : Set <code>true</code> to expand width of description game object. Default is <code>true</code>.</li> <li><code>expand.choices</code> : Set <code>true</code> to expand width of choices game object. Default is <code>true</code>.</li> <li><code>expand.actions</code> : Set <code>true</code> to expand width of actions game object. Default is <code>false</code>.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.title</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value. Will add Spaces at right and left sides.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center. Will add a Space at right side.</li> </ul> </li> <li><code>align.content</code> : Align content game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.content</code> is <code>false</code>.</li> <li><code>align.description</code> : Align description game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.description</code> is <code>false</code>.</li> <li><code>align.choices</code> : Align choices game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.choices</code> is <code>false</code>.</li> <li><code>align.actions</code> : Align action game objects to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.actions</code> is <code>false</code>.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDialog extends RexPlugins.UI.Dialog {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dialog = new MyDialog(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>dialog.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-dialog/#modal","title":"Modal","text":"<p>Pop this dialog as modal dialog, clicking any action button to close this modal dialog.</p> <pre><code>dialog.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true,\n\n// defaultBehavior: true,\n});\n// dialog.modal(config, onClose);\n</code></pre> <p>or</p> <pre><code>dialog\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior<ul> <li><code>config.defaultBehavior</code> :<ul> <li><code>undefined</code>, or <code>true</code> : Will close modal dialog when clicking any action button.</li> <li><code>false</code> : Disable default behavior. User has to invoke <code>dialog.modalClose(data)</code> manually.</li> </ul> </li> </ul> </li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {\n// var index = data.index;\n// var text = data.text;\n// var button = data.button;\n// var dialog = data.dialog;\n}\n</code></pre><ul> <li><code>data</code> : Contains these properties<ul> <li><code>data.index</code> : Index of clicking action button</li> <li><code>data.text</code> : <code>button.text</code>, this property is valided if button game object is a label.</li> <li><code>data.button</code> : Clicked button game object.</li> <li><code>data.dialog</code> : This dialog game object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-dialog/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dialog/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>dialog.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, or <code>'toolbar'</code>, <code>'leftToolbar'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>dialog.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out button     <pre><code>dialog.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Enable button's input     <pre><code>dialog.on('button.enable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> <li>Disable button's input     <pre><code>dialog.on('button.disable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#emit-button-click-event","title":"Emit button click event","text":"<ul> <li>Emit choice/action/toolbar/left-toolbar button's click event     <pre><code>dialog.emitChoiceClick(index);\ndialog.emitActionClick(index);\ndialog.emitToolbarClick(index);\ndialog.emitLeftToolbarClick(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = dialog.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var title = dialog.getElement('title');\n</code></pre></li> <li>Content game object     <pre><code>var content = dialog.getElement('content');\n</code></pre></li> <li>Description game object     <pre><code>var description = dialog.getElement('description');\n</code></pre></li> <li>Choice button game object     <pre><code>var buttons = dialog.getElement('choices');\n</code></pre>     or     <pre><code>var button = dialog.getChoice(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('choices[' + index + ']');\n</code></pre></li> <li>Action button game object     <pre><code>var buttons = dialog.getElement('actions');\n</code></pre>     or     <pre><code>var button = dialog.getAction(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('actions[' + index + ']');\n</code></pre></li> <li>Toolbar button game object     <pre><code>var buttons = dialog.getElement('toolbar');\n</code></pre>     or     <pre><code>var button = dialog.getToolbar(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('toolbar[' + index + ']');\n</code></pre></li> <li>Left-toolbar button game object     <pre><code>var buttons = dialog.getElement('leftToolbar');\n</code></pre>     or     <pre><code>var button = dialog.getLeftToolbar(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('leftToolbar[' + index + ']');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = dialog.getElement('#' + name);\n// var gameObject = dialog.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = dialog.getByName(name);\n// var gameObject = dialog.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#add-button","title":"Add button","text":"<p>Add choice/action/toolbar/left-toolbar button</p> <pre><code>dialog.addChoice(gameObject);\ndialog.addAction(gameObject);\ndialog.addToolbar(gameObject);\ndialog.addLeftToolbar(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul>"},{"location":"ui-dialog/#remove-button","title":"Remove button","text":"<ul> <li>Remove a choice/action/toolbar/left-toolbar button     <pre><code>dialog.removeChoice(index, destroyChild);\ndialog.removeAction(index, destroyChild);\ndialog.removeToolbar(index, destroyChild);\ndialog.removeLeftToolbar(index, destroyChild);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all choice/action/toolbar/left-toolbar buttons     <pre><code>dialog.clearChoices(destroyChild);\ndialog.clearActions(destroyChild);\ndialog.clearToolbar(destroyChild);\ndialog.clearLeftToolbar(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable choice/action/toolbar/left-toolbar button     <pre><code>dialog.setChoiceEnable(index);\ndialog.setActionEnable(index);\ndialog.setToolbarEnable(index);\ndialog.setLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Enable all buttons     <pre><code>dialog.setAllButtonsEnable();\n</code></pre></li> <li>Disable choice/action/toolbar/left-toolbar button's input     <pre><code>dialog.setChoiceEnable(index, false);\ndialog.setActionEnable(index, false);\ndialog.setToolbarEnable(index, false);\ndialog.setLeftToolbarEnable(index, false);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable all buttons     <pre><code>dialog.setAllButtonsEnable(false);\n</code></pre></li> <li>Toggle choice/action/toolbar/left-toolbar button's input     <pre><code>dialog.toggleChoiceEnable(index);\ndialog.toggleActionEnable(index);\ndialog.toggleToolbarEnable(index);\ndialog.toggleLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Get choice/action/toolbar/left-toolbar button's input enable     <pre><code>var enabled = dialog.getChoiceEnable(index);\nvar enabled = dialog.getActionEnable(index);\nvar enabled = dialog.getToolbarEnable(index);\nvar enabled = dialog.getLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>dialog.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show choice/action/toolbar/left-toolbar button     <pre><code>dialog.showChoice(index);\ndialog.showAction(index);\ndialog.showToolbar(index);\ndialog.showLeftToolbar(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide choice/action/toolbar/left-toolbar button.     <pre><code>dialog.hideChoice(index);\ndialog.hideAction(index);\ndialog.hideToolbar(index);\ndialog.hideLeftToolbar(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#for-each-button","title":"For each button","text":"<pre><code>dialog.forEachChoice(callback, scope);\ndialog.forEachAction(callback, scope);\ndialog.forEachToolbar(callback, scope);\ndialog.forEachLeftToolbar(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>function(button, index, buttons) {\n// ...\n}\n</code></pre></li> </ul>"},{"location":"ui-dialog/#state-of-choices-buttons","title":"State of choices buttons","text":""},{"location":"ui-dialog/#radio","title":"Radio","text":"<ul> <li>Read state     <pre><code>var value = dialog.getChoicesSelectedButtonName();\n</code></pre></li> <li>Set state     <pre><code>dialog.setChoicesSelectedButtonName(name);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#checkboxes","title":"Checkboxes","text":"<ul> <li>Read states     <pre><code>var states = dialog.getChoicesButtonStates();\n</code></pre><ul> <li><code>states</code> : <code>{name: boolean}</code></li> </ul> </li> <li>Set state     <pre><code>dialog.setChoicesButtonState(name, state);\n</code></pre><ul> <li><code>name</code> : Name of button game object</li> <li><code>state</code> : Set <code>true</code> if button is selected</li> </ul> </li> <li>Clear all states to <code>false</code> <pre><code>dialog.clearChoicesButtonStates();\n</code></pre></li> </ul>"},{"location":"ui-dialog/#events_1","title":"Events","text":"<ul> <li>On button state changed. For Checkboxes/radio     <pre><code>dialog.on('button.statechange', function(button, groupName, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre><ul> <li>Can be used to replace setValueCallback.</li> </ul> </li> </ul>"},{"location":"ui-dropdownlist/","title":"Drop down list","text":""},{"location":"ui-dropdownlist/#introduction","title":"Introduction","text":"<p>A label can open a drop-down list panel.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-dropdownlist/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down list</li> <li>Drop-down wrap-list</li> <li>Custom transit</li> <li>Align to right side</li> </ul>"},{"location":"ui-dropdownlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-dropdownlist/#install-plugin","title":"Install plugin","text":""},{"location":"ui-dropdownlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.dropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.dropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { DropDownList } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dropDownList object     <pre><code>var dropDownList = new DropDownList(scene, config);\nscene.add.existing(dropDownList);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#add-drop-down-list-object","title":"Add drop-down list object","text":"<pre><code>var dropDownList = scene.rexUI.add.dropDownList({\noptions: [\noption0,\noption1,\n// ...\n],\n\nlist: {\n// createBackgroundCallback: function(scene) {\n//     // this : dropDownList\n//     return gameObject;\n// },\n\ncreateButtonCallback: function(scene, option, index, options) {\n// this : dropDownList\nreturn gameObject;\n},\n\nonButtonClick: function(button, index, pointer, event) {\n// this : dropDownList\n},\n\n// onButtonOver: function(button, index, pointer, event) {\n//     // this : dropDownList\n// },\n\n// onButtonOut: function(button, index, pointer, event) {\n//     // this : dropDownList\n// },\n\n// easeIn: 500,\n// transitIn: undefined,\n// transitIn: function(listPanel, duration) {  },\n\n// easeOut: 100,\n// transitOut: undefined,\n// transitOut: function(listPanel, duration) {  },\n\n// wrap: false,\n// width: undefined, \n// height: undefined,\n// alignParent: 'text',\n// alignSide: '',\n// expandDirection: 0,\n// bounds: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0, item: 0,\n//     line: 0\n// },\n\n// draggable: false\n},\n\nsetValueCallback: function(dropDownList, value, previousValue) {\n\n},\nsetValueCallbackScope: undefined,\nvalue: undefined,\n\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\naction: actionGameObject,\nactionMask: false,\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>options</code> : Array of strings, or objects.</li> <li><code>list</code> : Configuration of list panel.<ul> <li><code>list.createBackgroundCallback</code> : Create background of list panel     <pre><code>function(scene) {\n// this : dropDownList\nreturn gameObject;\n}\n</code></pre></li> <li><code>list.createButtonCallback</code> : Create option button of list panel     <pre><code>function(scene, option, index, options) {\n// this : dropDownList\nreturn gameObject;\n}\n</code></pre></li> <li><code>list.onButtonClick</code> : Callback when clicking a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.onButtonOver</code> : Callback when pointer over a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.onButtonOut</code> : Callback when pointer out a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.easeIn</code> : Pop-up duration in ms. Default value is <code>500</code>.</li> <li><code>list.transitIn</code> : Tween behavior of opening list panel.<ul> <li><code>undefined</code> : Expand list panel by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.easeOut</code> : Scale-down duration in ms. Default value is <code>100</code>.</li> <li><code>list.transitOut</code> : Tween behavior of closing list panel.<ul> <li><code>undefined</code> : Closing list panel by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.wrap</code> : <ul> <li><code>true</code> : fixwidth-sizer layout, a row within buttons.</li> <li><code>false</code> : sizer layout, a row within a button. Default behavior.</li> </ul> </li> <li><code>list.width</code> : Minimum width.<ul> <li><code>undefined</code> : Minimum width of panel will equal to width of parent label. Default value.</li> <li>A number : Width of panel. Required fields when <code>list.wrap</code> is <code>true</code>.</li> </ul> </li> <li><code>list.height</code> : Minimum height.<ul> <li><code>undefined</code> : Default value.</li> </ul> </li> <li><code>list.alignParent</code> : Align x position to label.<ul> <li><code>'icon'</code> : Align x position to icon game object of parent label.</li> <li><code>'text'</code> : Align x position to text game object of parent label. Default behavior</li> <li><code>'label'</code>, or <code>null</code> : Align x position to parent label.        </li> </ul> </li> <li><code>list.alignSide</code> : Align list to label's left or right side.<ul> <li><code>undefined</code>, or <code>'left'</code> : Align list's left side to label's left side. Default behavior.</li> <li><code>'right</code> : Align list's right side to label's right side. Default behavior.</li> </ul> </li> <li><code>list.expandDirection</code> :<ul> <li><code>0</code>, <code>'down'</code> : Expand list down. i.e. list panel will put below parent label.</li> <li><code>1</code>, <code>'up'</code> : Expand list up. i.e. list panel will put above parent label.</li> </ul> </li> <li><code>list.bounds</code> : Put list panel below parent label if bottom of list panel is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>list.space</code> : <code>space</code> properties of list panel.<ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code> : For sizer layout. (<code>list.wrap</code> is <code>false</code>)</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code>, <code>line</code> : For fixwidth-sizer layout. (<code>list.wrap</code> is <code>true</code>)</li> </ul> </li> <li><code>list.draggable</code> : Set <code>true</code> to drag top-most object.</li> </ul> </li> <li><code>value</code>, <code>setValueCallback</code>, <code>setValueCallbackScope</code> : See value <pre><code>function(dropDownList, value, previousValue) {\n\n}\n</code></pre></li> <li>Properties of Label<ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : Set <code>true</code> to expand width of text object.</li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action-icon game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-dropdownlist/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDropDownList extends RexPlugins.UI.DropDownList {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dropDownList = new MyDropDownList(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#options","title":"Options","text":"<ul> <li>Set     <pre><code>dropDownList.setOptions(options);\n</code></pre>     or     <pre><code>dropDownList.options = options;\n</code></pre><ul> <li><code>options</code> : Array of strings, or objects.</li> </ul> </li> <li>Get     <pre><code>var options = dropDownList.options;\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#clicking","title":"Clicking","text":"<ul> <li>Enable     <pre><code>dropDownList.enableClick();\n</code></pre></li> <li>Disable     <pre><code>dropDownList.disableClick();\n</code></pre></li> <li>Register another clicking callback     <pre><code>dropDownList.onClick(callback, scope);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>dropDownList.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of option.</li> </ul> <p>Will fire <code>'button.click'</code> event</p> <pre><code>dropDownList.on('button.click', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <ul> <li><code>listPanel</code> : <code>undefined</code></li> <li><code>button</code> : Option</li> <li><code>pointer</code> : <code>undefined</code></li> <li><code>event</code> : <code>undefined</code></li> </ul>"},{"location":"ui-dropdownlist/#value","title":"Value","text":"<ul> <li>Set value under <code>list.onButtonClick</code> callback.     <pre><code>dropDownList.setValue(value);\n</code></pre>     or     <pre><code>dropDownList.value = value;\n</code></pre><ul> <li>When value changing<ul> <li>Will invoke <code>setValueCallback</code> <pre><code>function(dropDownList, value, previousValue) {\n\n}\n</code></pre></li> <li>Will fire <code>'valuechange'</code> event</li> </ul> </li> </ul> </li> <li>Get     <pre><code>var value = dropDownList.value;\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#openclose-list-panel","title":"Open/close list panel","text":""},{"location":"ui-dropdownlist/#open-list-panel","title":"Open list panel","text":"<ul> <li>Click parent label to open (create and pop-up) list panel.</li> <li>Or invoke this method <code>dropDownList.openListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#close-list-panel","title":"Close list panel","text":"<ul> <li>When list panel is opened, click any where will close (scale-down then destroy) this list panel.</li> <li>Or invoke this method <code>dropDownList.closeListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#toggle-list-panel","title":"Toggle list panel","text":"<ul> <li><code>dropDownList.toggleListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dropdownlist/#events","title":"Events","text":"<ul> <li>Open list     <pre><code>dropDownList.on('list.open', function(dropDownList, listPanel) {\n\n})\n</code></pre></li> <li>Close list     <pre><code>dropDownList.on('list.close', function(dropDownList, listPanel) {\n\n})\n</code></pre></li> <li>Click button     <pre><code>dropDownList.on('button.click', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Over button     <pre><code>dropDownList.on('button.over', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Out button     <pre><code>dropDownList.on('button.out', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>On value changing     <pre><code>dropDownList.on('valuechange', function(dropDownList, value, previousValue) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/","title":"File selector button","text":""},{"location":"ui-fileselectorbutton/#introduction","title":"Introduction","text":"<p>A transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>) above a Label.</p> <ul> <li>Author: Rex</li> <li>Game object, DOM Game object</li> </ul>"},{"location":"ui-fileselectorbutton/#live-demos","title":"Live demos","text":"<ul> <li>File selector button</li> </ul>"},{"location":"ui-fileselectorbutton/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fileselectorbutton/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fileselectorbutton/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add file selector button object     <pre><code>var button = scene.add.fileSelectorButton(config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileChooserPlugin from 'phaser3-rex-plugins/plugins/filechooser-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file selector button object     <pre><code>var button = scene.add.fileSelectorButton(config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileSelectorButton } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add file chooser object     <pre><code>var button = new FileSelectorButton(scene, config);\nscene.add.existing(button);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#add-file-chooser-object","title":"Add file chooser object","text":"<pre><code>var button = scene.add.fileSelectorButton({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\nicon: iconGameObject,\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\n\naction: actionGameObject,\n// actionMask: false,\n// squareFitAction: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n\n// accept: '',\n// multiple: false,\n});\n// var fileChooser = scene.add.fileSelectorButton(x, y, width, height, config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitIcon</code> : <ul> <li><code>true</code> : Resize icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object to <code>iconSize</code>x<code>iconSize</code></li> <li><code>iconWidth</code> : Set display width of icon game object to <code>iconWidth</code>. <ul> <li>If <code>iconHeight</code> is <code>undefined</code>, set <code>scaleY</code> of icon game object to <code>scaleX</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>iconHeight</code> : Set display height of icon game object to <code>iconHeight</code>. <ul> <li>If <code>iconWidth</code> is <code>undefined</code>, set <code>scaleX</code> of icon game object to <code>scaleY</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : <ul> <li><code>false</code> : Keep width of text to original size. Default behavior.</li> <li><code>true</code> : Expand width of text object. Will set display width by default.<ul> <li>Must set to <code>true</code> if using <code>scene.rexUI.wrapExpandText</code> method with any text game object.</li> </ul> </li> </ul> </li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitAction</code> : <ul> <li><code>true</code> : Resize action icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object to <code>actionSize</code>x<code>actionSize</code></li> <li><code>actionWidth</code> : Set display width of action game object to <code>actionWidth</code>. <ul> <li>If <code>actionHeight</code> is <code>undefined</code>, set <code>scaleY</code> of action game object to <code>scaleX</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>actionHeight</code> : Set display height of action game object to <code>actionHeight</code>. <ul> <li>If <code>actionWidth</code> is <code>undefined</code>, set <code>scaleX</code> of action game object to <code>scaleY</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> </ul>"},{"location":"ui-fileselectorbutton/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFileSelectorButton extends RexPlugins.UI.FileSelectorButton {\nconstructor(scene, config) {\nsuper(scene, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var button = new MyFileSelectorButton(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fileselectorbutton/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> <li>File chooser game object     <pre><code>var fileChooser = label.getElement('fileChooser');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fileselectorbutton/#selected-files","title":"Selected files","text":"<pre><code>var files = fileChooser.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"ui-fileselectorbutton/#set-accept-filter","title":"Set accept filter","text":"<pre><code>fileChooser.setAccept(accept);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> </ul>"},{"location":"ui-fileselectorbutton/#multiple-files","title":"Multiple files","text":"<ul> <li>Enable     <pre><code>fileChooser.setMultiple();\n</code></pre></li> <li>Disable     <pre><code>fileChooser.setMultiple(false);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#events","title":"Events","text":"<ul> <li>Selected file(s) changed     <pre><code>button.on('select', function(files, button) {        var file = files[0];\nvar url = URL.createObjectURL(file);\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileChooser.loadFile(file, loaderType, key);\n// fileChooser.loadFile(file, loaderType, key, cahceType);\n</code></pre> <p>or</p> <pre><code>fileChooser.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"ui-fileselectorbutton/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.createObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"ui-fileselectorbutton/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-fixwidthbuttons/","title":"Fix-width buttons","text":""},{"location":"ui-fixwidthbuttons/#introduction","title":"Introduction","text":"<p>A container with a group of fix-width buttons.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-fixwidthbuttons/#live-demos","title":"Live demos","text":"<ul> <li>Checkboxes/radio</li> <li>Indent left</li> <li>Indent top</li> </ul>"},{"location":"ui-fixwidthbuttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fixwidthbuttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fixwidthbuttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = scene.rexUI.add.fixWidthButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = scene.rexUI.add.fixWidthButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FixWidthButtons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = new FixWidthButtons(scene, config);\nscene.add.existing(buttons);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#add-buttons-object","title":"Add Buttons object","text":"<pre><code>var buttons = scene.rexUI.add.fixWidthButtons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n// rtl: false,\nalign: 0,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: 0,\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0,\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// buttonsType: undefined,\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : 1d/2d array of button game objects.</li> <li><code>align</code> : Align children of a line.<ul> <li><code>0</code>, <code>'left'</code> : Align children of a line to left/top side.</li> <li><code>1</code>, <code>'right'</code> : Align children of a line to right/bottom side.</li> <li><code>2</code>, <code>'center'</code> : Align children of a line to ceter.</li> <li><code>3</code>, <code>'justify'</code>, <code>'justify-left'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to left/top side.</li> <li><code>4</code>, <code>'justify-right'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to right/bottom side.</li> <li><code>5</code>, <code>'justify-cneter'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to center.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>space</code> :<ul> <li>A number: Space between 2 button game objects.</li> <li>An object: Padding of button game objects.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space betwen each child of a line.</li> <li><code>space.line</code> : Space between each line.</li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even line.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even item.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game obhect, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-fixwidthbuttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyButtons extends RexPlugins.UI.FixWidthButtons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fixwidthbuttons/#other-properties","title":"Other properties","text":"<p>See sizer object</p>"},{"location":"ui-fixwidthbuttons/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>buttons.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>groupName</code> : Optional group name.</li> <li><code>button</code> : Triggered button game object.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>buttons.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out button     <pre><code>buttons.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable button's input     <pre><code>buttons.on('button.enable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.enable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable button's input     <pre><code>buttons.on('button.disalbe', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.disalbe', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>buttons.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul>"},{"location":"ui-fixwidthbuttons/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable a button's input     <pre><code>buttons.setButtonEnable(index);\n// buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Enable all buttons' input     <pre><code>buttons.setButtonEnable();\n// buttons.setButtonEnable(true);\n</code></pre></li> <li>Disable     <pre><code>buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Disable all buttons' input     <pre><code>buttons.setButtonEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>buttons.toggleButtonEnable(index);\n</code></pre></li> <li>Toggle all buttons's input     <pre><code>buttons.toggleButtonEnable();\n</code></pre></li> <li>Get button's input enable     <pre><code>var enabled = bottons.getButtonEnable(index);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthbuttons/#add-child","title":"Add child","text":"<ul> <li>Add button child     <pre><code>buttons.addButton(gameObject)\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add non-button child, see <code>fixWidthSizer.add()</code> method.     <pre><code>buttons.add(gameObject,\n{\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\nindex: undefined\n}\n)\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#remove-child","title":"Remove child","text":"<ul> <li>Remove button child     <pre><code>buttons.removeButton(gameObject, destroyChild);\n</code></pre><ul> <li><code>gameObject</code> : <ul> <li>Game object, or array of game objects : Button game object.</li> <li>A number, or array of numbers : Index of button game object.</li> <li>A string, or array of strings : Name of button game object.</li> </ul> </li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttton children     <pre><code>buttons.clearButtons(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove a button or non-button child, see <code>fixWidthSizer.remove()</code> method.     <pre><code>buttons.remove(gameObject, destroyChild);\n</code></pre></li> <li>Remove all button or non-button children, see <code>fixWidthSizer.remove()</code> method.     <pre><code>buttons.removeAll(destroyChild);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#showhide-button","title":"Show/hide button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-fixwidthbuttons/#for-each-button","title":"For each button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-fixwidthbuttons/#checkboxesradio","title":"Checkboxes/radio","text":"<p>The same as checkboxes/radio of buttons.</p>"},{"location":"ui-fixwidthsizer/","title":"Fix-width sizer","text":""},{"location":"ui-fixwidthsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects into lines.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-fixwidthsizer/#live-demos","title":"Live demos","text":"<ul> <li>Fix-width sizer</li> <li>Scrollable, fix-width sizer</li> <li>Indent</li> <li>Drag-drop item</li> <li>Set children interactive</li> </ul>"},{"location":"ui-fixwidthsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fixwidthsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fixwidthsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FixWidthSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new FixWidthSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.fixWidthSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0, \n//     indentLeftOdd: 0, indentLeftEven: 0,\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(x, y, {\n// width: 2,\n// height: 2\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0,\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(x, y, width, height, {\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space betwen each child of a line.</li> <li><code>space.line</code> : Space between each line.</li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even line.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even item.</li> </ul> </li> <li><code>rtl</code> : Order of children in each line.<ul> <li><code>false</code> : Place children from left-to-right/top-to-bottom, default value.</li> <li><code>true</code> : Place children from right-to-left/bottom-to-top.</li> </ul> </li> <li><code>align</code> : Align children of a line.<ul> <li><code>0</code>, <code>'left'</code> : Align children of a line to left/top side.</li> <li><code>1</code>, <code>'right'</code> : Align children of a line to right/bottom side.</li> <li><code>2</code>, <code>'center'</code> : Align children of a line to ceter.</li> <li><code>3</code>, <code>'justify'</code>, <code>'justify-left'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to left/top side.</li> <li><code>4</code>, <code>'justify-right'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to right/bottom side.</li> <li><code>5</code>, <code>'justify-cneter'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to center.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.FixWidthSizer {\nconstructor(scene, x, y, minWidth, minHeight, orientation, space, config) {\nsuper(scene, x, y, minWidth, minHeight, orientation, space, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, orientation, space, config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\nindex: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, padding, key, index);\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds</li> <li>Or a plain object     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> <li><code>items</code> : Reserved key, for all children item.</li> </ul> </li> <li><code>index</code> : Insert child to.<ul> <li><code>undefined</code> : Insert child at last.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#insert-child","title":"Insert child","text":"<pre><code>sizer.insert(index, child, {\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insert(index, child, padding, key);\n</code></pre>"},{"location":"ui-fixwidthsizer/#insert-at-position","title":"Insert at position","text":"<pre><code>sizer.insertAtPosition(x, y, child, {\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insertAtPosition(x, y, index, child, padding, key);\n</code></pre>"},{"location":"ui-fixwidthsizer/#add-new-line","title":"Add new line","text":"<pre><code>sizer.addNewLine();\n</code></pre>"},{"location":"ui-fixwidthsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fixwidthsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#other-properties","title":"Other properties","text":"<p>See base-sizer object.</p>"},{"location":"ui-folder/","title":"Folder","text":""},{"location":"ui-folder/#introduction","title":"Introduction","text":"<p>A container with a title, foldable child, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-folder/#live-demos","title":"Live demos","text":"<ul> <li>Scrollable folders</li> <li>Folders</li> </ul>"},{"location":"ui-folder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-folder/#install-plugin","title":"Install plugin","text":""},{"location":"ui-folder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add folder object     <pre><code>var folder = scene.rexUI.add.folder(config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add folder object     <pre><code>var folder = scene.rexUI.add.folder(config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Folder } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add folder object     <pre><code>var folder = new Folder(scene, config);\nscene.add.existing(folder);\n</code></pre></li> </ul>"},{"location":"ui-folder/#add-folder-object","title":"Add folder object","text":"<pre><code>var folder = scene.rexUI.add.folder({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\ntitle: titleGameObject,    child: childGameObject,\n// customChildOrigin: false,\n\ntoggleByTarget: undefined,\ntoggleClickConfig: {\nmode:'pointerup',\nclickInterval: 100,\nthreshold: undefined,\n},\n\nalign: {\ntitle: 'left',\nchild: 'left',\n},\n\nexpand: {\ntitle: true,\nchild: true,\n},\n\ntransition: {\nduration: 200,\nexpandCallback: undefined,\ncollapseCallback: undefined,\n},\n\nreLayoutTarget: undefined,\n\nonExpandStart: undefined,\nonExpandComplete: undefined,\nonCollapseStart: undefined,\nonCollapseComplete: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nitem: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of folder.</li> <li><code>title</code> : Game object of title, required.</li> <li><code>child</code> : Game object of child, required.</li> <li><code>customChildOrigin</code> : <ul> <li><code>false</code> : Set origin of child to <code>0</code>, or <code>1</code> (if <code>rtl</code> is set to <code>true</code>). Default behavior.</li> <li><code>true</code> : Don't change origin of child.</li> </ul> </li> <li><code>toggleByTarget</code> : Toggle expanding/collapsing by clicking this target game object<ul> <li><code>undefined</code> : Toggle by clicking title game object.</li> </ul> </li> <li><code>toggleClickConfig</code> : Configuration of clicking behavior<ul> <li><code>undefined</code> : Use default configuration.</li> </ul> </li> <li><code>align.title</code>, <code>align.child</code> : Alignment of title, child game objects.    <ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top. Default behavior.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>expand.title</code>, <code>expand.child</code> : Expand width/height of title, child game objects.    <ul> <li><code>true</code> : Expand width/heigh. Default behavior.</li> <li><code>false</code> : Use origin width/height.</li> </ul> </li> <li><code>transition</code> : Configuration of expanding/collapsing transition.<ul> <li><code>transition.duration</code> : Duration of expanding/collapsing transition.</li> <li><code>transition.expandCallback</code> : Callback invoked when expading child. Default behavior is scale-up.</li> <li><code>transition.collapseCallback</code> : Callback invoked when collapsing child. Default behavior is scale-down.</li> </ul> </li> <li><code>reLayoutTarget</code> : Layout topmost sizer when expanding/collapsing start.<ul> <li><code>undefined</code> : Topmost sizer will be layouted again. Default behavior.</li> <li>A sizer : Layout this sizer.</li> </ul> </li> <li><code>onExpandStart</code> : Callback invoked when expanding start. Register this callback on <code>'expand.start'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onExpandComplete</code> : Callback invoked when expanding complete. Register this callback on <code>'expand.complete'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onCollapseStart</code> : Callback invoked when collapsing start. Register this callback on <code>'collapse.start'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onCollapseComplete</code> : Callback invoked when collapsing complete. Register this callback on <code>'collapse.complete'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-folder/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFolder extends RexPlugins.UI.Folder {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var folder = new MyFolder(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>folder.layout();\n</code></pre> <p>See also - dirty</p> <p>Note</p> <p>Layout topmost sizer when expanding/collapsing start.</p>"},{"location":"ui-folder/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = folder.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var icon = folder.getElement('title');\n</code></pre></li> <li>Child game object     <pre><code>var textObject = folder.getElement('child');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = folder.getElement('#' + name);\n// var gameObject = folder.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = folder.getByName(name);\n// var gameObject = folder.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-folder/#expandcollapse","title":"Expand/collapse","text":"<ul> <li>Expand     <pre><code>folder.expand();\n// folder.expand(duration);\n</code></pre> <pre><code>folder.expand(0);  // Immediately, won't invoke expandCallback\n</code></pre></li> <li>Collapse     <pre><code>folder.collapse();\n// folder.collapse(duration);\n</code></pre> <pre><code>folder.collapse(0);  // Immediately, won't invoke collapseCallback\n</code></pre></li> <li>Toggle     <pre><code>folder.toggle();\n// folder.toggle(duration);\n</code></pre> <pre><code>folder.toggle(0);  // Immediately, won't invoke expandCallback/collapseCallback\n</code></pre></li> <li>Get expanded state     <pre><code>var expanded = folder.expanded;\n</code></pre><ul> <li><code>expanded</code> : Initial value is <code>undefined</code></li> </ul> </li> </ul>"},{"location":"ui-folder/#transition-callbacks","title":"Transition callbacks","text":"<ul> <li>Set transition callbacks     <pre><code>folder.setExpandCallback(callback);\nfolder.setCollapseCallback(callback);\n</code></pre><ul> <li><code>callback</code> :     <pre><code>function(gameObject, duration) {\n}\n</code></pre><ul> <li><code>gameObject</code> : Child game object</li> </ul> </li> </ul> </li> <li>Transition duration<ul> <li>Set     <pre><code>folder.setTransitionDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = folder.transitionDuration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-folder/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-folder/#events","title":"Events","text":"<ul> <li>On expand-start     <pre><code>folder.on('expand.start', function(folder){\n\n})\n</code></pre> <pre><code>title.on('folder.expand', function(folder){\n\n})\n</code></pre> <pre><code>child.on('folder.expand', function(folder){\n\n})\n</code></pre></li> <li>On expand-complete     <pre><code>folder.on('expand.complete', function(folder){\n\n})\n</code></pre></li> <li>On collapse-start     <pre><code>folder.on('collapse.start', function(folder){\n\n})\n</code></pre> <pre><code>title.on('folder.collapse', function(folder){\n\n})\n</code></pre> <pre><code>child.on('folder.collapse', function(folder){\n\n})\n</code></pre></li> <li>On collapse-complete     <pre><code>folder.on('collapse.complete', function(folder){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/","title":"Grid buttons","text":""},{"location":"ui-gridbuttons/#introduction","title":"Introduction","text":"<p>A container with a group of buttons in grids.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridbuttons/#live-demos","title":"Live demos","text":"<ul> <li>Number pad</li> <li>Checkboxes/radio</li> </ul>"},{"location":"ui-gridbuttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridbuttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridbuttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.gridButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.gridButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridButtons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = new GridButtons(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#add-grid-sizer-object","title":"Add grid sizer object","text":"<pre><code>var buttons = scene.rexUI.add.gridButtons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n...\n],\n// row: 0, \n// column: 0,   // col: 0\n// createCellContainerCallback: function(scene, x, y) {\n//       return cellContainer;\n// },    \nexpand: true,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0     // [0, 0, 0]\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// buttonsType: undefined,\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code> : Minimum width. i.e. Width of this gridButtons will larger then this value.</li> <li><code>height</code> : Minimum height. i.e. Hieght of this gridButtons will larger then this value.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : 2d array of button game objects, or create buttons via <code>row</code>, <code>column</code>(or <code>col</code>), and <code>createCellContainerCallback</code>.</li> <li><code>createCellContainerCallback</code> : Callback to create buttons.     <pre><code>function(scene, x, y) {\nreturn cellContainer;\n}\n</code></pre></li> <li><code>expand</code> : Set <code>true</code> to expand width and height of buton game objects.</li> <li><code>space</code> : Space around this sizer, and space between columns/rows<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space around this sizer.</li> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game object, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-gridbuttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridButtons extends RexPlugins.UI.GridButtons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyGridButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridbuttons/#other-properties","title":"Other properties","text":"<p>See grid sizer object.</p>"},{"location":"ui-gridbuttons/#events","title":"Events","text":"<p>The same as events of buttons.</p>"},{"location":"ui-gridbuttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-gridbuttons/#showhide-button","title":"Show/hide button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-gridbuttons/#for-each-button","title":"For each button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-gridbuttons/#checkboxesradio","title":"Checkboxes/radio","text":"<p>The same as checkboxes/radio of buttons.</p>"},{"location":"ui-gridsizer/","title":"Grid sizer","text":""},{"location":"ui-gridsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects in grids.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridsizer/#live-demos","title":"Live demos","text":"<ul> <li>Create cell-containers</li> <li>Scrollable grids</li> <li>Add new row</li> <li>Add new column</li> <li>Full viewport</li> <li>Set children interactive</li> <li>Destroy cell</li> <li>Reset grid</li> </ul>"},{"location":"ui-gridsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.gridSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.gridSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new GridSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#add-grid-sizer-object","title":"Add grid sizer object","text":"<pre><code>var gridSizer = scene.rexUI.add.gridSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\ncolumn: 0,  // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// name: '',\n// draggable: false\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, {\ncolumn: 0,  // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// width: undefined,\n// height: undefined\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, width, height, {\ncolumn: 0,   // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, width, height, column, row, {\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config, gridSizer) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code> : Minimum width. i.e. Width of this gridSizer will larger then this value.</li> <li><code>height</code> : Minimum height. i.e. Hieght of this gridSizer will larger then this value.</li> <li><code>column</code>, or <code>col</code> : Amount of column grids.</li> <li><code>row</code> : Amount of row grids.</li> <li><code>columnProportions</code>, <code>rowProportions</code> : Proportion of each column/row.<ul> <li>Number : Apply this number proportion to each column/row</li> <li>Number array : Apply proportion of column/row through elements of this number array.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even row.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even column.</li> </ul> </li> <li><code>createCellContainerCallback</code> : Callback to create container(sizer) of each cell.     <pre><code>function(scene, x, y, config) {\nreturn cellContainer;\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Column, row index of this cell.</li> <li><code>config</code> : Config of adding child <pre><code>config.align = 'center';\nconfig.padding = {left: 0, right: 0, top: 0, bottom: 0};\nconfig.expand = false;\nconfig.key = undefined;\n</code></pre></li> <li><code>cellContainer</code> : Return a game object for this cell.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridSizer extends RexPlugins.UI.GridSizer {\nconstructor(scene, x, y, minWidth, minHeight, column, row) {\nsuper(scene, x, y, minWidth, minHeight, column, row);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var gridSizer = new MyGridSizer(scene, x, y, minWidth, minHeight, column, row);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#add-background","title":"Add background","text":"<pre><code>gridSizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>gridSizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to grid sizer</p> <pre><code>gridSizer.add(child, column, row);\n</code></pre> <p>or</p> <pre><code>gridSizer.add(child,\n{\ncolumn: 0,\nrow: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>gridSizer.add(child, column, row, align, padding, expand, key);\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>column</code>, <code>row</code> : Index of grid to add.<ul> <li><code>column</code> and <code>row</code> are numbers : Insert game object to cell (<code>column</code>, <code>row</code>). <ul> <li>Do nothing if that cell has item already.</li> </ul> </li> <li><code>column</code> and <code>row</code> are <code>undefined</code> : Search each column, each row to find an empty cell for inserting. <ul> <li>Add an new row (<code>gridSizer.addEmptyRow()</code>) if last row was full, then find an empty cell in new row.</li> </ul> </li> <li><code>column</code> is <code>undefined</code>, and <code>row</code> is <code>true</code> : Search each row, each column to find an empty cell for inserting.<ul> <li>Add an new column (<code>gridSizer.addEmptyColumn()</code>) if last column was full, then find an empty cell in new column.</li> </ul> </li> <li><code>column</code> is a number, and <code>row</code> is <code>undefined</code> : Search each row of column <code>column</code> to find an empty cell for inserting.<ul> <li>Add an new row (<code>gridSizer.addEmptyRow()</code>) if last row was full, then find an empty cell in new row.</li> </ul> </li> <li><code>column</code> is <code>undefined</code> and <code>row</code> is a number : Search each column of row <code>row</code> to find an empty cell for inserting. <ul> <li>Add an new column (<code>gridSizer.addEmptyColumn()</code>) if last column was full, then find an empty cell in new column.</li> </ul> </li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds</li> <li>Or a plain object     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Set <code>true</code> to height and width.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#insert-empty-rowcolumn","title":"Insert empty row/column","text":"<ul> <li>Insert an empty row     <pre><code>gridSizer.insertEmptyRow(rowIndex);\n// gridSizer.insertEmptyRow(rowIndex, proportion, space);\n</code></pre><ul> <li><code>proportion</code> : Proportion of this new row.<ul> <li><code>undefined</code> : Use proportion of 1st row as default value.</li> </ul> </li> <li><code>space</code> : Space between this new row and previous row.<ul> <li><code>undefined</code> : Use space of 1st row as default value.</li> </ul> </li> </ul> </li> <li>Add an empty row     <pre><code>gridSizer.addEmptyRow();\n// gridSizer.addEmptyRow(rowIndex, proportion, space);\n</code></pre></li> <li>Insert an empty column     <pre><code>gridSizer.insertEmptyColumn(colIndex);\n// gridSizer.insertEmptyColumn(colIndex, proportion, space);\n</code></pre><ul> <li><code>proportion</code> : Proportion of this new column.<ul> <li><code>undefined</code> : Use proportion of 1st column as default value.</li> </ul> </li> <li><code>space</code> : Space between this new column and previous column.<ul> <li><code>undefined</code> : Use space of 1st column as default value.</li> </ul> </li> </ul> </li> <li>Add an empty row     <pre><code>gridSizer.addEmptyColumn();\n// gridSizer.addEmptyColumn(colIndex, proportion, space);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#proportion","title":"Proportion","text":"<p>Set proportion of each column or row via</p> <pre><code>gridSizer.setColumnProportion(columnIndex, proportion);\ngridSizer.setRowProportion(rowIndex, proportion);\n</code></pre>"},{"location":"ui-gridsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>gridSizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridsizer/#grid-index-child","title":"Grid index &lt;-&gt; child","text":"<ul> <li>Grid index -&gt; child     <pre><code>var child = gridSizer.getChildAt(columnIndex, rowIndex);\n</code></pre></li> <li>Child -&gt; grid index     <pre><code>var gridIndex = gridSizer.childToGridIndex(child);\n// var gridIndex = gridSizer.childToGridIndex(child, out);\n</code></pre><ul> <li><code>gridIndex</code> : <code>{x, y}</code>, or <code>null</code> if child is not belong this sizer.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>gridSizer.remove(child);\n</code></pre>     or     <pre><code>gridSizer.removeAt(columnIndex, rowIndex);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>gridSizer.remove(child, true);\n</code></pre>     or     <pre><code>gridSizer.removeAt(columnIndex, rowIndex, true);\n</code></pre></li> <li>Remove all children     <pre><code>gridSizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>gridSizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>gridSizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>gridSizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#grid-size","title":"Grid size","text":"<ul> <li>Amount of column     <pre><code>var columnCount = gridSizer.columnCount;\n</code></pre></li> <li>Amount of row     <pre><code>var rowCount = gridSizer.rowCount;\n</code></pre></li> <li>Amount of grid = columnCount * rowCount     <pre><code>var gridCount = gridSizer.gridCount;\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = gridSizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = gridSizer.getElement('#' + name);\n// var gameObject = gridSizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = gridSizer.getByName(name);\n// var gameObject = gridSizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#reset-grid","title":"Reset grid","text":"<pre><code>sizer.resetGrid(column, row, columnProportions, rowProportions, space);\n</code></pre> <ul> <li><code>column</code> : Amount of column grids.</li> <li><code>row</code> : Amount of row grids.</li> <li><code>columnProportions</code>, <code>rowProportions</code> : Proportion of each column/row.<ul> <li>Number : Apply this number proportion to each column/row</li> <li>Number array : Apply proportion of column/row through elements of this number array.</li> </ul> </li> <li><code>space</code> :<ul> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> </ul> </li> </ul> <p>Note</p> <p>Children game objects will be removed without destroyed.</p> <p>Note</p> <p>Will invoke <code>createCellContainerCallback</code> to create cellContainer of each cell.</p>"},{"location":"ui-gridsizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-gridtable/","title":"Grid table","text":""},{"location":"ui-gridtable/#introduction","title":"Introduction","text":"<p>A container with a grid table, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridtable/#live-demos","title":"Live demos","text":"<ul> <li>Grid table</li> <li>Varying cell size</li> <li>Messages<ul> <li>Demo 1</li> <li>Demo 2</li> <li>Demo 3</li> </ul> </li> <li>Sizer cell: <ul> <li>Demo 1</li> <li>Demo 2</li> </ul> </li> <li>Separator</li> <li>Modal</li> <li>Drag item</li> <li>Fade-out-destroy cell</li> <li>Custom mask</li> </ul>"},{"location":"ui-gridtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridtable/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.rexUI.add.gridTable(config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.rexUI.add.gridTable(config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridTable } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new GridTable(scene, config);\nscene.add.existing(table);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#add-table-object","title":"Add table object","text":"<pre><code>var table = scene.rexUI.add.gridTable({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nscrollMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\ntable: {\nwidth: undefined,\nheight: undefined,\n\ncellWidth: undefined,\ncellHeight: undefined,\ncolumns: 1,\n// rows: 1,\nmask: {\npadding: 0,\n// updateMode: 0,\n},\n// enableLayer: false,\ninteractive: true,\nreuseCellContainer: false,\n\n// click: undefined,\n// tap: undefined,\n// press: undefined,\n// swipe: undefined,\n},\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// }.\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntable: 0,\n// table: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\ncreateCellContainerCallback: function(cell, cellContainer) {\nvar scene = cell.scene,\nwidth = cell.width,\nheight = cell.height,\nitem = cell.item,\nitems = cell.items,\nindex = cell.index;\nif (cellContainer === null) { // No reusable cell container, create a new one\n// cellContainer = scene.rexUI.add.label();\n}\n// Set child properties of cell container ...\n\n// cell.setCellContainerAlign();  // Set alignment of cellContainer\n\nreturn cellContainer; // or null\n},\n\nitems: [],\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.<ul> <li>Set <code>width</code> to <code>undefined</code>, and <code>table.width</code> is not <code>undefined</code>, will count width via table + slider.</li> <li>Set <code>height</code> to <code>undefined</code>, and <code>table.height</code> is not <code>undefined</code>, will count height via table + slider.</li> </ul> </li> <li><code>scrollMode</code> : Scroll grid table vertically, or horizontally.<ul> <li><code>0</code>, <code>'vertical'</code>, or <code>'v'</code>, <code>'y'</code> : Scroll panel vertically. Default value.</li> <li><code>1</code>, <code>'horizontal'</code>, or <code>'h'</code>. <code>'x'</code> : Scroll panel horizontally.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>table</code> : Configuration of grid table core.<ul> <li><code>table.width</code> : Width of table, in pixels.<ul> <li>Set to <code>undefined</code> to expand table width to fit this grid table object.</li> </ul> </li> <li><code>table.height</code> : Height of table, in pixels.<ul> <li>Set to <code>undefined</code> to expand table height to fit this grid table object.</li> </ul> </li> <li><code>table.cellHeight</code> : Default height of each cell.<ul> <li>Necessary field in vertical scrollMode.</li> <li><code>undefined</code> :  Expand cell height to fit table height, in horizontal scrollMode.</li> </ul> </li> <li><code>table.cellWidth</code> : Width of each cell.<ul> <li>Necessary field in horizontal scrollMode.</li> <li><code>undefined</code> : Expand cell width to fit table width, in vertical scrollMode.</li> </ul> </li> <li><code>table.columns</code> : Columns count of each row. Can be used in vertical or horizontal scroll mode.</li> <li><code>table.rows</code> : Rows count of each column. Can be used in horizontal scroll mode.</li> <li><code>table.mask</code> : A rectangle mask of cells<ul> <li><code>table.mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>table.mask.updateMode</code> : When to update cells mask<ul> <li><code>0</code>, or <code>update</code> : Apply mask to cell container only when <code>table.updateTable()</code> is invoked. Default behavior.</li> <li><code>1</code>, or <code>everyTick</code> : Apply mask to cell container every tick. Use this mode if game objects of cell are moved after <code>table.updateTable()</code> and still been masked.       </li> </ul> </li> <li><code>false</code> : No mask.</li> </ul> </li> <li><code>table.enableLayer</code> : <ul> <li><code>false</code> : Add cell game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add cell game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>table.reuseCellContainer</code> : <ul> <li><code>true</code> : Reuse cell container when creating new cell container. </li> <li><code>false</code> : Destory cell container when cell is invisible, create new cell container when cell is visible. Default behavior.</li> </ul> </li> <li><code>table.interactive</code> : Set <code>true</code> to install touch events (tap/press/over/out/click). Default value is <code>true</code>.</li> <li><code>table.click</code> : Configuration of cell-click behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default click behavior.</li> </ul> </li> <li><code>table.tap</code> : Configuration of cell-tap behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default tap behavior.</li> </ul> </li> <li><code>table.press</code> : Configuration of cell-press behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default press behavior.</li> </ul> </li> <li><code>table.swipe</code> : Configuration of cell-swipe behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default swipe behavior.</li> </ul> </li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : Game object of slider background, optional.</li> <li><code>slider.track</code> : Game object of track.</li> <li><code>slider.thumb</code> : Game object of thumb.</li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over table.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>createCellContainerCallback</code> : Callback to return a container object, or <code>null</code> of each visible cell.<ul> <li>Properties of <code>cell</code> parameter<ul> <li><code>cell.scene</code> : Scene of this grid table object.</li> <li><code>cell.width</code> : Width of this cell, in pixels.</li> <li><code>cell.height</code> : Height of this cell, in pixels.</li> <li><code>cell.item</code> : Item of this cell to display.</li> <li><code>cell.items</code> : Array of item data for each cell, equal to <code>items</code> parameter.</li> <li><code>cell.index</code> : Index of this cell.</li> </ul> </li> <li>Alignment of cellContainer :      <pre><code>cell.setCellContainerAlign(align);\n</code></pre><ul> <li><code>align</code> :<ul> <li><code>undefined</code> : Set position of cellContainer to left-top of cell space. Default behavior.</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center of cell space.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center of cell space.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center of cell space.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center of cell space.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center of cell space.         </li> </ul> </li> </ul> </li> <li>If <code>cell.align</code> is <code>undefined</code> (default value), Origin of returned cell container will be set to (0, 0)</li> <li><code>cellContainer</code> : Cell container picked from object pool for reusing. Set <code>reuseCellContainer</code> to <code>true</code> to enable this feature.<ul> <li><code>null</code> : No cell container available.</li> <li>Game object : Reusable cell container.</li> </ul> </li> </ul> </li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.table</code> :<ul> <li>A number: Space between table object and slider object.</li> <li>An object: Padding of table object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.table.top</code>, <code>space.table.bottom</code> : Top, bottom padding space of table object.</li> <li><code>space.table.right</code> : Space between table object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.table.left</code>, <code>space.table.right</code> : Left, right padding space of table object.</li> <li><code>space.table.bottom</code> : Space between table object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and table.</li> <li><code>space.footer</code> : Space between footer and table.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>items</code> : Array of item data for each cell.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-gridtable/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridTable extends RexPlugins.UI.GridTable {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var table = new MyGridTable(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>table.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridtable/#items","title":"Items","text":"<ul> <li>Set     <pre><code>table.setItems(items);\n</code></pre><ul> <li><code>items</code> : Array of item data for each cell.</li> <li>This method will update each visible cell of grid table.</li> </ul> </li> <li>Clear all items     <pre><code>table.setItems();\n</code></pre></li> <li>Get     <pre><code>var items = table.items;\n</code></pre></li> <li>Add item <pre><code>Phaser.Utils.Array.Add(table.items, item);\ntable.refresh();\n</code></pre></li> <li>Insert item <pre><code>Phaser.Utils.Array.AddAt(table.items, item, index);\ntable.refresh();\n</code></pre></li> <li>Remove item <pre><code>Phaser.Utils.Array.Remove(table.items, item);\ntable.refresh();\n</code></pre></li> <li>Remove item at index <pre><code>Phaser.Utils.Array.RemoveAt(table.items, index);\ntable.refresh();\n</code></pre></li> <li>Remove items between indexes <pre><code>Phaser.Utils.Array.RemoveBetween(table.items, startIndex, endIndex);\ntable.refresh();\n</code></pre></li> <li>Remove random item <pre><code>Phaser.Utils.Array.RemoveRandomElement(table.items);\ntable.refresh();\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#cell-container","title":"Cell container","text":"<ul> <li>Get     <pre><code>var container = table.getCellContainer(cellIndex);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-content","title":"Scroll content","text":"<ul> <li>Set     <pre><code>table.childOY = oy;\n// table.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>table.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>table.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>table.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = table.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = table.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = table.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = textArea.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>table.t = t;  // t: 0~1\n// table.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>table.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = table.t;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>table.scrollToTop();\n</code></pre><ul> <li>Equal to <code>table.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>table.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>table.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-gridtable/#scroll-to-row","title":"Scroll to row","text":"<ul> <li>Scroll to next row     <pre><code>table.scrollToNextRow();\n</code></pre></li> <li>Scroll to next n row     <pre><code>table.scrollToNextRow(n);\n</code></pre></li> <li>Scroll to row     <pre><code>table.scrollToRow(rowIndex);\n</code></pre></li> <li>Get current row index     <pre><code>var rowIndex = table.startRowIndex;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>table.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>table.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = table.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>table.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>table.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = table.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-gridtable/#refresh-table-cells","title":"Refresh table cells","text":"<ul> <li>Refresh all visible cells     <pre><code>table.refresh();\n</code></pre><ul> <li>Equal to <code>table.setItems(table.items)</code>.</li> </ul> </li> <li>Update a visible cell     <pre><code>table.updateVisibleCell(cellIndex);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#table-size","title":"Table size","text":"<ul> <li>Table width     <pre><code>var tableWidth = table.getElement('table').tableWidth;\n</code></pre></li> <li>Table height     <pre><code>var tableHeight = table.getElement('table').tableHeight;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-gridtable/#events","title":"Events","text":"<ul> <li>Pointer-down cell     <pre><code>table.on('cell.down', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-up cell     <pre><code>table.on('cell.up', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over cell     <pre><code>table.on('cell.over', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out cell     <pre><code>table.on('cell.out', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Click cell     <pre><code>table.on('cell.click', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Tap cell     <pre><code>table.on(tapEventName, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>tapEventName</code> : <code>'cell.1tap'</code>, <code>'cell.2tap'</code>, <code>'cell.3tap'</code>, etc ...</li> <li><code>cellContainer</code> : Container game object of triggered cell.</li> <li><code>cellIndex</code> : Index of triggered cell.</li> </ul> </li> <li>Press cell     <pre><code>table.on(`cell.pressstart`, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre> <pre><code>table.on(`cell.pressend`, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Swipe cell     <pre><code>table.on(swipeEventName, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>swipeEventName</code> : <code>'cell.swipeleft'</code>, <code>'cell.swiperight'</code>, <code>'cell.swipeup'</code>, <code>'cell.swipedown'</code>.</li> </ul> </li> <li>Scroll table     <pre><code>table.on('scroll', function(table) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>table.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>table.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = table.getElement('background');\n</code></pre></li> <li>Grid table <pre><code>var tableBody = table.getElement('table');\n</code></pre></li> <li>Layer of gridtable, assigned at config <code>table.mask.layer</code>.     <pre><code>var layer = table.getElement('tableLayer');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = table.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = table.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller <pre><code>var scroller = table.getElement('scroller');\n</code></pre></li> <li>Header game object     <pre><code>var tableBody = table.getElement('header');\n</code></pre></li> <li>Footer game object     <pre><code>var tableBody = table.getElement('footer');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = table.getElement('#' + name);\n// var gameObject = table.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = table.getByName(name);\n// var gameObject = table.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-holygrail/","title":"Holy grail","text":""},{"location":"ui-holygrail/#introduction","title":"Introduction","text":"<p>Layout elements in Holy grail style.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-holygrail/#live-demos","title":"Live demos","text":"<ul> <li>Simple</li> <li>Align</li> <li>Layout modes</li> </ul>"},{"location":"ui-holygrail/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-holygrail/#install-plugin","title":"Install plugin","text":""},{"location":"ui-holygrail/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = scene.rexUI.add.holyGrail(config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = scene.rexUI.add.holyGrail(config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { HolyGrail } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = new HolyGrail(scene, config);\nscene.add.existing(holyGrail);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#add-holygrail-object","title":"Add holyGrail object","text":"<pre><code>var holyGrail = scene.rexUI.add.holyGrail({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\nheader: headerGameObject,\n\nleftSide: leftSideGameObject,\n\ncontent: contentGameObject,\n\nrightSide: rightSideGameObject,\n\nfooter: footerGameObject,\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nheader: 0,  // {left, right, top, bottom}\nfooter: 0,  // {left, right, top, bottom}\nleftSide: 0, // {left, right, top, bottom}\nrightSide: 0, // {left, right, top, bottom}\n},\n\n// proportion: {\n//     header: 0,\n//     footer: 0,\n//     leftSide: 0,\n//     rightSide: 0,\n//     content: 1,\n// },\n\n// expand: {\n//     header: true,\n//     footer: true,\n//     leftSide: true,\n//     rightSide: true,\n//     content: false,\n// },\n\n// align: {\n//     header: 'center',\n//     footer: 'center',\n//     leftSide: 'center',\n//     rightSide: 'center',\n//     content: 'center',\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : Expand left side, right side to bottom row.<ul> <li><code>0</code>, or <code>'FFF'</code> : Bottom row is footer. Default behavior</li> <li><code>1</code>, or <code>'LFF'</code> : Left side will expand down to bottom row.</li> <li><code>2</code>, or <code>'FFR'</code> : Right side will expand down to bottom row.</li> <li><code>3</code>, or <code>'LFR'</code> : Left side and right side will expand down to bottom row.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of holyGrail.</li> <li><code>header</code> : Game object of header, optional.<ul> <li>Will fixed height (<code>proportion=0</code>) and expand width (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>leftSide</code> : Game object of leftSide, optional.<ul> <li>Will fixed width (<code>proportion=0</code>) and expand height (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>content</code> : Game object of content, optional.<ul> <li>Will expand width (<code>proportion=1</code>) and expand height (<code>expand=true</code>) width default setting. </li> </ul> </li> <li><code>rightSide</code> : Game object of rightSide, optional.<ul> <li>Will fixed width (<code>proportion=0</code>) and expand height (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>footer</code> : Game object of footer, optional.<ul> <li>Will fixed height (<code>proportion=0</code>) and expand width (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.header</code> : <ul> <li>A number : Space between header game object and below game object, equal to <code>{bottom}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of header game object.</li> </ul> </li> <li><code>space.footer</code> <ul> <li>A number : Space between footer game object and above game object, equal to <code>{top}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of footer game object.</li> </ul> </li> <li><code>space.leftSide</code> : <ul> <li>A number : Space between leftSide game object and content game object, equal to <code>{right}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of leftSide game object.</li> </ul> </li> <li><code>space.rightSide</code> : <ul> <li>A number : Space between rightSide game object and content game object, equal to <code>{left}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of rightSide game object.</li> </ul> </li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width of header game object. Default is <code>true</code>.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width of footer game object. Default is <code>true</code>.</li> <li><code>expand.leftSide</code> : Set <code>true</code> to expand height of leftSide game object. Default is <code>true</code>.</li> <li><code>expand.rightSide</code> : Set <code>true</code> to expand height of rightSide game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand height of content game object. Default is <code>true</code>.</li> </ul> </li> <li><code>proportion</code> : Fixed width or height of element<ul> <li><code>proportion.header</code> : <ul> <li><code>0</code> : Fixed height. Default behavior.</li> <li><code>1</code>, or other numbers : Expand height.</li> </ul> </li> <li><code>proportion.footer</code> :<ul> <li><code>0</code> : Fixed height. Default behavior.</li> <li><code>1</code>, or other numbers : Expand height.</li> </ul> </li> <li><code>proportion.leftSide</code> :<ul> <li><code>0</code> : Fixed width. Default behavior.</li> <li><code>1</code>, or other numbers : Expand width.</li> </ul> </li> <li><code>proportion.rightSide</code> :<ul> <li><code>0</code> : Fixed width. Default behavior.</li> <li><code>1</code>, or other numbers : Expand width.</li> </ul> </li> <li><code>proportion.content</code> :<ul> <li><code>0</code> : Fixed width.</li> <li><code>1</code>, or other numbers : Expand width. Default value is <code>1</code>.</li> </ul> </li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code></li> <li><code>align.footer</code></li> <li><code>align.leftSide</code></li> <li><code>align.rightSide</code></li> <li><code>align.content</code></li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-holygrail/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyHolyGrail extends RexPlugins.UI.HolyGrail {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var holyGrail = new MyHolyGrail(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#layout-modes","title":"Layout modes","text":""},{"location":"ui-holygrail/#mode-0","title":"Mode 0","text":"<p>Bottom row is footer. Default behavior.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-1","title":"Mode 1","text":"<p>Left side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-2","title":"Mode 2","text":"<p>Right side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-3","title":"Mode 3","text":"<p>Left side and right side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>holyGrail.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-holygrail/#re-build","title":"Re-build","text":"<p>Destroy current elements then add elements with new config.</p> <pre><code>holyGrail.build({\n// Elements\nbackground: backgroundGameObject,\n\nheader: headerGameObject,\n\nleftSide: leftSideGameObject,\n\ncontent: contentGameObject,\n\nrightSide: rightSideGameObject,\n\nfooter: footerGameObject,\n\nlayoutMode: 0,\n\n// Space\nspace: {        header: 0,  // {left, right, top, bottom}\nfooter: 0,  // {left, right, top, bottom}\nleftSide: 0, // {left, right, top, bottom}\nrightSide: 0, // {left, right, top, bottom}\n},\n\n// proportion: {\n//     header: 0,\n//     footer: 0,\n//     leftSide: 0,\n//     rightSide: 0,\n//     content: 1,\n// },\n\n// expand: {\n//     header: true,\n//     footer: true,\n//     leftSide: true,\n//     rightSide: true,\n//     content: false,\n// },\n\n// align: {\n//     header: 'center',\n//     footer: 'center',\n//     leftSide: 'center',\n//     rightSide: 'center',\n//     content: 'center',\n// },\n})\n</code></pre>"},{"location":"ui-holygrail/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-holygrail/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = holyGrail.getElement('background');\n</code></pre></li> <li>Header game object     <pre><code>var header = holyGrail.getElement('header');\n</code></pre></li> <li>Left-side game object     <pre><code>var leftSide = holyGrail.getElement('leftSide');\n</code></pre></li> <li>Content game object     <pre><code>var content = holyGrail.getElement('content');\n</code></pre></li> <li>Right-side game object     <pre><code>var rightSide = holyGrail.getElement('rightSide');\n</code></pre></li> <li>Footer game object     <pre><code>var footer = holyGrail.getElement('footer');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = holyGrail.getElement('#' + name);\n// var gameObject = holyGrail.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = holyGrail.getByName(name);\n// var gameObject = holyGrail.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-knob/","title":"Knob","text":""},{"location":"ui-knob/#introduction","title":"Introduction","text":"<p>A knob button based on circular progress shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-knob/#live-demos","title":"Live demos","text":"<ul> <li>Knob</li> </ul>"},{"location":"ui-knob/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-knob/#install-plugin","title":"Install plugin","text":""},{"location":"ui-knob/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add knob object     <pre><code>var knob = scene.rexUI.add.knob(config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add knob object     <pre><code>var knob = scene.rexUI.add.knob(config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Knob } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add knob object     <pre><code>var knob = new Knob(scene, config);\nscene.add.existing(knob);\n</code></pre></li> </ul>"},{"location":"ui-knob/#add-knob-object","title":"Add knob object","text":"<pre><code>var knob = scene.rexUI.add.knob({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\nknobDepth: 0,\n\ntext: undefined,\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\ninput: 'pan',\n\nvalue: 0,\ngap: undefined,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of knob.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>knobDepth</code> : Depth of knob (circular progress). Default value is <code>0</code>.</li> <li><code>text</code> : Label, Text, BBCodeText, or TagText, which has <code>setText(text)</code> method, optional.<ul> <li>Don't set <code>textColor</code>, <code>textStrokeColor</code> if <code>text</code> parameter is provided.</li> <li>Depth of text object ought to larger than knob (circular progress), to put text object in front of knob.</li> </ul> </li> <li>Display text : <ul> <li><code>textColor</code> : Color of display text. Default is <code>undefined</code>.</li> <li><code>textStrokeColor</code>, <code>textStrokeThickness</code> : Stroke color, stroke line width of display text. Default is <code>undefined</code>.</li> <li><code>textSize</code>, <code>textFamily</code>, <code>textStyle</code> : Size, family, style of display text.</li> </ul> </li> <li><code>textFormatCallback</code>, <code>textFormatCallbackScope</code> : Formating callback of display text. ex:     <pre><code>function(value) {\nreturn Math.floor(value * 100).toString();\n}\n</code></pre>     Default value is <code>undefined</code>.</li> <li><code>input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning circular progress. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control knob by touching circular progress.</li> <li><code>'none'</code>, or <code>-1</code> : Disable knob controlling.</li> </ul> </li> <li><code>value</code> : Initial value (0 ~ 1).</li> <li><code>gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disalbe this feature.</li> </ul> </li> <li><code>easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-knob/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyKnob extends RexPlugins.UI.Knob {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var knob = new MyKnob(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>knob.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-knob/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = knob.getElement('background');\n</code></pre></li> <li>Circular progress game object     <pre><code>var circularProgress = knob.getElement('knob');\n</code></pre></li> <li>Text game object     <pre><code>var text = knob.getElement('text');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = knob.getElement('#' + name);\n// var gameObject = knob.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = knob.getByName(name);\n// var gameObject = knob.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-knob/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = knob.enable;\n</code></pre></li> <li>Set     <pre><code>knob.setEanble(enable);\n</code></pre>     or     <pre><code>knob.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-knob/#value","title":"Value","text":"<p>Change value will also change the position of knob thumb and width of knob indicator.</p> <ul> <li>Get value     <pre><code>var value = knob.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = knob.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = knob.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>knob.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>knob.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>knob.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>knob.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>knob.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>knob.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-knob/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>knob.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>knob.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>knob.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>knob.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>knob.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-knob/#other-properties","title":"Other properties","text":"<p>See overlap sizer object, base sizer object, container-lite.</p>"},{"location":"ui-knob/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>knob.on('valuechange', function(newValue, oldValue, knob){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-label/","title":"Label","text":""},{"location":"ui-label/#introduction","title":"Introduction","text":"<p>A container with an icon, text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-label/#live-demos","title":"Live demos","text":"<ul> <li>Align</li> <li>Add to layer</li> <li>Text wrap in horizontal label</li> <li>Text wrap in vertical label</li> <li>Square fit icon</li> <li>Icon size</li> </ul>"},{"location":"ui-label/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-label/#install-plugin","title":"Install plugin","text":""},{"location":"ui-label/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.label(config);\n</code></pre></li> </ul>"},{"location":"ui-label/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.label(config);\n</code></pre></li> </ul>"},{"location":"ui-label/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Label } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new Label(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-label/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.label({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\nicon: iconGameObject,\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\n\naction: actionGameObject,\n// actionMask: false,\n// squareFitAction: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0, iconTop: 0, iconBottom: 0, iconLeft: 0, iconRight: 0,\n\ntext: 0,\nactionTop: 0, actionBottom: 0, actionLeft: 0, actionRight: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitIcon</code> : <ul> <li><code>true</code> : Resize icon size to square to fit label height/width.<ul> <li>Can't work wit <code>expandTextWidth: true</code></li> </ul> </li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object to <code>iconSize</code>x<code>iconSize</code></li> <li><code>iconWidth</code> : Set display width of icon game object to <code>iconWidth</code>. <ul> <li>If <code>iconHeight</code> is <code>undefined</code>, set <code>scaleY</code> of icon game object to <code>scaleX</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>iconHeight</code> : Set display height of icon game object to <code>iconHeight</code>. <ul> <li>If <code>iconWidth</code> is <code>undefined</code>, set <code>scaleX</code> of icon game object to <code>scaleY</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : <ul> <li><code>false</code> : Keep width of text to original size. Default behavior.</li> <li><code>true</code> : Expand width of text object. Will set display width by default.<ul> <li>Must set to <code>true</code> if using <code>scene.rexUI.wrapExpandText</code> method with any text game object.</li> <li>Can't work with <code>squareFitIcon: true</code>.</li> </ul> </li> </ul> </li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitAction</code> : <ul> <li><code>true</code> : Resize action icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object to <code>actionSize</code>x<code>actionSize</code></li> <li><code>actionWidth</code> : Set display width of action game object to <code>actionWidth</code>. <ul> <li>If <code>actionHeight</code> is <code>undefined</code>, set <code>scaleY</code> of action game object to <code>scaleX</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>actionHeight</code> : Set display height of action game object to <code>actionHeight</code>. <ul> <li>If <code>actionWidth</code> is <code>undefined</code>, set <code>scaleX</code> of action game object to <code>scaleY</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code>, <code>space.iconLeft</code>, <code>space.iconRight</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code>, <code>space.actionLeft</code>, <code>space.actionRight</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-label/#expand-size-of-text","title":"Expand size of text","text":"<p>Expand width/height of text when <code>expandTextWidth</code>/<code>expandTextHeight</code> is <code>true</code></p> <p>To resize text object, text object should have <code>resize</code> method. For example</p> <pre><code>class MyText extends Phaser.GameObjects.Text {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\nscene.add.existing(this);\n}\nresize(width, height) {\nthis.setFixedSize(width, height);\nreturn this;\n}\n}\n</code></pre> <p>Or uses bbcode text object, or tag text object</p>"},{"location":"ui-label/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLabel extends RexPlugins.UI.Label {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-label/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-label/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-label/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = label.text;\n</code></pre></li> <li>Set text string     <pre><code>label.setText(s);\n</code></pre>     or     <pre><code>label.text = s;\n</code></pre></li> <li>Append text string     <pre><code>label.appendText(text);\n// label.text += '\\n' + text;\n</code></pre>     or     <pre><code>label.appendText(text, false);\n// label.text += text;\n</code></pre></li> </ul>"},{"location":"ui-label/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-label/#reset-display-content","title":"Reset display content","text":"<pre><code>label.resetDisplayContent({\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n})\n</code></pre> <ul> <li><code>text</code> : Set text string.</li> <li><code>icon</code>, <code>iconFrame</code><ul> <li>A string : Set texture of icon game object.</li> <li><code>undefined</code>, or <code>null</code> : Hide icon game object.</li> <li><code>true</code> : Show icon game object without change its texture.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object.</li> <li><code>action</code>, <code>actionFrame</code><ul> <li>A string : Set texture of icon game object.</li> <li><code>undefined</code>, or <code>null</code> : Hide action game object.</li> <li><code>true</code> : Show action game object without change its texture.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object.</li> </ul> <p>Run <code>label.layout()</code> after this method, to layout children again.</p>"},{"location":"ui-label/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-menu/","title":"Menu","text":""},{"location":"ui-menu/#introduction","title":"Introduction","text":"<p>A container with buttons and sub-menu.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-menu/#live-demos","title":"Live demos","text":"<ul> <li>Pop-up menu</li> <li>Static menu</li> <li>Drop-down list</li> <li>Expand, collapse</li> <li>Custom transit</li> </ul>"},{"location":"ui-menu/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-menu/#install-plugin","title":"Install plugin","text":""},{"location":"ui-menu/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add menu object     <pre><code>var menu = scene.rexUI.add.menu(config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add menu object     <pre><code>var menu = scene.rexUI.add.menu(config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Menu } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add menu object     <pre><code>var menu = new Menu(scene, config);\nscene.add.existing(menu);\n</code></pre></li> </ul>"},{"location":"ui-menu/#add-menu-object","title":"Add menu object","text":"<pre><code>var menu = scene.rexUI.add.menu({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n\n// popup: true,\n// orientation: 1,\n// subMenuSide: undefined,\nitems: [],\n\ncreateBackgroundCallback: function(items) {\nvar scene = items.scene;\n// background = ...\nreturn background;\n},\ncreateBackgroundCallbackScope: undefined,\n\ncreateButtonCallback: function(item, index, items) {\nvar scene = item.scene;\n// var isFirstButton = (index === 0);\n// var isLastButton = (index === (items.length - 1));\n// container = ...\nreturn container;\n},\ncreateButtonCallbackScope: undefined,\n\neaseIn: 0,\n// easeIn: {\n//     duration: 500,\n//     orientation: undefined,\n//     ease: 'Cubic'\n// },\ntransitIn: undefined,\n// transitIn: function(menu, duration) {  },\n\neaseOut: 0,\n// easeOut: {\n//     duration: 100,\n//     orientation: undefined,\n//     ease: 'Linear'\n// },\ntransitOut: undefined,\n// transitOut: function(menu, duration) {  },\n\n// expandEvent: 'button.click',\n\n// pointerDownOutsideCollapsing: true,\n\n// childrenKey: 'children',\n\nname: '',\n// draggable: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>popup</code> : <ul> <li><code>true</code> : Pop-up menu, will layout automatically, push inside viewport. Default behavior.</li> <li><code>false</code> : Static menu, can put into another sizer, won't layout automatically.</li> </ul> </li> <li><code>orientation</code> : Main orientation of the menu, default is <code>1</code> (top to bottom)<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange buttons from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange buttons from top to bottom.</li> </ul> </li> <li><code>items</code> : Array of item data for each button. Each item has<ul> <li><code>children</code> : An array of items for sub-menu, optional. Can change by <code>childrenKey</code> parameter.</li> <li>Other custom properties</li> </ul> </li> <li><code>createBackgroundCallback</code> : Callback to return container object of menu's bckground.<ul> <li>Properties of <code>items</code> parameter<ul> <li><code>items.scene</code> : Scene of this menu object.</li> </ul> </li> </ul> </li> <li><code>createButtonCallback</code> : Callback to return container object of each item.<ul> <li>Properties of <code>item</code> parameter<ul> <li><code>item.scene</code> : Scene of this menu object.</li> <li>Other custom properties</li> </ul> </li> </ul> </li> <li><code>easeIn</code> : Duration of expanding menu.<ul> <li>A number : Duration of ease, in milliseconds.</li> <li>An object :<ul> <li><code>easeIn.duration</code> : Duration of ease, in milliseconds.</li> <li><code>easeIn.ease</code> : Ease function, default is <code>'Cubic'</code></li> <li><code>easeIn.orientation</code> : Orientation of ease.<ul> <li><code>undefined</code> : The same orientation with menu's orientation.</li> <li><code>'h'</code>, <code>'x'</code>, or <code>0</code> : Pop-up menu horizontally.</li> <li><code>'v'</code>, <code>'y'</code>, or <code>1</code> : Pop-up menu vertically.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Tween behavior of expanding menu.<ul> <li><code>undefined</code> : Expand menu by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(menu, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>easeOut</code> : Duration of collapsing menu<ul> <li>A number : Duration of ease, in milliseconds.</li> <li>An object :<ul> <li><code>easeOut.duration</code> : Duration of ease, in milliseconds.</li> <li><code>easeOut.ease</code> : Ease function, default is <code>'Linear'</code></li> <li><code>easeOut.orientation</code> : Orientation of ease.<ul> <li><code>undefined</code> : The same orientation with menu's orientation.</li> <li><code>'h'</code>, <code>'x'</code>, or <code>0</code> : Scale-down menu horizontally.</li> <li><code>'v'</code>, <code>'y'</code>, or <code>1</code> : Scale-down menu vertically.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>transitOut</code> : Tween behavior of collapsing menu.<ul> <li><code>undefined</code> : Collapse menu by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(menu, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>expandEvent</code> : Event name of expanding sub-menu.<ul> <li><code>'button.click'</code> : Default value</li> <li><code>'button.over'</code></li> </ul> </li> <li><code>pointerDownOutsideCollapsing</code> :<ul> <li><code>true</code> : Collapse all menus (<code>popup:true</code>), or sub-menus (<code>popup:false</code>) when pointer-down outside of all menus. Default behavior.</li> <li><code>false</code> : Ignore pointer-down outside detection.</li> </ul> </li> <li><code>childrenKey</code> : Key of sub-menu in element of <code>items</code>.<ul> <li><code>children</code> : Default value.</li> </ul> </li> <li><code>subMenuSide</code> : Side of sub-menu<ul> <li><code>undefined</code> : Determine side of sub-menu automatically.</li> <li><code>'right'</code>, or <code>0</code> : Put sub-menu at right side. Used with <code>orientation</code> is set to <code>y</code>.</li> <li><code>'left'</code>, or <code>2</code> : Put sub-menu at left side. Used with <code>orientation</code> is set to <code>y</code>.</li> <li><code>'up'</code>, or <code>3</code> : Put sub-menu at up side. Used with <code>orientation</code> is set to <code>x</code>.</li> <li><code>'down'</code>, or <code>1</code> : Put sub-menu at down side. Used with <code>orientation</code> is set to <code>x</code>.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-menu/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyMenu extends RexPlugins.UI.Menu {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var menu = new MyMenu(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#collapse","title":"Collapse","text":"<ul> <li>Collapse menu     <pre><code>menu.collapse();\n</code></pre></li> <li>Collapse sub-menu     <pre><code>menu.collapseSubMenu();\n</code></pre></li> </ul>"},{"location":"ui-menu/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-menu/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>menu.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>menu.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out button     <pre><code>menu.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Expand(Pop-up start) sub-menu     <pre><code>menu.on('expand', function(subMenu, parentButton) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>subMenu</code> : Sub-menu.</li> <li><code>parentButton</code> : Game object of triggered button.</li> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> <li>Pop-up root-menu, or sub-menu completely     <pre><code>menu.on('popup.complete', function(menu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>menu</code> : Root-menu, or sub-menu</li> </ul> </li> <li>Collapse(Scale-down starting) root-menu, or sub-menu     <pre><code>menu.on('collapse', function(subMenu, parentButton, rootMenu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>subMenu</code> : Sub-menu.</li> <li><code>parentButton</code> : Game object of triggered button.</li> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> <li>Scale-down root-menu completely     <pre><code>menu.on('scaledown.complete', function(rootMenu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/","title":"Name value label","text":""},{"location":"ui-namevaluelabel/#introduction","title":"Introduction","text":"<p>A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-namevaluelabel/#live-demos","title":"Live demos","text":"<ul> <li>Name-value label</li> </ul>"},{"location":"ui-namevaluelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-namevaluelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-namevaluelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.nameValueLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.nameValueLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { NameValueLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new NameValueLabel(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.nameValueLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\n\nnameText: nameTextGameObject,\nvalueText: valueTextGameObject,\n// valueTextFormatCallback: function(value, min, max) {\n//     return `${value}/${max}`;\n// },\nbar: {\ntrackColor: undefined,\ntrackThickness: 2,\ntrackStrokeColor: undefined,\nbarColor: undefined,\nbarColor2: undefined,\n\nskewX: 0,\n\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'linear'\n},\n}, // bar: undefined,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {        text: 'bottom',  // 'top', 'center', 'bottom'\n},\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0, iconTop: 0, iconBottom: 0,\nname: 0, value: 0,\nbar:0, barBottom: 0, barLeft: 0, barRight: 0,\ntext: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.   </li> </ul> </li> <li><code>nameText</code> : Game object of nameText. <ul> <li>OriginX of nameText will be set to <code>0</code>.</li> <li>Empty text will be set to a space character <code>' '</code>. To preserve height of this text game object.</li> </ul> </li> <li><code>valueText</code> : Game object of valueText.<ul> <li>OriginX of nameText will be set to <code>1</code>.</li> <li>Empty text will be set to a space character <code>' '</code>. To preserve height of this text game object.</li> </ul> </li> <li><code>valueTextFormatCallback</code> : An optional callback to return a string set to <code>valueText</code> game object when invokeing <code>label.setValue(value, min, max)</code> method.     <pre><code>function(value, min, max) {\nreturn `${value}/${max}`;\n}\n</code></pre></li> <li><code>bar</code> : Game object of bar, or config of horizontal line progress bar, or <code>undefined</code>.<ul> <li><code>undefined</code> : No bar game object.</li> <li><code>bar.trackColor</code> : Fill color of bar's track, in number or css string value.</li> <li><code>bar.trackStrokeColor</code> : Stroke color of bar's track, in number or css string value.</li> <li><code>bar.trackThickness</code> : Stroke line width of bar's track.</li> <li><code>bar.barColor</code>, <code>bar.barColor2</code> : Fill color of bar, in number or css string value. Assign gradient start color by <code>barColor2</code>.</li> <li><code>bar.skewX</code> : Horizontal skew of track and bar.</li> <li><code>bar.rtl</code> :<ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>bar.easeValue</code> : Parameters of easing value.<ul> <li><code>bar.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>bar.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.    </li> </ul> </li> </ul> </li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : <ul> <li><code>align.text</code> : Alignment of nameText, valueText game objects.<ul> <li><code>'top'</code>, <code>'center'</code>, or <code>'bottom'</code>. Default value is <code>'bottom'</code>.</li> </ul> </li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.name</code> : Left space of nameText game object.</li> <li><code>space.value</code> : Right space of valueText game object.</li> <li><code>space.bar</code>, <code>space.barLeft</code>, <code>space.barRight</code>, <code>space.barBottom</code> : Space around bar game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNameValueLabel extends RexPlugins.UI.NameValueLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyNameValueLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-namevaluelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>NameText game object     <pre><code>var nameTextObject = label.getElement('name');\n</code></pre></li> <li>ValueText game object     <pre><code>var valueTextObject = label.getElement('value');\n</code></pre></li> <li>Bar game object     <pre><code>var textObject = label.getElement('bar');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/#name-text","title":"Name text","text":"<ul> <li>Get nameText string     <pre><code>var s = label.nameText;\n</code></pre></li> <li>Set nameText string     <pre><code>label.setNameText(s);\n</code></pre>     or     <pre><code>label.nameText = s;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#value-text","title":"Value text","text":"<ul> <li>Get valueText string     <pre><code>var s = label.valueText;\n</code></pre></li> <li>Set valueText string     <pre><code>label.setValueText(s);\n</code></pre>     or     <pre><code>label.valueText = s;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#bar","title":"Bar","text":"<ul> <li>Get bar value     <pre><code>var s = label.barValue;\n</code></pre></li> <li>Set bar value     <pre><code>label.setBarValue(value);  // 0~1\n</code></pre>     or     <pre><code>label.setBarValue(value, min, max);  // min~max\n</code></pre>     or     <pre><code>label.barValue = t;  // 0~1\n</code></pre></li> <li>Ease bar value     <pre><code>label.easeBarValueTo(value);  // 0~1\n</code></pre>     or     <pre><code>label.easeBarValueTo(value, min, max);    // min~max\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame.     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#set-value","title":"Set value","text":"<p>Set valueText game object and bar game object.</p> <pre><code>label.setValue(value, min, max);\n</code></pre> <p>Will invoke <code>valueTextFormatCallback</code> callback.</p>"},{"location":"ui-namevaluelabel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-numberbar/","title":"Number bar","text":""},{"location":"ui-numberbar/#introduction","title":"Introduction","text":"<p>A container with an icon, slider, text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-numberbar/#live-demos","title":"Live demos","text":"<ul> <li>Number bar</li> <li>Color picker</li> <li>Video player</li> </ul>"},{"location":"ui-numberbar/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-numberbar/#install-plugin","title":"Install plugin","text":""},{"location":"ui-numberbar/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexuiplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js\",\n\"rexUI\",\n\"rexUI\"\n);\n</code></pre></li> <li>Add number bar object   <pre><code>var numberBar = scene.rexUI.add.numberBar(config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from \"phaser3-rex-plugins/templates/ui/ui-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexUI\",\nplugin: UIPlugin,\nmapping: \"rexUI\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add number bar object   <pre><code>var numberBar = scene.rexUI.add.numberBar(config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { NumberBar } from \"phaser3-rex-plugins/templates/ui/ui-components.js\";\n</code></pre></li> <li>Add number bar object   <pre><code>var sizer = new NumberBar(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#add-number-bar-object","title":"Add number bar object","text":"<pre><code>var numberBar = scene.rexUI.add.numberBar({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\nslider: {\nbackground: backgroundGameObject,\n/* \n        background: { \n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */    indicator: indicatorGameObject,\n/* \n        indicator: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ninput: 'drag',\ngap: undefined,        easeValue: {\nduration: 0,\nease: 'Linear'\n},\n}\ntext: textGameObject,\n\nvaluechangeCallback: function(newValue, oldValue, numberBar) {\n// numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\nslider: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of numberBar.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>slider</code> : Slider game object which composed of<ul> <li><code>slider.width</code> : Fixed width of slider, optional. Width of slider will be extended if this value is not set.</li> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disable this feature.</li> </ul> </li> <li><code>slider.easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>slider.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>slider.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.slider</code> : Space between slider game object and text game object.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-numberbar/#custom-class","title":"Custom class","text":"<ul> <li>Define class   <pre><code>class MyNumberBar extends RexPlugins.UI.NumberBar {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance   <pre><code>var numberBar = new MyNumberBar(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>numberBar.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-numberbar/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>Background game object     <pre><code>var background = numberBar.getElement(\"background\");\n</code></pre></li> <li>Icon game object     <pre><code>var icon = numberBar.getElement(\"icon\");\n</code></pre></li> <li>Slider game object<ul> <li>Slider background   <pre><code>var sliderBackground = numberBar.getElement(\"slider.background\");\n</code></pre></li> <li>Slider track   <pre><code>var sliderTrack = numberBar.getElement(\"slider.track\");\n</code></pre></li> <li>Slider indicator   <pre><code>var sliderIndicator = numberBar.getElement(\"slider.indicator\");\n</code></pre></li> <li>Slider thumb   <pre><code>var sliderThumb = numberBar.getElement(\"slider.thumb\");\n</code></pre></li> </ul> </li> <li>Text game object     <pre><code>var textObject = numberBar.getElement(\"text\");\n</code></pre></li> <li>Get by name   <pre><code>var gameObject = numberBar.getElement(\"#\" + name);\n// var gameObject = numberBar.getElement('#' + name, recursive);\n</code></pre>   or   <pre><code>var gameObject = numberBar.getByName(\"#\" + name);\n// var gameObject = numberBar.getByName(name, recursive);\n</code></pre></li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul>"},{"location":"ui-numberbar/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = numberBar.enable;\n</code></pre></li> <li>Set     <pre><code>numberBar.setEanble(enable);\n</code></pre>     or     <pre><code>numberBar.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value   <pre><code>var value = numberBar.getValue(min, max); // value : min ~ max\n</code></pre>   or   <pre><code>var value = numberBar.getValue(); // value: 0 ~ 1\n</code></pre>   or   <pre><code>var value = numberBar.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value   <pre><code>numberBar.setValue(value, min, max); // value: min ~ max\n</code></pre>   or   <pre><code>numberBar.setValue(value); // value: 0 ~ 1\n</code></pre>   or   <pre><code>numberBar.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value   <pre><code>numberBar.addValue(inc, min, max); // inc: min ~ max\n</code></pre>   or   <pre><code>numberBar.addValue(inc); // inc: 0 ~ 1\n</code></pre>   or   <pre><code>numberBar.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>numberBar.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>numberBar.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>numberBar.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>numberBar.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>numberBar.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-numberbar/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = numberBar.text;\n</code></pre></li> <li>Set text string     <pre><code>numberBar.setText(s);\n</code></pre>     or     <pre><code>numberBar.text = s;\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-numberbar/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>numberBar.on('valuechange', function (newValue, oldValue, numberBar) {\n// numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}, scope);\n</code></pre></li> <li>On input start     <pre><code>numberBar.on('inputstart', function(pointer) {\n\n}, scope);\n</code></pre></li> <li>On input end     <pre><code>numberBar.on('inputend', function(pointer) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/","title":"Overlap sizer","text":""},{"location":"ui-overlapsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects overlapped.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-overlapsizer/#live-demos","title":"Live demos","text":"<ul> <li>Overlap</li> <li>Fit viewport</li> </ul>"},{"location":"ui-overlapsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-overlapsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-overlapsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.overlapSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.overlapSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { OverlapSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new OverlapSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.overlapSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.overlapSizer(x, y, {\n// width: undefined,\n// height: undefined,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.overlapSizer(x, y, width, height, {\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.OverlapSizer {\nconstructor(scene, x, y, minWidth, minHeight, config) {\nsuper(scene, x, y, minWidth, minHeight, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> <li><code>items</code> is a reserved key, which is used to store all children.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\nkey: undefined,\nalign: 'center',\noffsetX: 0,\noffsetY: 0,\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: true,        minWidth: undefined,\nminHeight: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, key, align, padding, expand, minWidth, minHeight, offsetX, offsetY);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Use current timestamp as key.</li> <li><code>items</code> is a reserved key, which is used to store all children.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> <li><code>'left-top'</code> , or <code>Phaser.Display.Align.TOP_LEFT</code> : Align game object at left-top.</li> <li><code>'left-center'</code> , or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'left-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_LEFT</code> : Align game object at left-bottom.</li> <li><code>'center-top'</code> , or <code>Phaser.Display.Align.TOP_CENTER</code> : Align game object at center-top.</li> <li><code>'center-center'</code> , or <code>Phaser.Display.Align.CENTER</code> : Align game object at center-center.</li> <li><code>'center-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at center-bottom.</li> <li><code>'right-top'</code> , or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align game object at right-top.</li> <li><code>'right-center'</code> , or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'right-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_RIGHT</code> : Align game object at right-bottom.</li> </ul> </li> <li><code>offsetX</code>, <code>offsetY</code> : Apply offset to x, y coordinate after alignment.</li> <li><code>padding</code> : Extra padded space. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> :<ul> <li>Boolean value<ul> <li><code>true</code> : Expand width and height of child. Default value.</li> <li><code>false</code> : Don't expand width or height of child.</li> </ul> </li> <li>A plain object<ul> <li><code>{width: true}</code> : Only expand width of child.</li> <li><code>{height: true}</code> : only expand height of child.</li> <li><code>{width: true, height: true}</code> : Expand width and height of child.</li> </ul> </li> </ul> </li> <li><code>minWidth</code> : Minimum width of normal (non-sizer) game object, used when expand width mode. Default value is current display width.</li> <li><code>minHeight</code> : Minimum height of normal (non-sizer) game object, used when expand height mode. Default value is current display height.</li> </ul>"},{"location":"ui-overlapsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-overlapsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre>     or     <pre><code>sizer.remove(key);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre>     or     <pre><code>sizer.remove(key, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>A child         <pre><code>var item = sizer.getElement(key);\n</code></pre>         or         <pre><code>var item = sizer.getElement('items[' + key + ']');\n</code></pre><ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-overview/","title":"Overview","text":""},{"location":"ui-overview/#install-ui-plugins","title":"Install ui plugins","text":""},{"location":"ui-overview/#install-from-minify-file","title":"Install from minify file","text":"<ol> <li>Download minify file (link).</li> <li>Install ui plugin in preload stage     <pre><code>scene.load.scenePlugin({\nkey: 'rexuiplugin',\nurl: filePath,\nsceneKey: 'rexUI'\n});\n</code></pre><ul> <li><code>key</code> : Must be <code>'rexuiplugin'</code></li> </ul> </li> </ol>"},{"location":"ui-overview/#install-from-npm-package","title":"Install from npm package","text":"<ol> <li>Install rex plugins     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install ui plugin in configuration of game <pre><code>import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\n\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: RexUIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#using-typescript-declaration-file","title":"Using typescript declaration file","text":"<pre><code>import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\n\nclass Game extends Phaser.Scene {\nrexUI: RexUIPlugin;  // Declare scene property 'rexUI' as RexUIPlugin type\n\ncreate() {\nvar sizer = this.rexUI.add.sizer({\n// ...\n})\n}\n}\n\nvar game = new Phaser.Game({\nscene: Game,\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: RexUIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n});\n</code></pre> <ul> <li><code>'phaser3-rex-plugins/templates/ui/ui-plugin'</code> : Factories of rexUI components.</li> <li><code>'phaser3-rex-plugins/templates/ui/ui-components'</code> : Class of rexUI components.     <pre><code>import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components';\n</code></pre></li> </ul> <p>See this example</p>"},{"location":"ui-overview/#list-of-ui-plugins","title":"List of ui plugins","text":""},{"location":"ui-overview/#ui-components","title":"UI components","text":"<ol> <li>Badge label: A container with badges above a main item.</li> <li>Buttons: A container with a group of buttons.</li> <li>Color componets: Edit color value by RGB, or HSV input fields.</li> <li>Color input: Color number or color string input field.</li> <li>Color picker: Pick color value from H and SV palettes.</li> <li>Confirm dialog: Using json style to create confirm dialog.</li> <li>Dialog: A container with a title, content, buttons and background.</li> <li>Drop down list: A label can open a drop-down list panel.</li> <li>File selector button: A transparent file chooser button above a Label.</li> <li>Fix-width-buttons: A container with a group of fix-width buttons.</li> <li>Fix-width-sizer: Layout children game objects into lines.</li> <li>Folder: A container with a title, foldable child, and background.</li> <li>Grid-buttons: A container with a group of buttons in grids.</li> <li>Grid-sizer: Layout children game objects in grids.</li> <li>Grid-table: A container with a grid table, slider, and scroller.</li> <li>Holy grail: Layout elements in Holy grail style.</li> <li>Knob: A knob button based on circular progress.</li> <li>Label: A container with an icon, text, and background.</li> <li>Menu: A container with buttons and sub-menu.</li> <li>Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.</li> <li>Number-bar: A container with an icon, slider, text, and background.</li> <li>Overlap sizer: Layout children game objects overlapped.</li> <li>Pages: A container with pages, only current page is visible.</li> <li>Perspective card: A container with front and back faces.</li> <li>Scroll-able panel: A container with a panel, slider, and scroller.</li> <li>Simple drop down list: Using plain object to create drop down list.</li> <li>Simple label: Using json style to create label.</li> <li>Sizer: Layout children game objects.</li> <li>Slider: A container with a track, indicator, thumb and background.</li> <li>Tab-pages: A container with tabs and pages, only current page is visible.</li> <li>Tabs: A container with 4 groups of buttons around a center panel.</li> <li>TextArea: A container with a text, slider, and scroller.</li> <li>Textbox: A container with an icon, (typing and paging) text, and background.</li> <li>Title label: A container with title, text in two rows, and an icon, background.</li> <li>Toast: Show text message for a short while.</li> <li>Tweaker: Fine-tuning properties of target object.</li> </ol> <p>Scroll-able table</p> <p>There are 3 kinds of scroll-able tables :</p> <ul> <li>Grid-table only creates visible objects. It is suitable for large table.</li> <li>Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table.</li> <li>Fixwidth-sizer adds all objects. Put this fixwidth-sizer into scroll-able panel to have a scroll-able table.</li> </ul>"},{"location":"ui-overview/#basic-container","title":"Basic container","text":"<ol> <li>ContainerLite: Control the position and angle of children game objects.     <pre><code>var container = scene.rexUI.add.container(x, y);\n</code></pre>     or     <pre><code>class MyContainer extends RexPlugins.UI.Container {\nconstructor(scene, x, y, width, height, children) {\nsuper(scene, x, y, width, height, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#background-objects","title":"Background objects","text":"<ol> <li>Round-rectangle: Round rectangle shape.     <pre><code>var shape = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);\n</code></pre>     or     <pre><code>class MyRoundRectangle extends RexPlugins.UI.RoundRectangle {\nconstructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, radius, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Nine-patch: Stretchable imaage.     <pre><code>var ninePatch = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);\n</code></pre> <pre><code>var ninePatch = scene.rexUI.add.ninePatch2(x, y, width, height, key, columns, rows, config);\n</code></pre>     or     <pre><code>class MyNinePatch extends RexPlugins.UI.NinePatch {\nconstructor(scene, x, y, width, height, key, columns, rows, config) {\nsuper(scene, x, y, width, height, key, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre> <pre><code>class MyNinePatch extends RexPlugins.UI.NinePatch2 {\nconstructor(scene, x, y, width, height, key, columns, rows, config) {\nsuper(scene, x, y, width, height, key, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Custom shapes: Custom shapes on shape.     <pre><code>var customShapes = scene.rexUI.add.customShapes(x, y, width, height, config);\n</code></pre>     or     <pre><code>class MyCustomShapes extends RexPlugins.UI.CustomShapes {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Custom progress: Custom progress on shape.     <pre><code>var customProgress = scene.rexUI.add.customProgress(x, y, width, height, config);\n</code></pre>     or     <pre><code>class MyCustomProgress extends RexPlugins.UI.CustomProgress {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}    </code></pre></li> <li>Canvas-round-rectangle: Round rectangle on canvas.     <pre><code>var shape = scene.rexUI.add.roundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre>     or     <pre><code>class MyRoundRectangleCanvas extends RexPlugins.UI.RoundRectangleCanvas {\nconstructor(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient) {\nsuper(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Cover: Rectangle shape covered full window, and block all touch events.     <pre><code>var shape = scene.rexUI.add.cover(config);\n</code></pre>     or     <pre><code>class MyCover extends RexPlugins.UI.Cover {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#canvasshape-objects","title":"Canvas/Shape objects","text":"<ol> <li>Canvas: Drawing on canvas.     <pre><code>var canvas = scene.rexUI.add.canvas(x, y, width, height);\n// var canvas = scene.rexUI.add.canvas(x, y, width, height);\n</code></pre>     or     <pre><code>class MyCanvas extends RexPlugins.UI.Canvas {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circle mask image: Load a texture, then apply a circle mask.     <pre><code>var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config);\n</code></pre>     or     <pre><code>class MyImage extends RexPlugins.UI.CircleMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Alpha mask image: Load a texture, then apply an alpha mask from another texture.     <pre><code>var image = scene.rexUI.add.alphaMaskImage(x, y, key, frame, config);\n</code></pre>     or     <pre><code>class MyImage extends RexPlugins.UI.AlphaMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circular progress shape: Circular progress bar shape.     <pre><code>var circularProgress = scene.rexUI.add.circularProgress(x, y, radius, barColor, value, config);\n</code></pre>     or     <pre><code>class MyCircularProgress extends RexPlugins.UI.CircularProgress {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circular progress canvas: Circular progress bar on canvas     <pre><code>var circularProgress = scene.rexUI.add.circularProgressCanvas(x, y, radius, barColor, value, config);\n</code></pre>     or     <pre><code>class MyCircularProgress extends RexPlugins.UI.CircularProgressCanvas {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Line progress shape: Horizontal line progress bar shape.     <pre><code>var lineProgress = scene.rexUI.add.lineProgress(x, y, width, height, barColor, value, config);\n</code></pre>     or     <pre><code>class MyLineProgress extends RexPlugins.UI.LinerProgress {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Line progress canvas: Horizontal line progress bar filled with gradient color on canvas.     <pre><code>var lineProgress = scene.rexUI.add.lineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre>     or     <pre><code>class MyLineProgress extends RexPlugins.UI.LinerProgressCanvas {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Checkbox: Checkbox input with drawing checker path animation.     <pre><code>var checkbox = scene.rexUI.add.checkbox(x, y, width, height, color, config);\n</code></pre>     or     <pre><code>class MyCheckbox extends RexPlugins.UI.Checkbox {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Toggle switch: Toggle-switch input.     <pre><code>var toggleSwitch = scene.rexUI.add.toggleSwitch(x, y, width, height, color, config);\n</code></pre>     or     <pre><code>class MyToggleSwitch extends RexPlugins.UI.ToggleSwitch {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Triangle: Trangle shape inside a rectangle bounds.     <pre><code>var triangle = scene.rexUI.add.triangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre>     or     <pre><code>class MyTriangle extends RexPlugins.UI.Triangle {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Chart: Draw chart on canvas.</li> </ol>"},{"location":"ui-overview/#colored-text-objects","title":"Colored text objects","text":"<ol> <li>BBCode text: Drawing text with BBCode protocol.     <pre><code>var txt = scene.rexUI.add.BBCodeText(x, y, text, style);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.BBCodeText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Tag text: Displays text with multi-color, font face, or font size with tags.     <pre><code>var txt = scene.rexUI.add.tagText(x, y, text, style);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.TagText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Dynamic text: Control position, angle of each character drawn on a canvas.     <pre><code>var txt = scene.rexUI.add.dynamicText(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.DynamicText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Text player: Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.     <pre><code>var txt = scene.rexUI.add.textPlayer(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.TextPlayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Canvas input: An invisible Input DOM element to  receive character input and display on DynamicText.     <pre><code>var txt = scene.rexUI.add.canvasInput(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.CanvasInput {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#behaviors-of-text","title":"Behaviors of text","text":"<ol> <li>Hidden text edit: Create an invisible Input DOM element to edit string content.     <pre><code>var hiddenEdit = this.rexUI.add.hiddenEdit(textObject, config);\n</code></pre><ul> <li><code>textObject</code> : text, bbocodetext, tagtext, or label.</li> </ul> </li> <li>Text edit: Create an input text object above a text object to edit string content.     <pre><code>scene.rexUI.edit(textObject, config);\n// scene.rexUI.edit(textObject, config, onClose);\n</code></pre></li> <li>Wrap-expand text     <pre><code>var textObject = scene.rexUI.wrapExpandText(textObject);\n// var textObject = scene.rexUI.wrapExpandText(textObject, minWidth);\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object,</li> <li>Bitmap text object</li> <li>Dynamic text object, With default wrap configuration, ex:     <pre><code>{\nlineHeight: 24,\npadding: {bottom: 12}\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Font-size-expand text     <pre><code>var textObject = scene.rexUI.fontSizeExpandText(textObject);    </code></pre>     or     <pre><code>var textObject = scene.rexUI.fontSizeExpandText(textObject, {\nfitHeight: true\n});\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object, bitmap text game object</li> </ul> </li> <li><code>fitHeight</code> : <ul> <li><code>false</code> : Set font size to fit width only. Default behavior.</li> <li><code>true</code> : Set font size to fit width and height.</li> </ul> </li> </ul> </li> <li>Set font-size to fit width      <pre><code>var textObject = scene.rexUI.setFontSizeFitToWidth(textObject, width);\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object, bitmap text game object</li> </ul> </li> </ul> </li> <li>Text typing <pre><code>var textTyping = scene.rexUI.textTyping(textObject, config);\n</code></pre></li> <li>Text page <pre><code>var textPage = scene.rexUI.textPage(textObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#scaled-image","title":"Scaled image","text":"<ol> <li>Image box: Keep aspect ratio of image game object after scale-down resizing.     <pre><code>var image = scene.rexUI.add.imageBox(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImage extends RexPlugins.UI.ImageBox {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#transition-image","title":"Transition image","text":"<ol> <li>Transition image: Transit texture to another one.     <pre><code>var image = scene.rexUI.add.transitionImage(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImage extends RexPlugins.UI.TransitionImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Transition image pack: Transit texture to another one, with some pre-build effects, extended from TransitionImage.     <pre><code>var image = scene.rexUI.add.transitionImagePack(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImagePack extends RexPlugins.UI.TransitionImagePack {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#states-game-objects","title":"States game objects","text":"<ol> <li>States image: Using plain object to create Image game object, with active, hover, disable styles.     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre>     or     <pre><code>class MyStatesImage extends RexPlugins.UI.StatesImage {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>States text: Using plain object to create Text game object, with active, hover, disable styles.     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre>     or     <pre><code>class MyStatesText extends RexPlugins.UI.StatesText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>States round-rectangle: Using plain object to create round rectangle game object, with active, hover, disable styles.     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre>     or     <pre><code>class MyStatesRoundRectangle extends RexPlugins.UI.StatesRoundRectangle {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#dom-game-objects","title":"Dom game objects","text":"<ol> <li>Input text: Input DOM element.     <pre><code>var image = scene.rexUI.add.inputText(config);\n</code></pre>     or     <pre><code>class MyInputText extends RexPlugins.UI.InputText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>File chooser: Create a transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>).     <pre><code>var image = scene.rexUI.add.fileChooser(config);\n</code></pre>     or     <pre><code>class MyFileChooser extends RexPlugins.UI.FileChooser {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>File drop zone: Create a div element for dropping file(s).     <pre><code>var image = scene.rexUI.add.fileDropZone(config);\n</code></pre>     or     <pre><code>class MyFileDropZpne extends RexPlugins.UI.FileDropZpne {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#touch-input","title":"Touch input","text":"<ol> <li>Click: Fires 'click' event when touch releasd after pressed.     <pre><code>var click = scene.rexUI.add.click(gameObject, config);\n</code></pre>     or     <pre><code>var click = new RexPlugins.UI.Click(gameObject, config);\n</code></pre></li> <li>Click-Outside: Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.     <pre><code>var clickOutside = scene.rexUI.add.clickOutside(gameObject, config);\n</code></pre>     or     <pre><code>var clickOutside = new RexPlugins.UI.ClickOutside(gameObject, config);\n</code></pre></li> <li>In touching: Fires 'intouch' event every tick when pressing on a game object.     <pre><code>var inTouching = scene.rexUI.add.inTouching(gameObject, config);\n</code></pre>     or     <pre><code>var inTouching = new RexPlugins.UI.inTouching(gameObject, config);\n</code></pre></li> <li>Tap: Get tap/multi-taps events of a game object.     <pre><code>var tap = scene.rexUI.add.tap(gameObject, config);\n</code></pre>     or     <pre><code>var tap = new RexPlugins.UI.Tap(gameObject, config);\n</code></pre></li> <li>Press: Get press events of a game object.     <pre><code>var press = scene.rexUI.add.press(gameObject, config);\n</code></pre>     or     <pre><code>var press = new RexPlugins.UI.Press(gameObject, config);\n</code></pre></li> <li>Swipe: Get swipe events of a game object.     <pre><code>var swipe = scene.rexUI.add.swipe(gameObject, config);\n</code></pre>     or     <pre><code>var swipe = new RexPlugins.UI.Swipe(gameObject, config);\n</code></pre></li> <li>Pan: Get pan events of a game object.     <pre><code>var pan = scene.rexUI.add.pan(gameObject, config);\n</code></pre>     or     <pre><code>var pan = new RexPlugins.UI.Pan(gameObject, config);\n</code></pre></li> <li>Pinch: Get scale factor from 2 dragging touch pointers.     <pre><code>var pinch = scene.rexUI.add.pinch(config);\n</code></pre>     or     <pre><code>var pinch = new RexPlugins.UI.Pinch(config);\n</code></pre></li> <li>Rotste: Get spin angle from 2 dragging touch pointers.     <pre><code>var rotate = scene.rexUI.add.rotate(config);\n</code></pre>     or     <pre><code>var rotate = new RexPlugins.UI.Rotate(config);\n</code></pre></li> <li>Touch event stop: Stop touch events propagation.     <pre><code>var touchEventStop = scene.rexUI.add.touchEventStop(gameObject, config);\n</code></pre>     or     <pre><code>var touchEventStop = new RexPlugins.UI.TouchEventStop(gameObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#behaviors","title":"Behaviors","text":"<ol> <li>Modal promise: Modal behavior wrapped into promise.     <pre><code>scene.rexUI.modalPromise(gameObject, config)\n.then(function(closeEventData){ })\n</code></pre><ul> <li>Close modal dialog:     <pre><code>scene.rexUI.modalClose(gameObject);\n// scene.rexUI.modalClose(gameObject, closeEventData);\n</code></pre>     or     <pre><code>gameObject.emit('modal.requestClose');\n// gameObject.emit('modal.requestClose', closeEventData);\n</code></pre><ul> <li>Fire <code>'modal.requestClose'</code> event on game object, which will invoke <code>modal.requestClose()</code> method. After closing dialog, <code>resolve</code> part of promise will be triggered.</li> </ul> </li> </ul> </li> <li>Flip: Flip game object to another face by scaling width/height.     <pre><code>var flip = scene.rexUI.add.flip(gameObject, config);\n</code></pre>     or     <pre><code>var flip = new RexPlugins.UI.Flip(gameObject, config);\n</code></pre></li> <li>Fade in, fade out destroy <pre><code>scene.rexUI.fadeIn(gameObject, duration);\n// scene.rexUI.fadeIn(gameObject, duration, alpha);\n</code></pre> <pre><code>scene.rexUI.fadeOutDestroy(gameObject, duration);\n</code></pre></li> <li>Ease-move to, ease-move from     <pre><code>scene.rexUI.easeMoveTo(gameObject, duration, x, y);\n// scene.rexUI.easeMoveTo(gameObject, duration, x, y, ease);\n</code></pre> <pre><code>scene.rexUI.easeMoveFrom(gameObject, duration, x, y);\n// scene.rexUI.easeMoveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> <li>Shake <pre><code>scene.rexUI.shake(gameObject, config);\n</code></pre></li> <li>Perspective: Snapshot children of containerlite, to a perspective render texture.     <pre><code>var perspective = scene.rexUI.add.perspective(gameObject, config);\n</code></pre>     or     <pre><code>var perspective = new RexPlugins.UI.Perspective(gameObject, config);\n</code></pre></li> <li>Skew: Snapshot children of containerlite, to a skew render texture.     <pre><code>var skew = scene.rexUI.add.skew(gameObject, config);\n</code></pre>     or     <pre><code>var skew = new RexPlugins.UI.Skew(gameObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#helper-methods","title":"Helper methods","text":""},{"location":"ui-overview/#get-parent","title":"Get parent","text":"<ul> <li>Get parent sizer     <pre><code>var parentSizer = scene.rexUI.getParentSizer(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> </ul> </li> <li>Get ancestor sizer matched given name     <pre><code>var parentSizer = scene.rexUI.getParentSizer(gameObject, name);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> <li><code>name</code> : Name string.</li> </ul> </li> <li>Get topmost sizer     <pre><code>var topmostSizer = scene.rexUI.getTopmostSizer(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> </ul> </li> </ul>"},{"location":"ui-overview/#showhide","title":"Show/hide","text":"<ul> <li>Show     <pre><code>scene.rexUI.show(gameObject);\nscene.rexUI.getTopmostSizer(gameObject).layout();\n</code></pre></li> <li>Hide     <pre><code>scene.rexUI.hide(gameObject);\nscene.rexUI.getTopmostSizer(gameObject).layout();\n</code></pre></li> <li>Is shown     <pre><code>var isShown = scene.rexUI.isShown(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-overview/#is-pointer-in-bounds","title":"Is pointer in bounds","text":"<pre><code>var isInBounds = scene.rexUI.isInTouching(gameObject);\n// var isInBounds = scene.rexUI.isInTouching(gameObject, pointer);\n</code></pre>"},{"location":"ui-overview/#event-promise","title":"Event promise","text":"<ul> <li>Get event promise <pre><code>var promise = scene.rexUI.waitEvent(eventEmitter, eventName)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>eventEmitter</code> : Any kind of event emitter. for example, game object, or tween task, or scene event </li> </ul> </li> <li>Get complete event promise <pre><code>var promise = scene.rexUI.waitComplete(eventEmitter)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>eventEmitter</code> : Event emitter which will fire <code>'complete'</code> event, for example, tween task.</li> </ul> </li> <li>Delay time promise     <pre><code>var promise = scene.rexUI.delayPromise(time)\n.then(function() {\n\n})\n</code></pre></li> </ul>"},{"location":"ui-overview/#view-port","title":"View port","text":"<p>View port is a rectangle of current visible area.</p> <pre><code>var viewport = scene.rexUI.viewport;\n</code></pre> <p>Which will be changed after resizing</p> <pre><code>scene.scale.on('resize', function() {\nvar viewport = scene.rexUI.viewport;\n/*\n    sizer\n        .setPosition(viewport.centerX, viewport.centerY)\n        .setMinSize(viewport.width, viewport.height)\n        .layout();\n    */\n});\n</code></pre>"},{"location":"ui-overview/#yaml","title":"YAML","text":"<p>js-yaml</p> <pre><code>try {\nconst doc = scene.rexUI.yaml.load(yamlStrinig);\n} catch (e) {\n// ...\n}\n</code></pre> <pre><code>scene.rexUI.yaml.loadAll(data, function (doc) {\n// ...\n});\n</code></pre>"},{"location":"ui-overview/#demos","title":"Demos","text":"<ul> <li>Dialog<ul> <li>Yes/No</li> <li>Choice</li> <li>Pop-up</li> </ul> </li> <li>Text input<ul> <li>Text edit</li> <li>Hidden text edit</li> <li>Canvas input</li> </ul> </li> <li>Menu</li> <li>Text-box</li> <li>Text-area</li> <li>Number bar</li> <li>Grid table</li> <li>Tabs<ul> <li>Tabs-tables</li> </ul> </li> <li>Scroll-able panel</li> <li>Pages</li> <li>Fix-width sizer</li> <li>Chart</li> <li>Video player</li> <li>Anchor</li> <li>Round-rectangle</li> </ul>"},{"location":"ui-pages/","title":"Pages","text":""},{"location":"ui-pages/#introduction","title":"Introduction","text":"<p>A container with pages, only current page is visible.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-pages/#live-demos","title":"Live demos","text":"<ul> <li>Pages</li> <li>Tabpage</li> </ul>"},{"location":"ui-pages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-pages/#install-plugin","title":"Install plugin","text":""},{"location":"ui-pages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add pages object     <pre><code>var pages = scene.rexUI.add.pages(config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pages object     <pre><code>var pages = scene.rexUI.add.pages(config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pages } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add pages object     <pre><code>var pages = new Pages(scene, config);\nscene.add.existing(pages);\n</code></pre></li> </ul>"},{"location":"ui-pages/#add-pages-object","title":"Add pages object","text":"<pre><code>var pages = scene.rexUI.add.pages({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n// swapMode: 0,\n// fadeIn: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>swapMode</code> : Set to invisible or destroy swapped page.<ul> <li><code>0</code>, <code>'invisible'</code> : Set swapped page to invisible.</li> <li><code>1</code>, <code>'destroy'</code> : Destroy swapped page.</li> </ul> </li> <li><code>fadeIn</code> : Fade-in duration of current page.<ul> <li><code>0</code> : No fade-in effect. Default behavior.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-pages/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPages extends RexPlugins.UI.Pages {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var pages = new MyPages(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#add-background","title":"Add background","text":"<pre><code>pages.addBackground(child);\n</code></pre> <p>or</p> <pre><code>pages.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-pages/#add-page","title":"Add page","text":"<pre><code>pages.addPage(child, key, align, padding, expand);\n// pages.add(child, key, align, padding, expand);\n</code></pre> <p>or </p> <pre><code>pages.addPage(child, {\nkey: 0,\nalign: Phaser.Display.Align.TOP_LEFT,\npadding: {left: 0, right: 0, top: 0, bottom: 0}, expand: true\n}\n);\n// pages.add(child, config);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>key</code> : Unique name of this page.</li> <li><code>align</code> :<ul> <li><code>'left-top'</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> : Align game object at left-top. Default value.</li> <li><code>'left-center'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'left-bottom'</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code> : Align game object at left-bottom.</li> <li><code>'center-top'</code>, or <code>Phaser.Display.Align.TOP_CENTER</code> : Align game object at center-top.</li> <li><code>'center-center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center-center.</li> <li><code>'center-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at center-bottom.</li> <li><code>'right-top'</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align game object at right-top.</li> <li><code>'right-center'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'right-bottom'</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code> : Align game object at right-bottom.</li> </ul> </li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Expand width and height of the page.<ul> <li><code>true</code> : Expand width and height.</li> <li><code>false</code> : Don't expand width or height.</li> <li>A plain object, to expand width or height     <pre><code>{\nwidth: true,\nheight: true\n}\n</code></pre><ul> <li><code>expand.width</code> : Expand width.</li> <li><code>expand.height</code> : Expand height.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-pages/#swap-to-page","title":"Swap to page","text":"<pre><code>pages.swapPage(key);\n// pages.swapPage(key, fadeInDuration);\n</code></pre> <ul> <li><code>key</code> : Unique name of this page.</li> </ul> <p>Note</p> <p>This method will run <code>pages.layout()</code> to arrange position of current page.</p>"},{"location":"ui-pages/#page-name","title":"Page name","text":"<ul> <li> <p>Current page name     <pre><code>var pageName = pages.currentKey;\n</code></pre></p> </li> <li> <p>Previous page name     <pre><code>var pageName = pages.previousKey;\n</code></pre></p> </li> <li>Name of all pages     <pre><code>var names = pages.keys;\n</code></pre></li> </ul>"},{"location":"ui-pages/#page-object","title":"Page object","text":"<ul> <li>Get page object     <pre><code>var pageObject = pages.getPage(key);\n</code></pre><ul> <li><code>pageObject</code> : A game object or <code>null</code>.</li> </ul> </li> <li>Current page object     <pre><code>var pageObject = pages.currentPage;\n</code></pre></li> <li>Previous page object     <pre><code>var pageObject = pages.previousPage;\n</code></pre></li> </ul>"},{"location":"ui-pages/#fade-in-duration","title":"Fade in duration","text":"<pre><code>pages.setFadeInDuration(duration);\n</code></pre> <ul> <li><code>0</code> : No fade-in effect.</li> </ul>"},{"location":"ui-pages/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All page game objects     <pre><code>var gameObjects = pages.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = pages.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = pages.getByName(name);\n// var gameObject = pages.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-pages/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-pages/#events","title":"Events","text":"<ul> <li>Set page invisible, triggered when page is swapped out.     <pre><code>pages.on('pageinvisible', function(pageObject, key, pages) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>pageObject</code> : Game object of page.</li> <li><code>key</code> : Page name.</li> <li><code>pages</code> : Pages object</li> </ul> </li> <li>Set page visible, triggered when page is shown.     <pre><code>pages.on('pagevisible', function(pageObject, key, pages) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>pageObject</code> : Game object of page.</li> <li><code>key</code> : Page name.</li> <li><code>pages</code> : Pages object</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/","title":"Perspective card","text":""},{"location":"ui-perspectivecard/#introduction","title":"Introduction","text":"<p>A container with front and back faces.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"ui-perspectivecard/#live-demos","title":"Live demos","text":"<ul> <li>Flip</li> <li>Rotation</li> </ul>"},{"location":"ui-perspectivecard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-perspectivecard/#install-plugin","title":"Install plugin","text":""},{"location":"ui-perspectivecard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.rexUI.add.perspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.rexUI.add.perspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCard } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add card object     <pre><code>var card = new PerspectiveCard(scene, config);\nscene.add.existing(card);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#add-card-object","title":"Add card object","text":"<pre><code>var sizer = scene.rexUI.add.perspectiveCard({    // x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nback: backGameObject,\nfront: frontGameObject,\n// face: 0,\n// orientation: 0,\n// snapshotPadding: 0,\n\n// flip : {\n//     frontToBack: 0,\n//     backToFront: 1,\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n\n// space: { left: 0, right:0, top:0, bottom:0 },\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>front</code>, <code>back</code> : Any game object for front or back face.</li> <li><code>face</code> : Show front or back face.<ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Flipping left-to-right, or right-to-left.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Flipping top-to-bottom, or bottom-to-top.</li> </ul> </li> <li><code>snapshotPadding</code> : Padding around face when taking a snapshot of a face.</li> <li><code>flip</code> : Configuration of flipping behavior.<ul> <li><code>flip.frontToBack</code>, <code>flip.backToFront</code> : Flipping direction.<ul> <li><code>'right'</code>, <code>'left-to-right'</code>, or <code>0</code> : Flipping from right to left.</li> <li><code>'left'</code>, <code>'right-to-left'</code>, or <code>1</code> : Flipping from left to right.</li> </ul> </li> <li><code>flip.duration</code> : Duration of flipping, in millisecond.</li> <li><code>flip.delay</code> : Initial delay.</li> <li><code>flip.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCard extends PerspectiveCard {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var card = new MyPerspectiveCard(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>card.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-perspectivecard/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = card.getElement('background');\n</code></pre></li> <li>Front face game object     <pre><code>var frontFace = card.getElement('front');\n</code></pre></li> <li>Back face game object     <pre><code>var backFace = card.getElement('back');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = card.getElement('#' + name);\n// var gameObject = card.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = card.getByName(name);\n// var gameObject = card.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = card.face;\n</code></pre><ul> <li><code>face</code>:<ul> <li><code>0</code> : Show front face.</li> <li><code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>card.setFace(face)\n</code></pre><ul> <li><code>face</code><ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Toggle     <pre><code>card.toggleFace()\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#face-instances","title":"Face instances","text":"<ul> <li>Front face     <pre><code>var frontFace = card.frontFace;\n// var frontFace = card.faces.front;\n</code></pre></li> <li>Back face     <pre><code>var backFace = card.backFace;\n// var backFace = card.faces.back;\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#flip-behavior","title":"Flip behavior","text":""},{"location":"ui-perspectivecard/#start-flipping","title":"Start flipping","text":"<pre><code>card.flip.flip();\n// card.flip.flip(duration, repeat);\n</code></pre> <ul> <li><code>duration</code> : Overwrite default duration value.</li> <li><code>repeat</code> : Number of flipping time (<code>repeat + 1</code>) during <code>duration</code>. Default value is <code>0</code>.</li> </ul> <p>or</p> <ul> <li>Flip-right     <pre><code>card.flip.flipRight();\n// card.flip.flipRight(duration, repeat);\n</code></pre></li> <li>Flip-left     <pre><code>card.flip.flipLeft();\n// card.flip.flipLeft(duration, repeat);\n</code></pre></li> </ul> <p>Note</p> <ul> <li>When flipping start:<ul> <li>Snapshot face game objects to perspective-card mesh</li> <li>Set face game objects to invisible, and perspective-card mesh to visible</li> </ul> </li> <li>When flipping complete:<ul> <li>Revert visible of Face game objects and perspective-card mesh</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#stop-flipping","title":"Stop flipping","text":"<pre><code>card.flip.stop();\n</code></pre>"},{"location":"ui-perspectivecard/#set-duration","title":"Set duration","text":"<pre><code>card.flip.setDuration(duration);\n// card.flip.duration = duration;\n</code></pre>"},{"location":"ui-perspectivecard/#set-ease","title":"Set ease","text":"<pre><code>card.flip.setEase(ease);\n// card.flip.ease = ease;\n</code></pre>"},{"location":"ui-perspectivecard/#events","title":"Events","text":"<ul> <li>On flipping start     <pre><code>card.flip.on('start', function(){\n// ...\n});\n</code></pre></li> <li>On flipping complete     <pre><code>card.flip.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = card.flip.isRunning;\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = card.angleX; // Angle in degrees\nvar angleY = card.angleY; // Angle in degrees\nvar angleZ = card.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = card.rotationX; // Angle in radians\nvar rotationY = card.rotationY; // Angle in radians\nvar rotationZ = card.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>card.angleX = angleX; // Angle in degrees\ncard.angleY = angleY; // Angle in degrees\ncard.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>card.rotationX = rotationX; // Angle in radians\ncard.rotationY = rotationY; // Angle in radians\ncard.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul> <p>Warning</p> <p>Can't be used with flipping mode.</p>"},{"location":"ui-perspectivecard/#other-properties","title":"Other properties","text":"<p>See overlapSizer.</p>"},{"location":"ui-scrollablepanel/","title":"Scroll-able panel","text":""},{"location":"ui-scrollablepanel/#introduction","title":"Introduction","text":"<p>A container with a panel, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-scrollablepanel/#live-demos","title":"Live demos","text":"<ul> <li>Scroll-able panel + grid sizer</li> <li>Scroll-able panel + table by fix-width sizer</li> <li>Scroll-able panel + fix-width sizer</li> <li>Dropdown, scrollable list</li> <li>Add child</li> <li>Scroll to child</li> <li>Drag item</li> <li>Destory</li> </ul>"},{"location":"ui-scrollablepanel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-scrollablepanel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-scrollablepanel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = scene.rexUI.add.scrollablePanel(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = scene.rexUI.add.scrollablePanel(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ScrollablePanel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = new ScrollablePanel(scene, config);\nscene.add.existing(panel);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#add-scroll-able-panel-object","title":"Add scroll-able panel object","text":"<pre><code>var panel = scene.rexUI.add.scrollablePanel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nscrollMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\npanel: {\nchild: panelGameObject,\nmask: {\npadding: 0,\n// updateMode: 0,\n}\n}.\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, \n//     bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, \n//     right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// },\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\npanel: 0,\n// panel: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\n// name: '',\n// draggable: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>scrollMode</code> : Scroll panel vertically, or horizontally.<ul> <li><code>0</code>, <code>'vertical'</code>, or <code>'v'</code>, <code>'y'</code> : Scroll panel vertically. Default value.</li> <li><code>1</code>, <code>'horizontal'</code>, or <code>'h'</code>. <code>'x'</code> : Scroll panel horizontally.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel.</li> <li><code>panel</code> : Configuration of panel game object.<ul> <li><code>panel.child</code> : Panel game object.</li> <li><code>panel.mask</code> : Configuration of panel's mask.<ul> <li><code>panel.mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>panel.mask.updateMode</code> : When to update mask<ul> <li><code>0</code>, or <code>'update'</code> : Apply mask only when scrolling. Default behavior.</li> <li><code>1</code>, or <code>'everyTick'</code> : Apply mask every tick. Use this mode if children game objects of panel are moved after scrolling and still been masked.</li> </ul> </li> <li><code>false</code> : No mask</li> </ul> </li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over panel.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.panel</code> :<ul> <li>A number: Space between panel object and slider object.</li> <li>An object: Padding of panel object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.panel.top</code>, <code>space.panel.bottom</code> : Top, bottom padding space of panel object.</li> <li><code>space.panel.right</code> : Space between panel object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.panel.left</code>, <code>space.panel.right</code> : Left, right padding space of panel object.</li> <li><code>space.panel.bottom</code> : Space between panel object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and panel.</li> <li><code>space.footer</code> : Space between footer and panel.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-scrollablepanel/#child-bounds","title":"Child bounds","text":"<p>Scrollable panel will mask child if child's bounds (<code>child.getBounds()</code>)  is across mask area. </p> <p>Bitmaptext game object does not have <code>getBounds</code> method.  User can inject it by</p> <pre><code>const Components = Phaser.GameObjects.Components;\nPhaser.Class.mixin(\nPhaser.GameObjects.BitmapText,\n[\nComponents.ComputedSize,\nComponents.GetBounds\n]\n);\n</code></pre>"},{"location":"ui-scrollablepanel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPanel extends RexPlugins.UI.ScrollablePanel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var panel = new MyPanel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>panel.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-scrollablepanel/#scroll-content","title":"Scroll content","text":"<ul> <li>Set     <pre><code>panel.childOY = oy;\n// panel.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>panel.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>panel.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>panel.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = panel.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = panel.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = panel.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = panel.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>panel.t = t;  // t: 0~1\n// panel.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>panel.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = panel.t;\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>panel.scrollToTop();\n</code></pre><ul> <li>Equal to <code>panel.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>panel.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>panel.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#scroll-to-child","title":"Scroll to child","text":"<pre><code>panel.scrollToChild(child, align);\n</code></pre> <ul> <li><code>align</code> : <ul> <li><code>undefined</code> : Align child to top(left), or bottom(right) of panel. Default value.</li> <li><code>'top'</code>, <code>'center'</code>, <code>'bottom'</code> : Align child to top/center/bottom of panel.</li> <li><code>'left'</code>, <code>'center'</code>, <code>'right'</code> : Align child to left/center/right of panel.</li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>panel.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>panel.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = panel.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>panel.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>panel.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = panel.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>panel.on('scroll', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>panel.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>panel.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-scrollablepanel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = panel.getElement('background');\n</code></pre></li> <li>Child-panel game object     <pre><code>var childPanel = panel.getElement('panel');\n</code></pre></li> <li>Child-panel mask game object, which is a graphics game object.     <pre><code>var maskGameObject = panel.getElement('mask');\n</code></pre></li> <li>Layer of panel, assigned at config <code>panel.mask.layer</code>.     <pre><code>var layer = panel.getElement('panelLayer');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = panel.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = panel.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller     <pre><code>var scroller = panel.getElement('scroller');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = panel.getElement('#' + name);\n// var gameObject = panel.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = panel.getByName(name);\n// var gameObject = panel.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#input-events","title":"Input events","text":"<p>Two possible solution to register input events to children of scrollable panel.</p>"},{"location":"ui-scrollablepanel/#set-children-interactive","title":"Set children interactive","text":"<p>Applies click, tap, press, swipe behaviors on this scrollable panel, to detect input events of children.</p> <pre><code>panel.setChildrenInteractive({\ntargets: targetSizers,\n\n// click: {mode: 'release', clickInterval: 100},\n\n// over: undefined,\n\n// press: {time: 251, threshold: 9},\n\n// tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, \n//       taps: undefined, minTaps: undefined, maxTaps: undefined,},\n\n// swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},\n\n// inputEventPrefix: 'child.',\n})\n</code></pre> <ul> <li><code>targetSizers</code> : Array of target children-sizer.</li> </ul> <p>See Base-sizer/Set children interactive</p>"},{"location":"ui-scrollablepanel/#events","title":"Events","text":"<p>See Base-sizer/Set children interactive/Events</p>"},{"location":"ui-scrollablepanel/#individual-input-events","title":"Individual input events","text":"<p>When <code>scene.input.topOnly</code> is <code>true</code> (default value), input events of children elements will block the drag-scrolling of scrollable panel. (Assmue that the children elememts are above scrollable panel)</p> <ul> <li>Set <code>scene.input.topOnly</code> to <code>false</code> to enable drag-scrolling and input events of children elememts both.</li> <li>Test if pointer is inside the mask of panel via <code>panel.isInTouching('mask')</code>, during input events' callback.</li> <li>To recognize pointer-down and dragging-start, use press's <code>pressstart</code> event.</li> </ul>"},{"location":"ui-scrollablepanel/#steps-of-building-a-scrollable-panel","title":"Steps of building a scrollable panel","text":"<ol> <li>Build child panel from bottom to top<ul> <li>Child panel might be composed of sizers (sizer/fix-width sizer/grid sizer)</li> <li>Return child sizer from method</li> </ul> </li> <li>Build scrollable panel</li> <li>Add interactive events</li> </ol>"},{"location":"ui-scrollbar/","title":"Scroll bar","text":""},{"location":"ui-scrollbar/#introduction","title":"Introduction","text":"<p>A container with slider, two buttons, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-scrollbar/#live-demos","title":"Live demos","text":"<ul> <li>Scroll bar</li> </ul>"},{"location":"ui-scrollbar/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-scrollbar/#install-plugin","title":"Install plugin","text":""},{"location":"ui-scrollbar/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexuiplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js\",\n\"rexUI\",\n\"rexUI\"\n);\n</code></pre></li> <li>Add scroll bar object   <pre><code>var scrollBar = scene.rexUI.add.scrollBar(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from \"phaser3-rex-plugins/templates/ui/ui-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexUI\",\nplugin: UIPlugin,\nmapping: \"rexUI\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scroll bar object   <pre><code>var scrollBar = scene.rexUI.add.scrollBar(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { ScrollBar } from \"phaser3-rex-plugins/templates/ui/ui-components.js\";\n</code></pre></li> <li>Add scroll bar object   <pre><code>var sizer = new ScrollBar(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#add-scroll-bar-object","title":"Add scroll bar object","text":"<pre><code>var scrollBar = scene.rexUI.add.scrollBar({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\norientation: 0,\n\nbackground: backgroundGameObject,    slider: {\nbackground: backgroundGameObject,\n/* \n        background: { \n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */    indicator: indicatorGameObject,\n/* \n        indicator: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ninput: 'drag',\ngap: undefined,        easeValue: {\nduration: 0,\nease: 'Linear'\n},\n},\n\nbuttons: {\ntop: topButtonGameObject, bottom: bottomButtonGameObject,\nleft: leftButtonGameObject, right: rightButtonGameObject,\nstep: 0.01,\n}\n\nvaluechangeCallback: function(newValue, oldValue, scrollBar) {\n// scrollBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\nitem: 0\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the sizer.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of scrollBar.</li> <li><code>slider</code> : Slider game object which composed of<ul> <li><code>slider.width</code> : Fixed width of slider, optional. Width of slider will be extended if this value is not set.</li> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disable this feature.</li> </ul> </li> <li><code>slider.easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>slider.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>slider.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>buttons</code> : Press button to scroll content in each tick.<ul> <li><code>buttons.top</code>, <code>buttons.bottom</code> : Top and bottom buttons.</li> <li><code>buttons.left</code>, <code>buttons.right</code> : Left and right buttons</li> <li><code>buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.item</code> : Space between 2 children game objects.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-scrollbar/#custom-class","title":"Custom class","text":"<ul> <li>Define class   <pre><code>class MyScrollBar extends RexPlugins.UI.ScrollBar {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance   <pre><code>var scrollBar = new MyScrollBar(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>scrollBar.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-scrollbar/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>Background game object     <pre><code>var background = scrollBar.getElement(\"background\");\n</code></pre></li> <li>Slider game object<ul> <li>Slider background   <pre><code>var sliderBackground = scrollBar.getElement(\"slider.background\");\n</code></pre></li> <li>Slider track   <pre><code>var sliderTrack = scrollBar.getElement(\"slider.track\");\n</code></pre></li> <li>Slider indicator   <pre><code>var sliderIndicator = scrollBar.getElement(\"slider.indicator\");\n</code></pre></li> <li>Slider thumb   <pre><code>var sliderThumb = scrollBar.getElement(\"slider.thumb\");\n</code></pre></li> </ul> </li> <li>Button game objects     <pre><code>var buttons = scrollBar.getElement(\"buttons\");\n</code></pre><ul> <li><code>buttons</code> : Array of button game objects.<ul> <li><code>buttons[0]</code> : Left or top button.</li> <li><code>buttons[1]</code> : Right or bottom button.</li> </ul> </li> </ul> </li> <li>Get by name   <pre><code>var gameObject = scrollBar.getElement(\"#\" + name);\n// var gameObject = scrollBar.getElement('#' + name, recursive);\n</code></pre>   or   <pre><code>var gameObject = scrollBar.getByName(\"#\" + name);\n// var gameObject = scrollBar.getByName(name, recursive);\n</code></pre></li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul>"},{"location":"ui-scrollbar/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = scrollBar.enable;\n</code></pre></li> <li>Set     <pre><code>scrollBar.setEanble(enable);\n</code></pre>     or     <pre><code>scrollBar.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value   <pre><code>var value = scrollBar.getValue(min, max); // value : min ~ max\n</code></pre>   or   <pre><code>var value = scrollBar.getValue(); // value: 0 ~ 1\n</code></pre>   or   <pre><code>var value = scrollBar.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value   <pre><code>scrollBar.setValue(value, min, max); // value: min ~ max\n</code></pre>   or   <pre><code>scrollBar.setValue(value); // value: 0 ~ 1\n</code></pre>   or   <pre><code>scrollBar.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value   <pre><code>scrollBar.addValue(inc, min, max); // inc: min ~ max\n</code></pre>   or   <pre><code>scrollBar.addValue(inc); // inc: 0 ~ 1\n</code></pre>   or   <pre><code>scrollBar.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>scrollBar.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>scrollBar.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>scrollBar.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>scrollBar.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>scrollBar.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-scrollbar/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-scrollbar/#events","title":"Events","text":"<ul> <li>On value changed   <pre><code>scrollBar.on('valuechange',\nfunction (newValue, oldValue, scrollBar) {\n// scrollBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n},\nscope\n);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/","title":"Simple drop down list","text":""},{"location":"ui-simpledropdownlist/#introduction","title":"Introduction","text":"<p>Using plain object to create drop down list.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-simpledropdownlist/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down list</li> </ul>"},{"location":"ui-simpledropdownlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-simpledropdownlist/#install-plugin","title":"Install plugin","text":""},{"location":"ui-simpledropdownlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { DropDownList } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dropDownList object     <pre><code>var dropDownList = new SimpleDropDownList(scene, config);\nscene.add.existing(dropDownList);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#add-drop-down-list-object","title":"Add drop-down list object","text":"<pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList({\nlabel: SimpleLabelConfig,\n\nbutton: SimpleLabelConfig,\n\nlist: {\n// easeIn: 500,\n// transitIn: undefined,\n// transitIn: function(listPanel, duration) {  },\n\n// easeOut: 100,\n// transitOut: undefined,\n// transitOut: function(listPanel, duration) {  },\n\n// wrap: false,\n// width: undefined, \n// height: undefined,\n// alignParent: 'text',\n// alignSide: '',\n// expandDirection: 0,\n// bounds: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0, item: 0,\n//     line: 0\n// },\n\n// draggable: false        \n}\n\n}, creators);\n</code></pre> <ul> <li><code>label</code> : Styles of simple-label, for creating label.</li> <li><code>button</code> : Styles of simple-label, for creating each button on drop-down list.<ul> <li>Use <code>label</code> parameter of <code>button</code> parameter is not given.</li> </ul> </li> <li><code>list</code> : Configuration of list panel.<ul> <li><code>list.easeIn</code> : Pop-up duration in ms. Default value is <code>500</code>.</li> <li><code>list.transitIn</code> : Tween behavior of opening list panel.<ul> <li><code>undefined</code> : Expand list panel by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.easeOut</code> : Scale-down duration in ms. Default value is <code>100</code>.</li> <li><code>list.transitOut</code> : Tween behavior of closing list panel.<ul> <li><code>undefined</code> : Closing list panel by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.wrap</code> : <ul> <li><code>true</code> : fixwidth-sizer layout, a row within buttons.</li> <li><code>false</code> : sizer layout, a row within a button. Default behavior.</li> </ul> </li> <li><code>list.width</code> : Minimum width.<ul> <li><code>undefined</code> : Minimum width of panel will equal to width of parent label. Default value.</li> <li>A number : Width of panel. Required fields when <code>list.wrap</code> is <code>true</code>.</li> </ul> </li> <li><code>list.height</code> : Minimum height.<ul> <li><code>undefined</code> : Default value.</li> </ul> </li> <li><code>list.alignParent</code> : Align x position to label.<ul> <li><code>'icon'</code> : Align x position to icon game object of parent label.</li> <li><code>'text'</code> : Align x position to text game object of parent label. Default behavior</li> <li><code>'label'</code>, or <code>null</code> : Align x position to parent label.        </li> </ul> </li> <li><code>list.alignSide</code> : Align list to label's left or right side.<ul> <li><code>undefined</code>, or <code>'left'</code> : Align list's left side to label's left side. Default behavior.</li> <li><code>'right</code> : Align list's right side to label's right side. Default behavior.</li> </ul> </li> <li><code>list.expandDirection</code> :<ul> <li><code>0</code>, <code>'down'</code> : Expand list down. i.e. list panel will put below parent label.</li> <li><code>1</code>, <code>'up'</code> : Expand list up. i.e. list panel will put above parent label.</li> </ul> </li> <li><code>list.bounds</code> : Put list panel below parent label if bottom of list panel is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>list.space</code> : <code>space</code> properties of list panel.<ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code> : For sizer layout. (<code>list.wrap</code> is <code>false</code>)</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code>, <code>line</code> : For fixwidth-sizer layout. (<code>list.wrap</code> is <code>true</code>)</li> </ul> </li> <li><code>list.draggable</code> : Set <code>true</code> to drag top-most object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-simpledropdownlist/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDropDownList extends RexPlugins.UI.SimpleDropDownList {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dropDownList = new MyDropDownList(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#options","title":"Options","text":"<ul> <li>Set     <pre><code>dropDownList.setOptions(options);\n</code></pre>     or     <pre><code>dropDownList.options = options;\n</code></pre><ul> <li><code>options</code> : Array of strings, or objects contains these properties.     <pre><code>{\ntext: string,\nvalue: any\n}\n</code></pre></li> </ul> </li> <li>Get     <pre><code>var options = dropDownList.options;\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#other-properties","title":"Other properties","text":"<p>See drop-down list, label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-simpledropdownlist/#events","title":"Events","text":"<p>See Events section of drop-down list</p>"},{"location":"ui-simplelabel/","title":"Simple label","text":""},{"location":"ui-simplelabel/#introduction","title":"Introduction","text":"<p>Using plain object to create label.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-simplelabel/#live-demos","title":"Live demos","text":"<ul> <li>Style</li> <li>Bitmaptext</li> <li>Nine-slice background</li> <li>Wrap text</li> <li>Buttons</li> </ul>"},{"location":"ui-simplelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-simplelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-simplelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.simpleLabel(style).resetDisplayContent(config);\n//var label = scene.rexUI.add.simpleLabel(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.simpleLabel(style).resetDisplayContent(config);\n//var label = scene.rexUI.add.simpleLabel(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SimpleLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new SimpleLabel(scene, style);\n// var label = new SimpleLabel(scene, style, creators);\nscene.add.existing(label);\nlabel.resetDisplayContent(config)\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.simpleLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\n// States-Round-rectangle background\nbackground: {...},\n\n// Nine-slice background\nbackground: {\nkey: ,\nframe: ,\nleftWidth: , rightWidth: ,\ntopHeight: , bottomHeight: }\n\n// States-Image\nicon: {...},\n\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\n// States-Text\ntext: {...},\n// text: {\n//     $type: 'text',\n//     ...\n// }\n\n// Create bbcodetext\n// text: {\n//     $type: 'bbcodetext',\n//     ...\n// },\n\n// Create bitmaptext\n// text: {\n//     $type: 'bitmaptext',\n//     key: '',\n//     size: undefined,\n//     color: undefined,\n// },\n\n// wrapText: false,\n\n// expandTextWidth: false,\n// expandTextHeight: false,\n\n// States-Image\naction: {...},\n\n// squareFitAction: false,\n// actionMask: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\nalign: undefined,  // 'left' | 'top' | 'right' | 'bottom' | 'center\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n}, creators);\n</code></pre> <ul> <li><code>background</code> : <ul> <li>States-round-rectangle</li> <li>Nine-slice <pre><code>{\nkey: ,\nframe: ,\nleftWidth: , rightWidth: ,\ntopHeight: , bottomHeight: }\n</code></pre></li> </ul> </li> <li><code>icon</code> : <ul> <li>States-Image</li> </ul> </li> <li><code>text</code> : <ul> <li>States-Text, default type of game object.    <pre><code>{\n// $type: 'text',\n// more style setting...\n}\n</code></pre></li> <li>Style of bbcodetext <pre><code>{\n// $type: 'bbcodetext',  // or 'bbcode'\n// more style setting...\n}\n</code></pre></li> <li>Style of bitmaptext     <pre><code>{\n// $type: 'bitmaptext',  // or 'bitmap'\nkey: '',\nsize: undefined,\ncolor: undefined,\n}\n</code></pre></li> </ul> </li> <li><code>wrapText</code> : Enable WrapExpandText feature.<ul> <li><code>false</code>, <code>0</code> : No WrapExpandText feature. Default behavior.</li> <li><code>true</code>, <code>1</code>, <code>'word'</code> : Word WrapExpandText.</li> <li><code>2</code>, <code>'char'</code> : Character WrapExpandText.</li> </ul> </li> <li><code>action</code> : <ul> <li>States-Image</li> </ul> </li> <li><code>creators</code> : A series of callback to create background, text, icon, action icon game object.<ul> <li><code>creators.background</code> : Callback to create background. Default behavior is creating a states round rectangle.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.text</code> : Callback to create text. Default behavior is creating a bbcodetext.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.icon</code> : Callback to create icon. Default behavior is creating a image.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.action</code> : Callback for creating action-icon. Default behavior is creating a image.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLabel extends RexPlugins.UI.SimpleLabel {\nconstructor(scene, config, creators) {\nsuper(scene, config, creators);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyLabel(scene, config, creators);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#reset-display-content","title":"Reset display content","text":"<p>See label</p>"},{"location":"ui-simplelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-simplelabel/#set-state","title":"Set state","text":"<p>Override/restore properties of background game object.</p> <p>Note</p> <p>Assume that background game object is states round rectangle game object.)</p>"},{"location":"ui-simplelabel/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>label.setActiveState();\n// label.setActiveState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>label.setActiveState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>label.setHoverState();\n// label.setHoverState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>label.setHoverState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>label.setDisableState();\n// label.setDisableState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable disable state     <pre><code>label.setDisableState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#other-properties","title":"Other properties","text":"<p>See label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-sizer/","title":"Sizer","text":""},{"location":"ui-sizer/#introduction","title":"Introduction","text":"<p>Layout children game objects.</p> <p>It is inspired from wxSizer.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-sizer/#live-demos","title":"Live demos","text":"<ul> <li>Nested sizer</li> <li>Proportion</li> <li>DOM child</li> <li>More nested sizer</li> <li>Set children interactive</li> <li>Drag drop child</li> </ul>"},{"location":"ui-sizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-sizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-sizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.sizer(config);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.sizer(config);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new Sizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.sizer({\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, {\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n\n// width: undefined,\n// height: undefined,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, width, height, {\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, width, height, orientation, {\n// rtl: false,\n// startChildIndex: 0,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 }\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the sizer.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right. Default value is <code>0</code>.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom.</li> </ul> </li> <li><code>rtl</code> :     <ul> <li><code>false</code> : Layout children from left to right. Default behavior.</li> <li><code>true</code> : Layout children from right to left.</li> </ul> </li> <li><code>startChildIndex</code> : A number, start index of first layout child. Default value is <code>0</code>.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between 2 children game objects.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.Sizer {\nconstructor(scene, x, y, minWidth, minHeight, orientation, config) {\nsuper(scene, x, y, minWidth, minHeight, orientation, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, orientation);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nindex: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, proportion, align, padding, expand, key, index);\n// sizer.add(child, proportion, align, padding, expand, key, index);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>proportion</code> :<ul> <li><code>0</code>, or <code>'min'</code> : Place next game object closely. Default value.</li> <li><code>&gt; 0</code> : Stretch game object via proportion value.</li> <li><code>null</code> : Don't arrange this child.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> <li><code>padding</code> : Extra padded space. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Set <code>true</code> to<ul> <li>Expand height when <code>orientation</code> is <code>0</code> (<code>left-to-right</code>), or</li> <li>Expand width when <code>orientation</code> is <code>1</code> (<code>top-to-bottom</code>)</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> <li><code>index</code> : Insert child to.<ul> <li><code>undefined</code> : Insert child at last.</li> </ul> </li> <li><code>minWidth</code> : Minimum width of normal (non-sizer) game object, used when      <code>orientation</code> is <code>x</code>, and <code>proportion</code> is not <code>0</code>, or      <code>orientation</code> is <code>y</code>, and <code>expand</code> is <code>true</code><ul> <li>Default value is current display width.</li> </ul> </li> <li><code>minHeight</code> : Minimum height of normal (non-sizer) game object, used when      <code>orientation</code> is <code>y</code>, and <code>proportion</code> is not <code>0</code>, or     <code>orientation</code> is <code>x</code>, and <code>expand</code> is <code>true</code><ul> <li>Default value is current display height.</li> </ul> </li> <li><code>fitRatio</code> : Resize child to fit sizer height/width before layout children, when <code>proportion</code> is set to <code>0</code>.<ul> <li><code>0</code> : Ignore this feature. Default behavior.</li> <li><code>&gt; 0</code> : Fit ratio (width/height). <code>1</code> is square.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#insert-child","title":"Insert child","text":"<pre><code>sizer.insert(index, child, {\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insert(index, child, proportion, align, padding, expand, key);\n</code></pre>"},{"location":"ui-sizer/#insert-at-position","title":"Insert at position","text":"<pre><code>sizer.insertAtPosition(x, y, child, {\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insertAtPosition(x, y, index, child, proportion, align, padding, expand, key);\n</code></pre>"},{"location":"ui-sizer/#add-space","title":"Add space","text":"<ul> <li>Add a stretchable space.     <pre><code>sizer.addSpace();\n// sizer.addSpace(proportion);\n</code></pre></li> <li>Insert a stretchable space.     <pre><code>sizer.insertSpace(index);\n// sizer.insertSpace(index, proportion);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-sizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-sizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#rtl","title":"RTL","text":"<ul> <li>Set rtl in config of constructor</li> <li>Set rtl : <code>sizer.setRTL(enable)</code></li> <li>Get rtl : <code>var rtl = sizer.rtl</code></li> </ul>"},{"location":"ui-sizer/#alignment-of-child","title":"Alignment of child","text":"<ul> <li>Set alignment of child in config of adding child</li> <li>Set alignment of child : <code>sizer.setChildAlign(child, align)</code><ul> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> </ul> </li> <li>Get alignment of child : <code>var align = sizer.getChildAlign(child)</code></li> </ul>"},{"location":"ui-sizer/#proportion-of-child","title":"Proportion of child","text":"<ul> <li>Set proportion of child in config of adding child</li> <li>Set proportion of child : <code>sizer.setChildProportion(child, proportion)</code></li> <li>Get proportion of child : <code>var align = sizer.getChildProportion(child)</code></li> </ul>"},{"location":"ui-sizer/#expand-of-child","title":"Expand of child","text":"<ul> <li>Set expand of child in config of adding child</li> <li>Set expand of child : <code>sizer.setChildExpand(child, expand)</code></li> <li>Get expand of child : <code>var expand = sizer.getChildExpand(child)</code></li> </ul>"},{"location":"ui-sizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-slider/","title":"Slider","text":""},{"location":"ui-slider/#introduction","title":"Introduction","text":"<p>A container with a track, indicator, thumb and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-slider/#live-demos","title":"Live demos","text":"<ul> <li>Slider bar</li> <li>Color picker</li> <li>Crop resize</li> <li>Gap</li> </ul>"},{"location":"ui-slider/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-slider/#install-plugin","title":"Install plugin","text":""},{"location":"ui-slider/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add slider object     <pre><code>var slider = scene.rexUI.add.slider(config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add slider object     <pre><code>var slider = scene.rexUI.add.slider(config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Slider } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add slider object     <pre><code>var slider = new Slider(scene, config);\nscene.add.existing(slider);\n</code></pre></li> </ul>"},{"location":"ui-slider/#add-slider-object","title":"Add slider object","text":"<pre><code>var slider = scene.rexUI.add.slider({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\nreverseAxis: false,\n\nbackground: backgroundGameObject,\n/* \n    background: { \n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\ntrack: trackGameObject,\n/* \n    track: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */    indicator: indicatorGameObject,\n/* \n    indicator: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\nthumb: thumbGameObject,\n/* \n    thumb: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\ninput: 'drag',\n\nvalue: 0,\ngap: undefined,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},    valuechangeCallback: function(newValue, oldValue, slider) {\n},\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Horizontal slider.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Vertical slider.</li> </ul> </li> <li><code>reverseAxis</code> : <ul> <li><code>false</code> : Map left/top to <code>0</code>, and right/bottom to <code>1</code>. Default behavior.</li> <li><code>true</code> : Map left/top to <code>1</code>, and right/bottom to <code>0</code>.</li> </ul> </li> <li><code>background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>value</code> : Initial value (0 ~ 1).</li> <li><code>gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disalbe this feature.</li> </ul> </li> <li><code>easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, slider) {\n}\n</code></pre></li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-slider/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySlider extends RexPlugins.UI.Slider {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var slider = new MySlider(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>slider.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-slider/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = slider.getElement('background');\n</code></pre></li> <li>Track game object     <pre><code>var track = slider.getElement('track');\n</code></pre></li> <li>Indicator game object     <pre><code>var track = slider.getElement('indicator');\n</code></pre></li> <li>Thumb track game object     <pre><code>var action = slider.getElement('thumb');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = slider.getElement('#' + name);\n// var gameObject = slider.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = slider.getByName(name);\n// var gameObject = slider.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-slider/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = slider.enable;\n</code></pre></li> <li>Set     <pre><code>slider.setEanble(enable);\n</code></pre>     or     <pre><code>slider.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-slider/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value     <pre><code>var value = slider.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = slider.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = slider.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>slider.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>slider.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>slider.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>slider.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>slider.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>slider.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-slider/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>slider.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>slider.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>slider.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>slider.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>slider.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-slider/#gap","title":"Gap","text":"<ul> <li>Set     <pre><code>slider.setGap(gap);  // gap: 0~1\n</code></pre>     or     <pre><code>slider.setGap(gap, min, max);  // gap: min~max\n</code></pre></li> <li>Get     <pre><code>var gap = slider.gap;  // gap: 0~1\n</code></pre></li> </ul>"},{"location":"ui-slider/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>slider.on('valuechange', function(newValue, oldValue, slider){\n//\n}, scope);\n</code></pre></li> <li>On input start     <pre><code>slider.on('inputstart', function(pointer) {\n\n}, scope);\n</code></pre></li> <li>On input end     <pre><code>slider.on('inputend', function(pointer) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-slider/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-statesimage/","title":"States image","text":""},{"location":"ui-statesimage/#introduction","title":"Introduction","text":"<p>Using plain object to create image game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statesimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statesimage/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statesimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesImage } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var image = new StatesImage(scene, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#create-image-object","title":"Create image object","text":"<pre><code>var image = scene.rexUI.add.statesImage({\nx: 0,\ny: 0,\nkey:\n// frame:\n// tint: 0xffffff,\n// alpha: 1,\n// scale: 1,\n\n// Style override in active state\n// 'active.key': undefined,\n// 'active.frame': undefined,\n// 'active.tint': undefined,\n// 'active.alpha': undefined,\n// 'active.scale': undefined,\n\n// Style override in hover state\n// 'hover.key': undefined,\n// 'hover.frame': undefined,\n// 'hover.tint': undefined,\n// 'hover.alpha': undefined,\n// 'hover.scale': undefined,\n\n// Style override in disable state\n// 'disable.key': undefined,\n// 'disable.frame': undefined,\n// 'disable.tint': undefined,\n// 'disable.alpha': undefined,\n// 'disable.scale': undefined,\n\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>key</code>, <code>frame</code> : Texture.</li> <li><code>'active.key'</code>, <code>'active.frame'</code>, <code>'active.tint'</code>, <code>'active.alpha'</code>, <code>'active.scale'</code>, ... ect : Override these properties in active state</li> <li><code>'hover.key'</code>, <code>'hover.frame'</code>, <code>'hover.tint'</code>, <code>'hover.alpha'</code>, <code>'hover.scale'</code>, ... ect : Override these properties in hover state</li> <li><code>'disable.key'</code>, <code>'disable.frame'</code>, <code>'disable.tint'</code>, <code>'disable.alpha'</code>, <code>'disable.scale'</code>, ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statesimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStatesImage extends RexPlugins.UI.StatesImage {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyStatesImage(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#set-state","title":"Set state","text":""},{"location":"ui-statesimage/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>image.setActiveState();\n// image.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>image.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>image.setHoverState();\n// image.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>image.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>image.setDisableState();\n// image.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>image.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#other-properties","title":"Other properties","text":"<p>See Image, game object</p>"},{"location":"ui-statesroundrectangle/","title":"States round rectangle","text":""},{"location":"ui-statesroundrectangle/#introduction","title":"Introduction","text":"<p>Using plain object to create round rectangle game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statesroundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statesroundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statesroundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add round-rectangle object     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add round-rectangle object     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesRoundRectangle } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var rect = new StatesRoundRectangle(scene, config);\nscene.add.existing(roundRectangle);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.rexUI.add.statesRoundRectangle({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\n// color: 0xffffff,\n// alpha: 1,\n// strokeColor: 0xffffff,\n// strokeAlpha: 1,\n// strokeWidth: 2,\n// radius: 0,\n\n// Style override in active state\n// 'active.color': undefined,\n// 'active.alpha': undefined,\n// 'active.strokeColor': undefined,\n// 'active.strokeAlpha': undefined,\n// 'active.strokeWidth': undefined,\n// 'active.radius': undefined,\n// 'active.xxx': ...\n\n// Style override in hover state\n// 'hover.color': undefined,\n// 'hover.alpha': undefined,\n// 'hover.strokeColor': undefined,\n// 'hover.strokeAlpha': undefined,\n// 'hover.strokeWidth': undefined,\n// 'hover.radius': undefined,\n// 'hover.xxx': ...\n\n// Style override in disable state\n// 'disable.color': undefined,\n// 'disable.alpha': undefined,\n// 'disable.strokeColor': undefined,\n// 'disable.strokeAlpha': undefined,\n// 'disable.strokeWidth': undefined,\n// 'disable.radius': undefined,\n// 'disable.xxx': ...\n\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> : <ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>'active.color'</code>, <code>'active.alpha'</code>, <code>'active.strokeColor'</code>, <code>'active.strokeAlpha'</code>, <code>'active.strokeWidth'</code>, <code>'active.radius'</code>, <code>'active.xxx'</code>, ... ect : Override these properties in active state</li> <li><code>'hover.color'</code>, <code>'hover.alpha'</code>, <code>'hover.strokeColor'</code>, <code>'hover.strokeAlpha'</code>, <code>'hover.strokeWidth'</code>, <code>'hover.radius'</code>, <code>'hover.xxx'</code>, ... ect : Override these properties in hover state</li> <li><code>'disable.color'</code>, <code>'disable.alpha'</code>, <code>'disable.strokeColor'</code>, <code>'disable.strokeAlpha'</code>, <code>'disable.strokeWidth'</code>, <code>'disable.radius'</code>, <code>'disable.xxx'</code>, ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statesroundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangle extends RexPlugins.UI.StatesRoundRectangle {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangle(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#set-state","title":"Set state","text":""},{"location":"ui-statesroundrectangle/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>rect.setActiveState();\n// rect.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>rect.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>rect.setHoverState();\n// rect.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>rect.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>rect.setDisableState();\n// rect.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>rect.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#other-properties","title":"Other properties","text":"<p>See Round rectangle, game object</p>"},{"location":"ui-statestext/","title":"States text","text":""},{"location":"ui-statestext/#introduction","title":"Introduction","text":"<p>Using plain object to create text game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statestext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statestext/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statestext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesText } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var txt = new StatesText(scene, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#create-text-object","title":"Create text object","text":"<pre><code>var txt = scene.rexUI.add.statesText({\nx: 0,\ny: 0,\n\n// Normal text-style\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nrtl: false,\ntestString: '|M\u00c9qgy',\nwordWrap: {\nwidth: null,\ncallback: null,\ncallbackScope: null,\nuseAdvancedWrap: false\n},\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// Style override in active state\n'active.fontFamily': undefined,\n'active.fontSize': undefined,\n'active.fontStyle': undefined,\n'active.backgroundColor': undefined,\n'active.color': undefined,\n'active.fill': undefined,\n'active.stroke': undefined,\n'active.strokeThickness': undefined,\n\n// Style override in hover state\n'hover.fontFamily': undefined,\n'hover.fontSize': undefined,\n'hover.fontStyle': undefined,\n'hover.backgroundColor': undefined,\n'hover.color': undefined,\n'hover.fill': undefined,\n'hover.stroke': undefined,\n'hover.strokeThickness': undefined,\n\n// Style override in disable state\n'disable.fontFamily': undefined,\n'disable.fontSize': undefined,\n'disable.fontStyle': undefined,\n'disable.backgroundColor': undefined,\n'disable.color': undefined,\n'disable.fill': undefined,\n'disable.stroke': undefined,\n'disable.strokeThickness': undefined,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>key</code>, <code>frame</code> : Texture.</li> <li><code>'active.fontFamily'</code>, <code>'active.fontSize'</code>, <code>'active.fontStyle'</code>, <code>'active.backgroundColor'</code>, <code>'active.color'</code>,  <code>'active.fill'</code>, <code>'active.stroke'</code>, <code>'active.strokeThickness'</code> ... ect : Override these properties in active state</li> <li><code>'hover.fontFamily'</code>, <code>'hover.fontSize'</code>, <code>'hover.fontStyle'</code>, <code>'hover.backgroundColor'</code>, <code>'hover.color'</code>,  <code>'hover.fill'</code>, <code>'hover.stroke'</code>, <code>'hover.strokeThickness'</code> ... ect : Override these properties in hover state</li> <li><code>'disable.fontFamily'</code>, <code>'disable.fontSize'</code>, <code>'disable.fontStyle'</code>, <code>'disable.backgroundColor'</code>, <code>'disable.color'</code>,  <code>'disable.fill'</code>, <code>'disable.stroke'</code>, <code>'disable.strokeThickness'</code> ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statestext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStatesText extends RexPlugins.UI.StatesText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyStatesText(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#set-state","title":"Set state","text":""},{"location":"ui-statestext/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>txt.setActiveState();\n// txt.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>txt.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>txt.setHoverState();\n// txt.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>txt.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>txt.setDisableState();\n// txt.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>txt.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#other-properties","title":"Other properties","text":"<p>See Text, game object</p>"},{"location":"ui-tabpages/","title":"Tab pages","text":""},{"location":"ui-tabpages/#introduction","title":"Introduction","text":"<p>A container with tabs and pages, only current page is visible.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tabpages/#live-demos","title":"Live demos","text":"<ul> <li>Tabpage</li> </ul>"},{"location":"ui-tabpages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tabpages/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tabpages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = scene.rexUI.add.tabPages(config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = scene.rexUI.add.tabPages(config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TabPages } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = new TabPages(scene, config);\nscene.add.existing(tabPages);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#add-tab-pages-object","title":"Add tab-pages object","text":"<pre><code>var tabPages = scene.rexUI.add.tabPages({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// background: backgroundGameObject,\n\ntabPosition: 'top',\nwrapTabs: false,\ntabs: {\n// width:\n// height:\n// rtl:\n\n// background: backgroundGameObject,\nexpand:\nalign:\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\nspace: { left: 0, right:0, top:0, bottom:0, item:0 }\n},\n\npages: {\nspace: { left: 0, right:0, top:0, bottom:0 },\nfadeIn: 0,\n},\n\nexpand: {\ntabs: false,\n},\n\nalign: {\ntabs: 'left',\n},\n\n// space: { left:0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>tabPosition</code> : Put tabs at top, bottom, left, right of pages.<ul> <li><code>'top'</code>, <code>'bottom'</code>, <code>'left'</code>, <code>'right'</code> : Default value is <code>'top'</code>.</li> </ul> </li> <li><code>wrapTabs</code> :<ul> <li><code>false</code> : Uses Buttons as Tabs, default behavior.</li> <li><code>true</code> : <ul> <li>Using FixWidthButtons as Tabs, if <code>tabPosition</code> is <code>'top'</code> or <code>'bottom'</code>. </li> <li>Using Buttons as Tabs, if <code>tabPosition</code> is <code>'left'</code> or <code>'right'</code> </li> </ul> </li> </ul> </li> <li><code>tabs</code> : Configuration of tabs, which is a buttons game object.<ul> <li><code>tabs.width</code>, <code>tabs.height</code> : Minimum width, minimum height of tabs, to preserve space if tabs is empty, optional.</li> <li><code>tabs.rtl</code> : <ul> <li><code>true</code> : Layout buttons from right to left.</li> <li><code>false</code> : Layout buttons from left to right. Default behavior.</li> </ul> </li> <li><code>tabs.background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>tabs.space</code> : <ul> <li><code>tabs.space.top</code>, <code>tabs.space.bottom</code>, <code>tabs.space.left</code>, <code>tabs.space.right</code> : Padding around bottons.</li> <li><code>tabs.space.item</code> : Space between 2 button game objects.</li> </ul> </li> <li><code>tabs.expand</code> : Set <code>true</code> to expand width, or height of tabs game objects.  </li> <li><code>tabs.click</code>: Configuration of button clicking.<ul> <li><code>tabs.click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>tabs.click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> </ul> </li> <li><code>pages</code> : Configuration of pages<ul> <li><code>pages.space</code> : Pads spaces.<ul> <li><code>pages.space.left</code>, <code>pages.space.right</code>, <code>pages.space.top</code>, <code>pages.space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>pages.fadeIn</code> : Fade-in duration of current page.<ul> <li><code>0</code> : No fade-in effect. Default behavior.</li> </ul> </li> </ul> </li> <li><code>expand</code> :<ul> <li><code>expand.tabs</code> : Set <code>true</code> to expand width/height of tabs. Default value is <code>false</code>.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>align.tabs</code> :  <ul> <li><code>'left'</code>. <code>'right'</code>, <code>'center'</code> : Align tabs to left/right/center side when <code>tabPosition</code> is <code>'top'</code> or <code>'bottom'</code>.</li> <li><code>'top'</code>. <code>'bottom'</code>, <code>'center'</code> : Align tabs to top/bottom/center side when <code>tabPosition</code> is <code>'left'</code> or <code>'right'</code>.</li> </ul> </li> </ul> </li> <li><code>space</code> :<ul> <li>An object: Padding of button game objects.<ul> <li><code>space.top</code>, <code>space.bottom</code>, <code>space.left</code>, <code>space.right</code> : Padding around bottons.</li> <li><code>space.item</code> : Space between tabs and pages.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tabpages/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTabPages extends RexPlugins.UI.TabPages {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tabPages = new MyTabPages(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#add-page","title":"Add page","text":"<p>Add a tab/page to last of tabs/pages.</p> <pre><code>tabPages.addPage(key, tabGameObject, pageGameObject).layout();\n</code></pre> <p>or </p> <pre><code>tabPages.addPage({\n// key: undefined,\ntab: tabGameObject,\npage: pageGameObject\n}).layout();\n</code></pre> <ul> <li><code>key</code> : Unique string name of this page.<ul> <li><code>undefined</code> : Create an UUID for key.</li> </ul> </li> <li><code>tab</code> : A game object, will put it into tabs.</li> <li><code>page</code> : A game object, will put it into pages.</li> </ul> <p>Note</p> <p>Invoke <code>tabPages.layout()</code> after adding pages.</p>"},{"location":"ui-tabpages/#swap-to-page","title":"Swap to page","text":"<ul> <li>Swap to related page when clicking tab.</li> <li>Swap to page by key/index     <pre><code>tabPages.swapPage(key);\n</code></pre> <pre><code>tabPages.swapPage(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> <li>Swap to first page     <pre><code>tabPages.swapFirstPage();\n</code></pre></li> <li>Swap to last page     <pre><code>tabPages.swapLastPage();\n</code></pre></li> <li>Swap page without fade-in transition     <pre><code>tabPages.swapPage(key, 0);\n</code></pre> <pre><code>tabPages.swapPage(index, 0);\n</code></pre> <pre><code>tabPages.swapFirstPage(0);\n</code></pre> <pre><code>tabPages.swapLastPage(0);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#remove-page","title":"Remove page","text":"<ul> <li>Remove page     <pre><code>tabPages.removePage(key);\n</code></pre> <pre><code>tabPages.removePage(index);\n</code></pre></li> <li>Remove and destroy page     <pre><code>tabPages.removePage(key, true);\n</code></pre> <pre><code>tabPages.removePage(index, true);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Pages <pre><code>var gameObject = tabPages.getElement('pages');\n</code></pre></li> <li>Tabs, a buttons <pre><code>var gameObject = tabPages.getElement('tabs');\n</code></pre></li> <li>Page by key/index     <pre><code>var gameObject = tabPages.getPage(key);\n</code></pre> <pre><code>var gameObject = tabPages.getPage(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> <li>Tab by key/index     <pre><code>var gameObjects = tabPages.getTab(key);\n</code></pre> <pre><code>var gameObjects = tabPages.getTab(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tabPages.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tabPages.getByName(name);\n// var gameObject = tabPages.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tabpages/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite, Pages, Buttons</p>"},{"location":"ui-tabpages/#events","title":"Events","text":"<ul> <li>When swapping to a page by clicking tab, or <code>tabPages.swapPage(key)</code> <pre><code>pages.on('tab.focus', function(tab, key) {\n// ...\n}, scope);\npages.on('page.focus', function(page, key) {\n// ...\n}, scope);\n</code></pre> <pre><code>pages.on('tab.blur', function(tab, key) {\n// ...\n}, scope);\npages.on('page.blur', function(page, key) {\n// ...\n}, scope);    </code></pre><ul> <li><code>tab</code> : Game object of tab.</li> <li><code>page</code> : Game object of page.</li> <li><code>key</code> : Unique string name of the page.</li> </ul> </li> </ul>"},{"location":"ui-tabs/","title":"Tabs","text":""},{"location":"ui-tabs/#introduction","title":"Introduction","text":"<p>A container with 4 groups of buttons around a center panel.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tabs/#live-demos","title":"Live demos","text":"<ul> <li>Tabs</li> </ul>"},{"location":"ui-tabs/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tabs/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tabs/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = scene.rexUI.add.tabs(config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = scene.rexUI.add.tabs(config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tabs } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = new Tabs(scene, config);\nscene.add.existing(tabs);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#add-tabs-object","title":"Add Tabs object","text":"<pre><code>var tabs = scene.rexUI.add.tabs({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\npanel: panelGameObject,\n\nleftButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nrightButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\ntopButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nbottomButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nleftButtonsBackground: leftButtonsBackgroundGameObject,\nrightButtonsBackground: rightButtonsBackgroundGameObject,\ntopButtonsBackground: topButtonsBackgroundGameObject,\nbottomButtonsBackground: bottomButtonsBackgroundGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nleftButtonsOffset: 0,\nrightButtonsOffset: 0,\ntopButtonsOffset: 0,\nbottomButtonsOffset: 0,\n\nleftButton: 0,\nrightButton: 0,\ntopButton: 0,\nbottomButton: 0\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>panel</code> : Game object of center panel.</li> <li><code>leftButtons</code>, <code>rightButtons</code>, <code>topButtons</code>, <code>bottomButtons</code> : Array of button game object.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>leftButtonsBackground</code>, <code>rightButtonsBackground</code>, <code>topButtonsBackground</code>, <code>bottomButtonsBackground</code> : Game object of leftButtons' background, rightButtons' background, topButtons' background, bottomButtons' background, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.leftButtonsOffset</code>, <code>space.rightButtonsOffset</code> : Top offset of buttons group.</li> <li><code>space.topButtonsOffset</code>, <code>space.bottomButtonsOffset</code> : Left offset of buttons group.</li> <li><code>space.leftButton</code>, <code>space.rightButton</code>, <code>space.topButton</code>, <code>space.bottomButton</code> : Space between 2 button game objects.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTabs extends RexPlugins.UI.Tabs {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tabs = new MyTabs(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>tabs.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-tabs/#other-properties","title":"Other properties","text":"<p>See grid sizer object, base-sizer object.</p>"},{"location":"ui-tabs/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>tabs.on('button.click', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Pointer-over button     <pre><code>tabs.on('button.over', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Pointer-out button     <pre><code>tabs.on('button.out', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Enable button's input     <pre><code>tabs.on('button.enable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> <li>Disable button's input     <pre><code>tabs.on('button.disalbe', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#emit-button-click-event","title":"Emit button click event","text":"<ul> <li>Emit button click event in a given group     <pre><code>tabs.emitButtonClick(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Emit left/right/top/bottom button click event     <pre><code>tabs.emitLeftButtonClick(index);\ntabs.emitRightButtonClick(index);\ntabs.emitTopButtonClick(index);\ntabs.emitBottomButtonClick(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable button input in a given group     <pre><code>tabs.setButtonEnable(groupName, index);\n// tabs.setButtonEnable(groupName, index, true);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Enable left/right/top/bottom button     <pre><code>tabs.setLeftButtonEnable(index);\ntabs.setRightButtonEnable(index);\ntabs.setTopButtonEnable(index);\ntabs.setBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable button input in a given group     <pre><code>tabs.setButtonEnable(groupName, index, false);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable choice/action/toolbar/left-toolbar button's input     <pre><code>tabs.setLeftButtonEnable(index, false);\ntabs.setRightButtonEnable(index, false);\ntabs.setTopButtonEnable(index, false);\ntabs.setBottomButtonEnable(index, false);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Toggle button input in a given group     <pre><code>tabs.toggleButtonEnable(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.    </li> </ul> </li> <li>Toggle choice/action/toolbar/left-toolbar button's input     <pre><code>tabs.toggleLeftButtonEnable(index);\ntabs.toggleRightButtonEnable(index);\ntabs.toggleTopButtonEnable(index);\ntabs.toggleBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Get button input enable in a given group     <pre><code>var enabled = tabs.getButtonEnable(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.  </li> </ul> </li> <li>Get choice/action/toolbar/left-toolbar button's input enable     <pre><code>var enabled = tabs.getLeftButtonEnable(index);\nvar enabled = tabs.getRightButtonEnable(index);\nvar enabled = tabs.getTopButtonEnable(index);\nvar enabled = tabs.getBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = tabs.getElement('background');\n</code></pre></li> <li>Panel game object     <pre><code>var panel = tabs.getElement('panel');\n</code></pre></li> <li>Buttons<ul> <li>Button game object in a group     <pre><code>var bottons = tabs.getButton(groupName, index)\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index.</li> </ul> </li> <li>Left button game object     <pre><code>var bottons = tabs.getElement('leftButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getLeftButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('leftButtons[0]');\n</code></pre><ul> <li>First button of left buttons.</li> </ul> </li> <li>Right button game object     <pre><code>var bottons = tabs.getElement('rightButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getRightButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('rightButtons[0]');\n</code></pre><ul> <li>First button of right buttons.</li> </ul> </li> <li>Top button game object     <pre><code>var bottons = tabs.getElement('topButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getTopButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('topButtons[0]');\n</code></pre><ul> <li>First button of top buttons.</li> </ul> </li> <li>Bottom button game object     <pre><code>var bottons = tabs.getElement('bottomButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getBottomButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('bottomButtons[0]');\n</code></pre><ul> <li>First button of bottom buttons.</li> </ul> </li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tabs.getElement('#' + name);\n// var gameObject = tabs.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tabs.getByName(name);\n// var gameObject = tabs.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#add-button","title":"Add button","text":"<ul> <li>Add button in a group     <pre><code>tabs.addButton(groupName, gameObject);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add left/right/top/bottom button     <pre><code>tabs.addLeftButton(gameObject);\ntabs.addRightButton(gameObject);\ntabs.addTopButton(gameObject);\ntabs.addBottomButton(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#remove-button","title":"Remove button","text":"<ul> <li>Remove a button from a group     <pre><code>tabls.removeButton(groupName, index, destroyChild);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove left/right/top/bottom button     <pre><code>tabs.removeLeftButton(index, destroyChild);\ntabs.removeRightButton(index, destroyChild);\ntabs.removeTopButton(index, destroyChild);\ntabs.removeBottomButton(index, destroyChild);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttons of a group     <pre><code>tabls.clearButtons(groupName, destroyChild);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove all left/right/top/bottom buttons     <pre><code>tabs.clearLeftButtons(destroyChild);\ntabs.clearRightButtons(destroyChild);\ntabs.clearTopButtons(destroyChild);\ntabs.clearBottomButtosn(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>tabs.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show button in a group     <pre><code>tabs.showButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Show left/right/top/bottom button     <pre><code>tabs.showLeftButton(index);\ntabs.showRightButton(index);\ntabs.showTopButton(index);\ntabs.showBottomButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide button in a group     <pre><code>tabs.hideButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide left/right/top/bottom button.     <pre><code>tabs.hideLeftButton(index);\ntabs.hideRightButton(index);\ntabs.hideTopButton(index);\ntabs.hideBottomButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#for-each-button","title":"For each button","text":"<ul> <li>For each button in a group     <pre><code>var enabled = tabs.forEachButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object. </li> </ul> </li> <li>For each button in left/right/top/bottom group     <pre><code>tabs.forEachLeftButton(callback, scope);\ntabs.forEachRightButton(callback, scope);\ntabs.forEachTopButton(callback, scope);\ntabs.forEachBottomButton(callback, scope);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(button, index, buttons) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-textarea/","title":"Text area","text":""},{"location":"ui-textarea/#introduction","title":"Introduction","text":"<p>A container with a text, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-textarea/#live-demos","title":"Live demos","text":"<ul> <li>Text-area</li> <li>Bitmap text</li> <li>Hide unscrollable slider</li> <li>Append text</li> <li>Scroll to line</li> <li>Modal dialog</li> </ul>"},{"location":"ui-textarea/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-textarea/#install-plugin","title":"Install plugin","text":""},{"location":"ui-textarea/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = scene.rexUI.add.textArea(config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = scene.rexUI.add.textArea(config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TextArea } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = new TextArea(scene, config);\nscene.add.existing(textArea);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#add-text-area-object","title":"Add text-area object","text":"<pre><code>var textArea = scene.rexUI.add.textArea({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\n\ntext: textGameObject,\n// textWidth: undefined,\n// textHeight: undefined,\n// textMask: false,\n// alwaysScrollable: false,\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n\n// indicator: indicatorGameObject,\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// },\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntext: 0,\n// text: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\ncontent: '',\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of text area.</li> <li><code>text</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>textWidth</code> : Fixed width of text game object. Set <code>undefined</code> to ignore this feature.</li> <li><code>textHeight</code> : Fixed height of text game object. Set <code>undefined</code> to ignore this feature.</li> <li><code>textMask</code> :<ul> <li><code>false</code> : Crop text game object. Default behavior if text game object has <code>setCrop</code> method.</li> <li><code>true</code> : Apply mask on text to crop text game object. Default behavior if text game object does not have <code>setCrop</code> method (ex. bitmaptext game object).</li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : Game object of slider background, optional.</li> <li><code>slider.track</code> : Game object of track.</li> <li><code>slider.thumb</code> : Game object of thumb.</li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over textArea.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>alwaysScrollable</code> : <ul> <li><code>false</code> : Can't scroll if content is less then 1 page. Default behavior.</li> <li><code>true</code> : Can scroll in all cases</li> </ul> </li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.text</code> :<ul> <li>A number: Space between text object and slider object.</li> <li>An object: Padding of text object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.text.top</code>, <code>space.text.bottom</code> : Top, bottom padding space of text object.</li> <li><code>space.text.right</code> : Space between text object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.text.left</code>, <code>space.text.right</code> : Left, right padding space of text object.</li> <li><code>space.text.bottom</code> : Space between text object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and text object.</li> <li><code>space.footer</code> : Space between footer and text object.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>content</code> : Content of this text area.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-textarea/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextArea extends RexPlugins.UI.TextArea {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var textArea = new MyTextArea(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>textArea.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-textarea/#content","title":"Content","text":"<ul> <li>Set     <pre><code>textArea.setText(text);\n</code></pre></li> <li>Append     <pre><code>textArea.appendText(text);\n</code></pre></li> <li>Get    <pre><code>var text = textArea.text;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-content","title":"Scroll content","text":"<ul> <li>Scroll down lines     <pre><code>textArea.scrollLine(lineCount);\n</code></pre></li> <li>Set     <pre><code>textArea.childOY = oy;\n// textArea.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>textArea.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>textArea.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>textArea.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = textArea.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = textArea.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = textArea.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = textArea.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>textArea.t = t;  // t: 0~1\n// textArea.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>textArea.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = textArea.t;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>textArea.scrollToTop();\n</code></pre><ul> <li>Equal to <code>textArea.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>textArea.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>textArea.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-textarea/#scroll-to-line","title":"Scroll to line","text":"<ul> <li>Scroll to next line     <pre><code>textArea.scrollToNextLine();\n</code></pre></li> <li>Scroll to next n line     <pre><code>textArea.scrollToNextLine(n);\n</code></pre></li> <li>Scroll to line     <pre><code>textArea.scrollToLine(lineIndex);\n</code></pre></li> <li>Get current line index     <pre><code>var lineIndex = textArea.lineIndex;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>textArea.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>textArea.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = textArea.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>textArea.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>textArea.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = textArea.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-textarea/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>textArea.on('scroll', function(textArea) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>textArea.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>textArea.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-textarea/#lines-count","title":"Lines count","text":"<pre><code>var linesCount = textArea.linesCount;\n</code></pre>"},{"location":"ui-textarea/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-textarea/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = textArea.getElement('background');\n</code></pre></li> <li>Text game object     <pre><code>var text = textArea.getElement('text');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = textArea.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = textArea.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller     <pre><code>var scroller = textArea.getElement('scroller');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = textArea.getElement('#' + name);\n// var gameObject = textArea.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = textArea.getByName(name);\n// var gameObject = textArea.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-textbox/","title":"Text box","text":""},{"location":"ui-textbox/#introduction","title":"Introduction","text":"<p>A container with an icon, (typing and paging) text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-textbox/#live-demos","title":"Live demos","text":"<ul> <li>Text box</li> <li>Inner sizer</li> <li>Speech bubble background</li> <li>Bitmap text</li> <li>Page break</li> <li>Show last page</li> </ul>"},{"location":"ui-textbox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-textbox/#install-plugin","title":"Install plugin","text":""},{"location":"ui-textbox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = scene.rexUI.add.textBox(config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = scene.rexUI.add.textBox(config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TextBox } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = new TextBox(scene, config);\nscene.add.existing(textBox);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#add-textbox-object","title":"Add textbox object","text":"<pre><code>var textBox = scene.rexUI.add.textBox({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\nrtl: false,\n\nbackground: backgroundGameObject,\n\ninnerBackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\nseparator: separatorGameObject,\n\nicon: iconGameObject,\niconMask: false,\n\ntext: textGameObject,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {\ntitle: 'left',\ntext: 'left',\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ninnerLeft: 0, innerRight: 0, innerTop: 0, innerBottom: 0,\n\ntitle: 0, titleLeft: 0, titleRight: 0,\nicon: 0, iconTop: 0, iconBottom: 0,\ntext: 0, textLeft: 0, textRight: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// page: { \n//    maxLines: undefined,\n//    pageBreak: '\\f\\n',\n// },\n// typing: { \n//    wrap: false,\n//    speed: 333,    \n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : <ul> <li><code>0</code> : <code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically, then layout with <code>icon</code>, <code>action</code> horizontally.</li> <li><code>1</code> : <code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally, then layout with <code>title</code>, <code>separator</code> vertically. Default behavior.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>false</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from left to right. Default behavior.</li> <li><code>true</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from right to left.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>innerBackground</code> : Game object of background inside innerSizer, optional.<ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li><code>title</code> : Game object of title, optional.</li> <li><code>separator</code> : Game object of separator, optional.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>text</code> : Text object, bbcode text object, tag text object, or bitmap text object<ul> <li>Max lines and wrapped width<ul> <li>Built-in text object : <code>maxLines</code> and wrap width (<code>wordWrap.width</code>).</li> <li>BBcode text object : <code>maxLines</code> and wrap width (<code>wrap.width</code>).</li> <li>Tag text object : <code>maxLines</code> and wrap width (<code>wrap.width</code>).</li> <li>Bitmap text object : Set maxLines at <code>page.maxLines</code> in configuration of page behavior, and wrap width at <code>text.setMaxWidth(width)</code>.</li> </ul> </li> <li>Fixed width and fixed height<ul> <li>Built-in text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> <li>BBcode text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> <li>Tag text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> </ul> </li> </ul> </li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.</li> <li><code>align</code> : Alignment of title, text game objects.<ul> <li><code>align.title</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> <li><code>align.text</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.innerLeft</code>, <code>space.innerRight</code>, <code>space.innerTop</code>, <code>space.innerBottom</code> : Space parameter of inner sizer.</li> <li><code>space.title</code> : Space between title game object and separator game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Space at left or right side of title game object.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.textLeft</code>, <code>space.textRight</code> : Space at left or right side of text game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>page</code> : Configuration of page behavior<ul> <li><code>page.maxLines</code> : Max lines of a page.</li> <li><code>page.pageBreak</code> : Symbol of page-break. Default value is <code>'\\f\\n'</code>.</li> </ul> </li> <li><code>typing</code> : Configuration of type behavior <ul> <li><code>typing.wrap</code> : <ul> <li><code>false</code> : Don't insert <code>\\n</code>, default behavior.</li> <li><code>true</code> : Insert <code>\\n</code> to wrap content according to style of text, to prevent typing jittering.</li> </ul> </li> <li><code>typing.speed</code> : Typing speed in ms, default value is <code>333</code>.</li> </ul> </li> </ul>"},{"location":"ui-textbox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextBox extends RexPlugins.UI.TextBox {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var textBox = new MyTextBox(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#typing","title":"Typing","text":"<ul> <li>Start     <pre><code>textBox.start(content, typingSpeed);\n</code></pre><ul> <li><code>content</code> : Content string.</li> <li><code>speed</code> : Typing speed in ms.<ul> <li><code>undefined</code> : Use previous typing speed.</li> </ul> </li> </ul> </li> <li>Stop     <pre><code>textBox.stop();\n</code></pre><ul> <li>Will fire <code>'stop'</code> event.</li> </ul> </li> <li>Stop and show all text     <pre><code>textBox.stop(true);\n</code></pre><ul> <li>Will fire <code>'stop'</code>, <code>'type'</code>, <code>'pageend'</code> event.</li> </ul> </li> <li>Stop and show all text at last page     <pre><code>textBox.showLastPage();\n</code></pre><ul> <li>Will fire <code>'type'</code>, <code>'pageend'</code>, <code>'complete'</code> events.</li> </ul> </li> <li>Pause     <pre><code>textBox.pause();\n</code></pre><ul> <li>Will fire <code>'pause'</code> event.</li> </ul> </li> <li>Resume     <pre><code>textBox.resume();\n</code></pre><ul> <li>Will fire <code>'resume'</code> event.</li> </ul> </li> <li>Is typing     <pre><code>var isTyping = textBox.isTyping;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#typing-speed","title":"Typing speed","text":"<ul> <li>Change typing speed     <pre><code>textBox.setTypingSpeed(speed);\n</code></pre><ul> <li><code>speed</code> : Typing speed in ms.</li> </ul> </li> <li>Get typing speed     <pre><code>var speed = textBox.typingSpeed;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#page","title":"Page","text":"<ul> <li>Type next page     <pre><code>textBox.typeNextPage();\n</code></pre></li> <li>Is last page     <pre><code>var isLastPage = textBox.isLastPage;\n</code></pre></li> <li>Is first page     <pre><code>var isFirstPage = textBox.isFirstPage;\n</code></pre></li> <li>Current page index     <pre><code>var pageIndex = textBox.pageIndex;\n</code></pre></li> <li>Number of pages     <pre><code>var pageIndex = textBox.pageCount;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>textBox.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Get texture key, frame name     <pre><code>var textureKey = textBox.texture.key;\nvar frameName = textBox.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = textBox.getElement('background');\n</code></pre></li> <li>InnerSizer     <pre><code>var innerSizer = textBox.getElement('innerSizer');\n</code></pre><ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li>Background game object inside innerSizer     <pre><code>var innerBackground = textBox.getElement('innerBackground');\n</code></pre></li> <li>Title game object     <pre><code>var textObject = textBox.getElement('title');\n</code></pre></li> <li>Separator game object     <pre><code>var textObject = textBox.getElement('separator');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = textBox.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = textBox.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = textBox.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = textBox.getElement('#' + name);\n// var gameObject = textBox.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = textBox.getByName(name);\n// var gameObject = textBox.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-textbox/#events","title":"Events","text":"<ul> <li>On typing start.     <pre><code>textBox.on('start', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On changing content of text game object, will also re-layout textbox :     <pre><code>textBox.on('type', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing a character :     <pre><code>textBox.on('typechar', function(char) {\n// ...\n}, scope);\n</code></pre></li> <li>On Typing the last character of current page.     <pre><code>textBox.on('pageend', function() {\nif (textBox.isLastPage) {\n// ...            \n}\n}, scope);\n</code></pre></li> <li>On typing all pages complete, equal to <code>'pageend'</code> event with <code>textBox.isLastPage</code>.     <pre><code>textBox.on('complete', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing paused by <code>textBox.pause()</code>.     <pre><code>textBox.on('pause', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing resume by <code>textBox.resume()</code>.     <pre><code>textBox.on('resume', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing stop by <code>textBox.stop()</code>.     <pre><code>textBox.on('stop', function() {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#other-properties","title":"Other properties","text":"<p>See title label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-titlelabel/","title":"Title label","text":""},{"location":"ui-titlelabel/#introduction","title":"Introduction","text":"<p>A container with title, text in two rows, and an icon, background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-titlelabel/#live-demos","title":"Live demos","text":"<ul> <li>Title-label</li> <li>Layout modes</li> </ul>"},{"location":"ui-titlelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-titlelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-titlelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.titleLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.titleLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TitleLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new TitleLabel(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.titleLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\nrtl: false,\n\nbackground: backgroundGameObject,\n\ninnerBackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\nseparator: separatorGameObject,\n\nicon: iconGameObject,\niconMask: false,\n\ntext: textGameObject,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {\ntitle: 'left',\ntext: 'left',\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ninnerLeft: 0, innerRight: 0, innerTop: 0, innerBottom: 0,\n\ntitle: 0, titleLeft: 0, titleRight: 0,\nicon: 0, iconTop: 0, iconBottom: 0,\ntext: 0, textLeft: 0, textRight: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : <ul> <li><code>0</code> : <code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically, then layout with <code>icon</code>, <code>action</code> horizontally.</li> <li><code>1</code> : <code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally, then layout with <code>title</code>, <code>separator</code> vertically.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>false</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from left to right. Default behavior.</li> <li><code>true</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from right to left.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>innerBackground</code> : Game object of background inside innerSizer, optional.<ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li><code>title</code> : Game object of title, optional.</li> <li><code>separator</code> : Game object of separator, optional.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.   </li> </ul> </li> <li><code>text</code> : Game object of text.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : Alignment of title, text game objects.<ul> <li><code>align.title</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> <li><code>align.text</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.innerLeft</code>, <code>space.innerRight</code>, <code>space.innerTop</code>, <code>space.innerBottom</code> : Space parameter of inner sizer.</li> <li><code>space.title</code> : Space between title game object and separator game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Space at left or right side of title game object.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.textLeft</code>, <code>space.textRight</code> : Space at left or right side of text game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-titlelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTitleLabel extends RexPlugins.UI.TitleLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyTitleLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#layout-modes","title":"Layout modes","text":""},{"location":"ui-titlelabel/#mode-0","title":"Mode 0","text":"<p><code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically inside innerSizer, then layout with <code>icon</code>, <code>action</code> horizontally.</p> Icon Title Action Separator Text"},{"location":"ui-titlelabel/#mode-1","title":"Mode 1","text":"<p><code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally inside innerSizer, then layout with <code>title</code>, <code>separator</code> vertically.</p> Title Separator Icon Text Action"},{"location":"ui-titlelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-titlelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>InnerSizer     <pre><code>var innerSizer = label.getElement('innerSizer');\n</code></pre><ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li>Background game object inside innerSizer     <pre><code>var innerBackground = label.getElement('innerBackground');\n</code></pre></li> <li>Title game object     <pre><code>var textObject = label.getElement('title');\n</code></pre></li> <li>Separator game object     <pre><code>var textObject = label.getElement('separator');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-titlelabel/#title","title":"Title","text":"<ul> <li>Get title string     <pre><code>var s = label.title;\n</code></pre></li> <li>Set title string     <pre><code>label.setTitle(s);\n</code></pre>     or     <pre><code>label.title = s;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = label.text;\n</code></pre></li> <li>Set text string     <pre><code>label.setText(s);\n</code></pre>     or     <pre><code>label.text = s;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame.     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-toast/","title":"Toast","text":""},{"location":"ui-toast/#introduction","title":"Introduction","text":"<p>Show text message for a short while.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-toast/#live-demos","title":"Live demos","text":"<ul> <li>Toast</li> </ul>"},{"location":"ui-toast/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-toast/#install-plugin","title":"Install plugin","text":""},{"location":"ui-toast/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add toast object     <pre><code>var toast = scene.rexUI.add.toast(config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add toast object     <pre><code>var toast = scene.rexUI.add.toast(config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Toast } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add toast object     <pre><code>var toast = new Toast(scene, config);\nscene.add.existing(toast);\n</code></pre></li> </ul>"},{"location":"ui-toast/#add-toast-object","title":"Add toast object","text":"<pre><code>var toast = scene.rexUI.add.toast({\nx: 0,\ny: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\ntext: textGameObject,\naction: actionGameObject,\nactionMask: false,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\nduration: {\nin: 200,\nhold: 1200,\nout: 200,\n},\n\n// transitIn: 0,\n// transitOut: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of toast.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>text</code> : Game object of text.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>duration</code> : Duration of displaying message<ul> <li><code>duration.in</code> : Duration of transit-in stage.</li> <li><code>duration.hold</code> : Duration of hold stage.</li> <li><code>duration.out</code> : Duration of transit-out stage.</li> </ul> </li> <li><code>transitIn</code> : Transit-in action.<ul> <li><code>0</code>, or <code>'popUp'</code> : Pop-up.</li> <li><code>1</code>, or <code>'fadeIn'</code> : Fade-in.</li> <li>A callback : Custom transit-in function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> <li><code>false</code>, <code>null</code> : No transitOut.</li> </ul> </li> <li><code>transitOut</code> : Transit-out action.<ul> <li><code>0</code>, or <code>'scaleDown'</code> : Scale-down.</li> <li><code>1</code>, or <code>'fadeOut'</code> : Fade-out.</li> <li>A callback : Custom transit-out function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> <li><code>false</code>, <code>null</code> : No transitOut.</li> </ul> </li> </ul> <p>Toast object will be invisible at beginning.</p>"},{"location":"ui-toast/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyToast extends RexPlugins.UI.Toast {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var toast = new MyToast(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#show-message","title":"Show message","text":"<pre><code>toast.showMessage(message);\n</code></pre> <ul> <li><code>message</code> : A string, or a callback.<ul> <li>A string. Apply this content to <code>text</code> game object.</li> <li>Callback. Invoke this callback to configurate toast object.     <pre><code>function(toast) {\n// var icon = toast.getElement('icon');\n// var text = toast.getElement('text');\n// var action = toast.getElement('action');\n}\n</code></pre></li> </ul> </li> </ul> <p>Toast displays message follows these steps : transit-in, hold, transit-out. New message will be pending until toast is back to idle.</p>"},{"location":"ui-toast/#display-time","title":"Display time","text":"<ul> <li>Transit-in time (<code>duration.in</code>)<ul> <li>Get     <pre><code>var time = toast.transitInTime;\n</code></pre></li> <li>Set     <pre><code>toast.setTransitInTime(time);\n</code></pre></li> </ul> </li> <li>Display time (<code>duration.hold</code>)<ul> <li>Get     <pre><code>var time = toast.displayTime;\n</code></pre></li> <li>Set     <pre><code>toast.setDisplayTime(time);\n</code></pre></li> </ul> </li> <li>Transit-out time (<code>duration.out</code>)<ul> <li>Get     <pre><code>var time = toast.transitOutTime;\n</code></pre></li> <li>Set     <pre><code>toast.setTransitOutTime(time);\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-toast/#transit-action","title":"Transit action","text":"<ul> <li>Set transit-in action     <pre><code>toast.setTransitInCallback(callback);\n</code></pre><ul> <li><code>callback</code> : Transit-in action<ul> <li><code>0</code>, or <code>'popUp'</code> : Pop-up.</li> <li><code>1</code>, or <code>'fadeIn'</code> : Fade-in.</li> <li>A callback : Custom transit-in function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Set transit-out action     <pre><code>toast.setTransitOutCallback(callback);\n</code></pre><ul> <li><code>callback</code> : Transit-out action<ul> <li><code>0</code>, or <code>'scaleDown'</code> : Scale-down.</li> <li><code>1</code>, or <code>'fadeOut'</code> : Fade-out.</li> <li>A callback : Custom transit-out function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-toast/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-tweaker/","title":"Tweaker","text":""},{"location":"ui-tweaker/#introduction","title":"Introduction","text":"<p>Fine-tuning properties of target object. Reference</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tweaker/#live-demos","title":"Live demos","text":"<ul> <li>Tweaker</li> <li>Bind target</li> <li>Horizontal tweaker</li> </ul>"},{"location":"ui-tweaker/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tweaker/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tweaker/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = scene.rexUI.add.tweaker(config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = scene.rexUI.add.tweaker(config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tweaker } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = new Tweaker(scene, config);\nscene.add.existing(tweaker);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#add-tweaker-object","title":"Add tweaker object","text":"<pre><code>var tweaker = scene.rexUI.add.tweaker({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// orientation: 0,\n\nstyles : {\nitemWidth : 0,\n\ninputRow: {\nbackground: {\n\n},\n\ntitle: {\n\n},\n\ninputText: {\n\n},\n\nlist: {\nlabel: {\n\n},\n\nbutton: {\n\n}\n},\n\nbutton: {\n\n},\n\nslider: {\ntrack: {\n\n},\n\nindicator: {\n\n},\n\nthumb: {\n\n}\n},\n\ncolorInput: {\ncolorPicker: {\n\n},\n\ncolorComponents: {\ninputText: {\n\n}\n}\n},\n\ncheckbox: {\n\n},\n\ntoggleSwitch: {\n\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n},\n\nseparator: {\n\n},\n\nfolder: {\n},\n\ntab: {\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0, item: 0\n},\n},\n\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the tweaker.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom. Default value is <code>1</code>.</li> </ul> </li> <li><code>styles</code> : Styles settings of input rows, separator, folder, and tab. See Styles chapter for more detail.<ul> <li><code>style.itemWidth</code> : Width of input row, used if <code>orientation</code> is set to <code>'y'</code>(<code>1</code>).</li> <li><code>styles.space</code> : Pads spaces.<ul> <li><code>styles.space.left</code>, <code>styles.space.right</code>, <code>styles.space.top</code>, <code>styles.space.bottom</code> : Space of bounds.</li> <li><code>styles.space.item</code> : Space between 2 input rows.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tweaker/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTweaker extends RexPlugins.UI.Tweaker {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tweaker = new MyTweaker(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#add-input-row","title":"Add input row","text":"<p>An input row can fine-tuning properties of target object. </p>"},{"location":"ui-tweaker/#text-input-row","title":"Text input row","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {    // view: 'string',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n\n// autoUpdate: true,\n// onValidate: undefined,\n// onValueChange: undefined,    \n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'string',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n\n// autoUpdate: true,\n// onValidate: undefined,\n// onValueChange: undefined,    \n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'string'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> <li><code>autoUpdate</code> : <ul> <li><code>true</code> : Update binding key when user input. Default behavior.</li> <li><code>false</code> : Use <code>onValueChange</code> to set value of binding key when user input.</li> </ul> </li> <li><code>onValidate</code> : <ul> <li>Callback invoked when new value input.     <pre><code>function(newValue, oldValue, bindingTarget, bindingKey) { return true;\n}\n</code></pre><ul> <li><code>true</code> : Accept this new value.</li> <li><code>false</code> : Reject this new value.</li> </ul> </li> <li><code>undefined</code> : Always accept new value changing. Default behavior.</li> </ul> </li> <li><code>onValueChange</code> : <ul> <li>Callback invoked when binding value changing.     <pre><code>function(newValue, oldValue, bindingTarget, bindingKey) { }\n</code></pre></li> <li><code>undefined</code> : Ignore this feature. Default value.</li> </ul> </li> </ul> <p>See Styles of text input</p>"},{"location":"ui-tweaker/#text-input-from-list","title":"Text input from list","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'list'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of list input</p>"},{"location":"ui-tweaker/#text-input-from-buttons","title":"Text input from buttons","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'buttons'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of buttons input</p>"},{"location":"ui-tweaker/#number-input-row","title":"Number input row","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'number',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'number',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'number'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of text input</p>"},{"location":"ui-tweaker/#number-input-in-a-range","title":"Number input in a range","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'range',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\nmin: minValue, max: maxValue,\n\n// format: function(value) { return s; },\n// inputTextReadOnly: false,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'range',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\nmin: minValue, max: maxValue,\n\n// format: function(value) { return s; },\n// inputTextReadOnly: false,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'range'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>min</code>, <code>max</code> : Minimum, maximun value of range.</li> <li><code>format</code> : Callback to return formatted string for input text field.     <pre><code>function(value) {\nreturn s;\n}\n</code></pre></li> <li><code>inputTextReadOnly</code> :<ul> <li><code>false</code> : Input text field is editable. Default behavior.</li> <li><code>true</code> : Input text field is read-only.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of range input</p>"},{"location":"ui-tweaker/#number-input-from-list","title":"Number input from list","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'list'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of list input</p>"},{"location":"ui-tweaker/#number-input-from-buttons","title":"Number input from buttons","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'buttons'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of buttons input</p>"},{"location":"ui-tweaker/#color-input","title":"Color input","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'color',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'color',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'color'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of color input</p>"},{"location":"ui-tweaker/#boolean-input-row","title":"Boolean input row","text":"<p><code>object[key]</code> is a boolean value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'boolean',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'boolean',\n// view: 'toggleSwitch',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'boolean'</code>, or <code>'toggleSwitch'</code>, if <code>bindingTarget</code> is not given.<ul> <li><code>'boolean'</code> : Checkbox input. Default behavior.</li> <li><code>'toggleSwitch'</code> : Toggle switch input.</li> </ul> </li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of boolean input</p>"},{"location":"ui-tweaker/#add-button","title":"Add button","text":"<pre><code>tweaker.addButton({\n// bindingTarget: object,\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\ntitle: undefined,\n\nlabel: undefined,\n\ncallback: function(target) {},\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target will pass to callback. Optional.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label.</li> <li><code>label</code> : Display text of button.</li> <li><code>callback</code> : Callback when clicking button     <pre><code>function(target) { }\n</code></pre></li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of botton</p>"},{"location":"ui-tweaker/#add-separator","title":"Add separator","text":"<pre><code>tweaker.addSeparator();\n</code></pre> <p>See Styles of separator</p>"},{"location":"ui-tweaker/#add-folder","title":"Add folder","text":"<p>Folder contains collapsible child tweaker game object.</p> <pre><code>var childTweaker = tweaker.addFolder({\ntitle: titleA,\n\n// expanded: true,\n});\n\n// childTweaker.addInput(...)\n</code></pre> <ul> <li><code>childTweaker</code> : Child tweaker game object. Add input rows by <code>addInput</code> method.</li> <li><code>title</code> Title of folder. Click title can collapse or expand child tweaker game object.</li> <li><code>expanded</code> : <ul> <li><code>true</code> : Expand child tweaker game object at beginning. Default behavior.</li> <li><code>false</code> : Collapse child tweaker game object at beginning.</li> </ul> </li> </ul> <p>See Styles of folder</p>"},{"location":"ui-tweaker/#add-tab","title":"Add tab","text":"<p>Tab containes pages. Each page is a tweaker game object.</p> <pre><code>var childrenTweakers = tweaker.addTab({\npages: [\n{\ntitle: titleA, // show: false\n},\n{\ntitle: titleB\n// show: false\n},\n// ...\n]\n});\n\n// childrenTweakers[0].addInput(...)\n// childrenTweakers[1].addInput(...)\n</code></pre> <ul> <li><code>childrenTweakers</code> : Array of children tweaker game object. Add input rows by <code>addInput</code> method.</li> <li><code>pages</code> : Array of page setting.     <pre><code>{\ntitle: titleA,\nshow: false,\n}\n</code></pre><ul> <li><code>title</code> : Display text of page title</li> <li><code>show</code> : Set to <code>true</code> to show this page at beginning</li> </ul> </li> </ul> <p>See Styles of tab</p>"},{"location":"ui-tweaker/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>tweaker.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-tweaker/#styles","title":"Styles","text":""},{"location":"ui-tweaker/#styles-of-text-input","title":"Styles of text input","text":"<p>Style of text/number input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-list-input","title":"Styles of list input","text":"<p>Style of text/number list input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.list</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nlist: {\nlabel: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\n'hover.color': undefined,\n'hover.alpha': undefined,\n'hover.strokeColor': undefined,\n'hover.strokeAlpha': undefined,\n'hover.strokeWidth': undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-buttons-input","title":"Styles of buttons input","text":"<p>Style of buttons input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.button</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n},\n\nexpand: true\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-range-input","title":"Styles of range input","text":"<p>Style of range input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.slider</code></li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nslider: {\ntrack: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nindicator: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nthumb: {\nwidth: 0, height: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n}\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-color-input","title":"Styles of color input","text":"<p>Style of color input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.colorInput</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\ncolorInput: {\nswatch: {\nradius: 0,\nsize: undefined,\n},\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},                // inputText: false,\n\ncolorPicker: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n},\n\ncolorComponents: {\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n\n}\n}\n\n// colorComponents: false,\n\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-boolean-input","title":"Styles of boolean input","text":"<p>Style of boolean input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.checkbox</code>, or <code>styles.inputRow.toggleSwitch</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\n// For checkbox view\ncheckbox: {\n// size: undefined,\n\ncolor: 0x005cb2,\nboxFillAlpha: 1,\nuncheckedColor: null,\nuncheckedBoxFillAlpha: 1,\n\nboxLineWidth: 4,\nboxStrokeColor: 0x005cb2,\nboxStrokeAlpha: 1,\nuncheckedBoxStrokeColor: 0x005cb2,\nuncheckedBoxStrokeAlpha: 1,\n\ncheckerColor: 0xffffff,\ncheckerAlpha: 1,\n\ncircleBox: false\n\nanimationDuration: 150,\n\nreadOnly: false,\n},\n\n// For toggle switch view\ntoggleSwitch: {\n// size: undefined,\n\ncolor: 0x005cb2,\ntrackFillAlpha: 1,\nfalseValueTrackColor: undefined,\nfalseValueTrackFillAlpha: 1,\n\nthumbColor: 0xffffff,\nthumbAlpha: 1,\n\ntrackWidth: 0.9,\ntrackHeight: 0.5,\ntrackCornerRadius: (trackHeight * 0.5),\n\nthumbHeight: (trackHeight * 0.9),\nthumbWidth: (thumbHeight),\nthumbCornerRadius: (thumbHeight * 0.5),\n\nthumbLeft: 0.3,\nthumbRight: (1 - thumbLeft),\nrtl: false,\n\nanimationDuration: 150,\n\nreadOnly: false,\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-botton","title":"Styles of botton","text":"<p>Style of button is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.button</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-separator","title":"Styles of separator","text":"<p>Style of separator is defined in </p> <ul> <li><code>styles.separator</code></li> </ul> <pre><code>{\nstyles: {\nseparator: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-folder","title":"Styles of folder","text":"<p>Style of folder is defined in </p> <ul> <li><code>styles.folder</code></li> </ul> <pre><code>{\nstyles: {\nfolder: {\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n},\n\nexpandedIcon: {\ncolor: undefined,\nalpha: 1,\n\nstrokeColor: undefined,\nstrokeAlpha: 1,\nstrokeWidth: 1,\narrowOnly: false,\n\neaseDuration: 0,\n}\n},\n\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, }\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-tab","title":"Styles of tab","text":"<p>Style of tab is defined in </p> <ul> <li><code>styles.tab</code></li> </ul> <pre><code>{\nstyles: {\ntab: {\ntab: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\n'active.color': undefined,\n'active.alpha': undefined,\n'active.strokeColor': undefined,\n'active.strokeAlpha': undefined,\n'active.strokeWidth': undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nwrapTabs: false,\n\ntabs: {\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, item: 0,\n}\n},\n\npages: {\nfadeIn: 0,\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#bind-target","title":"Bind target","text":"<p>All input rows will bind to this new target, and update display status.</p> <pre><code>tweaker.setBindingTarget(object);\n</code></pre>"},{"location":"ui-tweaker/#get-element","title":"Get element","text":"<ul> <li>Get by key     <pre><code>var gameObject = tweaker.getElement(key);\n</code></pre><ul> <li><code>key</code> : Add by <code>key</code> parameter in <code>tweaker.addInput(config)</code> method     <pre><code>tweaker.addInput({\nkey: ...\n})\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tweaker.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tweaker.getByName(name);\n// var gameObject = tweaker.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tweaker/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"uniqueitemlist/","title":"Unique item list","text":""},{"location":"uniqueitemlist/#introduction","title":"Introduction","text":"<p>List of unique items. Support array and set methods.</p> <ul> <li>Author: Rex</li> <li>Data structure</li> </ul>"},{"location":"uniqueitemlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"uniqueitemlist/#install-plugin","title":"Install plugin","text":""},{"location":"uniqueitemlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexuniqueitemlistplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuniqueitemlistplugin.min.js', true);\n</code></pre></li> <li>Add list object     <pre><code>var listA = scene.plugins.get('rexuniqueitemlistplugin').add(config);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UniqueItemListPlugin from 'phaser3-rex-plugins/plugins/uniqueitemlist-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexUniqueItemList',\nplugin: UniqueItemListPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add list object     <pre><code>var listA = scene.plugins.get('rexUniqueItemList').add(config);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import UniqueItemList from 'phaser3-rex-plugins/plugins/uniqueitemlist.js';\n</code></pre></li> <li>Add list object     <pre><code>var listA = new UniqueItemList();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#create-instance","title":"Create instance","text":"<pre><code>var listA = scene.plugins.get('rexUniqueItemList').add({\n// items: undefined,\n// autoCleanup: true\n});\n</code></pre> <ul> <li><code>items</code> : Initial items.</li> <li><code>autoCleanup</code> : Set <code>true</code> to remove item when item is destroyed (from item's 'destroy' event)</li> </ul> <p>or</p> <pre><code>var listA = scene.plugins.get('rexUniqueItemList').add(items);\n</code></pre>"},{"location":"uniqueitemlist/#items","title":"Items","text":"<ul> <li>Get first item     <pre><code>var item = listA.getFirst();\n</code></pre></li> <li>Get last item     <pre><code>var item = listA.getLast();\n</code></pre></li> <li>Get item at index     <pre><code>var item = listA.get(index);\n</code></pre></li> <li>Get a random item     <pre><code>var item = listA.getRandom();\n</code></pre></li> <li>Get items     <pre><code>var items = listA.getItems();\n</code></pre></li> <li>Clone items to a new array     <pre><code>var items = listA.cloneItems();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#item-count","title":"Item count","text":"<ul> <li>Get item count     <pre><code>var count = listA.length;\n</code></pre></li> <li>List is empty     <pre><code>var isEmpty = listA.isEmpty();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#contains","title":"Contains","text":"<ul> <li>Has item     <pre><code>var hasItem = listA.contains(item);\n</code></pre></li> <li>Has any item     <pre><code>var hasAny = listA.any(listB);\n</code></pre></li> <li>Has all items     <pre><code>var hasAll = listA.all(listB);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#array-operations","title":"Array operations","text":""},{"location":"uniqueitemlist/#add","title":"Add","text":"<ul> <li>Add to last     <pre><code>listA.add(item);\n</code></pre>     or     <pre><code>listA.addLast(item);\n</code></pre></li> <li>Add to first     <pre><code>listA.addFirst(item);\n</code></pre></li> <li>Insert to index     <pre><code>listA.add(item, index);\n</code></pre></li> <li>Insert, or move to index     <pre><code>listA.add(item, iindex, true);\n</code></pre></li> <li>Add items     <pre><code>listA.addMultiple(items);\n</code></pre></li> <li>Clone list     <pre><code>var newList = listA.clone();\n// listA.clone(listB)\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#remove","title":"Remove","text":"<ul> <li>Remove item     <pre><code>listA.remove(item);\n</code></pre></li> <li>Remove first     <pre><code>listA.removeFirst();\n</code></pre></li> <li>Remove last     <pre><code>listA.removeLast();\n</code></pre></li> <li>Remove item at index     <pre><code>listA.remove(undefined, index);\n</code></pre></li> <li>Remove items     <pre><code>listA.removeMultiple(items);\n</code></pre></li> <li>Remove all items     <pre><code>listA.clear();\n</code></pre></li> <li>Destroy all items     <pre><code>listA.clear(true);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#pop","title":"Pop","text":"<ul> <li>Pop first item     <pre><code>var item = listA.pop();\n</code></pre>     or     <pre><code>var item = listA.popFirst();\n</code></pre></li> <li>Pop last item     <pre><code>var item = listA.popLast();\n</code></pre></li> <li>Pop item at index    <pre><code>var item = listA.pop(index);\n</code></pre></li> <li>Pop a random item    <pre><code>var item = listA.popRandom();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#slice","title":"Slice","text":"<ul> <li>Extract items from startIndex to endIndex (item of endIndex is included)    <pre><code>var newList = listA.slice(startIndex, endIndex);\n// listA.slice(startIndex, endIndex, listB);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#sort","title":"Sort","text":"<ul> <li>Sort    <pre><code>list.sort(function(itemA, itemB) {\nif (itemA &gt; itemB) {\nreturn 1;\n} else if (itemA &lt; itemB) {\nreturn -1;\n} else {\nreturn 0;\n}\n})\n</code></pre></li> <li>Reverse    <pre><code>listA.reverse();\n</code></pre></li> <li>Shuffle    <pre><code>listA.shuffle();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#set-operations","title":"Set operations","text":"<ul> <li>C = A | B     <pre><code>var listC = listA.union(listB);\n// listA.union(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> <li>C = A &amp; B     <pre><code>var listC = listA.intersect(listB);\n// listA.intersect(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> <li>C = A - B     <pre><code>var listC = listA.difference(listB);\n// listA.difference(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> </ul>"},{"location":"uniqueitemlist/#call-method","title":"Call method","text":"<p>Apply method of each item.</p> <pre><code>listA.call(fnName, arg0, arg1, arg2, ...);\n</code></pre> <ul> <li><code>fnName</code> : Method name of item.</li> <li><code>arg0</code>, <code>arg1</code>, <code>arg2</code> : Arguments of <code>fnName</code> method.</li> </ul> <p>Warning</p> <p>Don't add or remove any item during this method.</p> <pre><code>listA.call(function(item, i) {\n// ....\n}, scope);\n</code></pre> <ul> <li><code>callback</code> : A function object.     <pre><code>function(item, i) {\n\n}\n</code></pre></li> </ul>"},{"location":"uuid/","title":"UUID","text":""},{"location":"uuid/#introduction","title":"Introduction","text":"<p>Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"uuid/#usage","title":"Usage","text":"<pre><code>var uuid = Phaser.Utils.String.UUID();\n</code></pre>"},{"location":"vector2/","title":"Vector2","text":""},{"location":"vector2/#introduction","title":"Introduction","text":"<p>A representation of a vector in 2D space (<code>{x, y}</code>), built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"vector2/#usage","title":"Usage","text":""},{"location":"vector2/#create-object","title":"Create object","text":"<pre><code>var vector = new Phaser.Math.Vector2();\n// var vector = new Phaser.Math.Vector2(x, y);\n// var vector = new Phaser.Math.Vector2({x, y});\n</code></pre>"},{"location":"vector2/#clone","title":"Clone","text":"<pre><code>var newVector = vector.clone();\n</code></pre>"},{"location":"vector2/#set-components","title":"Set components","text":"<ul> <li>Set (x, y)     <pre><code>vector.set(x, y);\n// vector.setTo(x, y);\n</code></pre>     or     <pre><code>vector.copy({x, y});\n// vector.setFromObject({x, y});\n</code></pre></li> <li>Set angle     <pre><code>vector.setAngle(angle);\n</code></pre><ul> <li><code>angle</code> : Angle in radians.</li> </ul> </li> <li>Rotate     <pre><code>vector.rotate(delta);\n</code></pre><ul> <li><code>delta</code> : The angle to rotate by, in radians.</li> </ul> </li> <li>Project     <pre><code>vector.project(srcVector2);\n</code></pre></li> <li>Set length     <pre><code>vector.setLength(length);\n</code></pre></li> <li>Set from polar coordinate     <pre><code>vector.setToPolar(azimuth, radius);\n</code></pre><ul> <li><code>azimuth</code> : The angular coordinate, in radians.</li> <li><code>radius</code> : The radial coordinate (length). Default is <code>1</code>.</li> </ul> </li> <li>Reset to (0, 0)     <pre><code>vector.reset();\n</code></pre></li> </ul>"},{"location":"vector2/#get-componments","title":"Get componments","text":"<ul> <li>X, Y     <pre><code>var x = vector.x;\nvar y = vector.y;\n</code></pre></li> <li>Angle     <pre><code>var angle = vector.angle(); // angle in radians\n</code></pre></li> <li>Length     <pre><code>var length = vector.length();\n</code></pre>     or     <pre><code>var lengthSq = vector.lengthSq(); // squared\n</code></pre></li> </ul>"},{"location":"vector2/#methods","title":"Methods","text":"<ul> <li>Scale     <pre><code>vector.scale(value);\n</code></pre></li> <li>Limit the length     <pre><code>vector.limit(value);\n</code></pre></li> <li>Normalize     <pre><code>vector.normalize();\n</code></pre></li> <li>Negate     <pre><code>vector.negate();\n</code></pre></li> <li>Rotate perpendicular     <pre><code>vector.normalizeRightHand();\nvector.normalizeLeftHand();\n</code></pre></li> <li>Reflect<ul> <li>Reflect this Vector off a line defined by a normal.     <pre><code>vector.reflect(normal);\n</code></pre><ul> <li><code>normal</code> : A vector perpendicular to the line.</li> </ul> </li> <li>Reflect this Vector across another.     <pre><code>vector.mirror(axis);\n</code></pre><ul> <li><code>axis</code> : A vector to reflect across.</li> </ul> </li> </ul> </li> </ul>"},{"location":"vector2/#vector-methods","title":"Vector methods","text":"<ul> <li>Add     <pre><code>vector.add(src); // src: {x, y}\n</code></pre></li> <li>Subtract     <pre><code>vector.subtract(src); // src: {x, y}\n</code></pre></li> <li>Multiply     <pre><code>vector.multiply(src); // src: {x, y}\n</code></pre></li> <li>Divide     <pre><code>vector.divide(src); // src: {x, y}\n</code></pre></li> <li>Dot     <pre><code>var value = vector.dot(src); // src: {x, y}\n</code></pre></li> <li>Cross     <pre><code>var value = vector.cross(src); // src: {x, y}\n</code></pre></li> <li>Fuzzy Equal     <pre><code>var equal = vector.fuzzyEquals(src); // src: {x, y}\n// var equal = vector.fuzzyEquals(src, epsilon);\n</code></pre></li> </ul>"},{"location":"vector2/#points-method","title":"Points method","text":"<ul> <li>Distance between 2 points.     <pre><code>var distance = vector.distance(src);\n</code></pre>     or     <pre><code>var distanceSq = vector.distanceSq(src); // squared\n</code></pre></li> <li>Linearly interpolate between 2 points.     <pre><code>vector.lerp(src, t); // src: {x, y}\n</code></pre><ul> <li><code>t</code> : The interpolation percentage, between 0 and 1.</li> </ul> </li> </ul>"},{"location":"vector2/#constant","title":"Constant","text":"<ul> <li>Zero <code>(0,0)</code> <pre><code>var vector = Phaser.Math.Vector2.ZERO;\n</code></pre></li> <li>One <code>(1,1)</code> <pre><code>var vector = Phaser.Math.Vector2.ONE;\n</code></pre></li> <li>Right <code>(1,0)</code> <pre><code>var vector = Phaser.Math.Vector2.RIGHT;\n</code></pre></li> <li>Left <code>(-1,0)</code> <pre><code>var vector = Phaser.Math.Vector2.LEFT;\n</code></pre></li> <li>Up <code>(0,-1)</code> <pre><code>var vector = Phaser.Math.Vector2.UP;\n</code></pre></li> <li>Down <code>(0,1)</code> <pre><code>var vector = Phaser.Math.Vector2.DOWN;\n</code></pre></li> </ul>"},{"location":"video/","title":"Video","text":""},{"location":"video/#introduction","title":"Introduction","text":"<p>Handling playback of a video file, video stream or media stream.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"video/#usage","title":"Usage","text":""},{"location":"video/#load-video","title":"Load video","text":"<pre><code>scene.load.video(key, url, noAudio);\n</code></pre> <p>Reference: load video</p> <p>Cross-origin</p> <p>Can't load video cross-origin via <code>scene.load.video(...)</code>. Using <code>scene.add.video(x, y).loadURL(urls, noAudio, crossOrigin)</code> to load video cross-origin. </p>"},{"location":"video/#add-video-object","title":"Add video object","text":""},{"location":"video/#reference-video-from-video-cache","title":"Reference video from Video Cache","text":"<pre><code>var video = scene.add.video(x, y, key);\n</code></pre> <ul> <li><code>key</code> : Key of the Video this Game Object will play, as stored in the Video Cache.</li> </ul>"},{"location":"video/#load-video-from-url","title":"Load video from URL","text":"<ol> <li>Add video object     <pre><code>var video = scene.add.video(x, y);\n</code></pre></li> <li>Play video from URL     <pre><code>video.loadURL(url);\n// video.loadURL(urls, noAudio, crossOrigin);\n</code></pre><ul> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.<ul> <li><code>false</code> : Has audio track. Default behavior.</li> </ul> </li> <li><code>crossOrigin</code> : The value to use for the <code>crossOrigin</code> property in the video load request.  <ul> <li><code>undefined</code> : <code>crossorigin</code> will not be set in the request. Default behavior.</li> <li><code>'anonymous'</code> </li> <li><code>'use-credentials'</code></li> </ul> </li> </ul> </li> </ol>"},{"location":"video/#load-video-from-mediastream","title":"Load video from MediaStream","text":"<pre><code>video.loadMediaStream(stream);\n// video.loadMediaStream(stream, noAudio, crossOrigin);\n</code></pre> <ul> <li><code>stream</code> : The MediaStream object.</li> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.<ul> <li><code>false</code> : Has audio track. Default behavior.</li> </ul> </li> <li><code>crossOrigin</code> : The value to use for the <code>crossOrigin</code> property in the video load request.  <ul> <li><code>undefined</code> : <code>crossorigin</code> will not be set in the request. Default behavior.</li> <li><code>'anonymous'</code> </li> <li><code>'use-credentials'</code></li> </ul> </li> </ul> <pre><code>navigator.mediaDevices.getUserMedia({ video: true, audio: false })\n.then(function(stream) {\nvideo.loadMediaStream(stream, true);\nvideo.play();\n})\n.catch(function(err) {\n\n})\n</code></pre> <ul> <li>navigator.mediaDevices.getUserMedia</li> </ul>"},{"location":"video/#play","title":"Play","text":"<pre><code>video.play();\n// video.play(loop, markerIn, markerOut);\n</code></pre> <ul> <li><code>loop</code> : Should the video loop automatically when it reaches the end? Please note that not all browsers support seamless video looping for all encoding formats.</li> <li><code>markerIn</code>, <code>markerOut</code> : Optional in/out marker time, in seconds, for playback of a sequence of the video.</li> </ul> <p>Play video first time</p> <p>Call <code>video.play()</code> when playing video first time.</p> <p>Note</p> <p>If you need audio in your videos, then you'll have to consider the fact that  the video cannot start playing until the user has interacted with the browser, into your game flow.</p>"},{"location":"video/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>video.setPaused();\n// video.setPaused(true);\n</code></pre></li> <li>Resume     <pre><code>video.setPaused(false);\n</code></pre></li> </ul> <p>Play video after paused</p> <p>Call <code>video.setPaused(false)</code> to resume playing.</p>"},{"location":"video/#stop","title":"Stop","text":"<p>Stops the video playing and clears all internal event listeners.</p> <pre><code>video.stop();\n</code></pre>"},{"location":"video/#is-playing","title":"Is playing","text":"<ul> <li>Is playing     <pre><code>var isPlaying = video.isPlaying();  // (not PAUSE) and (not not ENDED)\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = video.isPaused();\n</code></pre></li> </ul>"},{"location":"video/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = video.getCurrentTime();\n</code></pre>     or     <pre><code>var t = video.getProgress(); // t: 0~1\n</code></pre></li> <li>Set<ul> <li>Set to     <pre><code>video.setCurrentTime(playbackTime);  // time in seconds\n</code></pre>     or     <pre><code>video.seekTo(t); // t: 0~1\n</code></pre><ul> <li>Is seeking     <pre><code>var isSeeking = video.isSeeking();\n</code></pre></li> </ul> </li> <li>Forward     <pre><code>video.setCurrentTime('+' + time);  // time in seconds\n// video.setCurrentTime('+2');\n</code></pre></li> <li>Backeard     <pre><code>video.setCurrentTime('-' + time);  // time in seconds\n// video.setCurrentTime('-2');\n</code></pre></li> </ul> </li> </ul>"},{"location":"video/#playback-rate","title":"Playback rate","text":"<ul> <li>Get     <pre><code>var rate = video.getPlaybackRate();\n</code></pre></li> <li>Set     <pre><code>video.setPlaybackRate(rate);\n</code></pre></li> </ul>"},{"location":"video/#duration","title":"Duration","text":"<pre><code>var duration = video.getDuration();  // time in seconds\n</code></pre>"},{"location":"video/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = video.getVolume();  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setVolume(volume);  // volume: 0~1\n</code></pre></li> </ul>"},{"location":"video/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = video.isMuted();  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>video.setMute(muted);  // muted: true/false\n</code></pre></li> </ul>"},{"location":"video/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = video.getLoop();  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>video.setLoop(loop);  // loop: true/false\n</code></pre></li> </ul>"},{"location":"video/#video-key","title":"Video key","text":"<ul> <li>Get     <pre><code>var key = video.getVideoKey();\n</code></pre></li> <li>Change video key (video source)     <pre><code>video.changeSource(key);\n// video.changeSource(key, autoplay, loop, markerIn, markerOut);\n</code></pre><ul> <li><code>autoplay</code> : Should the video start playing immediately, once the swap is complete?</li> <li><code>loop</code> : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats.</li> <li><code>markerIn</code>, <code>markerOut</code> : Optional in/out marker time, in seconds, for playback of a sequence of the video.</li> </ul> </li> </ul>"},{"location":"video/#marks","title":"Marks","text":"<ul> <li>Add mark     <pre><code>video.addMarker(key, markerIn, markerOut);\n</code></pre><ul> <li><code>key</code> : A unique name to give this marker.</li> <li><code>markerIn</code>, <code>markerOut</code> : The time, in seconds, representing the start/end of this marker.</li> </ul> </li> <li>Play mark     <pre><code>video.playMarker(key, loop);\n</code></pre></li> <li>Remove mark     <pre><code>video.removeMarker(key);\n</code></pre></li> </ul>"},{"location":"video/#snapshot","title":"Snapshot","text":"<ol> <li>Allocate a canvas texrure     <pre><code>video.saveSnapshotTexture(key);\n</code></pre><ul> <li><code>key</code> : Texture key.</li> </ul> </li> <li>Take a snapshot     <pre><code>var canvasTexture = video.video.snapshot();\n// var canvasTexture = video.snapshot(width, height);\n</code></pre>     or     <pre><code>var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight);\n// var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical location of the top-left of the area to grab from.</li> <li><code>srcWidth</code>, <code>srcHeight</code> : The width/height of area to grab from the video.</li> <li><code>destWidth</code>, <code>destHeight</code> : The destination width/height of the grab, allowing you to resize it.</li> <li><code>canvasTexture</code> : Canvas texture object.<ul> <li>Get key of texture     <pre><code>var key = canvasTexture.key;\n</code></pre></li> </ul> </li> </ul> </li> </ol>"},{"location":"video/#save-texture","title":"Save texture","text":"<p>The saved texture is automatically updated as the video plays. If you pause this video, or change its source, then the saved texture updates instantly.</p> <pre><code>var texture = video.saveTexture(key);\n// var texture = video.saveTexture(key, flipY);\n</code></pre> <ul> <li><code>flipY</code> : Set to <code>true</code> if use it as the input for a Shader.</li> </ul>"},{"location":"video/#events","title":"Events","text":"<ul> <li>The media source doesn't represent a supported media format.     <pre><code>video.on('unsupported', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video is unlocked by a user gesture.     <pre><code>video.on('unlocked', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video tries to play a source that does not exist, or is the wrong file type.     <pre><code>video.on('error', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video has exhausted its allocated time while trying to connect to a video source to start playback.     <pre><code>video.on('timeout', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video begins playback.     <pre><code>video.on('play', function(video){\n\n}, scope);\n</code></pre></li> <li>First started or restarted.     <pre><code>video.on('playing', function(video){\n\n}, scope);\n</code></pre></li> <li>The video has finished loading enough data for its first frame.     <pre><code>video.on('textureready', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video finishes playback by reaching the end of its duration, or <code>markerOut</code>.     <pre><code>video.on('complete', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video that is currently playing has looped.     <pre><code>video.on('loop', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video begins seeking to a new point in its timeline.     <pre><code>video.on('seeking', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video completes seeking to a new point in its timeline.     <pre><code>video.on('seeked', function(video){\n\n}, scope);\n</code></pre></li> <li>Enough of the video source has been loaded, that the browser is able to render a frame from it.     <pre><code>video.on('created', function(video, width, height){\n\n}, scope);\n</code></pre></li> <li>Stalled by <code>stalled</code>, <code>suspend</code>, <code>waiting</code> DOM event.     <pre><code>video.on('stalled', function(video, width, height){\n\n}, scope);\n</code></pre></li> <li>A Video is stopped from playback via a call to the <code>Video.stop</code> method,     <pre><code>video.on('stop', function(video){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/","title":"Viewport-coordinate","text":""},{"location":"viewport-coordinate/#introduction","title":"Introduction","text":"<p>Attach <code>vpx</code>, <code>vpy</code> properties to a game object, to set position according to proportion (<code>vpx</code>, <code>vpy</code>) of viewport, a rectangle).</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"viewport-coordinate/#live-demos","title":"Live demos","text":"<ul> <li>Resize</li> </ul>"},{"location":"viewport-coordinate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"viewport-coordinate/#install-plugin","title":"Install plugin","text":""},{"location":"viewport-coordinate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexviewportcoordinateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexviewportcoordinateplugin.min.js', true);\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code> properties.     <pre><code>scene.plugins.get('rexviewportcoordinateplugin').add(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ViewportCoordinatePlugin from 'phaser3-rex-plugins/plugins/viewportcoordinate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexViewportCoordinate',\nplugin: ViewportCoordinatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code>, <code>vpxOffset</code>, <code>vpyOffset</code> properties.     <pre><code>scene.plugins.get('rexViewportCoordinate').add(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\ngameObject.vpxOffset = 0;\ngameObject.vpyOffset = 0;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddViewportCoordinateProperties from 'phaser3-rex-plugins/plugins/viewportcoordinate.js';\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code>, <code>vpxOffset</code>, <code>vpyOffset</code> properties.     <pre><code>AddViewportCoordinateProperties(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\ngameObject.vpxOffset = 0;\ngameObject.vpyOffset = 0;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexViewportCoordinate').add(gameObject, viewport, vpx, vpy, transformCallback);\n</code></pre> <ul> <li><code>vpx</code>, <code>vpy</code> : Proportion of viewport.</li> <li><code>vpxOffset</code>, <code>vpyOffset</code> : Offset of position.</li> <li><code>viewport</code> : Viewport in rectangle</li> <li><code>transformCallback</code> : Transform callback.<ul> <li><code>undefined</code> : Use default transform callback.     <pre><code>function(vpx, vpy, vpxOffset, vpyOffset, viewport, out) {\ngameObject.x = viewport.x + (viewport.width * vpx) + vpxOffset;\ngameObject.y = viewport.y + (viewport.height * vpy) + vpyOffset;\n}\n</code></pre></li> </ul> </li> </ul> <p>Changing </p> <ul> <li><code>gameObject.vpx</code>, <code>gameObject.vpy</code>, <code>gameObject.vpxOffset</code>, <code>gameObject.vpyOffset</code></li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> of viewport (a rectangle)</li> </ul> <p>Will change position (<code>x</code> , <code>y</code>) of game object.</p>"},{"location":"virtualjoystick/","title":"Virtual joystick","text":""},{"location":"virtualjoystick/#introduction","title":"Introduction","text":"<p>Simulate cursor keys according to touch events.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"virtualjoystick/#live-demos","title":"Live demos","text":"<ul> <li>Virtual joystick</li> <li>Two joySticks</li> </ul>"},{"location":"virtualjoystick/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"virtualjoystick/#install-plugin","title":"Install plugin","text":""},{"location":"virtualjoystick/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = scene.plugins.get('rexvirtualjoystickplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import VirtualJoystickPlugin from 'phaser3-rex-plugins/plugins/virtualjoystick-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexVirtualJoystick',\nplugin: VirtualJoystickPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = scene.plugins.get('rexVirtualJoystick').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = new VirtualJoystick(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#create-instance","title":"Create instance","text":"<pre><code>var joystick = scene.plugins.get('rexVirtualJoystick').add(scene, {\nx: x,\ny: y,\nradius: 100,\nbase: baseGameObject,\nthumb: thumbGameObject,\n// dir: '8dir',\n// forceMin: 16,\n// fixed: true,\n// enable: true\n});\n</code></pre> <ul> <li><code>base</code> : Base game object.<ul> <li>Create a circle shape object if no base game object passed.</li> </ul> </li> <li><code>thumb</code> : Thumb game object.<ul> <li>Create a circle shape object if no thumb game object passed.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of base game object</li> <li><code>radius</code> : Circle hit-area of base game object</li> <li><code>dir</code> : <ul> <li><code>'up&amp;down'</code>, or <code>0</code> : Simulate up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Simulate left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Simulate up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> <li><code>forceMin</code> : Cursor keys will be pressed when force is larger then this value.<ul> <li><code>force</code> : Distance between position of base game object to touch pointer</li> </ul> </li> <li><code>fixed</code> : Set <code>true</code> to fix to camera, i.e set <code>scrollFactor</code> to <code>0</code> for base and thumb game object. Default value is <code>true</code>.</li> <li><code>enable</code> : Set <code>false</code> to disable cursor keys simulation</li> </ul>"},{"location":"virtualjoystick/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = joystick.createCursorKeys();\n\nvar leftKeyDown = cursorKeys.left.isDown;\nvar rightKeyDown = cursorKeys.right.isDown;\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var leftKeyDown = joystick.left;\nvar rightKeyDown = joystick.right;\nvar upKeyDown = joystick.up;\nvar downKeyDown = joystick.down;\nvar noKeyDown = joystick.noKey;\n</code></pre>"},{"location":"virtualjoystick/#force-angle","title":"Force &amp; Angle","text":"<p>Force : Distance between position of base game object to touch pointer.</p> <pre><code>var force = joystick.force;\nvar forceX = joystick.forceX;\nvar forceY = joystick.forceY;\n\nvar angle = joystick.angle;  // degree between -180 to 180\nvar rotation = joystick.rotation; // radians\n</code></pre>"},{"location":"virtualjoystick/#visible","title":"Visible","text":"<p>Visible of base game object.</p> <ul> <li>Get : Return visible of base game object     <pre><code>var visible = joystick.visible;\n</code></pre></li> <li>Set : Set visible to base game object and thumb game object     <pre><code>joystick.visible = visible;\njoystick.setVisible(visible);\njoystick.toggleVisible();\n</code></pre>     Joystick will be disabled when invisible.</li> </ul>"},{"location":"virtualjoystick/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = joystick.enable;\n</code></pre></li> <li>Set     <pre><code>joystick.setEnable(enable);  // enable: true, or false\n//joystick.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>joystick.toggleEnable();\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#position","title":"Position","text":"<p>Position of base game object.</p> <ul> <li>Get     <pre><code>var x = joystick.x;\nvar y = joystick.y;\n</code></pre></li> <li>Set     <pre><code>joystick.setPosition(x ,y);\n// joystick.x = x;\n// joystick.y = y;\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Fix to camera     <pre><code>joystick.setScrollFactor(0);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#touch-pointer","title":"Touch pointer","text":"<ul> <li>Position     <pre><code>var x = joystick.pointerX;\nvar y = joystick.pointerY;\n</code></pre></li> <li>Pointer     <pre><code>var pointer = joystick.pointer;\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#destroy","title":"Destroy","text":"<p>Destroy base &amp; thumb game object.</p> <pre><code>joystick.destroy();\n</code></pre>"},{"location":"virtualjoystick/#events","title":"Events","text":"<ul> <li>On joystick updated :     <pre><code>joystick.on('update', function(){});\n</code></pre></li> <li>On pointer-down     <pre><code>joystick.on('pointerdown', function(pointer){});\n</code></pre></li> <li>On pointer-up     <pre><code>joystick.on('pointerup', function(pointer){});\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#elements","title":"Elements","text":"<ul> <li>Base Game object:      <pre><code>var baseGO = joystick.base;\n</code></pre></li> <li>Thumb Game object:      <pre><code>var thumb = joystick.thumb;\n</code></pre></li> </ul>"},{"location":"waitevents/","title":"Wait events","text":""},{"location":"waitevents/#introduction","title":"Introduction","text":"<p>Wait fired events or callbacks.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"waitevents/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"waitevents/#install-plugin","title":"Install plugin","text":""},{"location":"waitevents/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexwaiteventsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwaiteventsplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = scene.plugins.get('rexwaiteventsplugin').add(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WaitEventsPlugin from 'phaser3-rex-plugins/plugins/waitevents-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWaitEvents',\nplugin: WaitEventsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = scene.plugins.get('rexWaitEvents').add(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import WaitEvents from 'phaser3-rex-plugins/plugins/waitevents.js';\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = new WaitEvents(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#create-instance","title":"Create instance","text":"<pre><code>var waitEvents = scene.plugins.get('rexWaitEvents').add(completeCallback, completeCallbackScope);\n</code></pre> <ul> <li><code>completeCallback</code>, <code>completeCallbackScope</code> : Callback when all waitting events are fired.</li> </ul>"},{"location":"waitevents/#set-complete-callback","title":"Set complete callback","text":"<pre><code>waitEvents.setCompleteCallback(completeCallback, completeCallbackScope);\n</code></pre> <ul> <li><code>completeCallback</code>, <code>completeCallbackScope</code> : Callback when all waitting events are fired.</li> </ul>"},{"location":"waitevents/#add-waiting-event","title":"Add waiting event","text":""},{"location":"waitevents/#callback","title":"Callback","text":"<pre><code>var callback = waitEvents.waitCallback();\n</code></pre> <ul> <li><code>callback</code> : A function object which invoked when waitting event finished.</li> </ul> <p>For example, invokes <code>completeCallback</code> when all timers are time-out.</p> <pre><code>scene.time.delayedCall(500, waitEvents.waitCallback());\nscene.time.delayedCall(1000, waitEvents.waitCallback());\nscene.time.delayedCall(1500, waitEvents.waitCallback());\n</code></pre>"},{"location":"waitevents/#callback-from-event-emitter","title":"Callback from event emitter","text":"<pre><code>waitEvents.waitEvent(eventEmitter, eventName);\n</code></pre>"},{"location":"waitevents/#remove-waiting-event","title":"Remove waiting event","text":"<pre><code>callback();\n</code></pre> <p>or </p> <pre><code>waitEvents.remove(callback);\n</code></pre> <ul> <li><code>callback</code> : A function object created via <code>waitEvents.waitCallback()</code></li> </ul>"},{"location":"waitevents/#clear-all-waiting-events","title":"Clear all waiting events","text":"<pre><code>waitEvents.clear();\n</code></pre>"},{"location":"waitevents/#no-wait-event","title":"No wait event","text":"<pre><code>var noWaitEvent = waitEvents.noWaitEvent;\n</code></pre>"},{"location":"webfontloader/","title":"Webfont loader","text":""},{"location":"webfontloader/#introduction","title":"Introduction","text":"<p>Load web font by google webfont loader in payload or preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"webfontloader/#live-demos","title":"Live demos","text":"<ul> <li>Webfont loader</li> </ul>"},{"location":"webfontloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"webfontloader/#install-plugin","title":"Install plugin","text":""},{"location":"webfontloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexwebfontloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/    rexwebfontloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexwebfontloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexwebfontloaderplugin').addToScene(this);\n\nthis.load.rexWebFont(config);\n}\n}\n</code></pre></li> </ul>"},{"location":"webfontloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWebFontLoader',\nplugin: WebFontLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexWebFont(config);\n</code></pre></li> </ul>"},{"location":"webfontloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import WebFontLoader from 'phaser3-rex-plugins/plugins/webfontloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>WebFontLoader.call(scene.load, config);\n</code></pre></li> </ul>"},{"location":"webfontloader/#load-webfont","title":"Load webfont","text":"<p>In preload stage:</p> <pre><code>this.load.rexWebFont({\ngoogle: {\nfamilies: ['Bangers']\n},\n// testString: undefined,\n// testInterval: 20,\n});\n</code></pre> <ul> <li><code>testString</code> : To test if the font is loaded completed or not.<ul> <li><code>undefined</code> : No testing. Default value.</li> <li>A string : A test string for all fonts</li> <li>An object, <code>{fontFamily: testString}</code> : Test string for a specific font family.</li> </ul> </li> <li><code>testInterval</code> : Retry interval.</li> </ul> <p>or load font in pack</p> <pre><code>var sceneConfig = {\nkey: '...',\npack: {\nfiles: [{\ntype: 'rexWebFont',\nkey: 'webfont',\nconfig: {\ngoogle: {\nfamilies: ['Bangers']\n},\n// testString: undefined,\n// testInterval: 20,\n}\n}\n]\n}\n};\n</code></pre> <p>Configuration of loading fonts</p> <ul> <li>Google webfont <pre><code>WebFontConfig = {\ngoogle: {\nfamilies: ['Droid Sans', 'Droid Serif:bold']\n}\n};\n</code></pre></li> <li>Custom font <pre><code>WebFontConfig = {\ncustom: {\nfamilies: ['My Font', 'My Other Font:n4,i4,n7'],\nurls: ['/fonts.css']\n}\n};\n</code></pre>     and <code>fonts.css</code> <pre><code>@font-face {\nfont-family: 'My Font';\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: normal;\nfont-weight: normal; /* or 400 */\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: italic;\nfont-weight: normal; /* or 400 */\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: normal;\nfont-weight: bold; /* or 700 */\nsrc: ...;\n}\n</code></pre></li> </ul>"},{"location":"webfontloader/#events","title":"Events","text":"<ul> <li> <p><code>fontactive</code> event</p> <pre><code>this.load.on('webfontactive', function(fileObj, familyName){});\n</code></pre> </li> <li> <p><code>fontinactive</code> event</p> <pre><code>this.load.on('webfontinactive', function(fileObj, familyName){});\n</code></pre> </li> </ul>"},{"location":"webfontloader/#test-string","title":"Test string","text":"<p>Add string parameter <code>testString</code> into config, to test if the font is loaded completed or not.</p> <ol> <li>Fill <code>0</code> within an internal canvas.</li> <li>Draw <code>testString</code>.</li> <li>Check if any pixel has non-zero value.</li> </ol>"},{"location":"wrap/","title":"Wrap","text":""},{"location":"wrap/#introduction","title":"Introduction","text":"<p>Wrap the given <code>value</code> between <code>min</code> and <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"wrap/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Wrap(value, min, max);\n</code></pre> <ul> <li><code>value</code> : The value to wrap.</li> </ul>"},{"location":"xor/","title":"XOR","text":""},{"location":"xor/#introduction","title":"Introduction","text":"<p>Encrypt or decrypt string by XOR algorithm.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"xor/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"xor/#install-plugin","title":"Install plugin","text":""},{"location":"xor/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexxorplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexxorplugin.min.js', true);\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = scene.plugins.get('rexxorplugin').Encrypt(src, pwd);\nvar decResult = scene.plugins.get('rexxorplugin').Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import XORPlugin from 'phaser3-rex-plugins/plugins/xor-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexXOR',\nplugin: XORPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = scene.plugins.get('rexXOR').Encrypt(src, pwd);\nvar decResult = scene.plugins.get('rexXOR').Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import XOR from 'phaser3-rex-plugins/plugins/xor.js';\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = XOR.Encrypt(src, pwd);\nvar decResult = XOR.Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#encrypt","title":"Encrypt","text":"<pre><code>var encResult = scene.plugins.get('rexXOR').Encrypt(src, pwd);\n</code></pre>"},{"location":"xor/#decrypt","title":"Decrypt","text":"<pre><code>var decResult = scene.plugins.get('rexXOR').Decrypt(encResult, pwd);\n</code></pre>"},{"location":"ymlachievements/","title":"YAML Achievements","text":""},{"location":"ymlachievements/#introduction","title":"Introduction","text":"<p>Achievements in a YAML table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"ymlachievements/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ymlachievements/#install-plugin","title":"Install plugin","text":""},{"location":"ymlachievements/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexymlachievementsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexymlachievementsplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexymlachievementsplugin').add();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AchievementsPlugin from 'phaser3-rex-plugins/plugins/ymlachievements-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAchievements',\nplugin: AchievementsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Achievements from 'phaser3-rex-plugins/plugins/ymlachievements.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = new Achievements();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#create-instance","title":"Create instance","text":"<pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre>"},{"location":"ymlachievements/#load-table-from-yaml-string","title":"Load table from YAML string","text":"<pre><code>achievements.loadYML(ymlString);\n</code></pre> <p>For exameple</p> <pre><code>Lv1 :\nAch1 : (A &gt;= 10) &amp;&amp; (A &lt; 20)\nAch2 : (A &gt;= 20) &amp;&amp; (A &lt; 50)\nAch3 : A &gt;= 50\n</code></pre> <p>Equations will be parsed by expression-parser.</p>"},{"location":"ymlachievements/#test","title":"Test","text":"<ol> <li>Run test     <pre><code>var achievements.runTest(levelName, values);\n</code></pre><ul> <li><code>levelName</code> : Level name, in 1st column of achievements table.</li> <li><code>values</code> : Inputs in Key-value pairs</li> </ul> </li> <li>Get obtained states     <pre><code>var states = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> </ol> <p>or</p> <pre><code>var states = achievements.getTestResults(levelName, values);\n</code></pre>"},{"location":"ymlachievements/#get-obtained-states","title":"Get obtained states","text":"<ul> <li>Get obtained states of an achievement in a level     <pre><code>var state = achievements.getObtainedState(levelName, achievementName);\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> <li>Get obtained states of a level     <pre><code>var state = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre></li> </ul> </li> <li>Get obtained states of all levels     <pre><code>var state = achievements.getObtainedState();\n// var state = achievements.getObtainedStates();\n</code></pre><ul> <li><code>states</code> : Obtained states of all levels     <pre><code>{\nlevelName: {\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n}\n</code></pre></li> </ul> </li> <li>For each obtained state in a level     <pre><code>achievements.forEachObtainedState(levelName, function(levelName, achievementName, state) {\n\n}, scope)\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ymlachievements/#get-name","title":"Get name","text":"<ul> <li>Name of levels     <pre><code>var names = achievements.getLevelNames();\n// var names = achievements.getLevelNames(out);\n</code></pre></li> <li>Name of achievements in a level     <pre><code>var names = achievements.getAchievementNames(levelName);\n// var names = achievements.getAchievementNames(levelName, out);\n</code></pre></li> </ul>"},{"location":"ymlachievements/#save-load-obtained-states","title":"Save &amp; load obtained states","text":"<ul> <li>Get obtained states     <pre><code>var states = achievements.getObtainedStates();\n</code></pre></li> <li>Load obtained states     <pre><code>achievements.loadObtainedStates(states);\n</code></pre></li> </ul>"},{"location":"ymlachievements/#set-obtained-state","title":"Set obtained state","text":"<ul> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>true</code>.     <pre><code>achievements.setObtainedState(levelName, achievementName);\n</code></pre></li> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>false</code>.     <pre><code>achievements.clearObtainedState(levelName, achievementName);\n// achievements.setObtainedState(levelName, achievementName, false);\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/","title":"YAML Conditions table","text":""},{"location":"ymlconditionstable/#introduction","title":"Introduction","text":"<p>Check conditions to find passed tests listed in a YAML table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"ymlconditionstable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ymlconditionstable/#install-plugin","title":"Install plugin","text":""},{"location":"ymlconditionstable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexymlconditionstableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexymlconditionstableplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexymlconditionstableplugin').add();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ConditionsTablePlugin from 'phaser3-rex-plugins/plugins/ymlconditionstable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexConditionsTable',\nplugin: ConditionsTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexConditionsTable').add();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ConditionsTable from 'phaser3-rex-plugins/plugins/ymlconditionstable.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = new ConditionsTable();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexConditionsTable').add();\n</code></pre>"},{"location":"ymlconditionstable/#load-table-from-yaml-string","title":"Load table from YAML string","text":"<pre><code>table.loadYML(ymlString);\n</code></pre> <p>For exameple</p> <pre><code>Test1 : (A &gt;= 10) &amp;&amp; (A &lt;= 20)\nTest2 : B == 3\n</code></pre> <p>Equations will be parsed by expression-parser.</p>"},{"location":"ymlconditionstable/#test","title":"Test","text":""},{"location":"ymlconditionstable/#get-test-results","title":"Get test results","text":"<pre><code>var results = table.getTestResults(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> <li><code>results</code> : <code>{name: boolean}</code>, use OR operation to combine result of tests with the same name.</li> </ul>"},{"location":"ymlconditionstable/#get-first-pass-test-name","title":"Get first pass test name","text":"<pre><code>var testName = table.anyPassTest(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> </ul>"},{"location":"youtubeplayer/","title":"Youtube player","text":""},{"location":"youtubeplayer/#introduction","title":"Introduction","text":"<p>Play youtube video on iframe.</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"youtubeplayer/#live-demos","title":"Live demos","text":"<ul> <li>Youtube player</li> </ul>"},{"location":"youtubeplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"youtubeplayer/#install-plugin","title":"Install plugin","text":""},{"location":"youtubeplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexyoutubeplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexyoutubeplayerplugin.min.js', true);\n</code></pre></li> <li>Add youtube player object     <pre><code>var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import YoutubePlayerPlugin from 'phaser3-rex-plugins/plugins/youtubeplayer-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexYoutubePlayer',\nplugin: YoutubePlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Add youtube player object     <pre><code>var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import YoutubePlayer from 'phaser3-rex-plugins/plugins/youtubeplayer.js';\n</code></pre></li> <li>Add youtube player object     <pre><code>var youtubePlayer = new YoutubePlayer(scene, x, y, width, height, config);\nscene.add.existing(youtubePlayer);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#add-youtube-player-object","title":"Add youtube player object","text":"<ul> <li>Youtube player on DOM     <pre><code>var player = scene.add.rexYoutubePlayer(x, y, width, height, config);\n// var player = scene.add.rexYoutubePlayer(x, y, config);\n// var player = scene.add.rexYoutubePlayer(config);\n</code></pre></li> </ul> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\nvideoId: '',\nautoPlay: true,\ncontrols: false,\nkeyboardControl: true,\nmodestBranding: false,\nloop: false,\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li><code>videoId</code> : The YouTube video ID that identifies the video that the player will load.</li> <li><code>autoPlay</code> : Automatically start to play when the player loads.</li> <li><code>controls</code> : Whether the video player controls are displayed.</li> <li><code>keyboardControl</code> : Set <code>false</code> to disable keyboard controls.</li> <li><code>modestBranding</code> : Set <code>false</code> to prevent the YouTube logo from displaying in the control bar.</li> <li><code>loop</code> : Play video when ended.</li> </ul>"},{"location":"youtubeplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyYoutubePlayer extends YoutubePlayer {  // or YoutubePlayerCanvas\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta)\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var player = new MyYoutubePlayer(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#load","title":"Load","text":"<pre><code>player.load(videoId);\n// player.load(videoId, autoPlay);\n</code></pre>"},{"location":"youtubeplayer/#play","title":"Play","text":"<pre><code>player.play();\n</code></pre>"},{"location":"youtubeplayer/#pause","title":"Pause","text":"<pre><code>player.pause();\n</code></pre>"},{"location":"youtubeplayer/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = player.playbackTime; // time in seconds\n</code></pre> <pre><code>var t = player.t; // t: 0~1\n</code></pre></li> <li>Set     <pre><code>player.setPlaybackTime(time); // time in seconds\n// player.playbackTime = time;\n</code></pre> <pre><code>player.setT(t); // t: 0~1\n// player.t = t;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#duration","title":"Duration","text":"<pre><code>var duration = player.duration;  // time in seconds\n</code></pre>"},{"location":"youtubeplayer/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = player.volume;  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>player.setVolume(volume);  // volume: 0~1\n// player.volume = volume;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = player.muted;  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>player.setMute(muted);  // muted: true/false\n// player.muted = muted;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = player.loop;  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>player.setLoop(loop);  // loop: true/false\n// player.loop = loop;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#resize","title":"Resize","text":"<pre><code>player.resize(width, height);\n</code></pre>"},{"location":"youtubeplayer/#status","title":"Status","text":"<ul> <li>Is playing     <pre><code>var isPlaying = player.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = player.isPaused;\n</code></pre></li> <li>Has end     <pre><code>var hasEnded = player.hasEnded;\n</code></pre></li> <li>Video state     <pre><code>var videoState = player.videoState;\n</code></pre>     or     <pre><code>var videoStateString = player.videoStateString;\n</code></pre><ul> <li><code>-1</code> : <code>unstarted</code></li> <li><code>0</code> : <code>ended</code></li> <li><code>1</code> : <code>playing</code></li> <li><code>2</code> : <code>paused</code></li> <li><code>3</code> : <code>buffering</code></li> <li><code>5</code> : <code>cued</code></li> </ul> </li> </ul>"},{"location":"youtubeplayer/#events","title":"Events","text":"<ul> <li>Youtube player api ready     <pre><code>player.on('ready', function(player){ }, scope);\n</code></pre></li> <li>State change     <pre><code>player.on('statechange', function(player){ }, scope);\n</code></pre><ul> <li>State : <code>player.videoState</code></li> </ul> </li> <li>Unstarted     <pre><code>player.on('unstarted', function(player){ }, scope);\n</code></pre></li> <li>Playing     <pre><code>player.on('playing', function(player){ }, scope);\n</code></pre></li> <li>Pause     <pre><code>player.on('pause', function(player){ }, scope);\n</code></pre></li> <li>Ended     <pre><code>player.on('ended', function(player){ }, scope);\n</code></pre></li> <li>Buffering     <pre><code>player.on('buffering', function(player){ }, scope);\n</code></pre></li> <li>Video cued     <pre><code>player.on('cued', function(player){ }, scope);\n</code></pre></li> <li>Error     <pre><code>player.on('error', function(player, errorMessage){ }, scope);\n</code></pre></li> </ul> <p>No <code>Playback time changed</code> event</p> <p>Get playback time every tick might cause playing video lagging.</p>"},{"location":"youtubeplayer/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"zone/","title":"Zone","text":""},{"location":"zone/#introduction","title":"Introduction","text":"<p>Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"zone/#usage","title":"Usage","text":""},{"location":"zone/#add-zone-object","title":"Add zone object","text":"<pre><code>var zone = scene.add.zone(x, y, width, height);\n</code></pre> <p>Add zone from JSON</p> <pre><code>var zone = scene.make.zone({\nx: 0,\ny: 0,\n//width: 1,\n//height: 1,\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"zone/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyZone extends Phaser.GameObjects.Zone {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var zone = new MyZone(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"zone/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"zone/#input-hit-zone","title":"Input hit zone","text":"<pre><code>zone.setInteractive();\n</code></pre> <p>See touch events</p>"},{"location":"zone/#drop-zones","title":"Drop zones","text":"<ul> <li>Default drop zone     <pre><code>zone.setDropZone();\n</code></pre></li> <li>Rectangle drop zone     <pre><code>zone.setRectangleDropZone(width, height);\n</code></pre></li> <li>Circular drop zone     <pre><code>zone.setCircleDropZone(radius);\n</code></pre></li> <li>Custom drop zone     <pre><code>zone.setDropZone(shape, callback);\n</code></pre><ul> <li><code>callback</code> <pre><code>function(shape, x, y, gameObject) {\nreturn hit;  // true/false\n}\n</code></pre></li> </ul> </li> </ul> <p>See drop zone</p>"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":""},{"location":"#phaser","title":"Phaser","text":"<p>Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.</p>"},{"location":"#links","title":"Links","text":""},{"location":"#phaser3","title":"Phaser3","text":"<ul> <li>FAQ</li> <li>Official discord channel</li> <li>API document</li> <li>Examples</li> <li>Bug report</li> </ul>"},{"location":"#rex-plugins","title":"Rex plugins","text":"<ul> <li>Plugin list<ul> <li>Demos</li> </ul> </li> <li>Discord channel</li> <li>Bug report</li> <li>Feature suggestion &amp; discussion</li> </ul>"},{"location":"achievements/","title":"CSV Achievements","text":""},{"location":"achievements/#introduction","title":"Introduction","text":"<p>Achievements in a csv table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"achievements/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"achievements/#install-plugin","title":"Install plugin","text":""},{"location":"achievements/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexachievementsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexachievementsplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexachievementsplugin').add();\n</code></pre></li> </ul>"},{"location":"achievements/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AchievementsPlugin from 'phaser3-rex-plugins/plugins/achievements-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAchievements',\nplugin: AchievementsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre></li> </ul>"},{"location":"achievements/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Achievements from 'phaser3-rex-plugins/plugins/achievements.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = new Achievements();\n</code></pre></li> </ul>"},{"location":"achievements/#create-instance","title":"Create instance","text":"<pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre>"},{"location":"achievements/#load-table-from-csv-string","title":"Load table from csv string","text":"<pre><code>achievements.loadCSV(csvString, {\n// delimiter: ','\n});\n</code></pre> <p>For exameple, csv string</p> A A Lv1 Ach1 &gt;= 10 &lt; 20 Lv1 Ach2 &gt;= 20 &lt; 50 Lv1 Ach3 &gt;= 50 <pre><code>,A,A\nLv1,Ach1,&gt;= 10,&lt;= 20,\nLv1,Ach2,&gt;= 20,&lt; 50,\nLv1,Ach3,&gt;= 50,,\n</code></pre> <ul> <li>1st column : Level names</li> <li>2nd column : Achievement names</li> <li>Other columns : Condtions</li> <li>1st row : Variable names of conditions.</li> </ul> <p>means that:</p> <pre><code>Lv1, Ach1: (A&gt;=10) &amp;&amp; (A&lt;20)\nLv1, Ach2: (A&gt;=20) &amp;&amp; (A&lt;50)\nLv1, Ach3: (A&gt;=50)\n</code></pre>"},{"location":"achievements/#test","title":"Test","text":"<ol> <li>Run test     <pre><code>var achievements.runTest(levelName, values);\n</code></pre><ul> <li><code>levelName</code> : Level name, in 1st column of achievements table.</li> <li><code>values</code> : Inputs in Key-value pairs</li> </ul> </li> <li>Get obtained states     <pre><code>var states = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> </ol> <p>or</p> <pre><code>var states = achievements.getTestResults(levelName, values);\n</code></pre>"},{"location":"achievements/#get-obtained-states","title":"Get obtained states","text":"<ul> <li>Get obtained states of an achievement in a level     <pre><code>var state = achievements.getObtainedState(levelName, achievementName);\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> <li>Get obtained states of a level     <pre><code>var state = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre></li> </ul> </li> <li>Get obtained states of all levels     <pre><code>var state = achievements.getObtainedState();\n// var state = achievements.getObtainedStates();\n</code></pre><ul> <li><code>states</code> : Obtained states of all levels     <pre><code>{\nlevelName: {\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n}\n</code></pre></li> </ul> </li> <li>For each obtained state in a level     <pre><code>achievements.forEachObtainedState(levelName, function(levelName, achievementName, state) {\n\n}, scope)\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"achievements/#get-name","title":"Get name","text":"<ul> <li>Name of levels     <pre><code>var names = achievements.getLevelNames();\n// var names = achievements.getLevelNames(out);\n</code></pre></li> <li>Name of achievements in a level     <pre><code>var names = achievements.getAchievementNames(levelName);\n// var names = achievements.getAchievementNames(levelName, out);\n</code></pre></li> </ul>"},{"location":"achievements/#save-load-obtained-states","title":"Save &amp; load obtained states","text":"<ul> <li>Get obtained states     <pre><code>var states = achievements.getObtainedStates();\n</code></pre></li> <li>Load obtained states     <pre><code>achievements.loadObtainedStates(states);\n</code></pre></li> </ul>"},{"location":"achievements/#set-obtained-state","title":"Set obtained state","text":"<ul> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>true</code>.     <pre><code>achievements.setObtainedState(levelName, achievementName);\n</code></pre></li> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>false</code>.     <pre><code>achievements.clearObtainedState(levelName, achievementName);\n// achievements.setObtainedState(levelName, achievementName, false);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/","title":"Alpha mask image","text":""},{"location":"alphamaskimage/#introduction","title":"Introduction","text":"<p>Load a texture, then apply an alpha mask from another texture. Extended from canvas plugin.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"alphamaskimage/#live-demos","title":"Live demos","text":"<ul> <li>Alpha-mask-image</li> </ul>"},{"location":"alphamaskimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"alphamaskimage/#install-plugin","title":"Install plugin","text":""},{"location":"alphamaskimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexalphamaskimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexalphamaskimageplugin.min.js', true);\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AlphaMaskImagePlugin from 'phaser3-rex-plugins/plugins/alphamaskimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAlphaMaskImagePlugin',\nplugin: AlphaMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import AlphaMaskImage from 'phaser3-rex-plugins/plugins/alphamaskimage.js';\n</code></pre></li> <li>Add alpha-mask-image object     <pre><code>var image = new AlphaMaskImage(scene, x, y, key, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAlphaMaskImagePlugin',\nplugin: AlphaMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"alphamaskimage/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, frame, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexAlphaMaskImage(x, y, key, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <ul> <li><code>key</code>, <code>frame</code> : Texture key, frame name of target texture.</li> <li><code>mask.key</code>, <code>mask.frame</code> : Texture key, frame name of the mask texture.</li> <li><code>mask.invertAlpha</code> :<ul> <li><code>false</code> : Mask non-alpha (alpha === 0) area. Default behavior.</li> <li><code>true</code> : Mask alpha (alpha &gt; 0) area.</li> </ul> </li> <li><code>mask.scale</code> :<ul> <li><code>undefined</code> : Expand mask texture size to fit target texture.</li> <li>A number : Scale mask texture size.</li> </ul> </li> <li><code>backgroundColor</code> : Background color filled with masked area.<ul> <li><code>undefiined</code> : No background color.</li> </ul> </li> </ul> <p>Add image from JSON</p> <pre><code>var image = scene.make.rexAlphaMaskImage({\nx: 0,\ny: 0,\nkey: key,\nframe: name,\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n\nadd: true\n});\n</code></pre>"},{"location":"alphamaskimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends AlphaMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, key, frame, config);\n</code></pre></li> </ul>"},{"location":"alphamaskimage/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n// image.setTexture(key, frame, mask);\n</code></pre> <p>or</p> <pre><code>image.setTexture(key, frame, {\nmask: {\nkey: textureKey,\n// frame: frameName,\n// invertAlpha: false,\n// scale: undefined,\n}\n\n// backgroundColor: undefined,\n});\n</code></pre> <ul> <li><code>mask.key</code>, <code>mask.frame</code> : Texture key, frame name of the mask texture.</li> <li><code>mask.invertAlpha</code> :<ul> <li><code>false</code> : Mask non-alpha (alpha === 0) area. Default behavior.</li> <li><code>true</code> : Mask alpha (alpha &gt; 0) area.</li> </ul> </li> <li><code>mask.scale</code> :<ul> <li><code>undefined</code> : Expand mask texture size to fit target texture.</li> <li>A number : Scale mask texture size.</li> </ul> </li> <li><code>backgroundColor</code> : Background color filled with masked area.<ul> <li><code>undefiined</code> : No background color.</li> </ul> </li> </ul>"},{"location":"alphamaskimage/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"alphamaskimage/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"alphamaskimage/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"anchor/","title":"Anchor","text":""},{"location":"anchor/#introduction","title":"Introduction","text":"<p>Set size and position based on visible window.</p> <p>Note</p> <p>Visible window will be changed when scale mode is ENVELOP, WIDTH_CONTROLS_HEIGHT, or HEIGHT_CONTROLS_WIDTH.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"anchor/#live-demos","title":"Live demos","text":"<ul> <li>Anchor</li> <li>Resize</li> <li>Camera zoom/scroll</li> </ul>"},{"location":"anchor/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"anchor/#install-plugin","title":"Install plugin","text":""},{"location":"anchor/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexanchorplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexanchorplugin.min.js', true);\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = scene.plugins.get('rexanchorplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AnchorPlugin from 'phaser3-rex-plugins/plugins/anchor-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAnchor',\nplugin: AnchorPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = scene.plugins.get('rexAnchor').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Anchor from 'phaser3-rex-plugins/plugins/anchor.js';\n</code></pre></li> <li>Add anchor behavior     <pre><code>var anchor = new Anchor(gameObject, config);\n</code></pre></li> </ul>"},{"location":"anchor/#create-instance","title":"Create instance","text":"<pre><code>var anchor = scene.plugins.get('rexAnchor').add(gameObject, {\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0',\n\n// width: '100%+0',\n// height: '100%+0',\n// onResizeCallback: function(width, height, gameObject, anchor) {},\n// onResizeCallbackScope: undefined,\n\n// onUpdateViewportCallback: function(viewport, gameObject, anchor) {},\n// onUpdateViewportCallbackScope: undefined,\n\n// enable: true\n});\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> </ul> <p>For example, anchor game object's left bound to viewport's left+10, centerY to viewport's center</p> <pre><code>{\nleft: 'left+10',\ncenterY: 'center'\n}\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li> <p><code>onResizeCallback</code>, <code>onResizeCallbackScope</code> : Callback of resizing game object     <pre><code>function(width, height, gameObject, anchor) {\n// gameObject.setSize(width, height);\n// gameObject.setDisplaySize(width, height);\n// ...\n}\n</code></pre></p> </li> <li> <p><code>onUpdateViewportCallback</code>, <code>onUpdateViewportCallback</code> : Callback invoked when viewport changed (anchor)     <pre><code>fucntion(viewport, gameObject, anchor) {\n// Can change properties of viewport here\n// var centerX = viewport.centerX,\n//     centerY = viewport.centerY;\n// viewport.width *= 0.8;\n// viewport.height *= 0.9;\n// viewport.centerX = centerX;\n// viewport.centerY = centerY;\n}\n</code></pre></p> <ul> <li><code>viewport</code>\uff1a A rectangle object</li> </ul> </li> <li> <p><code>enable</code> :</p> <ul> <li><code>undefined</code>, or <code>true</code> : Anchor game object under <code>'resize'</code> event of scale manager.</li> <li><code>false</code> : Won't anchor game object automatially.</li> </ul> </li> </ul>"},{"location":"anchor/#reset-config","title":"Reset config","text":"<pre><code>anchor.resetFromJSON({\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0',\n\n// width: '100%+0',\n// height: '100%+0',    \n\n// onUpdateViewportCallback: function(viewport, gameObject, anchor) {}\n// onUpdateViewportCallbackScope: undefined,\n})\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: 0~100<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code></li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code>, <code>onResizeCallbackScope</code> : Callback of resizing game object     <pre><code>function(width, height, gameObject, anchor) {\n// gameObject.setSize(width, height);\n// gameObject.setDisplaySize(width, height);\n// ...\n}\n</code></pre></li> </ul>"},{"location":"anchor/#set-onupdateviewport-callback","title":"Set OnUpdateViewport callback","text":"<pre><code>anchor.setUpdateViewportCallback(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>fucntion(viewport, gameObject, anchor) {\n// Can change properties of viewport here\n// var centerX = viewport.centerX,\n//     centerY = viewport.centerY;\n// viewport.width *= 0.8;\n// viewport.height *= 0.9;\n// viewport.centerX = centerX;\n// viewport.centerY = centerY;\n}\n</code></pre><ul> <li><code>viewport</code>\uff1a A rectangle object</li> </ul> </li> </ul>"},{"location":"anchor/#manual-anchor","title":"Manual anchor","text":"<pre><code>anchor.anchor();\n</code></pre>"},{"location":"anchor/#auto-anchor","title":"Auto anchor","text":"<ul> <li>Anchor game object under <code>'resize'</code> event of scale manager.     <pre><code>anchor.autoAnchor();\n// anchor.autoAnchor(true);\n</code></pre></li> <li>Disable auto-anchor     <pre><code>anchor.autoAnchor(false);\n</code></pre></li> </ul>"},{"location":"angle/","title":"Angle","text":""},{"location":"angle/#introduction","title":"Introduction","text":"<p>Convert angle value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"angle/#usage","title":"Usage","text":""},{"location":"angle/#degree-radians","title":"Degree &lt;-&gt; Radians","text":"<ul> <li>Degree to radians     <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> <li>Radians to degree    <pre><code>var deg = Phaser.Math.RadToDeg(rad);  // deg : -180 ~ 180\n</code></pre></li> </ul>"},{"location":"angle/#wrap","title":"Wrap","text":"<ul> <li>Wrap angle (radians) in the range of -PI to PI    <pre><code>var rad = Phaser.Math.Angle.Wrap(angle);\n</code></pre></li> <li>Wrap angle (radians) in the range of 0 to 2*PI    <pre><code>var rad = Phaser.Math.Angle.Normalize(angle);\n</code></pre></li> <li>Wrap angle (degrees) in the range of -180 to 180    <pre><code>var deg = Phaser.Math.Angle.WrapDegrees(angle);\n</code></pre></li> </ul>"},{"location":"angle/#angle-between-points","title":"Angle between points","text":"<ul> <li>Angle from (0,0) to vector (x2 - x1 , y2 - y1)    <pre><code>var rad = Phaser.Math.Angle.Between(x1, y1, x2, y2);\n</code></pre> <pre><code>var rad = Phaser.Math.Angle.BetweenPoints(point1, point2);\n</code></pre></li> </ul>"},{"location":"angle/#angle-between-angles","title":"Angle between angles","text":"<ul> <li>Shortest angle (degrees) between 2 angles     <pre><code>var deg = Phaser.Math.Angle.ShortestBetween(angle1, angle2)\n</code></pre><ul> <li><code>angle1</code>, <code>angle2</code> : Angle in degrees in the range of -180 to 180</li> <li><code>deg</code> : Shortest angle in degrees<ul> <li>deg &gt; 0 : Counter-ClockWise rotation</li> <li>deg &lt; 0 : ClockWise rotation</li> </ul> </li> </ul> </li> </ul>"},{"location":"angle/#rotate-around-position","title":"Rotate around position","text":"<ul> <li>Rotate a <code>point</code> around <code>x</code> and <code>y</code> by the given <code>angle</code>.     <pre><code>var out = Phaser.Math.RotateAround(point, x, y, angle);\n</code></pre></li> <li>Rotate a <code>point</code> around <code>x</code> and <code>y</code> by the given <code>angle</code> and <code>distance</code>.     <pre><code>var out = Phaser.Math.RotateAroundDistance(point, x, y, angle, distance);\n</code></pre></li> </ul>"},{"location":"angle/#rotate-to-angle","title":"Rotate to angle","text":"<pre><code>var rad = Phaser.Math.Angle.RotateTo(currentAngle, targetAngle, lerp)\n</code></pre> <ul> <li><code>currentAngle</code>, : The current angle, in radians.</li> <li><code>targetAngle</code> : The target angle to rotate to, in radians.</li> <li><code>lerp</code> : The lerp value to add to the current angle.</li> </ul>"},{"location":"angle/#random-angle","title":"Random angle","text":"<ul> <li>Returns a random angle in the range [-pi, pi].    <pre><code>var angle = Phaser.Math.Angle.Random();\n</code></pre></li> <li>Returns a random angle in the range [-180, 180].    <pre><code>var angle = Phaser.Math.Angle.RandomDegrees();\n</code></pre></li> </ul>"},{"location":"animation/","title":"Animation","text":""},{"location":"animation/#introduction","title":"Introduction","text":"<p>Animation and animations manager.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"animation/#usage","title":"Usage","text":""},{"location":"animation/#animation-manager","title":"Animation manager","text":""},{"location":"animation/#add-animation","title":"Add animation","text":"<pre><code>scene.anims.create({\nkey: '',\n\nframes: [],\n\nsortFrames: true,\ndefaultTextureKey: null,\nskipMissedFrames: true,\n\n\n// time\ndelay: 0,\nduration: null,\nframeRate: null,\n\n// repeat\nrepeat: 0,              // set to (-1) to repeat forever\nrepeatDelay: 0,\nyoyo: false,\n\n// visible\nshowBeforeDelay: false,\nshowOnStart: false,\nhideOnComplete: false\n});\n</code></pre> <ul> <li><code>key</code> : Unique key of this animation data</li> <li><code>frames</code> : An array of <code>{key, frame}</code><ul> <li>Properties     <pre><code>{\nkey: '',\nframe: '', // string, or number\nduration: 0\n}\n</code></pre><ul> <li><code>duration</code> : Additional time (in ms) that this frame should appear for during playback.</li> </ul> </li> <li>Every frame in the atlas     <pre><code>scene.anims.generateFrameNames(key);\n</code></pre></li> <li>Frame sequence indexing from start to end     <pre><code>var config = ;\nscene.anims.generateFrameNames(key,\n{\nprefix: '',\nstart: 0,\nend: 0,\nsuffix: '',\nzeroPad: 0,\n// outputArray: [], // Append frames into this array\n});\n</code></pre><ul> <li><code>prefix + Pad(i, zeroPad, '0', 1) + suffix</code>, i: start ~ end</li> </ul> </li> <li>Custom frame sequence     <pre><code>var config = ;\nscene.anims.generateFrameNames(key,\n{\nprefix: '',\nsuffix: '',\nzeroPad: 0,\nframes: [ ... ]\n// outputArray: [], // Append frames into this array\n});\n</code></pre><ul> <li><code>prefix + Pad(frames[i], zeroPad, '0', 1) + suffix</code></li> </ul> </li> </ul> </li> <li><code>sortFrames</code> : Frame names numerically sorted. Default value is <code>true</code>.</li> <li><code>defaultTextureKey</code> : The key of the texture all frames of the animation will use. Can be overridden on a per frame basis.</li> <li><code>skipMissedFrames</code> : Skip frames if the time lags, or always advanced anyway? Default value is <code>true</code>.</li> <li><code>delay</code> : Delay before starting playback. Value given in milliseconds.</li> <li><code>duration</code> : How long the animation should play for in milliseconds. If not given its derived from <code>frameRate</code>.</li> <li><code>frameRate</code> : The frame rate of playback in frames per second. Default value is <code>24</code>.</li> <li><code>repeat</code> : Number of times to repeat the animation. Default value is <code>0</code>.<ul> <li><code>-1</code> : Infinity</li> </ul> </li> <li><code>repeatDelay</code> : Delay before the animation repeats. Value given in milliseconds.</li> <li><code>yoyo</code> : Should the animation yoyo? (reverse back down to the start) before repeating? Default value is <code>false</code>.</li> <li><code>showBeforeDelay</code> :  If this animation has a delay, should it show the first frame immediately (<code>true</code>), or only after the delay (<code>false</code>)</li> <li><code>showOnStart</code> : Should <code>sprite.visible = true</code> when the animation starts to play? This happens after any delay, if set. Default value is <code>false</code>.</li> <li><code>hideOnComplete</code> : Should sprite.visible = false when the animation finishes? Default value is <code>false</code>.</li> </ul>"},{"location":"animation/#add-from-aseprite","title":"Add from Aseprite","text":"<p>Aseprite</p> <pre><code>scene.anims.createFromAseprite(key);\n// scene.anims.createFromAseprite(key, tags, target);\n</code></pre> <ul> <li><code>key</code> : The key of the loaded Aseprite atlas.</li> <li><code>tags</code> :<ul> <li><code>undefined</code> : Load all tags.</li> <li>Array of string tag : Load these tags.</li> </ul> </li> <li><code>target</code> : Create the animations on this target Sprite. <ul> <li><code>undefined</code> : Created globally in this Animation Manager. Default behavior.</li> </ul> </li> </ul>"},{"location":"animation/#remove-animation","title":"Remove animation","text":"<pre><code>scene.anims.remove(key);\n</code></pre>"},{"location":"animation/#delay-between-two-animations","title":"Delay between two animations","text":"<ul> <li>Add     <pre><code>scene.anims.addMix(animA, animB, delay);\n</code></pre><ul> <li><code>animA</code>, <code>animB</code> : String key of an animation, or an instance of animation.</li> </ul> </li> <li>Remove     <pre><code>scene.anims.removeMix(animA, animB);\n// scene.anims.removeMix(animA);\n</code></pre></li> <li>Get     <pre><code>var delay = scene.anims.getMix(animA, animB);\n</code></pre></li> </ul>"},{"location":"animation/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>scene.anims.play(key, children);\n</code></pre></li> <li>Stagger play (delay play)     <pre><code>scene.anims.staggerPlay(key, children, stagger, staggerFirst);\n</code></pre><ul> <li><code>children</code> : An array of Game Objects to play the animation on</li> <li><code>stagger</code> : The amount of time, in milliseconds, to offset each play time by</li> <li><code>staggerFirst</code> : Set <code>true</code> to apply delay on 1st child</li> </ul> </li> </ul>"},{"location":"animation/#pause-all-animations","title":"Pause all animations","text":"<pre><code>scene.anims.pauseAll();\n</code></pre>"},{"location":"animation/#resume-all-animations","title":"Resume all animations","text":"<pre><code>scene.anims.resumeAll();\n</code></pre>"},{"location":"animation/#has-animation","title":"Has animation","text":"<pre><code>var hasAnim = scene.anims.exists(key);\n</code></pre>"},{"location":"animation/#exportload","title":"Export/load","text":"<ul> <li>Export JSON     <pre><code>var json = scene.anims.toJSON();\n</code></pre></li> <li>Load from JSON     <pre><code>scene.anims.fromJSON(json);\n// scene.anims.fromJSON(json, clearCurrentAnimations);\n</code></pre><ul> <li>Load JSON in preload stage     <code>javascript    scene.load.json(key, url);</code></li> <li>Load animation in preload stage     <pre><code>scene.load.animation(key, url);\n</code></pre></li> </ul> </li> </ul>"},{"location":"animation/#events","title":"Events","text":"<ul> <li>On add animation    <pre><code>scene.anims.on('add', function(key, anim) {});\n</code></pre></li> <li>On remove animation    <pre><code>scene.anims.on('remove', function(key, anim) {});\n</code></pre></li> <li>On pause all animations    <pre><code>scene.anims.on('pauseall', function() {});\n</code></pre></li> <li>On resume all animations    <pre><code>scene.anims.on('resumeall', function() {});\n</code></pre></li> </ul>"},{"location":"animation/#animation-object","title":"Animation object","text":"<pre><code>var anim = scene.anims.get(key);\n</code></pre>"},{"location":"animation/#add-frame","title":"Add frame","text":"<ul> <li>Append frames     <pre><code>anim.addFrame(frame);\n</code></pre><ul> <li><code>frame</code> : <code>scene.anims.generateFrameNames(key, config)</code></li> </ul> </li> <li>Insert frames at index     <pre><code>anim.addFrameAt(index, frame);\n</code></pre><ul> <li><code>frame</code> : <code>scene.anims.generateFrameNames(key, config)</code></li> </ul> </li> </ul>"},{"location":"animation/#remove-frame","title":"Remove frame","text":"<ul> <li>Remove frame at     <pre><code>anim.removeFrameAt(index);\n</code></pre></li> <li>Remove frame     <pre><code>anim.removeFrame(frame);\n</code></pre></li> </ul>"},{"location":"animation/#get-frame","title":"Get frame","text":"<ul> <li>Has frame index     <pre><code>var HasFrameAt = anim.checkFrame(index);\n</code></pre></li> <li>Get frame at index     <pre><code>var frame = anim.getFrameAt(index);\n</code></pre></li> <li>Get last frame     <pre><code>var frame = anim.getLastFrame();\n</code></pre></li> </ul>"},{"location":"animation/#export","title":"Export","text":"<ul> <li>Export JSON     <pre><code>var json = anim.toJSON();\n</code></pre>     or     <pre><code>var jsonString = JSON.stringify(anim);\n</code></pre></li> </ul>"},{"location":"arcade-body/","title":"Body","text":""},{"location":"arcade-body/#introduction","title":"Introduction","text":"<p>Arcade physics body.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-body/#usage","title":"Usage","text":""},{"location":"arcade-body/#get-physics-body","title":"Get physics body","text":"<ol> <li>Enable physics world</li> <li>Add existing game object(s) to physics world<ul> <li>Add a game object     <pre><code>var gameObject = scene.physics.add.existing(gameObject, bodyType);\n</code></pre><ul> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body</li> <li><code>1</code> : Static body</li> </ul> </li> </ul> </li> <li>Add game objects     <pre><code>scene.physics.world.enable(gameObjects, bodyType);\n</code></pre><ul> <li><code>gameObjects</code> : An array of game objects, or a group object</li> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body</li> <li><code>1</code> : Static body</li> </ul> </li> </ul> </li> </ul> </li> <li>Get physics body     <pre><code>var body = gameObject.body;\n</code></pre></li> </ol>"},{"location":"arcade-body/#enable","title":"Enable","text":"<p>Whether this Body is updated by the physics simulation.</p> <ul> <li>Enable (default)     <pre><code>body.setEnable();\n</code></pre>     or     <pre><code>body.enable = true;\n</code></pre></li> <li>Disable     <pre><code>body.setEnable(false);\n</code></pre>     or     <pre><code>body.enable = false;\n</code></pre></li> </ul>"},{"location":"arcade-body/#immovable","title":"Immovable","text":"<p>Whether this Body can be moved by collisions with another Body.</p> <ul> <li>Enable     <pre><code>body.setImmovable();\n// body.immovable = true;\n</code></pre></li> <li>Disable (defalut)     <pre><code>body.setImmovable(false);\n// body.immovable = false;\n</code></pre></li> <li>Get     <pre><code>var immovable = body.immovable;\n</code></pre></li> </ul>"},{"location":"arcade-body/#pushable","title":"Pushable","text":"<p>Sets if this Body can be pushed by another Body.</p> <ul> <li>Enable (default value of dynamic body)     <pre><code>body.pushable = true;\n</code></pre></li> <li>Disable, reflect back all of the velocity it is given to the colliding body.     <pre><code>body.pushable = false;\n</code></pre></li> <li>Get     <pre><code>var pushable = body.pushable;\n</code></pre></li> </ul>"},{"location":"arcade-body/#moveable","title":"Moveable","text":"<p>Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity.</p> <ul> <li>Enable (default)     <pre><code>body.moves = true;\n</code></pre></li> <li>Disable     <pre><code>body.moves = false;\n</code></pre></li> <li>Get     <pre><code>var moves = body.moves;\n</code></pre></li> </ul> <p>Use case</p> <p>Set <code>body.moves</code> to <code>false</code> when game object is controlled by tween or dragging.</p>"},{"location":"arcade-body/#destroy","title":"Destroy","text":"<p>Physics body will be destroyed automatically when game object is destroyed.</p>"},{"location":"arcade-body/#movement","title":"Movement","text":""},{"location":"arcade-body/#velocity","title":"Velocity","text":"<ul> <li>Set     <pre><code>body.setVelocity(x,y);\n</code></pre>     or     <pre><code>body.setVelocityX(x);\nbody.setVelocityY(x);\n</code></pre></li> <li>Get     <pre><code>var vx = body.velocity.x;\nvar vy = body.velocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#max-speed","title":"Max speed","text":"<ul> <li>Set     <pre><code>body.setMaxSpeed(speed);\n</code></pre></li> <li>Get     <pre><code>var speed = body.maxSpeed;\n</code></pre></li> </ul>"},{"location":"arcade-body/#max-velocity","title":"Max velocity","text":"<ul> <li>Set     <pre><code>body.setMaxVelocity(x, y);\n</code></pre>     or     <pre><code>body.setMaxVelocityX(x);\nbody.setMaxVelocityY(y);\n</code></pre></li> <li>Get      <pre><code>var vx = body.maxVelocity.x;\nvar vy = body.maxVelocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#acceleration","title":"Acceleration","text":"<ul> <li>Set     <pre><code>body.setAcceleration(x, y);\n</code></pre>     or     <pre><code>body.setAccelerationX(x);\nbody.setAccelerationY(y);\n</code></pre></li> <li>Get     <pre><code>var ax = body.acceleration.x;\nvar ay = body.acceleration.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>body.setGravity(x, y);\n</code></pre>     or     <pre><code>body.setGravityX(x);\nbody.setGravityY(y);\n</code></pre></li> <li>Get     <pre><code>var gx = body.gravity.x;\nvar gy = body.gravity.y;\n</code></pre></li> <li>Enables (default)     <pre><code>body.setAllowGravity();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowGravity(false);\n</code></pre></li> </ul>"},{"location":"arcade-body/#drag","title":"Drag","text":"<p>Reduces speed per second.</p> <ul> <li>Set     <pre><code>body.setDrag(x, y);\n</code></pre>     or     <pre><code>body.setDragX(x);\nbody.setDragY(y);\n</code></pre></li> <li>Get     <pre><code>var dx = body.drag.x;\nvar dy = body.drag.y;\n</code></pre></li> <li>Enables (default)     <pre><code>body.setAllowDrag();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowDrag(false);\n</code></pre></li> <li>Enable Damping (default: disable)     <pre><code>body.setDamping(true);\n// body.useDamping = true;\n</code></pre></li> </ul>"},{"location":"arcade-body/#reset-position","title":"Reset position","text":"<pre><code>body.reset(x, y);\n</code></pre>"},{"location":"arcade-body/#stop","title":"Stop","text":"<p>Sets acceleration, velocity, and speed to zero.</p> <pre><code>body.stop();\n</code></pre>"},{"location":"arcade-body/#friction","title":"Friction","text":"<p>If this Body is <code>immovable</code> and in motion, this the proportion of this Body's movement received by the riding body on each axis.</p> <ul> <li>Set     <pre><code>body.setFriction(x, y);\n</code></pre>     or     <pre><code>body.setFrictionX(x);\nbody.setFrictionY(y);\n</code></pre></li> <li>Get     <pre><code>var fx = body.friction.x;\nvar fy = body.friction.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#speed","title":"Speed","text":"<ul> <li>The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step.     <pre><code>var dx = body.deltaAbsX();\nvar dy = body.deltaAbsY();\n</code></pre></li> </ul>"},{"location":"arcade-body/#rotation","title":"Rotation","text":""},{"location":"arcade-body/#allow-rotation","title":"Allow rotation","text":"<p>Whether this Body's rotation is affected by its angular acceleration and velocity.</p> <ul> <li>Enable (default)     <pre><code>body.setAllowRotation();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowRotation(false);\n</code></pre></li> <li>Get     <pre><code>var allowRotation = body.allowRotation;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-velocity","title":"Angular velocity","text":"<ul> <li>Set      <pre><code>body.setAngularVelocity(v);\n</code></pre></li> <li>Get     <pre><code>var av = body.angularVelocity;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-acceleration","title":"Angular acceleration","text":"<ul> <li>Set      <pre><code>body.setAngularAcceleration(v);\n</code></pre></li> <li>Get     <pre><code>var aa = body.angularAcceleration;\n</code></pre></li> </ul>"},{"location":"arcade-body/#angular-drag","title":"Angular drag","text":"<p>Reduces angular speed per second.</p> <ul> <li>Set     <pre><code>body.setAngularDrag(v);\n</code></pre></li> <li>Get     <pre><code>var ad = body.angularDrag;\n</code></pre></li> </ul>"},{"location":"arcade-body/#collision","title":"Collision","text":""},{"location":"arcade-body/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>body.setSize(width, height, center);\n</code></pre><ul> <li><code>center</code> : <code>false</code> to set body's offset to (0, 0).<ul> <li>Not work in Graphics object.</li> </ul> </li> </ul> </li> <li>Circle     <pre><code>body.setCircle(radius, offsetX, offsetY);\n</code></pre></li> </ul>"},{"location":"arcade-body/#offset","title":"Offset","text":"<pre><code>body.setOffset(x, y);\n</code></pre>"},{"location":"arcade-body/#push-out","title":"Push out","text":"<pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre> <ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>Game objects in array (Add or remove game objects)</li> <li>Physics group (Add or remove game objects)</li> <li>Group (Add or remove game objects)</li> </ul> </li> </ul>"},{"location":"arcade-body/#callbacks","title":"Callbacks","text":"<p>Add collider</p>"},{"location":"arcade-body/#point-inside","title":"Point inside","text":"<pre><code>var hit = body.hitTest(x, y);\n</code></pre>"},{"location":"arcade-body/#is-colliding","title":"Is colliding","text":"<ul> <li>Is colliding this tick     <pre><code>var isColliding = body.touching;\n</code></pre><ul> <li><code>isColliding</code> :     <pre><code>{\nnone: true,\nup: true,\ndown: true,\nleft: true,\nright: true\n}\n</code></pre></li> </ul> </li> <li>Was colliding previous tick     <pre><code>var wasColliding = body.wasTouching;\n</code></pre><ul> <li><code>wasColliding</code> :     <pre><code>{\nnone: true,\nup: true,\ndown: true,\nleft: true,\nright: true\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-body/#bounce","title":"Bounce","text":"<ul> <li>Set     <pre><code>body.setBounce(x, y);\n</code></pre>     or     <pre><code>body.setBounceX(x);\nbody.setBounceY(y);\n</code></pre></li> <li>Get     <pre><code>var bx = body.bounce.x;\nvar by = body.bounce.y;\n</code></pre></li> </ul>"},{"location":"arcade-body/#world-bounds","title":"World bounds","text":"<ul> <li>Default world bounds</li> <li>Custom world bounds :     <pre><code>body.setBoundsRectangle(bounds);\n</code></pre><ul> <li><code>bounds</code> : A rectangle object.</li> </ul> </li> <li>Enable     <pre><code>body.setCollideWorldBounds();\n</code></pre></li> <li>Disable (default)     <pre><code>body.setCollideWorldBounds(false);\n</code></pre></li> <li>Get world bounds rectangle <pre><code>var top = body.world.bounds.top;\nvar bottom = body.world.bounds.bottom;\nvar left = body.world.bounds.left;\nvar right = body.world.bounds.right;\n</code></pre></li> </ul>"},{"location":"arcade-body/#blocked","title":"Blocked","text":"<p>Whether this Body is colliding with a tile or the world boundary.</p> <ul> <li>Blocked when moveing down     <pre><code>var onFloor = body.onFloor(); // blocked.down\n</code></pre></li> <li>Blocked when moveing up     <pre><code>var onCeiling = body.onCeiling();  // blocked.up\n</code></pre></li> <li>Blocked when moveing left or right     <pre><code>var onWall = body.onWall();  // blocked.left || this.blocked.right\n</code></pre></li> <li>State     <pre><code>var blocked = body.blocked;\n</code></pre><ul> <li><code>blocked</code> :     <pre><code>{\nnone: true,\nup: false,\ndown: false,\nleft: false,\nright: false\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-body/#mass","title":"Mass","text":"<ul> <li>Set     <pre><code>body.setMass(m);\n</code></pre></li> <li>Get     <pre><code>var m = body.mass;\n</code></pre></li> </ul>"},{"location":"arcade-body/#static-body","title":"Static body","text":""},{"location":"arcade-body/#sync","title":"Sync","text":"<p>Syncs the Bodies position and size with its parent Game Object.</p> <pre><code>body.updateFromGameObject();\n</code></pre>"},{"location":"arcade-body/#debug","title":"Debug","text":"<ul> <li>Bounds of Body<ul> <li>Enable drawing body     <pre><code>body.debugShowBody = true;\n</code></pre></li> <li>Color     <pre><code>body.debugBodyColor = 0xff00ff;\n</code></pre></li> </ul> </li> <li>Direction and magnitude of velocity<ul> <li>Enable drawing body     <pre><code>body.debugShowVelocity = true;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-gameobject/","title":"Game object","text":""},{"location":"arcade-gameobject/#introduction","title":"Introduction","text":"<p>Arcade physics Image/Sprite/Group object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-gameobject/#usage","title":"Usage","text":""},{"location":"arcade-gameobject/#add-physics-object","title":"Add physics object","text":"<p>Enable physics world</p>"},{"location":"arcade-gameobject/#image-object","title":"Image object","text":"<ul> <li>Static object, extends from Image object <pre><code>var image = scene.physics.add.staticImage(x, y, key);\n</code></pre></li> <li>Dynamic object, extends from Image object <pre><code>var image = scene.physics.add.image(x, y, key);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#sprite-object","title":"Sprite object","text":"<ul> <li>Static object, extends from Sprite object <pre><code>var image = scene.physics.add.staticSprite(x, y, key, frame);\n</code></pre></li> <li>Dynamic object, extends from Sprite object <pre><code>var image = scene.physics.add.sprite(x, y, key, frame);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#group","title":"Group","text":"<ul> <li>Static sprite objects, extends from Group object <pre><code>var group = scene.physics.add.staticGroup(children, config);\n// var group = scene.physics.add.staticGroup(config);\n</code></pre></li> <li>Dynamic sprite objects, extends from Group object <pre><code>var group = scene.physics.add.group(children, config);\n// var group = scene.physics.add.staticGroup(config);\n</code></pre><ul> <li><code>config</code> <pre><code>var config = {\nclassType: ArcadeSprite,\nenable: true,\ncollideWorldBounds: false,\ncustomBoundsRectangle: null,\naccelerationX: 0,\naccelerationY: 0,\nallowDrag: true,\nallowGravity: true,\nallowRotation: true,\nuseDamping: false,\nbounceX: 0,\nbounceY: 0,\ndragX: 0,\ndragY: 0,\ngravityX: 0,\ngravityY: 0,\nfrictionX: 0,\nfrictionY: 0,\nmaxSpeed: -1,\nvelocityX: 0,\nvelocityY: 0,\nmaxVelocityX: 10000,\nmaxVelocityY: 10000,\nangularVelocity: 0,\nangularAcceleration: 0,\nangularDrag: 0,\nmass: 0,\nimmovable: false,\n\nmaxSize: -1,\nrunChildUpdate: false\n};\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#enable","title":"Enable","text":"<ul> <li>Enable body     <pre><code>gameObject.enableBody();\n// gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject);\n</code></pre><ul> <li>Enable and reset position     <pre><code>gameObject.enableBody(true, x, y);\n// gameObject.enableBody(true, x, y, enableGameObject, showGameObject);\n</code></pre></li> <li><code>enableGameObject</code> : Also activate this Game Object.</li> <li><code>showGameObject</code> : Also show this Game Object.</li> </ul> </li> <li>Disable body     <pre><code>gameObject.disableBody();\n// gameObject.disableBody(disableGameObject, hideGameObject);\n</code></pre><ul> <li><code>disableGameObject</code> : Also deactivate this Game Object.</li> <li><code>hideGameObject</code> : Also hide this Game Object.</li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#movement","title":"Movement","text":""},{"location":"arcade-gameobject/#velocity","title":"Velocity","text":"<ul> <li>Set     <pre><code>gameObject.setVelocity(x, y);\n</code></pre>     or     <pre><code>gameObject.setVelocityX(x);\ngameObject.setVelocityY(y);\n</code></pre></li> <li>Get     <pre><code>var vx = gameObject.body.velocity.x;\nvar vy = gameObject.body.velocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#max-velocity","title":"Max velocity","text":"<ul> <li>Set     <pre><code>gameObject.setMaxVelocity(x, y);\n</code></pre></li> <li>Get      <pre><code>var vx = gameObject.body.maxVelocity.x;\nvar vy = gameObject.body.maxVelocity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#acceleration","title":"Acceleration","text":"<ul> <li>Set     <pre><code>gameObject.setAcceleration(x, y);\n</code></pre>     or     <pre><code>gameObject.setAccelerationX(x);\ngameObject.setAccelerationY(y);\n</code></pre></li> <li>Get     <pre><code>var ax = gameObject.body.acceleration.x;\nvar ay = gameObject.body.acceleration.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>gameObject.setGravity(x, y);\n</code></pre>     or     <pre><code>gameObject.setGravityX(x);\ngameObject.setGravityY(y);\n</code></pre></li> <li>Get     <pre><code>var gx = gameObject.body.gravity.x;\nvar gy = gameObject.body.gravity.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#drag","title":"Drag","text":"<ul> <li>Set     <pre><code>gameObject.setDrag(x, y);\n</code></pre>     or     <pre><code>gameObject.setDragX(x);\ngameObject.setDragY(y);\n</code></pre></li> <li>Get     <pre><code>var dx = gameObject.body.drag.x;\nvar dy = gameObject.body.drag.y;\n</code></pre></li> <li>Enable damping     <pre><code>gameObject.setDamping(value);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#immovable","title":"Immovable","text":"<ul> <li>Enable     <pre><code>gameObject.setImmovable();\n</code></pre></li> <li>Disable     <pre><code>gameObject.setImmovable(false);\n</code></pre></li> <li>Get     <pre><code>var immovable = gameObject.body.immovable;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#pushable","title":"Pushable","text":"<ul> <li>Enable     <pre><code>gameObject.setPushable();\n</code></pre></li> <li>Disable     <pre><code>gameObject.setPushable(false);\n</code></pre></li> <li>Get     <pre><code>var pushable = gameObject.body.pushable;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#friction","title":"Friction","text":"<p>If this Body is <code>immovable</code> and in motion, this the proportion of this Body's movement received by the riding body on each axis.</p> <ul> <li>Set     <pre><code>gameObject.setFriction(x, y);\n</code></pre>     or     <pre><code>gameObject.setFrictionX(x);\ngameObject.setFrictionY(y);\n</code></pre></li> <li>Get     <pre><code>var fx = gameObject.body.friction.x;\nvar fy = gameObject.body.friction.y;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#rotation","title":"Rotation","text":""},{"location":"arcade-gameobject/#allow-rotation","title":"Allow rotation","text":"<p>Whether this Body's rotation is affected by its angular acceleration and velocity.</p> <ul> <li>Enable (default)     <pre><code>body.setAllowRotation();\n</code></pre></li> <li>Disable     <pre><code>body.setAllowRotation(false);\n</code></pre></li> <li>Get     <pre><code>var allowRotation = gameObject.body.allowRotation;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#angular-velocity","title":"Angular velocity","text":"<ul> <li>Set     <pre><code>gameObject.setAngularVelocity(v);\n</code></pre></li> <li>Get     <pre><code>var av = gameObject.body.angularVelocity;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#angular-acceleration","title":"Angular acceleration","text":"<p>-Set      <pre><code>gameObject.setAngularAcceleration(v);\n</code></pre> - Get     <pre><code>var aa = gameObject.body.angularAcceleration;\n</code></pre></p>"},{"location":"arcade-gameobject/#angular-drag","title":"Angular drag","text":"<ul> <li>Set     <pre><code>gameObject.setAngularDrag(v);\n</code></pre></li> <li>Get     <pre><code>var ad = gameObject.body.angularDrag;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#collision","title":"Collision","text":""},{"location":"arcade-gameobject/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>gameObject.setBodySize(width, height, center);\n</code></pre><ul> <li><code>center</code> : <code>false</code> to set body's offset to (0, 0)</li> </ul> </li> <li>Circle     <pre><code>gameObject.setCircle(radius, offsetX, offsetY);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#offset","title":"Offset","text":"<pre><code>gameObject.setOffset(x, y);\n</code></pre>"},{"location":"arcade-gameobject/#push-out","title":"Push out","text":"<pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre> <ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>Game objects in array (Add or remove game objects)</li> <li>Physics group (Add or remove game objects)</li> <li>Group (Add or remove game objects)</li> </ul> </li> </ul>"},{"location":"arcade-gameobject/#callbacks","title":"Callbacks","text":"<p>Add collider</p>"},{"location":"arcade-gameobject/#point-inside","title":"Point inside","text":"<pre><code>var hit = gameObject.hitTest(x, y);\n</code></pre>"},{"location":"arcade-gameobject/#bounce","title":"Bounce","text":"<ul> <li>Set     <pre><code>gameObject.setBounce(x, y);\n</code></pre>     or     <pre><code>gameObject.setBounceX(x);\ngameObject.setBounceY(y);\n</code></pre></li> <li>Get     <pre><code>var bx = gameObject.body.bounce.x;\nvar by = gameObject.body.bounce.y;\n</code></pre></li> <li>Enable bounce when colliding with the world boundary     <pre><code>gameObject.setCollideWorldBounds();\n</code></pre></li> <li>Disable bounce when colliding with the world boundary     <pre><code>gameObject.setCollideWorldBounds(false);\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#mass","title":"Mass","text":"<ul> <li>Set     <pre><code>gameObject.setMass(m);\n</code></pre></li> <li>Get     <pre><code>var m = gameObject.body.mass;\n</code></pre></li> </ul>"},{"location":"arcade-gameobject/#static-game-object","title":"Static game object","text":""},{"location":"arcade-gameobject/#sync","title":"Sync","text":"<p>Syncs the Bodies position and size in static game object.</p> <pre><code>gameObject.refreshBody();\n</code></pre>"},{"location":"arcade-gameobject/#methods-of-group","title":"Methods of group","text":"<pre><code>group.setVelocity(x, y, step);\n</code></pre> <pre><code>group.setVelocityX(value, step);\n</code></pre> <pre><code>group.setVelocityY(value, step);\n</code></pre> <pre><code>group.refresh();  // call this method when position of game objects were changed in static object group\n</code></pre>"},{"location":"arcade-gameobject/#debug","title":"Debug","text":"<pre><code>gameObject.setDebug(showBody, showVelocity, bodyColor);\n</code></pre> <pre><code>gameObject.setDebugBodyColor(bodyColor);\n</code></pre>"},{"location":"arcade-tcrp-player/","title":"Player","text":""},{"location":"arcade-tcrp-player/#introduction","title":"Introduction","text":"<p>Player of T ime-C ommand-R ecorder-P layer with Arcade physics engine, to run commands on time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Arcade physics engine is fixed-step based, not tick time based.</p> <p>This Arcade-TCRP has better result of replaying, which store step count via WORLD_STEP(<code>worldstep</code>) event.</p>"},{"location":"arcade-tcrp-player/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-player/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-player/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-player/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexarcadetcrpplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var player = new TCRP.Player(scene, config);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#create-instance","title":"Create instance","text":"<pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, {\n// commands: [],       // [[time, command], [time, command], ...]\n// timeScale: 1,\n// scope: undefined\n});\n</code></pre> <ul> <li><code>commands</code> : see next section</li> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul>"},{"location":"arcade-tcrp-player/#load-commands","title":"Load commands","text":"<pre><code>player.load(commands, scope);\n</code></pre> <ul> <li>Commands : see also Run commands <pre><code>[\n[time, command],\n[time, command],\n...\n]\n</code></pre><ul> <li>Format of each row :     <pre><code>[time, fnName, param0, param1, ...]\n// [time, callback, param0, param1, ...]\n</code></pre> <pre><code>[time, [fnName, param0, param1, ...]]\n// [time, [callback, param0, param1, ...]]\n</code></pre> <pre><code>[time, [command0, command1, ...]]\n</code></pre></li> <li><code>time</code> : Time in step-count</li> </ul> </li> </ul>"},{"location":"arcade-tcrp-player/#start-playing","title":"Start playing","text":"<pre><code>player.start();\n// player.start(startAt);  // Start-at time in step-count\n</code></pre>"},{"location":"arcade-tcrp-player/#events","title":"Events","text":"<ul> <li>Complete     <pre><code>player.on('complete', function(player){});\n</code></pre></li> <li>Run command     <pre><code>player.on('runcommand', function(commands, scope){});\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-player/#pause-resume-stop-playing","title":"Pause, Resume, stop playing","text":"<pre><code>player.pause();\nplayer.resume();\nplayer.stop();\n</code></pre>"},{"location":"arcade-tcrp-player/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>player.seek(time);   // Elapsed time in step-count\n</code></pre>"},{"location":"arcade-tcrp-player/#state-of-player","title":"State of player","text":"<pre><code>var isPlaying = player.isPlaying;\nvar completed = player.completed;\nvar now = player.now;\n</code></pre>"},{"location":"arcade-tcrp-player/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>player.setTimeScale(value);\n// player.timeScale = value;\n</code></pre><ul> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul> </li> <li>Get     <pre><code>var timeScale = player.timeScale;\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/","title":"Recoder","text":""},{"location":"arcade-tcrp-recorder/#introduction","title":"Introduction","text":"<p>Recorder of T ime-C ommand-R ecorder-P layer with Arcade physics engine, to store commands with time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Arcade physics engine is fixed-step based, not tick time based.</p> <p>This Arcade-TCRP has better result of replaying, which store step count via WORLD_STEP(<code>worldstep</code>) event.</p>"},{"location":"arcade-tcrp-recorder/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-recorder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-recorder/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-recorder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexarcadetcrpplugin').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var recorder = new TCRP.Recorder(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-recorder/#create-instance","title":"Create instance","text":"<pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre>"},{"location":"arcade-tcrp-recorder/#start-recording","title":"Start recording","text":"<pre><code>recorder.start();\n// recorder.start(startAt);  // start-at in step-count\n</code></pre>"},{"location":"arcade-tcrp-recorder/#push-commands","title":"Push commands","text":"<pre><code>recorder.addCommand([fnName, param0, param1, ...]);\n// recorder.addCommand([command0, command1, ...]);\n// recorder.addCommand([fnName, param0, param1, ...], offset);  // time-offset in step-count\n</code></pre> <p>See also Run commands</p>"},{"location":"arcade-tcrp-recorder/#get-commands","title":"Get commands","text":"<pre><code>var commands = recorder.getCommands();        // Get a shallow copy of commands\n// var commands = recorder.getCommands(true); // Get reference of commands\n</code></pre> <p>Format of return commands:</p> <pre><code>[\n[time, [command]],\n[time, [command0,command1]],\n...\n]\n</code></pre> <ul> <li><code>time</code> : Time in step-count</li> </ul>"},{"location":"arcade-tcrp-recorder/#pause-resume-stop-recording","title":"Pause, Resume, stop recording","text":"<pre><code>recorder.pause();\nrecorder.resume();\nrecorder.stop();\n</code></pre>"},{"location":"arcade-tcrp-recorder/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>recorder.seek(time);   // elapsed time in step-count\n</code></pre>"},{"location":"arcade-tcrp-recorder/#state-of-recorder","title":"State of recorder","text":"<pre><code>var isRecording = recorder.isRecording;\nvar now = recorder.now;\n</code></pre> <ul> <li><code>now</code> : Now time in step-count.</li> </ul>"},{"location":"arcade-tcrp-recorder/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>recorder.setTimeScale(value);\n// recorder.timeScale = value;\n</code></pre><ul> <li><code>timeScale</code> : An integer equal or larger than <code>1</code></li> </ul> </li> <li>Get     <pre><code>var timeScale = recorder.timeScale;\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/","title":"Step runner","text":""},{"location":"arcade-tcrp-step-runner/#introduction","title":"Introduction","text":"<p>Execute command in next WORLD_STEP(<code>worldstep</code>) event, to synchronize command execution with step-counter of Recorder of Arcade-TCRP.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Command might be executed before or after WORLD_STEP(<code>worldstep</code>) event, which is emitted in scene's <code>update</code> event.</p> <ul> <li>Before: Command is executed in any input(touch/keyboard) event, or in scene's <code>preupdate</code> event.</li> <li>After: Command is executed in <code>scene.updat()</code> method.</li> </ul>"},{"location":"arcade-tcrp-step-runner/#live-demos","title":"Live demos","text":"<ul> <li>Player</li> </ul>"},{"location":"arcade-tcrp-step-runner/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"arcade-tcrp-step-runner/#install-plugin","title":"Install plugin","text":""},{"location":"arcade-tcrp-step-runner/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexarcadetcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexarcadetcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = scene.plugins.get('rexarcadetcrpplugin').addStepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/arcadetcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = scene.plugins.get('rexTCRP').addStepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/arcadetcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var stepRunner = new TCRP.StepRunner(scene);\n</code></pre></li> </ul>"},{"location":"arcade-tcrp-step-runner/#create-instance","title":"Create instance","text":"<pre><code>var stepRunner = scene.plugins.get('rexTCRP').addStepRunner(scene);\n</code></pre>"},{"location":"arcade-tcrp-step-runner/#push-commands","title":"Push commands","text":"<pre><code>stepRunner.add(commands, scope);\n</code></pre> <p>See also Run commands</p>"},{"location":"arcade-tcrp-step-runner/#offset-recorder","title":"Offset recorder","text":"<p>Since commands will be executed in next WORLD_STEP(<code>worldstep</code>) event, recorder have to add <code>1</code> step-count offset.</p> <ul> <li>Offset at recording start <pre><code>recorder.start(1);\n</code></pre></li> <li>Add offset when pushing commands <pre><code>recorder.addCommand([fnName, param0, param1, ...], 1);\n</code></pre></li> </ul>"},{"location":"arcade-world/","title":"World","text":""},{"location":"arcade-world/#introduction","title":"Introduction","text":"<p>World of Arcade physics engine in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"arcade-world/#usage","title":"Usage","text":""},{"location":"arcade-world/#configuration","title":"Configuration","text":"<pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n//    x: 0,\n//    y: 0,\n//    width: scene.sys.scale.width,\n//    height: scene.sys.scale.height,\n//    gravity: {\n//        x: 0,\n//        y: 0\n//    },\n//    checkCollision: {\n//        up: true,\n//        down: true,\n//        left: true,\n//        right: true\n//    },\n//    customUpdate: false,\n//    fixedStep: true,\n//    fps: 60,\n//    timeScale: 1,     // 2.0 = half speed, 0.5 = double speed\n//    customUpdate: false,\n//    overlapBias: 4,\n//    tileBias: 16,\n//    forceX: false,\n//    isPaused: false,\n//    debug: false,\n//    debugShowBody: true,\n//    debugShowStaticBody: true,\n//    debugShowVelocity: true,\n//    debugBodyColor: 0xff00ff,\n//    debugStaticBodyColor: 0x0000ff,\n//    debugVelocityColor: 0x00ff00,\n//    maxEntries: 16,\n//    useTree: true   // set false if amount of dynamic bodies &gt; 5000\n}\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"arcade-world/#update","title":"Update","text":"<ul> <li>Default updating : World updating every tick</li> <li>Custom updating : <ol> <li>Set <code>customUpdate</code> of arcade config to <code>false</code>.<ul> <li>Enable world updating : <code>scene.physics.enableUpdate()</code></li> <li>Disable world updating : <code>scene.physics.disableUpdate()</code></li> </ul> </li> <li>Run world updating manually     <pre><code>scene.physics.world.update(time, delta);\n</code></pre></li> <li>Enable/disable world updating<ul> <li>Enable : <code>scene.physics.enableUpdate()</code></li> <li>Disable : <code>scene.physics.disableUpdate()</code></li> </ul> </li> </ol> </li> </ul>"},{"location":"arcade-world/#step","title":"Step","text":"<p>Advances the simulation by one step.</p> <pre><code>scene.physics.world.step(delta);\n</code></pre>"},{"location":"arcade-world/#events","title":"Events","text":"<ul> <li>World step     <pre><code>scene.physics.world.on('worldstep', function(delta) { /* ... */ });\n</code></pre><ul> <li><code>delta</code> : The delta time amount of this step, in seconds.</li> </ul> </li> </ul>"},{"location":"arcade-world/#control","title":"Control","text":""},{"location":"arcade-world/#pause","title":"Pause","text":"<pre><code>scene.physics.pause();\n</code></pre>"},{"location":"arcade-world/#resume","title":"Resume","text":"<pre><code>scene.physics.resume();\n</code></pre>"},{"location":"arcade-world/#events_1","title":"Events","text":"<ul> <li>Pause world     <pre><code>scene.physics.world.on('pause', function() { /* ... */ });\n</code></pre></li> <li>Resume world     <pre><code>scene.physics.world.on('resume', function() { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#duration-per-frame","title":"Duration per frame","text":"<ul> <li>Time scale     <pre><code>scene.physics.world.timeScale = timeScale;\n</code></pre><ul> <li>1.0 = normal speed</li> <li>2.0 = half speed</li> <li>0.5 = double speed</li> </ul> </li> <li>FPS     <pre><code>scene.physics.world.setFPS(framerate);\n</code></pre></li> </ul>"},{"location":"arcade-world/#tile-filter-options","title":"Tile filter options","text":"<pre><code>var option = scene.physics.world.tileFilterOptions;\n</code></pre> <ul> <li><code>option</code> <pre><code>{\nisColliding: true,\nisNotEmpty: true,\nhasInterestingFace: true\n}\n</code></pre></li> </ul>"},{"location":"arcade-world/#body","title":"Body","text":""},{"location":"arcade-world/#enable","title":"Enable","text":"<pre><code>scene.physics.world.enable(gameObject);\n// scene.physics.world.enable(gameObject, bodyType);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or array of game objects, or game objects in a Group</li> <li><code>bodyType</code> :<ul> <li><code>0</code> : Dynamic body. Default value.</li> <li><code>1</code> : Static body.</li> </ul> </li> </ul> <p>Or</p> <pre><code>scene.physics.add.existing(gameObject, bodyType);\n</code></pre> <p>See arcade-body</p>"},{"location":"arcade-world/#disable","title":"Disable","text":"<pre><code>scene.physics.world.disable(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or array of game objects, or game objects in a Group</li> </ul>"},{"location":"arcade-world/#addremove-body","title":"Add/remove body","text":"<ul> <li>Add body to the local search trees.     <pre><code>scene.physics.world.add(body);\n</code></pre></li> <li>Remove body from the local search trees.     <pre><code>scene.physics.world.disableBody(body);\n</code></pre></li> </ul>"},{"location":"arcade-world/#collision","title":"Collision","text":""},{"location":"arcade-world/#set-bound","title":"Set bound","text":"<p>See bound in body object, or game object.</p>"},{"location":"arcade-world/#collider-callback","title":"Collider &amp; callback","text":"<ul> <li>Add collider<ul> <li>Push out     <pre><code>scene.physics.add.collider(objectsA, objectsB);\n</code></pre></li> <li>Performs a collision check and separation between the two physics enabled objects given.     <pre><code>var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback);\n// var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>If you don't require separation then use <code>overlap</code> instead.     <pre><code>var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback);\n// var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>Parameters<ul> <li><code>objectsA</code>, <code>objectsB</code> :<ul> <li>A game object</li> <li>An array contains Game objects (Add or remove game objects)</li> <li>Physics group/Group (Add or remove game objects)</li> <li>An array contains Physics group/Group</li> </ul> </li> <li><code>collideCallback</code> :     <pre><code>var collideCallback = function(gameObject1, gameObject2) {\n// ...\n}\n</code></pre></li> <li><code>processCallback</code> : Fired when gameObject1 intersects gameObject2, optional.     <pre><code>var processCallback = function(gameObject1, gameObject2) {\nreturn true;  // return false will discard remaining collision checking\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Remove collider     <pre><code>scene.physics.world.removeCollider(collider);\n</code></pre></li> <li>Deactivate collider     <pre><code>collider.active = false;  // Set true to activate again\n</code></pre></li> <li>Name of collider (unused by engine)     <pre><code>collider.name = name;\n</code></pre></li> </ul>"},{"location":"arcade-world/#testing-wo-collider","title":"Testing wo collider","text":"<ul> <li>Test overlapping     <pre><code>var isOverlapping = scene.physics.world.overlap(object1, object2);\n</code></pre>     or     <pre><code>var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback);\n// var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext);\n</code></pre></li> <li>Test colliding, also push out     <pre><code>var isCollided = scene.physics.world.collide(object1, object2);\n</code></pre>     or     <pre><code>var isCollided = scene.physics.world.collide(object1, object2, collideCallback);\n// var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext);\n</code></pre></li> </ul>"},{"location":"arcade-world/#events_2","title":"Events","text":"<ul> <li>Two bodies overlap and at least one of them has their <code>onOverlap</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('overlap', function(gameObject1, gameObject2, body1, body2) { /* ... */ });\n</code></pre></li> <li>Two bodies overlap and at least one of them has their <code>onCollide</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('collide', function(gameObject1, gameObject2, body1, body2) { /* ... */ });\n</code></pre></li> <li>A body overlaps with a Tile and has its <code>onOverlap</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('tileoverlap', function(gameObject, tile, body) { /* ... */ });\n</code></pre></li> <li>A body overlaps with a Tile and has its <code>onCollide</code> property set to <code>true</code>.     <pre><code>scene.physics.world.on('tilecollide', function(gameObject, tile, body) { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#world-bounds","title":"World bounds","text":""},{"location":"arcade-world/#enable_1","title":"Enable","text":"<ul> <li>Body : Set <code>body.setCollideWorldBounds()</code> to enable worldBounds property.</li> <li>World :<ul> <li>Set bounds rectangle and enable bounds     <pre><code>scene.physics.world.setBounds(x, y, width, height);\n// scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown);\n</code></pre></li> <li>Set bounds rectangle <pre><code>scene.physics.world.bounds.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>scene.physics.world.bounds.x = x;\nscene.physics.world.bounds.y = y;\nscene.physics.world.bounds.width = width;\nscene.physics.world.bounds.height = height;\n</code></pre></li> <li>Enable bounds     <pre><code>scene.physics.world.setBoundsCollision();\n// scene.physics.world.setBoundsCollision(left, right, up, down);\n</code></pre>     or     <pre><code>scene.physics.world.checkCollision.left = left;\nscene.physics.world.checkCollision.right = right;\nscene.physics.world.checkCollision.up = up;\nscene.physics.world.checkCollision.down = down;\n</code></pre></li> <li>Get bounds rectangle <pre><code>var top = scene.physics.world.bounds.top;\nvar bottom = scene.physics.world.bounds.bottom;\nvar left = scene.physics.world.bounds.left;\nvar right = scene.physics.world.bounds.right;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-world/#bodies-inside-an-area","title":"Bodies inside an area","text":"<ul> <li>Overlap a rectangle area     <pre><code>var bodies = scene.physics.overlapRect(x, y, width, height, includeDynamic, includeStatic);\n</code></pre><ul> <li><code>includeDynamic</code> : Set <code>true</code> to search Dynamic Bodies</li> <li><code>includeStatic</code> : Set <code>true</code> to search Static Bodies</li> </ul> </li> <li>Overlap a circle area     <pre><code>var bodies = scene.physics.overlapCirc(x, y, radius, includeDynamic, includeStatic);\n</code></pre><ul> <li><code>includeDynamic</code> : Set <code>true</code> to search Dynamic Bodies</li> <li><code>includeStatic</code> : Set <code>true</code> to search Static Bodies</li> </ul> </li> </ul>"},{"location":"arcade-world/#events_3","title":"Events","text":"<ul> <li>World bounds     <pre><code>scene.physics.world.on('worldbounds', function(body, blockedUp, blockedDown, blockedLeft, blockedRight) { /* ... */ });\n</code></pre></li> </ul>"},{"location":"arcade-world/#wrap","title":"Wrap","text":"<pre><code>scene.physics.world.wrap(gameObject, padding);\n</code></pre> <ul> <li>gameObject:<ul> <li>game object</li> <li>group</li> <li>array of game objects</li> </ul> </li> </ul>"},{"location":"arcade-world/#move-to","title":"Move to","text":"<ul> <li>Move to position with a steady velocity     <pre><code>scene.physics.moveTo(gameObject, x, y, speed, maxTime);\n</code></pre></li> <li>Move to object with a steady velocity     <pre><code>scene.physics.moveToObject(gameObject, destination, speed, maxTime);\n</code></pre></li> </ul>"},{"location":"arcade-world/#accelerate-to","title":"Accelerate to","text":"<ul> <li>Accelerate to position     <pre><code>scene.physics.accelerateTo(gameObject, x, y, acceleration, xSpeedMax, ySpeedMax);\n</code></pre></li> <li>Accelerate to object     <pre><code>scene.physics.accelerateToObject(gameObject, destination, acceleration, xSpeedMax, ySpeedMax);\n</code></pre></li> </ul>"},{"location":"arcade-world/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>scene.physics.world.gravity.x = gx;\nscene.physics.world.gravity.y = gy;\n</code></pre></li> <li>Get     <pre><code>var gx = scene.physics.world.gravity.x;\nvar gy = scene.physics.world.gravity.y;\n</code></pre></li> </ul> <p>Total Gravity = world.gravity + body.gravity</p>"},{"location":"arcade-world/#bodies","title":"Bodies","text":""},{"location":"arcade-world/#closestfurthest","title":"Closest/furthest","text":"<ul> <li>Closest     <pre><code>var body = scene.physics.closest(point);  // point: {x,y}\n// var body = scene.physics.closest(point, targets);\n</code></pre><ul> <li><code>targets</code> : Array of Arcade Physics Game Object, Body or Static Body.</li> </ul> </li> <li>Furthest     <pre><code>var body = scene.physics.furthest(point);  // point: {x,y}\n// var body = scene.physics.furthest(point, targets);\n</code></pre><ul> <li><code>targets</code> : Array of Arcade Physics Game Object, Body or Static Body.</li> </ul> </li> </ul>"},{"location":"arcade-world/#debug","title":"Debug","text":""},{"location":"arcade-world/#draw-body-velocity","title":"Draw body &amp; velocity","text":"<ul> <li>Bounds of dynamic Body<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowBody = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.bodyDebugColor = 0xff00ff;\n</code></pre></li> </ul> </li> <li>Bounds of static Body<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowStaticBody = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.staticBodyDebugColor = 0x0000ff;\n</code></pre></li> </ul> </li> <li>Direction and magnitude of velocity<ul> <li>Enable drawing body     <pre><code>scene.physics.world.defaults.debugShowVelocity = true;\n</code></pre></li> <li>Color     <pre><code>scene.physics.world.defaults.velocityDebugColor = 0x00ff00;\n</code></pre></li> </ul> </li> </ul>"},{"location":"arcade-world/#graphics","title":"Graphics","text":"<p>Draw debug body &amp; velocity on a Graphics object.</p> <pre><code>var graphics = scene.physics.world.debugGraphic;\n</code></pre> <ul> <li>Set visible     <pre><code>scene.physics.world.debugGraphic.setVisible();\n</code></pre></li> <li>Set invisible     <pre><code>scene.physics.world.debugGraphic.setVisible(false);\n</code></pre></li> </ul>"},{"location":"arcade-world/#update-loop","title":"Update loop","text":"<ol> <li>scene.sys.events: update<ol> <li>Update position &amp; angle of each body</li> <li>Process each collider</li> <li>Update final position of each body</li> <li>Emit <code>worldstep</code> event</li> </ol> </li> <li>scene.sys.events: postupdate<ol> <li>Draw debug graphics</li> </ol> </li> </ol> <pre><code>graph TB\n\nSceneEventUpdate&gt;\"scene.sys.events: update&lt;br&gt;&lt;br&gt;Update arcade world&lt;br&gt;gameObject.preUpdate()\"]\nSceneUpdate[\"scene.update()\"]\nSceneEventPostUpdate&gt;\"scene.sys.events: postupdate&lt;br&gt;&lt;br&gt;Post update arcade world\"]\nRender\n\nSceneEventUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneEventPostUpdate\nSceneEventPostUpdate --&gt; Render</code></pre>"},{"location":"array-addremove/","title":"Add/remove","text":""},{"location":"array-addremove/#introduction","title":"Introduction","text":"<p>Add/insert/remove item(s) of an array, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-addremove/#usage","title":"Usage","text":""},{"location":"array-addremove/#add-item","title":"Add item","text":"<pre><code>Phaser.Utils.Array.Add(arr, item);\n// Phaser.Utils.Array.Add(arr, item, limit, callback, context);\n</code></pre> <ul> <li><code>item</code> : An item, or an array of items.</li> <li><code>limit</code> : Optional limit which caps the size of the array.</li> <li><code>callback</code> : A callback to be invoked for each item successfully added to the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#insert-item-at","title":"Insert item at","text":"<pre><code>Phaser.Utils.Array.AddAt(arr, item, index);\n// Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context);\n</code></pre> <ul> <li><code>index</code> : The index in the array where the item will be inserted.</li> <li><code>item</code> : An item, or an array of items.</li> <li><code>limit</code> : Optional limit which caps the size of the array.</li> <li><code>callback</code> : A callback to be invoked for each item successfully added to the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-item","title":"Remove item","text":"<pre><code>Phaser.Utils.Array.Remove(arr, item);\n// Phaser.Utils.Array.Remove(arr, item, callback, context);\n</code></pre> <ul> <li><code>item</code> : An item, or an array of items.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-item-at","title":"Remove item at","text":"<pre><code>var removed = Phaser.Utils.Array.RemoveAt(arr, index);\n// var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context);\n</code></pre> <ul> <li><code>removed</code> : Removed item.</li> <li><code>index</code> : The array index to remove the item from. The index must be in bounds or it will throw an error.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-items-between","title":"Remove items between","text":"<pre><code>var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex);\n// var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context);\n</code></pre> <ul> <li><code>removed</code> : Removed items.</li> <li><code>startIndex</code> : The start index to remove from.</li> <li><code>callback</code> : The end index to remove to.</li> <li><code>callback</code> : A callback to be invoked for each item successfully removed from the array.</li> <li><code>context</code> : The context in which the callback is invoked.</li> </ul>"},{"location":"array-addremove/#remove-random-item","title":"Remove random item","text":"<pre><code>var item = Phaser.Utils.Array.RemoveRandomElement(arr);\n</code></pre>"},{"location":"array-addremove/#replace-item","title":"Replace item","text":"<p>Replaces an element of the array with the new element. The new element cannot already be a member of the array.</p> <pre><code>Phaser.Utils.Array.Replace(arr, oldItem, newItem);\n</code></pre> <ul> <li><code>oldItem</code> : An item in array.</li> <li><code>newItem</code> : Another item, which is not in array.</li> </ul>"},{"location":"array-filter/","title":"Filter/Map","text":""},{"location":"array-filter/#introduction","title":"Introduction","text":"<p>Built-in javascript object.</p> <ul> <li>Author: Built-in javascript function</li> </ul>"},{"location":"array-filter/#usage","title":"Usage","text":""},{"location":"array-filter/#run-function-for-each-element","title":"Run function for each element","text":"<pre><code>arr.forEach(function(element, index, arr) {\n//\n}, scope);\n</code></pre>"},{"location":"array-filter/#filter-elements","title":"Filter elements","text":"<p>Creates a new array with all elements that pass the test function.</p> <pre><code>var result = arr.filter(function(element, index, arr) {\nreturn true; // false\n}, scope);\n</code></pre>"},{"location":"array-filter/#find-one-element","title":"Find one element","text":"<pre><code>var element = arr.find(function(element, index, arr) {\nreturn true; // false\n}, scope);\n</code></pre>"},{"location":"array-filter/#map-elements-to-a-new-array","title":"Map elements to a new array","text":"<pre><code>var newArray = arr.map(function(element, index, arr) {\nreturn newElement;\n}, scope);\n</code></pre>"},{"location":"array-random/","title":"Random","text":""},{"location":"array-random/#introduction","title":"Introduction","text":"<p>Random operation of an array, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-random/#usage","title":"Usage","text":""},{"location":"array-random/#get-random-item","title":"Get random item","text":"<pre><code>var item = Phaser.Utils.Array.GetRandom(arr);\n// var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length);\n</code></pre>"},{"location":"array-random/#remove-random-item","title":"Remove random item","text":"<pre><code>var item = Phaser.Utils.Array.RemoveRandomElement(arr);\n// var item = Phaser.Utils.Array.RemoveRandomElement(arr, startIndex, length);\n</code></pre>"},{"location":"array-random/#shuffle","title":"Shuffle","text":"<pre><code>var arr = Phaser.Utils.Array.Shuffle(arr);\n</code></pre>"},{"location":"array-sort/","title":"Sort","text":""},{"location":"array-sort/#introduction","title":"Introduction","text":"<p>Array sorting, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"array-sort/#usage","title":"Usage","text":""},{"location":"array-sort/#built-in-array-sort","title":"Built-in array sort","text":"<pre><code>var out = arr.sort(compareFunction);\n</code></pre> <ul> <li><code>compareFunction</code> : A function that defines an alternative sort order.     <pre><code>function(a, b) {\n// return a - b;\n}\n</code></pre><ul> <li>Return a negative value</li> <li>Return 0</li> <li>Return a positive value</li> </ul> </li> </ul>"},{"location":"array-sort/#stable-array-sort","title":"Stable array sort","text":"<pre><code>var out = Phaser.Utils.Array.StableSort(arr, compareFunction);\n</code></pre>"},{"location":"array-sort/#shuffle","title":"Shuffle","text":"<pre><code>var arr = Phaser.Utils.Array.Shuffle(arr);\n</code></pre>"},{"location":"array-sort/#move-item","title":"Move item","text":"<ul> <li>Moves the given element to the top of the array.     <pre><code>Phaser.Utils.Array.BringToTop(arr, item);\n</code></pre></li> <li>Moves the given element to the bottom of the array.     <pre><code>Phaser.Utils.Array.SendToBack(arr, item);\n</code></pre></li> <li>Moves the given array element up.     <pre><code>Phaser.Utils.Array.MoveUp(array, item);\n</code></pre></li> <li>Moves the given array element down.     <pre><code>Phaser.Utils.Array.MoveDown(array, item);\n</code></pre></li> <li>Moves an element in an array to a new position.     <pre><code>Phaser.Utils.Array.MoveTo(array, item, index);\n</code></pre></li> <li>Swaps the position of two elements.     <pre><code>Phaser.Utils.Array.Swap(array, item1, item2);\n</code></pre></li> <li>Moves the element at the start of the array to the end, shifting all items in the process.     <pre><code>Phaser.Utils.Array.RotateLeft(array, steps);\n</code></pre><ul> <li><code>steps</code> : The number of times to shift the array.</li> </ul> </li> <li>Moves the element at the end of the array to the start, shifting all items in the process.     <pre><code>Phaser.Utils.Array.RotateRight(array, steps);\n</code></pre><ul> <li><code>steps</code> : The number of times to shift the array.</li> </ul> </li> </ul>"},{"location":"audio/","title":"Audio","text":""},{"location":"audio/#introduction","title":"Introduction","text":"<p>Play sounds, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"audio/#usage","title":"Usage","text":""},{"location":"audio/#configuration","title":"Configuration","text":""},{"location":"audio/#web-audio","title":"Web audio","text":"<p>Web audio is the default audio context.</p>"},{"location":"audio/#html5-audio","title":"Html5 audio","text":"<pre><code>var config = {\n// ....\naudio: {\ndisableWebAudio: true\n}\n// ....\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"audio/#no-audio","title":"No audio","text":"<pre><code>var config = {\n// ....\naudio: {\nnoAudio: true\n}\n// ....\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"audio/#load-audio-file","title":"Load audio file","text":"<pre><code>scene.load.audio(key, urls);  // urls: an array of file url\n// scene.load.audio(key, urls, {instances: 1}, xhrSettings);\n</code></pre> <p>See loader</p>"},{"location":"audio/#decode-audio","title":"Decode audio","text":"<pre><code>scene.sound.decodeAudio(key, audioData);\n</code></pre> <ul> <li><code>audioData</code> : Audio data<ul> <li>A base64 encoded string</li> <li>An audio media-type data uri</li> <li>An ArrayBuffer instance</li> </ul> </li> </ul> <p>Or</p> <pre><code>scene.sound.decodeAudio(audioFiles);\n</code></pre> <ul> <li><code>audioFiles</code> : An array of <code>{key, data}</code><ul> <li><code>data</code> : Audio data<ul> <li>A base64 encoded string</li> <li>An audio media-type data uri</li> <li>An ArrayBuffer instance</li> </ul> </li> </ul> </li> </ul>"},{"location":"audio/#decoded-events","title":"Decoded events","text":"<ul> <li>Finished decoding an audio data     <pre><code>scene.sound.on('decoded', key);\n</code></pre></li> <li>Finished decoding all audio data     <pre><code>scene.sound.on('decodedall');\n</code></pre></li> </ul>"},{"location":"audio/#unlock-audio","title":"Unlock audio","text":"<p>Unlocks Web Audio API/HTML5 Audio loading on the initial input event.</p> <pre><code>scene.sound.unlock();\n</code></pre>"},{"location":"audio/#play-sound","title":"Play sound","text":"<p>Sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.play(key);\n</code></pre> <p>or</p> <pre><code>scene.sound.play(key, config);\n/*\nvar sound = scene.sound.add(key);\nsound.play(config);\n*/\n</code></pre>"},{"location":"audio/#position-of-the-spatial-audio-listener","title":"Position of the Spatial Audio listener","text":"<pre><code>scene.sound.setListenerPosition(x, y)\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The x/y position of the Spatial Audio listener. Default value is center of the game canvas.</li> </ul> <p>Note</p> <p>Web audio only</p>"},{"location":"audio/#sound-instance","title":"Sound instance","text":""},{"location":"audio/#create-sound-instance","title":"Create sound instance","text":"<pre><code>var music = scene.sound.add(key);\n</code></pre> <pre><code>var music = scene.sound.add(key, config);\n</code></pre>"},{"location":"audio/#configuration_1","title":"Configuration","text":"<pre><code>{\nmute: false,\nvolume: 1,\nrate: 1,\ndetune: 0,\nseek: 0,\nloop: false,\ndelay: 0,\n\n// source of the spatial sound\nsource: {\nx: 0,\ny: 0,\nz: 0,\npanningModel: 'equalpower',\ndistanceModel: 'inverse',\norientationX: 0,\norientationY: 0,\norientationZ: -1,\nrefDistance: 1,\nmaxDistance: 10000,\nrolloffFactor: 1,\nconeInnerAngle: 360,\nconeOuterAngle: 0,\nconeOuterGain: 0,\nfollow: undefined\n}\n}\n</code></pre> <ul> <li><code>source</code> : Source of the spatial sound<ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of the audio in a right-hand Cartesian coordinate system.</li> <li><code>z</code> : Represents the longitudinal (back and forth) position of the audio in a right-hand Cartesian coordinate system.</li> <li><code>panningModel</code> : An enumerated value determining which spatialization algorithm to use to position the audio in 3D space.<ul> <li><code>'equalpower'</code></li> <li><code>'HRTF'</code></li> </ul> </li> <li><code>orientationX</code>, <code>orientationY</code> : The horizontal/vertical position of the audio source's vector in a right-hand Cartesian coordinate system.</li> <li><code>orientationZ</code> : Represents the longitudinal (back and forth) position of the audio source's vector in a right-hand Cartesian coordinate system.</li> <li><code>refDistance</code> : A double value representing the reference distance for reducing volume as the audio source moves further from the listener. For distances greater than this the volume will be reduced based on <code>rolloffFactor</code> and <code>distanceModel</code>.</li> <li><code>maxDistance</code> : The maximum distance between the audio source and the listener, after which the volume is not reduced any further.</li> <li><code>rolloffFactor</code> : A double value describing how quickly the volume is reduced as the source moves away from the listener. This value is used by all distance models.</li> <li><code>coneInnerAngle</code> : The angle, in degrees, of a cone inside of which there will be no volume reduction.</li> <li><code>coneOuterAngle</code> : The angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the <code>coneOuterGain</code> property.</li> <li><code>coneOuterGain</code> : The amount of volume reduction outside the cone defined by the <code>coneOuterAngle</code> attribute. Its default value is <code>0</code>, meaning that no sound can be heard. A value between <code>0</code> and <code>1</code>.</li> <li><code>follow</code> : Set this Sound object to automatically track the x/y position of this object. Can be a Phaser Game Object, Vec2 or anything that exposes public x/y properties.</li> </ul> </li> </ul>"},{"location":"audio/#play-sound-instance","title":"Play sound instance","text":"<ul> <li>Start playing     <pre><code>music.play();\n</code></pre></li> <li>Start playing with configuration     <pre><code>music.play(config);\n</code></pre><ul> <li>config</li> </ul> </li> <li>Stop     <pre><code>music.stop();\n</code></pre></li> <li>Pause     <pre><code>music.pause();\n</code></pre></li> <li>Resume     <pre><code>music.resume();\n</code></pre></li> </ul>"},{"location":"audio/#methods","title":"Methods","text":""},{"location":"audio/#mute","title":"Mute","text":"<ul> <li>Set     <pre><code>music.setMute(mute); // mute: true/false\n// music.mute = mute;\n</code></pre></li> <li>Get     <pre><code>var mute = music.mute;\n</code></pre></li> </ul>"},{"location":"audio/#volume","title":"Volume","text":"<ul> <li>Set     <pre><code>music.setVolume(volume); // volume: 0 to 1\n// music.volume = volume;\n</code></pre></li> <li>Get     <pre><code>var volume = music.volume;\n</code></pre></li> </ul>"},{"location":"audio/#detune","title":"Detune","text":"<ul> <li>Set     <pre><code>music.setDetune(detune); // detune: -1200 to 1200\n// music.detune = detune;\n</code></pre></li> <li>Get     <pre><code>var detune = music.detune;\n</code></pre></li> </ul>"},{"location":"audio/#play-rate","title":"Play-rate","text":"<ul> <li>Set     <pre><code>music.setRate(rate); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed)\n// music.rate = rate;\n</code></pre></li> <li>Get     <pre><code>var rate = music.rate;\n</code></pre></li> </ul>"},{"location":"audio/#seek-to","title":"Seek to","text":"<ul> <li>Seek to     <pre><code>music.setSeek(time); // seek: playback time\n// music.seek = seek;\n</code></pre></li> <li>Get current playback time     <pre><code>var time = music.seek;  // return 0 when playback ends\n</code></pre></li> </ul>"},{"location":"audio/#loop","title":"Loop","text":"<ul> <li>Set     <pre><code>music.setLoop(loop); // loop: true/false\n// music.loop = loop;\n</code></pre></li> <li>Get     <pre><code>var loop = music.loop;\n</code></pre></li> </ul>"},{"location":"audio/#properties","title":"Properties","text":"<ul> <li>Duration : duration of this sound     <pre><code>var duration = music.duration;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = music.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = music.isPaused;\n</code></pre></li> <li>Asset key     <pre><code>var key = music.key;\n</code></pre></li> </ul>"},{"location":"audio/#events","title":"Events","text":"<ul> <li>Start playing     <pre><code>music.once('play', function(music){});\n</code></pre></li> <li>Playback end     <pre><code>music.once('complete', function(music){});\n</code></pre></li> <li>Looping     <pre><code>music.once('looped', function(music){});\n</code></pre></li> <li>Pause     <pre><code>music.once('pause', function(music){});\n</code></pre></li> <li>Resume     <pre><code>music.once('resume', function(music){});\n</code></pre></li> <li>Stop     <pre><code>music.once('stop', function(music){});\n</code></pre></li> <li>Set mute     <pre><code>music.once('mute', function(music, mute){});\n</code></pre></li> <li>Set volume     <pre><code>music.once('volume', function(music, volume){});\n</code></pre></li> <li>Set detune     <pre><code>music.once('detune', function(music, detune){});\n</code></pre></li> <li>Set play-rate     <pre><code>music.once('rate', function(music, rate){});\n</code></pre></li> <li>Seek to     <pre><code>music.once('seek', function(music, time){});\n</code></pre></li> <li>set loop     <pre><code>music.once('loop', function(music, loop){});\n</code></pre></li> </ul>"},{"location":"audio/#play-marked-sound","title":"Play marked sound","text":"<p>Sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.play(key, marker);\n</code></pre>"},{"location":"audio/#marker","title":"Marker","text":"<pre><code>{\nname: '',\nstart: 0,\nduration: music.duration,\nconfig: {\nmute: false,\nvolume: 1,\nrate: 1,\ndetune: 0,\nseek: 0,\nloop: false,\ndelay: 0\n}\n}\n</code></pre>"},{"location":"audio/#markers-in-sound-instance","title":"Markers in sound instance","text":""},{"location":"audio/#add-marker","title":"Add marker","text":"<pre><code>music.addMarker(marker);\n</code></pre> <p>Marker</p>"},{"location":"audio/#play-marked-sound_1","title":"Play marked sound","text":"<pre><code>music.play(markerName);\n</code></pre> <pre><code>music.play(markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#audio-sprite","title":"Audio sprite","text":""},{"location":"audio/#load-audio-sprite","title":"Load audio sprite","text":"<pre><code>scene.load.audioSprite(key, urls, markersConfig, config);\n</code></pre> <p>See loader</p> <p>Format of markersConfig <pre><code>{\nresources: urls, // an array of audio files\nspritemap: {\nmarkerName0: {\nstart: 0,\nend: 0\n},\nmarkerName1: {\nstart: 0,\nend: 0\n}\n// ...\n}\n}\n</code></pre></p>"},{"location":"audio/#play-sound_1","title":"Play sound","text":"<p>Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends.</p> <pre><code>scene.sound.playAudioSprite(key, markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#sound-instance_1","title":"Sound instance","text":"<p>Create a sound instance with markers.</p> <pre><code>var music = scene.sound.addAudioSprite(key, config);\n</code></pre> <p>config</p>"},{"location":"audio/#play-sound-instance_1","title":"Play sound instance","text":"<pre><code>music.play(markerName);\n</code></pre> <pre><code>music.play(markerName, config);\n</code></pre> <p>config</p>"},{"location":"audio/#sound-manager","title":"Sound manager","text":""},{"location":"audio/#mute_1","title":"Mute","text":"<ul> <li>Set     <pre><code>scene.sound.setMute(mute); // mute: true/false\n// scene.sound.mute = mute;\n</code></pre></li> <li>Get     <pre><code>var mute = scene.sound.mute;\n</code></pre></li> </ul>"},{"location":"audio/#volume_1","title":"Volume","text":"<ul> <li>Set     <pre><code>scene.sound.setVolume(volume); // volume: 0 to 1\n// scene.sound.volume = volume;\n</code></pre></li> <li>Get     <pre><code>var volume = scene.sound.volume;\n</code></pre></li> </ul>"},{"location":"audio/#detune_1","title":"Detune","text":"<ul> <li>Set     <pre><code>scene.sound.setDetune(detune); // detune: -1200 to 1200\n// scene.sound.detune = detune;\n</code></pre></li> <li>Get     <pre><code>var detune = scene.sound.detune;\n</code></pre></li> </ul>"},{"location":"audio/#play-rate_1","title":"Play-rate","text":"<ul> <li>Set     <pre><code>scene.sound.setRate(rate); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed)\n// scene.sound.rate = rate;\n</code></pre></li> <li>Get     <pre><code>var rate = scene.sound.rate;\n</code></pre></li> </ul>"},{"location":"audio/#get-music-instance","title":"Get music instance","text":"<ul> <li>Get first by key     <pre><code>var music = scene.sound.get(key); // music instance, or null\n</code></pre></li> <li>Get all by key     <pre><code>var musicArray = scene.sound.getAll(key); // music instance, or null\n</code></pre></li> <li>Get all     <pre><code>var musicArray = scene.sound.getAll();\n</code></pre></li> <li>Get all playing     <pre><code>var musicArray = scene.sound.getAllPlaying();\n</code></pre></li> </ul>"},{"location":"audio/#remove-music-instance","title":"Remove music instance","text":"<ul> <li>Remove by key     <pre><code>var removed = scene.sound.removeByKey(key);\n</code></pre><ul> <li><code>removed</code> : The number of matching sound objects that were removed.</li> </ul> </li> <li>Remove all     <pre><code>scene.sound.removeAll();\n</code></pre></li> </ul>"},{"location":"audio/#stop-music-instance","title":"Stop music instance","text":"<ul> <li>Stop by key     <pre><code>var stopped = scene.sound.stopByKey(key);\n</code></pre><ul> <li><code>stopped</code> : How many sounds were stopped.</li> </ul> </li> <li>Stop all     <pre><code>scene.sound.stopAll();\n</code></pre></li> </ul>"},{"location":"audio/#analyser","title":"Analyser","text":"<p>Analyser node is only available in Web audio mode.</p> <ol> <li>Create analyser node     <pre><code>var analyser = scene.sound.context.createAnalyser();\n</code></pre></li> <li>Configure analyser node     <pre><code>analyser.smoothingTimeConstant = 1;\nanalyser.fftSize = 8192;\nanalyser.minDecibels = -90;\nanalyser.maxDecibels = -10;\n</code></pre><ul> <li><code>smoothingTimeConstant</code> : Averaging constant with the last analysis frame.<ul> <li><code>0</code>(no time averaging) ~ <code>1</code>. Default value is <code>0.8</code>.</li> </ul> </li> <li><code>fftSize</code> : Window size. <ul> <li><code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, <code>16384</code>, and <code>32768</code>. Defaults to <code>2048</code>.</li> </ul> </li> <li><code>minDecibels</code> : Minimum decibel value for scaling the FFT analysis data.<ul> <li><code>0</code> dB is the loudest possible sound, <code>-10</code> dB is a 10th of that, etc. The default value is <code>-100</code> dB</li> </ul> </li> <li><code>maxDecibels</code> : Maximum decibel value for scaling the FFT analysis data.<ul> <li>The default value is <code>-30</code> dB.</li> </ul> </li> </ul> </li> <li>Set source of analyser node<ul> <li>Global volume nodee -&gt; analyser node     <pre><code>scene.sound.masterVolumeNode.connect(analyser);\n</code></pre></li> <li>A sound instance -&gt; analyser node     <pre><code>music.volumeNode.connect(analyser);\n</code></pre></li> </ul> </li> <li>Ouput analyser node to audio context     <pre><code>analyser.connect(scene.sound.context.destination);\n</code></pre></li> <li>Create output data array     <pre><code>var dataArrayLength = analyser.frequencyBinCount;\nvar dataArray = new Uint8Array(dataArrayLength);\n</code></pre></li> <li>Get output data     <pre><code>analyser.getByteTimeDomainData(dataArray);\n</code></pre><ul> <li>Retrieve output data     <pre><code>for(var i= 0; i &lt; dataArrayLength; i++) {\nvar data = dataArray[i];\n}\n</code></pre></li> </ul> </li> </ol>"},{"location":"awaitloader/","title":"Await loader","text":""},{"location":"awaitloader/#introduction","title":"Introduction","text":"<p>Await custom task in preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"awaitloader/#live-demos","title":"Live demos","text":"<ul> <li>Wait 1000ms</li> </ul>"},{"location":"awaitloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"awaitloader/#install-plugin","title":"Install plugin","text":""},{"location":"awaitloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexawaitloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/    rexawaitloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexawaitloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexawaitloaderplugin').addToScene(this);\n\nthis.load.rexAwait(function(successCallback, failureCallback) { // successCallback()\n});\n}\n}\n</code></pre></li> </ul>"},{"location":"awaitloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAwaitLoader',\nplugin: AwaitLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexAwait(function(successCallback, failureCallback) { // successCallback()\n});\n</code></pre></li> </ul>"},{"location":"awaitloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Awaitloader from 'phaser3-rex-plugins/plugins/awaitloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>Awaitloader.call(scene.load, function(successCallback, failureCallback) {\n// successCallback();\n}, scope)\n</code></pre></li> </ul>"},{"location":"awaitloader/#start-loading-task","title":"Start loading task","text":"<p>In preload stage:</p> <pre><code>scene.load.rexAwait(function(successCallback, failureCallback) {\n// successCallback();\n}, scope);\n</code></pre> <p>or</p> <pre><code>var callback = function(successCallback, failureCallback) {\n// successCallback();\n};\nscene.load.rexAwait(key, {\ncallback: callback,\n// scope: scope\n});\n</code></pre> <ol> <li>This plugin runs <code>callback</code>  to start custom task.</li> <li>Calls <code>successCallback</code> when custom task completed, or <code>failureCallback</code> if error.</li> </ol>"},{"location":"awaytime/","title":"Away time","text":""},{"location":"awaytime/#introduction","title":"Introduction","text":"<p>Get time from previous closing application to now.</p> <ul> <li>Author: Rex</li> <li>Standalone object</li> </ul>"},{"location":"awaytime/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"awaytime/#install-plugin","title":"Install plugin","text":""},{"location":"awaytime/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexawaytimeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexawaytimeplugin.min.js', true);\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = scene.plugins.get('rexawaytimeplugin').awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AwayTimePlugin from 'phaser3-rex-plugins/plugins/awaytime-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAwayTime',\nplugin: AwayTimePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = scene.plugins.get('rexAwayTime').awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import AwayTime from 'phaser3-rex-plugins/plugins/awaytime.js';\n</code></pre></li> <li>Get away-time     <pre><code>var awayTime = (new AwayTime()).awayTime;\n</code></pre></li> </ul>"},{"location":"awaytime/#default-away-timer","title":"Default away-timer","text":""},{"location":"awaytime/#get-away-time","title":"Get away-time","text":"<pre><code>var awayTime = scene.plugins.get('rexAwayTime').awayTime;\n// var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime;\n</code></pre> <ul> <li><code>awayTime</code> : Time in millisecond.</li> <li><code>key</code> : Save curent time-stamp in key of localstorage. Default value is <code>'away'</code>.</li> <li><code>time</code> : Period of saving current time-stamp. Default value is <code>1000</code>.</li> </ul> <p>Note</p> <p>This action also starts saving current time-stamp periodically into localstorage.</p>"},{"location":"awaytime/#set-key","title":"Set key","text":"<pre><code>scene.plugins.get('rexAwayTime').setKey(key);\n</code></pre> <ul> <li><code>key</code> : Save curent time-stamp in key of localstorage</li> </ul>"},{"location":"awaytime/#set-period","title":"Set period","text":"<pre><code>scene.plugins.get('rexAwayTime').setPeriod(time);\n</code></pre> <ul> <li><code>time</code> : Period of saving current time-stamp.</li> </ul>"},{"location":"awaytime/#add-away-timer-object","title":"Add away timer object","text":"<pre><code>var awayTimer = scene.plugins.get('rexAwayTime').add({\nkey: 'away',\nperiod: 1000\n})\n</code></pre>"},{"location":"awaytime/#get-away-time_1","title":"Get away-time","text":"<pre><code>var awayTime = awayTimer.awayTime;\n</code></pre> <p>Will also start timer.</p>"},{"location":"awaytime/#stop-timer","title":"Stop timer","text":"<pre><code>awayTimer.stop();\n</code></pre>"},{"location":"base64/","title":"Base64","text":""},{"location":"base64/#introduction","title":"Introduction","text":"<p>Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"base64/#usage","title":"Usage","text":""},{"location":"base64/#base64-array-buffer","title":"Base64 -&gt; Array buffer","text":"<pre><code>var arrayBuffer = Phaser.Utils.Base64.Base64ToArrayBuffer(base64);\n</code></pre>"},{"location":"base64/#array-buffer-base64","title":"Array buffer -&gt; Base64","text":"<pre><code>var base64 = Phaser.Utils.Base64.ArrayBufferToBase64(arrayBuffer, mediaType);\n</code></pre> <ul> <li><code>mediaType</code> : An optional media type, i.e. <code>audio/ogg</code> or <code>image/jpeg</code></li> </ul>"},{"location":"bbcodetext/","title":"BBCode Text","text":""},{"location":"bbcodetext/#introduction","title":"Introduction","text":"<p>Drawing text with BBCode protocol.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"bbcodetext/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text</li> <li>Hit area of words</li> <li>Align</li> <li>Escape</li> <li>Page, typing</li> <li>Wrap</li> <li>Measure margin of text</li> <li>Generate texture</li> <li>Image height</li> <li>RTL</li> </ul>"},{"location":"bbcodetext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bbcodetext/#install-plugin","title":"Install plugin","text":""},{"location":"bbcodetext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbbcodetextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbbcodetextplugin.min.js', true);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexBBCodeText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BBCodeTextPlugin from 'phaser3-rex-plugins/plugins/bbcodetext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBBCodeTextPlugin',\nplugin: BBCodeTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexBBCodeText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BBCodeText from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add text object     <pre><code>var txt = new BBCodeText(scene, x, y, content, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#bbcode","title":"BBCode","text":"<ul> <li>Bold : <code>[b]text[/b]</code></li> <li>Weight : <code>[weight=900]text[/weight]</code><ul> <li>Valid when text does not have bold tag.</li> </ul> </li> <li>Italic : <code>[i]text[/i]</code></li> <li>Color : <code>[color=red]text[/color]</code></li> <li>Size : <code>[size=18]text[/size]</code></li> <li>Stroke : <code>[stroke]text[/stroke]</code><ul> <li>Stroke with color setting : <code>[stroke=red]text[/stroke]</code></li> </ul> </li> <li>Shadow : <code>[shadow]text[/shadow]</code></li> <li>Underline : <code>[u]text[/u]</code><ul> <li>Underline with color setting : <code>[u=red]text[/u]</code></li> </ul> </li> <li>Strikethrough : <code>[s]text[/s]</code><ul> <li>Strikethrough with color setting : <code>[s=red]text[/s]</code></li> </ul> </li> <li>Superscript, subscript : <code>[y=-12]text[y]</code></li> <li>Image : <code>[img=imgKey]</code></li> <li>Hit area of words : <code>[area=key]text[/area]</code></li> <li>Url link : <code>[url=http...]text[/url]</code><ul> <li>Click this area to open web page on a new tab (<code>window.open(url, '_blank')</code>)</li> <li>Will register hit area with key <code>url:http...</code></li> </ul> </li> <li>Line alignment : <ul> <li><code>[align=left]text[/align]</code>, </li> <li><code>[align=center]text[/align]</code>, </li> <li><code>[align=right]text[/align]</code></li> </ul> </li> <li>Escape : Tags between <code>[esc]</code> ... <code>[/esc]</code> or <code>[raw]</code> ... <code>[/raw]</code> will be treated as content.<ul> <li><code>[esc][color=yellow]Text[/color][/esc]</code></li> <li><code>[esc][raw]Text[/raw][/esc]</code></li> <li><code>[raw][esc]Text[/esc][/raw]</code></li> <li><code>[raw][b]Text[/b][/raw]</code></li> </ul> </li> </ul> <p>Note</p> <p>Can set delimiter <code>[]</code> to another custom value in style of constructor.</p>"},{"location":"bbcodetext/#add-text-object","title":"Add text object","text":"<pre><code>var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello');\n// var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });\n</code></pre> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,  // null, css string, or number\nbackgroundColor2: null,  // null, css string, or number\nbackgroundHorizontalGradient: true,\nbackgroundStrokeColor: null,  // null, css string, or number\nbackgroundStrokeLineWidth: 2,\n\nbackgroundCornerRadius: 0,  // 0   : no round corner, \n// &gt; 0 : convex round corner\n// &lt; 0 : concave round corner\n\nbackgroundCornerIteration: null,    color: '#fff',  // null, css string, or number\nstroke: '#fff',  // null, css string, or number\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',  // css string, or number\nblur: 0,\nstroke: false,\nfill: false\n},\nunderline: {\ncolor: '#000',  // css string, or number\nthickness: 0,\noffset: 0\n},\nstrikethrough: {\ncolor: '#000',  // css string, or number\nthickness: 0,\noffset: 0\n},\n// align: 'left',  // Equal to halign\nhalign: 'left', // 'left'|'center'|'right'\nvalign: 'top',  // 'top'|'center'|'bottom'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\ntestString: '|M\u00c9qgy',\nwrap: {\nmode: 'none'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: null\n},\n// rtl: false,\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// images: {\n//     imgKey: {y: -8}\n// },\n\n// delimiters: '[]',\n\n// sharedPool: true,\n\n// urlTagCursorStyle: 'pointer',\n// interactive: false\n}\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexBBCodeText({\nx: 0,\ny: 0,\ntext: '',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\n// ...\n},\n})\n</code></pre> <p>or</p> <pre><code>var txt = scene.make.rexBBCodeText({\nx: 0,\ny: 0,\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\n// ...\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre> <ul> <li>Alignment<ul> <li><code>halign</code>, or <code>align</code> : Horizontal alignment.<ul> <li><code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> <li><code>valign</code> : Vertical alignment.<ul> <li><code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li><code>images</code> : See Image</li> <li><code>delimiters</code> : Delimiters of tags, default value is <code>[]</code>.</li> <li><code>sharedPool</code> : <ul> <li><code>true</code> : Use shared resouce pools during game. Default behavior.</li> <li><code>false</code> : Use local resource pools, will be free when game object destroying.</li> </ul> </li> <li><code>urlTagCursorStyle</code> : Cursor style when cursor moving over a url tag. Default value is <code>'pointer'</code>.</li> <li><code>interactive</code> :<ul> <li><code>true</code> : Invoke <code>txt.setInteractive()</code> for hit-area tag, or url tag.</li> <li><code>false</code> : Do nothing. Default behavior.</li> </ul> </li> </ul>"},{"location":"bbcodetext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends BBCodeText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, '[b]h[/b]ello');\n</code></pre></li> </ul>"},{"location":"bbcodetext/#wrap","title":"Wrap","text":"<ul> <li>Wrap by word or character.     <pre><code>var txt = scene.make.rexBBCodeText({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwrap: {\nmode: 0     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: 0\n}\n}\n});\n</code></pre><ul> <li><code>wrap.mode</code> : <ul> <li><code>0</code>, or <code>'none'</code> : No wrapping, default behavior.</li> <li><code>1</code>, or <code>'word'</code> : Word wrapping.</li> <li><code>2</code>, or <code>'char'</code>, or <code>'character'</code> : Character wrapping.</li> </ul> </li> <li><code>wrap.width</code> : Maximun wrapping width of a line.<ul> <li>Wrap-fit : Set wrapping width to <code>fixedWidth - padding.left - padding.right</code> if <code>fixedWidth &gt; 0</code></li> </ul> </li> </ul> </li> <li>Wrap mode<ul> <li>Get     <pre><code>var mode = txt.style.wrapMode;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'none'</code> : No wrapping.</li> <li><code>1</code>, or <code>'word'</code> : Word wrapping.</li> <li><code>2</code>, or <code>'char'</code>, or <code>'character'</code> : Character wrapping.</li> </ul> </li> </ul> </li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wrapWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapWidth(width);\n// txt.setWordWrapWidth(width);\n</code></pre><ul> <li><code>width</code> : Maximun wrapping width of a line.<ul> <li>Wrap-fit : Set wrapping width to <code>fixedWidth - padding.left - padding.right</code> if <code>fixedWidth &gt; 0</code></li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#content","title":"Content","text":"<ul> <li>Get source text     <pre><code>var curContent = txt.text;\n</code></pre></li> <li>Get plain text     <pre><code>var plainText = txt.getPlainText();\n</code></pre></li> <li>Set     <pre><code>txt.setText('[b]h[/b]ello');\n// txt.text = '[b]h[/b]ello';\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"bbcodetext/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);  // font: {fontFamily, fontSize, fontStyle}\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"bbcodetext/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Underline color, thickness<ul> <li>Get     <pre><code>var color = txt.style.underlineColor;\nvar thickness = txt.style.underlineThickness;\nvar offset = txt.style.underlineOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setUnderline(color, thickness, ofset);\ntxt.setUnderlineColor(color);\ntxt.setUnderlineThinkness(thickness);\ntxt.setUnderlineOffset(ofset);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Strikethrough color, thickness<ul> <li>Get     <pre><code>var color = txt.style.strikethroughColor;\nvar thickness = txt.style.strikethroughThickness;\nvar offset = txt.style.strikethroughOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setStrikethrough(color, thickness, ofset);\ntxt.setStrikethroughColor(color);\ntxt.setStrikethroughThinkness(thickness);\ntxt.setStrikethroughOffset(ofset);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Background<ul> <li>Color, or gradient color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\nvar color2 = txt.style.backgroundColor2;\nvar isHorizontalGradient = txt.style.backgroundHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre><ul> <li><code>color</code>, <code>color2</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Stroke color<ul> <li>Get    <pre><code>var color = txt.style.backgroundStrokeColor;\nvar lineWidth = txt.style.backgroundStrokeLineWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundStrokeColor(color, lineWidth);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> <li>Round rectangle<ul> <li>Get     <pre><code>var radius = txt.style.backgroundCornerRadius;\nvar iteration = txt.style.backgroundCornerIteration;\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> </ul> </li> <li>Set     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration);\n</code></pre><ul> <li><code>iteration</code> : <ul> <li><code>undefined</code> : Round rectangle</li> <li><code>0</code> : Octagon</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre><ul> <li><code>color</code> : <code>null</code>, css string, or number.</li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#align","title":"Align","text":"<ul> <li>Horizontal align<ul> <li>Get     <pre><code>var align = txt.style.halign;\n</code></pre><ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> <li>Set     <pre><code>txt.setHAlign(align);    </code></pre>     or     <pre><code>txt.setAlign(align);    </code></pre><ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code></li> </ul> </li> </ul> </li> <li>Vertical align<ul> <li>Get     <pre><code>var align = txt.style.valign;\n</code></pre><ul> <li><code>align</code> : <code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> <li>Set     <pre><code>txt.setVAlign(align);    </code></pre><ul> <li><code>align</code> : <code>'top'</code>, <code>'center'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"bbcodetext/#image","title":"Image","text":"<ul> <li>Uses texture key as image key by default.</li> <li>Add image render information     <pre><code>txt.addImage(imgKey, {\nkey: textureKey,\nframe: frameName,\nwidth: undefined,\nheight: undefined,\ny: 0,\nleft: 0,\nright: 0,\noriginX: 0,\noriginY: 0,\n});\n</code></pre><ul> <li><code>imgKey</code> : Image key used in text content, i.e. <code>[img=imgKey]</code>.</li> <li><code>key</code> : Texture key.</li> <li><code>frame</code> : Frame name.</li> <li><code>width</code> : Render width, set <code>undefined</code> to use the cut width of frame.</li> <li><code>height</code> : Render height, set <code>undefined</code> to use the cut height of frame.</li> <li><code>y</code> : Extra offset y.</li> <li><code>left</code> : Left padding space.</li> <li><code>Right</code> : Right padding space.</li> <li><code>originX</code> : Offset x via frame width * <code>originX</code></li> <li><code>originY</code> : Offset y via frame height * <code>originY</code></li> </ul> </li> <li>Add some image render informations     <pre><code>txt.addImage(data);\n</code></pre><ul> <li><code>data</code> : <code>{imgKey, config}</code></li> </ul> </li> </ul>"},{"location":"bbcodetext/#hit-area-of-words","title":"Hit area of words","text":"<p>Size of hit-area is word-width x line-height, or image-width x line-height.</p>"},{"location":"bbcodetext/#hitting-events","title":"Hitting events","text":"<ul> <li>Pointer down     <pre><code>txt.on('areadown', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areadown-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer click : pointer down then up, without pointer out     <pre><code>txt.on('areaclick', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaclick-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer up     <pre><code>txt.on('areaup', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaup-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer over     <pre><code>txt.on('areaover', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaover-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer out     <pre><code>txt.on('areaout', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaout-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> </ul>"},{"location":"bbcodetext/#draw-hit-areas","title":"Draw hit-areas","text":"<pre><code>txt.drawAreaBounds(graphics, color);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul>"},{"location":"bbcodetext/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"bbcodetext/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#margin-of-text","title":"Margin of text","text":"<pre><code>var leftMargin = txt.measureTextMargins(testString).left;\n</code></pre> <ul> <li><code>testString</code> : Measure left margin of this text.</li> </ul>"},{"location":"bbcodetext/#shift-start-position-of-text","title":"Shift start position of text","text":"<pre><code>txt.setXOffset(value);\n</code></pre>"},{"location":"bbcodetext/#resolution","title":"Resolution","text":"<ul> <li>Get     <pre><code>var resolution = txt.style.resolution;\n</code></pre></li> <li>Set     <pre><code>txt.setResolution(resolution);\n</code></pre></li> </ul>"},{"location":"bbcodetext/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"bbcodetext/#save-texture","title":"Save texture","text":"<pre><code>txt.generateTexture(key);\n// txt.generateTexture(key, x, y, width, height);\n</code></pre>"},{"location":"bbcodetext/#delimiters","title":"Delimiters","text":"<pre><code>txt.setDelimiters(delimiters);  // '&lt;&gt;', or ['&lt;', '&gt;']\n</code></pre> <p>or</p> <pre><code>txt.setDelimiters(delimiterLeft, delimiterRight); // '&lt;', '&gt;'\n</code></pre>"},{"location":"bbcodetext/#rtl","title":"RTL","text":"<ul> <li>Set <code>rtl</code> in style config when creating this text game object</li> <li>Change <code>rtl</code> during runtime     <pre><code>txt.setRTL(rtl).setText(newContent);\n</code></pre><ul> <li>Invoke <code>setRTL</code> method before setting new content.</li> </ul> </li> </ul>"},{"location":"bbcodetext/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"bbcodetext/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"bbcodetext/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"bitmaptext/","title":"Static bitmap text","text":""},{"location":"bitmaptext/#introduction","title":"Introduction","text":"<p>Drawing text by texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"bitmaptext/#usage","title":"Usage","text":""},{"location":"bitmaptext/#load-bitmap-font","title":"Load bitmap font","text":"<ul> <li>Load bitmap font from texture and xml configuration     <pre><code>scene.load.bitmapFont(key, textureURL, xmlURL);\n</code></pre><ul> <li>Reference: load bitmap font</li> <li>Loaded texture also can be used for Image, Sprite, or Arcade Image, Arcade Sprite <pre><code>scene.add.image(x, y, key, char);\n</code></pre></li> </ul> </li> <li>Load retro bitmap font from texture and JSON configuration<ol> <li>Load texture in preload stage     <pre><code>scene.load.image(key, url);\n</code></pre>     Reference: load image</li> <li>Add retro bitmap font     <pre><code>var config = {\n// image\nimage: '',\noffset: {\nx: 0,\ny: 0\n},\n// characters\nwidth: 32,\nheight: 32,\nchars: '',\ncharsPerRow: 10,\n// spacing\nspacing: {\nx: 0,\ny: 0\n},\nlineSpacing: 0\n}\nscene.cache.bitmapFont.add(key, Phaser.GameObjects.RetroFont.Parse(scene, config));\n</code></pre><ul> <li>Image :<ul> <li><code>image</code> : The key of the image containing the font.</li> <li><code>offset</code> : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here.</li> </ul> </li> <li>Characters :<ul> <li><code>width</code> : The width of each character in the font set.</li> <li><code>height</code> : The height of each character in the font set.</li> <li><code>chars</code> : The characters used in the font set, in display order.<ul> <li>Default characters set</li> </ul> </li> <li><code>charsPerRow</code> : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth.</li> </ul> </li> <li>Spacing :<ul> <li><code>spacing</code> : If the characters in the font set have horizontal/vertical spacing between them set the required amount here.</li> <li><code>lineSpacing</code> : The amount of vertical space to add to the line height of the font.</li> </ul> </li> </ul> </li> </ol> </li> </ul>"},{"location":"bitmaptext/#add-bitmap-text-object","title":"Add bitmap text object","text":"<pre><code>var txt = scene.add.bitmapText(x, y, key, text);\n// var txt = scene.add.bitmapText(x, y, key, text, size, align);\n</code></pre> <ul> <li><code>size</code> : The size of the font</li> <li><code>align</code> : The alignment of the text in a multi-line BitmapText object.<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul> <p>Add text from JSON</p> <pre><code>var txt = scene.make.bitmapText({\nx: 0,\ny: 0,\ntext: 'Text\\nGame Object\\nCreated from config',\nfont: '',\nsize: false,\nalign: 0,\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"bitmaptext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.BitmapText {\nconstructor(scene, x, y, key, text, size, align) {\nsuper(scene, x, y, key, text, size, align);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, key, text);\n</code></pre></li> </ul>"},{"location":"bitmaptext/#set-text","title":"Set text","text":"<pre><code>txt.setText('...');\n</code></pre> <p>or</p> <pre><code>txt.text = '...';\n</code></pre>"},{"location":"bitmaptext/#set-align","title":"Set align","text":"<ul> <li>Left aligned     <pre><code>txt.setLeftAlign();\n</code></pre></li> <li>Middle aligned     <pre><code>txt.setCenterAlign();\n</code></pre></li> <li>Right aligned     <pre><code>txt.setRightAlign();\n</code></pre></li> </ul> <p>or</p> <pre><code>txt.align = align;\n</code></pre> <ul> <li><code>align</code> :<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul>"},{"location":"bitmaptext/#set-letter-spacing","title":"Set letter spacing","text":"<pre><code>txt.setLetterSpacing(spacing);\n</code></pre> <p>or</p> <pre><code>txt.letterSpacing = spacing;\n</code></pre> <p>Can be a positive value to increase the space, or negative to reduce it.</p>"},{"location":"bitmaptext/#set-line-spacing","title":"Set line spacing","text":"<pre><code>txt.setLineSpacing(spacing);\n</code></pre> <p>or</p> <pre><code>txt.lineSpacing = spacing;\n</code></pre> <p>Can be a positive value to increase the space, or negative to reduce it.</p>"},{"location":"bitmaptext/#set-font-size","title":"Set font size","text":"<pre><code>txt.setFontSize(size);\n</code></pre> <p>or</p> <pre><code>txt.fontSize = size;\n</code></pre>"},{"location":"bitmaptext/#set-font","title":"Set font","text":"<pre><code>txt.setFont(key);\n// txt.setFont(key, size, align);\n</code></pre>"},{"location":"bitmaptext/#tint","title":"Tint","text":"<p>See Tint.</p>"},{"location":"bitmaptext/#color-of-characters","title":"Color of characters","text":"<ul> <li>By character     <pre><code>txt.setCharacterTint(start, length, tintFill, color);\n// txt.setCharacterTint(start, length, tintFill, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre><ul> <li><code>start</code> : Index starting character. <ul> <li><code>&lt; 0</code> : Counts back from the end of the text.</li> </ul> </li> <li><code>length</code> : Number of characters to tint.<ul> <li><code>-1</code> : All characters from <code>start</code></li> </ul> </li> <li><code>tintFill</code> : <ul> <li><code>true</code> : Fill-based tint</li> <li><code>false</code> : Additive tint</li> </ul> </li> <li><code>color</code>, or <code>topLeft, topRight, bottomLeft, bottomRight</code> : Color integer.</li> </ul> </li> <li>By word     <pre><code>txt.setWordTint(word, count, tintFill, color);\n// txt.setWordTint(word, count, tintFill, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre><ul> <li><code>word</code> : The word to search for. <ul> <li>A string</li> <li>An index of the word in the words array.</li> </ul> </li> <li><code>count</code> : Number of matching words to tint.<ul> <li><code>-1</code> : All matching words</li> </ul> </li> <li><code>tintFill</code> : <ul> <li><code>true</code> : Fill-based tint</li> <li><code>false</code> : Additive tint</li> </ul> </li> <li><code>color</code>, or <code>topLeft, topRight, bottomLeft, bottomRight</code> : Color integer.</li> </ul> </li> </ul>"},{"location":"bitmaptext/#drop-shadow-effect","title":"Drop shadow effect","text":"<pre><code>txt.setDropShadow(x, y, color, alpha);\n</code></pre> <p>or</p> <pre><code>txt.dropShadowX = x;\ntxt.dropShadowY = y;\ntxt.dropShadowColor = color;\ntxt.dropShadowAlpha = alpha;\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the drop shadow.</li> <li><code>color</code> : The color of the drop shadow.</li> <li><code>alpha</code> : The alpha of the drop shadow.</li> </ul> <p>Note</p> <p>WebGL only</p>"},{"location":"bitmaptext/#wrap","title":"Wrap","text":"<ul> <li>Wrap     <pre><code>txt.setMaxWidth(width);\n// txt.setMaxWidth(width, wordWrapCharCode);\n</code></pre><ul> <li><code>width</code> : Line width in pixels.</li> <li><code>wordWrapCharCode</code> : The character code to check for when word wrapping. Defaults to 32 (the space character)</li> </ul> </li> <li>Disable wrapping     <pre><code>txt.setMaxWidth(0);\n</code></pre></li> </ul>"},{"location":"bitmaptext/#get-bounds","title":"Get bounds","text":"<pre><code>var width = txt.width;\nvar height = txt.height;\n</code></pre> <p>or</p> <pre><code>var bounds = txt.getTextBounds(round);\n// bounds = {\n//     local: {\n//         x: 0,\n//         y: 0,\n//         width: 0,\n//         height: 0\n//     },\n//     global: {\n//         x: 0,\n//         y: 0,\n//         width: 0,\n//         height: 0\n//     },\n//     lines: {\n//         shortest: 0,\n//         longest: 0,\n//         lengths: null,\n//         height: 0\n//     },\n//     wrappedText: '',\n//     words: [],\n//     characters: [],\n//     scaleX: 0,\n//     scaleY: 0\n// };\n</code></pre> <ul> <li><code>round</code> : Set <code>true</code> to round the results to the nearest integer.</li> <li><code>local</code> : The BitmapText based on fontSize and 0x0 coords.</li> <li><code>global</code> : The BitmapText, taking into account scale and world position.</li> <li><code>lines</code> : The BitmapText line data.</li> <li><code>wrappedText</code> : Wrapped content joined with <code>'\\n'</code>.</li> <li><code>characters</code> : Information of each character.     <pre><code>{\nchar, code, i, idx, x, y, w, h, t, b, r, line\n}\n</code></pre><ul> <li><code>char</code> : Character (string).</li> <li><code>code</code>: Character code (number)</li> <li><code>i</code> : Index of character</li> <li><code>x</code> , <code>y</code> : World position of this character</li> <li><code>w</code>, <code>h</code> : Width/height of this character</li> <li><code>t</code>, <code>b</code> : The top/bottom of the line this character is on.</li> <li><code>r</code> : The right-most point of this character, including xAdvance.</li> <li><code>line</code> : The line number the character appears on.</li> </ul> </li> <li><code>words</code> : Information of each word.     <pre><code>{\nword, i, x, y, w, h, cr\n\n}\n</code></pre><ul> <li><code>word</code> : Word string.</li> <li><code>i</code> : Index of start character</li> <li><code>x</code>, <code>y</code> : World position of start character</li> <li><code>w</code> , <code>h</code> : Width/height of word</li> <li><code>cr</code> : Is last word of current line</li> </ul> </li> <li><code>scaleX</code>, <code>scaleY</code> : Scale of width and height.</li> </ul>"},{"location":"bitmaptext/#get-information-of-character","title":"Get information of character","text":"<pre><code>var data = txt.getCharacterAt(x, y);\n// var data = txt.getCharacterAt(x, y, camera);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position.</li> <li><code>camera</code> : The Camera which is being tested against.</li> <li><code>data</code> : Information of character at world position.     <pre><code>{\nchar, code, i, x, y, w, h, t, b, r, line\n}\n</code></pre><ul> <li><code>char</code> : Character (string).</li> <li><code>code</code>: Character code (number)</li> <li><code>i</code> : Index of character</li> <li><code>x</code> , <code>y</code> : World position of this character</li> <li><code>w</code>, <code>h</code> : Width/height of this character</li> <li><code>t</code>, <code>b</code> : The top/bottom of the line this character is on.</li> <li><code>r</code> : The right-most point of this character, including xAdvance.</li> <li><code>line</code> : The line number the character appears on.</li> </ul> </li> </ul>"},{"location":"bitmaptext/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"bitmaptext/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"bitmaptext/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"bitmaptext/#appendix","title":"Appendix","text":""},{"location":"bitmaptext/#default-characters-set-of-retro-font","title":"Default characters set of retro font","text":"<ul> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET1</code> :     <pre><code>' !\"#$%&amp;\\'()*+,-./0123456789:;&lt;=&gt;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET2</code> :     <pre><code>' !\"#$%&amp;\\'()*+,-./0123456789:;&lt;=&gt;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET3</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 '\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET4</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET5</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET6</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' '\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET7</code> :     <pre><code>'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET8</code> :     <pre><code>'0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET9</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET10</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n</code></pre></li> <li><code>Phaser.GameObjects.RetroFont.TEXT_SET11</code> :     <pre><code>'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'\n</code></pre></li> </ul>"},{"location":"bitmapzone/","title":"Bitmap zone","text":""},{"location":"bitmapzone/#introduction","title":"Introduction","text":"<p>Particles' emitter zone from canvas bitmap of text/canvas game object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"bitmapzone/#live-demo","title":"Live demo","text":"<ul> <li>Particles</li> </ul>"},{"location":"bitmapzone/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bitmapzone/#install-plugin","title":"Install plugin","text":""},{"location":"bitmapzone/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbitmapzoneplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbitmapzoneplugin.min.js', true);\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = scene.plugins.get('rexbitmapzoneplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BitmapZonePlugin from 'phaser3-rex-plugins/plugins/bitmapzone-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBitmapZone',\nplugin: BitmapZonePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = scene.plugins.get('rexBitmapZone').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BitmapZone from 'phaser3-rex-plugins/plugins/bitmapzone.js';\n</code></pre></li> <li>Add bitmap-zone object     <pre><code>var bitmapZone = new BitmapZone(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bitmapzone/#create-shape","title":"Create shape","text":"<pre><code>var bitmapZone = scene.plugins.get('rexBitmapZone').add(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> :<ul> <li>Any kind of text object : Text object, bbcode text object, or tag text object.</li> <li>Canvas object</li> </ul> </li> </ul>"},{"location":"bitmapzone/#emit-zone","title":"Emit zone","text":"<pre><code>var particles = scene.add.particles(key,\n[\n// emitter config\n{\n// blendMode:\n// scale:\n// speed:\n// garvityY:\nemitZone: {\ntype: 'random',\nsource: bitmapZone\n}\n}\n]);\n</code></pre> <p><code>bitmapZone</code> provides getRandomPoint method.</p>"},{"location":"bitmapzone/#update-content","title":"Update content","text":"<pre><code>bitmapZone.setSource(gameObject);\n</code></pre>"},{"location":"blendmode/","title":"Blend mode","text":""},{"location":"blendmode/#introduction","title":"Introduction","text":"<p>Constant value of blend modes.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"blendmode/#usage","title":"Usage","text":""},{"location":"blendmode/#webgl-and-canvas","title":"WebGL and Canvas","text":"<ul> <li><code>'NORMAL'</code>, or <code>Phaser.BlendModes.NORMAL</code>, or <code>0</code> <ul> <li>Default setting and draws new shapes on top of the existing canvas content.</li> </ul> </li> <li><code>'ADD'</code>, or <code>Phaser.BlendModes.ADD</code>, or <code>1</code><ul> <li>Where both shapes overlap the color is determined by adding color values.</li> </ul> </li> <li><code>'MULTIPLY'</code>, or <code>Phaser.BlendModes.MULTIPLY</code>, or <code>2</code><ul> <li>The pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.</li> </ul> </li> <li><code>'SCREEN'</code>, or <code>Phaser.BlendModes.SCREEN</code>, or <code>3</code><ul> <li>The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)</li> </ul> </li> <li><code>'ERASE'</code>, or <code>Phaser.BlendModes.ERASE</code>, or <code>17</code><ul> <li>Alpha erase blend mode. Only works when rendering to a framebuffer, like a Render Texture</li> </ul> </li> </ul>"},{"location":"blendmode/#canvas-only","title":"Canvas only","text":"<ul> <li><code>'OVERLAY'</code>, or <code>Phaser.BlendModes.OVERLAY</code>, or <code>4</code><ul> <li>A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter.</li> </ul> </li> <li><code>'DARKEN'</code>, or <code>Phaser.BlendModes.DARKEN</code>, or <code>5</code><ul> <li>Retains the darkest pixels of both layers.</li> </ul> </li> <li><code>'LIGHTEN'</code>, or <code>Phaser.BlendModes.LIGHTEN</code>, or <code>6</code><ul> <li>Retains the lightest pixels of both layers.</li> </ul> </li> <li><code>'COLOR_DODGE'</code>, or <code>Phaser.BlendModes.COLOR_DODGE</code>, or <code>7</code><ul> <li>Divides the bottom layer by the inverted top layer.</li> </ul> </li> <li><code>'COLOR_BURN'</code>, or <code>Phaser.BlendModes.COLOR_BURN</code>, or <code>8</code><ul> <li>Divides the inverted bottom layer by the top layer, and then inverts the result.</li> </ul> </li> <li><code>'HARD_LIGHT'</code>, or <code>Phaser.BlendModes.HARD_LIGHT</code>, or <code>9</code><ul> <li>A combination of multiply and screen like overlay, but with top and bottom layer swapped.</li> </ul> </li> <li><code>'SOFT_LIGHT'</code>, or <code>Phaser.BlendModes.SOFT_LIGHT</code>, or <code>10</code><ul> <li>A softer version of hard-light. Pure black or white does not result in pure black or white.</li> </ul> </li> <li><code>'DIFFERENCE'</code>, or <code>Phaser.BlendModes.DIFFERENCE</code>, or <code>11</code><ul> <li>Subtracts the bottom layer from the top layer or the other way round to always get a positive value.</li> </ul> </li> <li><code>'EXCLUSION'</code>, or <code>Phaser.BlendModes.EXCLUSION</code>, or <code>12</code><ul> <li>Like difference, but with lower contrast.</li> </ul> </li> <li><code>'HUE'</code>, or <code>Phaser.BlendModes.HUE</code>, or <code>13</code><ul> <li>Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.</li> </ul> </li> <li><code>'SATURATION'</code>, or <code>Phaser.BlendModes.SATURATION</code>, or <code>14</code><ul> <li>Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.</li> </ul> </li> <li><code>'COLOR'</code>, or <code>Phaser.BlendModes.COLOR</code>, or <code>15</code><ul> <li>Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.</li> </ul> </li> <li><code>'LUMINOSITY'</code>, or <code>Phaser.BlendModes.LUMINOSITY</code>, or <code>16</code><ul> <li>Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.</li> </ul> </li> <li><code>'SOURCE_IN'</code>, or <code>Phaser.BlendModes.SOURCE_IN</code>, or <code>18</code><ul> <li>The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.</li> </ul> </li> <li><code>'SOURCE_OUT'</code>, or <code>Phaser.BlendModes.SOURCE_OUT</code>, or <code>19</code><ul> <li>The new shape is drawn where it doesn't overlap the existing canvas content.</li> </ul> </li> <li><code>'SOURCE_ATOP'</code>, or <code>Phaser.BlendModes.SOURCE_ATOP</code>, or <code>20</code><ul> <li>The new shape is only drawn where it overlaps the existing canvas content.</li> </ul> </li> <li><code>'DESTINATION_OVER'</code>, or <code>Phaser.BlendModes.DESTINATION_OVER</code>, or <code>21</code><ul> <li>New shapes are drawn behind the existing canvas content.</li> </ul> </li> <li><code>'DESTINATION_IN'</code>, or <code>Phaser.BlendModes.DESTINATION_IN</code>, or <code>22</code><ul> <li>The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.</li> </ul> </li> <li><code>'DESTINATION_OUT'</code>, or <code>Phaser.BlendModes.DESTINATION_OUT</code>, or <code>23</code><ul> <li>The existing content is kept where it doesn't overlap the new shape.</li> </ul> </li> <li><code>'DESTINATION_ATOP'</code>, or <code>Phaser.BlendModes.DESTINATION_ATOP</code>, or <code>24</code><ul> <li>The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.</li> </ul> </li> <li><code>'LIGHTER'</code>, or <code>Phaser.BlendModes.LIGHTER</code>, or <code>25</code><ul> <li>Where both shapes overlap the color is determined by adding color values.</li> </ul> </li> <li><code>'COPY'</code>, or <code>Phaser.BlendModes.COPY</code>, or <code>26</code><ul> <li>Only the new shape is shown.</li> </ul> </li> <li><code>'XOR'</code>, or <code>Phaser.BlendModes.XOR</code>, or <code>27</code><ul> <li>Shapes are made transparent where both overlap and drawn normal everywhere else.</li> </ul> </li> </ul> <p>Blend modes have different effects under Canvas and WebGL, and from browser to browser, depending on support. Blend Modes also cause a WebGL batch flush should it encounter a new blend mode. For these reasons try to be careful about the construction of your Scene and the frequency in which blend modes are used.</p>"},{"location":"blitter/","title":"Blitter","text":""},{"location":"blitter/#introduction","title":"Introduction","text":"<p>Display of static images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"blitter/#usage","title":"Usage","text":""},{"location":"blitter/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"blitter/#add-blitter-container","title":"Add blitter container","text":"<p>Add blitter container</p> <pre><code>var blitter = scene.add.blitter(x, y, key);\n</code></pre> <p>Add blitter container from JSON</p> <pre><code>var blitter = scene.make.blitter({\nx: 0,\ny: 0,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"blitter/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBlitter extends Phaser.GameObjects.Blitter {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var blitter = new MyBlitter(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"blitter/#add-bob-object","title":"Add bob object","text":"<pre><code>var bob = blitter.create(x, y);\n// var bob = blitter.create(x, y, frame, visible, index);\n</code></pre> <ul> <li>frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using.</li> <li>visible : Should the created Bob render or not?</li> <li>index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list.</li> </ul>"},{"location":"blitter/#add-mutiple-bob-objects","title":"Add mutiple bob objects","text":"<pre><code>var bobs = blitter.createMultiple(quantity, frame, visible);\n</code></pre> <ul> <li>quantity : The quantity of Bob objects to create.</li> </ul>"},{"location":"blitter/#add-bob-object-from-callback","title":"Add bob object from callback","text":"<pre><code>var bobs = blitter.createFromCallback(callback, quantity, frame, visible)\n// var callback = function(bob, i){};\n</code></pre>"},{"location":"blitter/#get-bob-objects","title":"Get bob objects","text":"<pre><code>var bobs = blitter.children.list;\n</code></pre>"},{"location":"blitter/#clear-all-bob-objects","title":"Clear all bob objects","text":"<pre><code>blitter.clear();\n</code></pre>"},{"location":"blitter/#bob-object","title":"Bob object","text":"<p>A Bob has a position, alpha value and a frame from a texture that it uses to render with. You can also toggle the flipped and visible state of the Bob.</p>"},{"location":"blitter/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var x = bob.x;\nvar y = bob.y;\n</code></pre></li> <li>Set     <pre><code>bob.setPosition(x, y);\n// bob.x = 0;\n// bob.y = 0;\n</code></pre>     or     <pre><code>bob.reset(x, y);\n// bob.reset(x, y, frame);\n</code></pre></li> </ul>"},{"location":"blitter/#frame","title":"Frame","text":"<ul> <li>Get     <pre><code>var frame = bob.frame;\n</code></pre><ul> <li><code>frame</code> : Frame object.</li> </ul> </li> <li>Set     <pre><code>bob.setFrame(frame);\n</code></pre></li> </ul>"},{"location":"blitter/#flip","title":"Flip","text":"<ul> <li>Get     <pre><code>var flipX = bob.flipX;\nvar flipY = bob.flipY;\n</code></pre></li> <li>Set     <pre><code>bob.setFlip(boolX, boolY);\n// bob.setFlipX(boolean);\n// bob.setFlipY(boolean);\n// bob.flipX = flipX;\n// bob.flipY = flipY;\n</code></pre>     or     <pre><code>bob.resetFlip(); // bob.setFlip(false, false)\n</code></pre></li> </ul>"},{"location":"blitter/#visible","title":"Visible","text":"<ul> <li>Get     <pre><code>var visible = bob.visible;\n</code></pre></li> <li>Set     <pre><code>bob.setVisible(boolean);\n// bob.visible = v;\n</code></pre></li> </ul>"},{"location":"blitter/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = bob.alpha;\n</code></pre></li> <li>Set     <pre><code>bob.setAlpha(v);\n// bob.aplha = v;\n</code></pre></li> </ul>"},{"location":"blitter/#tint","title":"Tint","text":"<ul> <li>Get     <pre><code>var tint = bob.tint;\n</code></pre></li> <li>Set     <pre><code>bob.setTint(tint);\n// bob.tint = tint;\n</code></pre><ul> <li><code>tint</code> : Tint value, between <code>0</code> and <code>0xffffff</code>.</li> </ul> </li> </ul>"},{"location":"blitter/#destroy","title":"Destroy","text":"<pre><code>bob.destroy();\n</code></pre>"},{"location":"blitter/#data","title":"Data","text":"<pre><code>var data = bob.data;  // {}\n</code></pre>"},{"location":"blitter/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"blitter/#create-mask","title":"Create mask","text":"<pre><code>var mask = bob.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"blitter/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"board-bejeweled/","title":"Bejeweled","text":""},{"location":"board-bejeweled/#introduction","title":"Introduction","text":"<p>Match3-like gameplay template.</p> <ul> <li>Author: Rex</li> <li>Template</li> </ul>"},{"location":"board-bejeweled/#live-demos","title":"Live demos","text":"<ul> <li>Events</li> <li>Custom input</li> <li>Mask</li> </ul>"},{"location":"board-bejeweled/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-bejeweled/#install-plugin","title":"Install plugin","text":""},{"location":"board-bejeweled/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load rexBoard plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\nscene.load.script('rexbejeweled', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbejeweled.min.js');\n</code></pre></li> <li>Add bejeweled object     <pre><code>var bejeweled = new rexbejeweled(scene, config);\n</code></pre></li> </ul>"},{"location":"board-bejeweled/#import-template","title":"Import template","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install rexBoard plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nimport Bejeweled from 'phaser3-rex-plugins/templates/bejeweled/Bejeweled.js';\n\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bejeweled object     <pre><code>var bejeweled = new Bejeweled(scene, config);\n</code></pre></li> </ul>"},{"location":"board-bejeweled/#create-bejeweled-object","title":"Create bejeweled object","text":"<pre><code>var bejeweled = new Bejeweled(scene, {\n// rexBoard: 'rexBoard',\n\nboard: {\ngrid: {\ngridType: 'quadGrid',\nx: 30,\ny: 30 - 600,\ncellWidth: 60,\ncellHeight: 60,\n},\nwidth: 10,\nheight: 20 // Prepared rows: upper 10 rows\n},\nmatch: {\n// wildcard: undefined\n// dirMask: undefined\n},\nchess: {\n// pick random symbol from array, or a callback to return symbol\nsymbols: [0, 1, 2, 3, 4, 5],\n// symbols: function(board, tileX, tileY, excluded) { return symbol; }\n\n// User-defined chess game object\ncreate: function (board) {\n// Create Game object (Shape, Image, or Sprite)\nvar scene = board.scene;\nvar gameObject = scene.add.sprite(0, 0, textureKey, frame);\n// Initial 'symbol' value\ngameObject.setData('symbol', undefined);\n// Add data changed event of 'symbol` key\ngameObject.data.events.on('changedata_symbol', function (gameObject, value, previousValue) {\n// Change the appearance of game object via new symbol value\ngameObject.setFrame(newFrame);\n});\nreturn gameObject;\n},\n\n// scope for callbacks\nscope: undefined,\n\n// moveTo behavior\nmoveTo: {\nspeed: 400\n},\n// tileZ: 1,\n},\n// mask: false,\n\nselect1Action: undefined,\nselect2Action: undefined,\nswapAction: undefined,\nundoSwapAction: undefined,\neliminatingAction: undefined,\nfallingAction: undefined,\n\n// input: true\n})\n</code></pre> <p>Configurations</p> <ul> <li><code>rexBoard</code> : Key of 'rexBoard' plugin. Default is <code>'rexBoard'</code>.</li> <li>Board properties<ul> <li><code>board.width</code> : Board width in tiles.</li> <li><code>board.height</code> : Board height in tiles.</li> <li><code>board.grid.x</code>, <code>board.grid.y</code> : World position of tile (0, 0)</li> <li><code>board.grid.cellWidth</code>, <code>board.grid.cellHeight</code> : The width/height of the cell, in pixels.</li> </ul> </li> <li>Chess properties<ul> <li><code>chess.symbols</code> : An array of possible symbols, or a callback to return a symbol. See Generate symbol</li> <li><code>chess.create</code>, <code>chess.scope</code> : Callback of creating chess object.</li> <li><code>chess.moveTo.speed</code> : Constant moving speed of chess, in pixel per-second.</li> </ul> </li> <li>Custom actions<ul> <li><code>select1Action</code> : Custom select first chess Action</li> <li><code>select2Action</code> : Custom select second chess Action</li> <li><code>swapAction</code> : Custon swap action</li> <li><code>undoSwapAction</code> : Custon undo-swap action</li> <li><code>eliminatingAction</code> : Custon eliminating action</li> <li><code>fallingAction</code> : Custon falling action</li> </ul> </li> <li>Touch input<ul> <li><code>input</code> : Set <code>true</code> to register default touch input logic.</li> </ul> </li> <li>Mask<ul> <li><code>mask</code> :<ul> <li><code>false</code> : No mask. Default behavior.</li> <li><code>true</code> : Mask invisible upper rows.<ol> <li>Create an internal layer</li> <li>Mask this internal layer.</li> </ol> </li> </ul> </li> </ul> </li> </ul>"},{"location":"board-bejeweled/#board-height","title":"Board height","text":"<p>Board is separated into two parts: upper and bottom</p> <ul> <li>Bottom : Visible N rows, to swap chess and run matching.</li> <li>Upper : Invisible N rows, chess in these rows will move down, to fill bottom rows.</li> </ul> <p>For example, if amount of visible rows is <code>10</code>, <code>board.height</code> should set to <code>20</code>.</p>"},{"location":"board-bejeweled/#generate-symbol","title":"Generate symbol","text":"<p>Symbols are declared in property <code>chess.symbols</code> in a symbol array like <code>[0, 1, 2, 3, 4, 5]</code>, or a callback to return a symbol. The callback also use <code>chess.scope</code> as the scope.</p> <pre><code>function(board, tileX, tileY, excluded) {\nreturn symbol\n}\n</code></pre> <ul> <li><code>excluded</code> : <code>undefined</code> or a symbol array. Don't return these symbols.</li> </ul>"},{"location":"board-bejeweled/#create-chess-object","title":"Create chess object","text":"<p>Return a game object from a callback.</p> <pre><code>function(board) {\n// Create Game object (Image, Sprite, or Shape)\nvar scene = board.scene;\nvar gameObject = scene.add.sprite(0, 0, textureKey, frame);\n// Initial 'symbol' value\ngameObject.setData('symbol', undefined);\n// Add data changed event of 'symbol` key\ngameObject.data.events.on('changedata_symbol', function (gameObject, value, previousValue) {\n// Change the appearance of game object via new symbol value\ngameObject.setFrame(newFrame);\n});\nreturn gameObject;\n}\n</code></pre> <p>Each chess has a <code>symbol</code> value stored in <code>'symbol'</code> key in private data. Add data changed event of <code>'symbol'</code> key to change the appearance of game object via new symbol value.</p>"},{"location":"board-bejeweled/#states","title":"States","text":"<pre><code>graph TD\n\nStart((Start)) --&gt; Select1Start[select1-start]\n\nsubgraph Select 1 states\n  Select1Start --&gt; |Input| Select1[select1]\nend\n\nSelect1 --&gt; select2Start[select2-start]\n\nsubgraph Select 2 states\n  select2Start --&gt; |Input| select2[select2]\nend\n\nselect2Start --&gt; Select1Start\nselect2 --&gt; Swap[swap]\nSwap --&gt; MatchStart[match-start]\n\nsubgraph Match states\n  MatchStart --&gt; Match[match]\n  Match --&gt; Eliminate[eliminate]\n  Match --&gt; MatchEnd[match-end]\n  Eliminate --&gt; Fall[fall]\n  Fall --&gt; Fill[fill]\n  Fill --&gt; Match\nend\n\nMatchEnd --&gt; UndoSwap[undo-swap]\nUndoSwap --&gt; Select1Start\nMatchEnd --&gt; Select1Start</code></pre>"},{"location":"board-bejeweled/#select-first-chess","title":"Select first chess","text":"<p>Fire <code>'select1'</code> event</p> <pre><code>bejeweled.on('select1', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-select-first-chess-action","title":"Custom Select first chess Action","text":"<p>Default select action:</p> <pre><code>function (chess, board, bejeweled) {\n// Do nothing\n}\n</code></pre>"},{"location":"board-bejeweled/#select-second-chess","title":"Select second chess","text":"<p>Fire <code>'select2'</code> event</p> <pre><code>bejeweled.on('select2', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.<ul> <li>Selected first chess :      <pre><code>var chess = bejeweled.getSelectedChess1();\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-bejeweled/#custom-select-second-chess-action","title":"Custom Select second chess Action","text":"<p>Default select action: The same as Select first chess Action</p>"},{"location":"board-bejeweled/#swap-selected-chess","title":"Swap selected chess","text":"<p>Fire <code>'swap'</code> event</p> <pre><code>bejeweled.on('swap', function(selectedChess1, selectedChess2, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-swap-action","title":"Custom Swap Action","text":"<p>Default swap action:</p> <pre><code>function (chess1, chess2, board, bejeweled) {\nvar tileXYZ1 = board.chessToTileXYZ(chess1);\nvar tileXYZ2 = board.chessToTileXYZ(chess2);\nvar tileX1 = tileXYZ1.x,\ntileY1 = tileXYZ1.y,\ntileX2 = tileXYZ2.x,\ntileY2 = tileXYZ2.y,\ntileZ = tileXYZ1.z;\n\n// TileZ of chess1 and chess2 are the same, change tileZ of chess2 to a different value\nboard.moveChess(chess2, tileX2, tileY2, `#${tileZ}`, false);\n\n// Move chess1 to tileXYZ2, chess2 to tileXYZ1\nvar moveTo1 = bejeweled.getChessMoveTo(chess1);\nvar moveTo2 = bejeweled.getChessMoveTo(chess2);\nmoveTo1.moveTo(tileX2, tileY2);\nmoveTo2.moveTo(tileX1, tileY1);\n\n// Change tileZ of chess2 back\nboard.moveChess(chess2, tileX1, tileY1, tileZ, false);\n\nif (moveTo1.isRunning) {\nbejeweled.waitEvent(moveTo1, 'complete');\n}\nif (moveTo2.isRunning) {\nbejeweled.waitEvent(moveTo2, 'complete');\n}\n};\n</code></pre> <ul> <li><code>bejeweled.getChessMoveTo(chess)</code> : Get moveTo behavior of a chess.</li> <li><code>bejeweled.waitEvent(moveTo, 'complete')</code> : Wait 'complete' event of this moveTo behavior.</li> </ul>"},{"location":"board-bejeweled/#match-start","title":"Match start","text":"<p>Fire <code>'match-start'</code> event</p> <pre><code>bejeweled.on('match-start', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#match-lines","title":"Match lines","text":"<p>Fire <code>'match'</code> event</p> <pre><code>bejeweled.on('match', function(lines, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>lines</code> : An array of matched lines, each line is a built-in Set object.<ul> <li>Length of each line (<code>lines[i].size</code>) could be 5, 4, or 3.</li> <li><code>lines[i].entries</code> : An array of chess (Game Object) in a matched line.</li> <li>Get cross chess of two lines via <code>lineA.intersect(lineB)</code>.</li> <li>All chess game objects in matched lines will be eliminated in next stage. <ul> <li>Add/remove chess game object in a line.</li> <li>Add new line/remove a line in <code>lines</code> array to change the eliminated targets.</li> </ul> </li> </ul> </li> <li><code>board</code> : Board object.<ul> <li>Get tile position <code>{x,y,z}</code> of a chess game object via     <pre><code>var tileXYZ = board.chessToTileXYZ(gameObject);\n//var tileXYZ = gameObject.rexChess.tileXYZ;\n</code></pre></li> <li>Get chess game object of a tile position <code>{x,y,z}</code> via     <pre><code>var gameObject = board.tileXYZToChess(tileX, tileY, tileZ);\n</code></pre></li> <li>Get array of neighbor chess of a chess game object via     <pre><code>var gameObjects = board.getNeighborChess(chess, null);\n</code></pre></li> </ul> </li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#eliminating-chess","title":"Eliminating chess","text":"<p>Fire <code>'eliminate'</code> event</p> <pre><code>bejeweled.on('eliminate', function(chessArray, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>chessArray</code> : An array of chess (Game Object) to be eliminated.</li> <li><code>board</code> : Board object</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-eliminating-action","title":"Custom Eliminating Action","text":"<p>Default fliminating action:</p> <pre><code>function (chessArray, board, bejeweled) {\nconst duration = 500; //ms\nfor (var i = 0, cnt = chessArray.length; i &lt; cnt; i++) {\nvar fade = FadeOutDestroy(chessArray[i], duration);\nbejeweled.waitEvent(fade, 'complete');\n}\n}\n</code></pre> <ul> <li><code>bejeweled.waitEvent(fade, 'complete')</code> : Wait 'complete' event of this fade-out-destroy behavior.</li> </ul>"},{"location":"board-bejeweled/#falling-chess","title":"Falling chess","text":"<p>Fire <code>'fall'</code> event</p> <pre><code>bejeweled.on('fall', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-falling-action","title":"Custom Falling Action","text":"<p>Default falling action:</p> <pre><code>function (board, bejeweled) {\nvar tileZ = bejeweled.chessTileZ,\nchess, moveTo;\n\nfor (var tileY = (board.height - 1); tileY &gt;= 0; tileY--) { // bottom to top\nfor (var tileX = 0, cnt = board.width; tileX &lt; cnt; tileX++) { // left to right\nchess = board.tileXYZToChess(tileX, tileY, tileZ);\nif (chess === null) {\ncontinue;\n}\nmoveTo = bejeweled.getChessMoveTo(chess);\ndo {\nmoveTo.moveToward(1);\n} while (moveTo.lastMoveResult)\nif (moveTo.isRunning) {\nbejeweled.waitEvent(moveTo, 'complete');\n}\n}\n}\n}\n</code></pre> <ul> <li><code>bejeweled.getChessMoveTo(chess)</code> : Get moveTo behavior of a chess.</li> <li><code>bejeweled.waitEvent(moveTo, 'complete')</code> : Wait 'complete' event of this moveTo behavior.</li> </ul>"},{"location":"board-bejeweled/#fill-chess","title":"Fill chess","text":"<p>Fire <code>'fill'</code> event</p> <pre><code>bejeweled.on('fill', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#match-end","title":"Match end","text":"<p>Fire <code>'match-end'</code> event</p> <pre><code>bejeweled.on('match-end', function(board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#undo-swap-selected-chess","title":"Undo-swap selected chess","text":"<p>Fire <code>'undo-swap'</code> event</p> <pre><code>bejeweled.on('undo-swap', function(selectedChess1, selectedChess2, board, bejeweled) {\n\n}, scope);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>bejeweled</code> : This bejeweled object.</li> </ul>"},{"location":"board-bejeweled/#custom-undo-swap-action","title":"Custom Undo-Swap Action","text":"<p>Default undo-swap action : Equal to Swap action</p>"},{"location":"board-bejeweled/#start-gameplay","title":"Start gameplay","text":"<pre><code>bejeweled.start();\n</code></pre>"},{"location":"board-bejeweled/#input-control","title":"Input control","text":""},{"location":"board-bejeweled/#default-input","title":"Default input","text":"<ol> <li>Enable default input control     <pre><code>var bejeweled = new Bejeweled(scene, {\n// ...\ninput: true\n});\n</code></pre></li> <li>Enable/disable temporarily.<ul> <li>Enable     <pre><code>bejeweled.setInputEnable();\n</code></pre></li> <li>Disable     <pre><code>bejeweled.setInputEnable(false);\n</code></pre></li> </ul> </li> </ol>"},{"location":"board-bejeweled/#custom-input","title":"Custom input","text":"<ol> <li>Discard default input control     <pre><code>var bejeweled = new Bejeweled(scene, {\n// ...\ninput: false\n});\n</code></pre></li> <li>Add custom input logic like     <pre><code>scene.input\n.on('pointerdown', function (pointer) {\nvar chess = bejeweled.worldXYToChess(pointer.worldX, pointer.worldY);\nif (chess) {\nbejeweled.selectChess1(chess);\n}\n}, scene)\n.on('pointermove', function (pointer) {\nif (!pointer.isDown) {\nreturn;\n}\nvar chess = bejeweled.worldXYToChess(pointer.worldX, pointer.worldY);\nif (chess &amp;&amp; (chess !== this.bejeweled.getSelectedChess1())) {\nbejeweled.selectChess2(chess);\n}\n}, scene);\n</code></pre><ul> <li>Invoke <code>bejeweled.selectChess1(chess)</code>, and <code>bejeweled.selectChess2(chess)</code> under custom logic.</li> </ul> </li> </ol> <p>Helper methods</p> <ul> <li>Get chess via worldXY position     <pre><code>var chess = bejeweled.worldXYToChess(worldX, worldY);\n</code></pre></li> <li>Get chess via tileXY position     <pre><code>var chess = bejeweled.tileXYToChess(tileX, tileY);\n</code></pre></li> <li>Get neighbor chess via angle     <pre><code>var chess2 = bejeweled.getNeighborChessAtAngle(chess1, angle);\n</code></pre><ul> <li><code>chess1</code> : Chess object, or tileXY position <code>{x, y}</code>.</li> <li><code>angle</code> : Angle in radius.</li> </ul> </li> <li>Get neighbor chess via direction     <pre><code>var chess2 = bejeweled.getNeighborChessAtDirection(chess1, direction);\n</code></pre><ul> <li><code>chess1</code> : Chess object, or tileXY position <code>{x, y}</code>.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-bejeweled/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = bejeweled.getData(key);\nvar values = bejeweled.getData(keys); // keys: an array of keys\nvar value = bejeweled.data.values[key];\n</code></pre></li> <li>Set     <pre><code>bejeweled.setData(key, value);\nbejeweled.setData(obj); // obj: {key0:value0, key1:value1, ...}\nbejeweled.data.values[key] = value;\nbejeweled.data.values[key] += inc;\n</code></pre></li> <li>Enable     <pre><code>bejeweled.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>bejeweled.on('setdata', function(bejeweled, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>bejeweled.on('changedata', function(bejeweled, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>bejeweled.on('changedata-' + key, function(bejeweled, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"board-bejeweled/#misc","title":"Misc","text":"<ul> <li>Board instance     <pre><code>var board = bejeweled.getBoard();\n</code></pre><ul> <li><code>board</code> : Board instance.</li> </ul> </li> <li>Match instance     <pre><code>var match = bejeweled.getMatch();\n</code></pre><ul> <li><code>match</code> : Match instance.</li> </ul> </li> </ul>"},{"location":"board-chessdata/","title":"Chess data","text":""},{"location":"board-chessdata/#introduction","title":"Introduction","text":"<p>Properties of chess, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-chessdata/#usage","title":"Usage","text":""},{"location":"board-chessdata/#add-chess-data-object","title":"Add chess data object","text":"<p>Chess data will be added to game object via <code>gameObject.rexChess</code> once adding this game object to board, or attach any chess behavior.</p>"},{"location":"board-chessdata/#get-chess-data","title":"Get chess data","text":"<pre><code>var chessData = gameObject.rexChess;\n</code></pre>"},{"location":"board-chessdata/#set-tile-z","title":"Set tile Z","text":"<pre><code>gameObject.rexChess.setTileZ(tileZ);\n</code></pre> <p><code>(tileX, tileY)</code> won't be changed.</p>"},{"location":"board-chessdata/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXYZ = gameObject.rexChess.tileXYZ;\n</code></pre> <ul> <li><code>tileXYZ</code> : Tile position <code>{x,y,z}</code>, return <code>null</code> if this chess is not added to any board.</li> </ul>"},{"location":"board-chessdata/#get-board","title":"Get board","text":"<pre><code>var board = gameObject.rexChess.board;\n</code></pre> <ul> <li><code>board</code> : Board object, or <code>null</code> if this chess is not added to any board.</li> </ul> <p>See also</p>"},{"location":"board-chessdata/#blocker","title":"Blocker","text":"<ul> <li>Set     <pre><code>gameObject.rexChess.setBlocker();\n</code></pre></li> <li>Disable     <pre><code>gameObject.rexChess.setBlocker(false);\n</code></pre></li> <li>Get     <pre><code>var blocker = gameObject.rexChess.blocker;\n</code></pre></li> </ul>"},{"location":"board-fieldofview/","title":"Field of view","text":""},{"location":"board-fieldofview/#introduction","title":"Introduction","text":"<p>Visible testing, to find field of view, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-fieldofview/#live-demos","title":"Live demos","text":"<ul> <li>Field of view</li> <li>Line of sigh</li> <li>Filter visible chess</li> <li>Pre-test callback</li> </ul>"},{"location":"board-fieldofview/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-fieldofview/#install-plugin","title":"Install plugin","text":""},{"location":"board-fieldofview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FieldOfView } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add field-of-view object     <pre><code>var fieldOfView = new FieldOfView(chess, config);\n</code></pre></li> </ul>"},{"location":"board-fieldofview/#create-instance","title":"Create instance","text":"<pre><code>var fieldOfView = scene.rexBoard.add.fieldOfView(chess, {\n// face: 0,\n// cone: undefined,\n// coneMode: 0,\n// perspective: false,\n\n// ** pre-test **\n// occupiedTest: false,\n// blockerTest: false,\n// preTestCallback: undefined,\n// preTestCallbackScope: undefined,\n\n// ** cost **\n// costCallback: undefined,\n// costCallbackScope: undefined,\n// cost: undefined,   // constant cost\n\n// debug: {\n//     graphics: undefined,\n//     visibleLineColor: 0x00ff00,\n//     invisibleLineColor: 0xff0000,\n//     log: false,\n// }\n})\n</code></pre> <ul> <li><code>face</code> : Face of chess.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>cone</code> : View of cone. Tile position or chess which not in view of cone will be invisible.<ul> <li><code>undefined</code> : Ignore this feature</li> </ul> </li> <li><code>coneMode</code> : Unit of cone , in direction or angle.<ul> <li><code>'direction'</code>, or <code>0</code> : Cone in directions.     For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set     <pre><code>face : 0,\ncone : 2,\nconeMode: 0\n</code></pre></li> <li><code>'angle'</code>, or <code>1</code> : Cone in angle.     For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set     <pre><code>face : 0,\ncone : 120,\nconeMode: 1\n</code></pre></li> </ul> </li> <li><code>perspective</code> : <ul> <li><code>false</code> : Test visible until blocked tiles. Default behavior.</li> <li><code>true</code> : Test visible until out-of-board. Will test cross any blocked (invisible) tile.</li> </ul> </li> <li>Pre-test : Test tiles on visible path.<ul> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property.</li> <li><code>preTestCallback</code>, <code>preTestCallbackScope</code> : Custom pre-test function, return <code>false</code> to discard cost function.     <pre><code>function(tileXYArray, visiblePoints, fieldOfView) {\n// return false;\n}\n</code></pre><ul> <li><code>tileXYArray[0]</code> is current tileXY position of chess.</li> </ul> </li> </ul> </li> <li>Cost function of each tile on visible path<ul> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback     <pre><code>function(curTile, fieldOfView, tileXYArray) {\nreturn cost;\n}\n</code></pre><ul> <li>Cost of blocker : <code>fieldOfView.BLOCKER</code>.</li> <li><code>curTile</code> : Currest testing tileXY.</li> <li><code>tileXYArray</code> : A read only  tileXY array of sight path.</li> </ul> </li> </ul> </li> <li><code>debug</code> :<ul> <li><code>debug.graphics</code> : A graphics object for showing debug messages.</li> <li><code>debug.visibleLineColor</code> : Color of visible line. Set <code>undefined</code> to not draw any line.</li> <li><code>debug.invisibleLineColor</code> : Color of invisible line. Set <code>undefined</code> to not draw any line.</li> </ul> </li> </ul> <p>Note</p> <p>Blocker is visible, but tiles behind blocker are invisible.</p>"},{"location":"board-fieldofview/#set-pre-test-function","title":"Set pre-test function","text":"<pre><code>fieldOfView.setPreTestFunction(callback, scope);\n</code></pre> <ul> <li><code>callback</code> <pre><code>var callback = function(tileXYArray, visiblePoints, fieldOfView) {\nreturn false;\n}\n</code></pre><ul> <li><code>tileXYArray[0]</code> is current tileXY position of chess.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>fieldOfView.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>fieldOfView.setCostFunction(callback, scope);\n</code></pre><ul> <li><code>callback</code> <pre><code>var callback = function(curTile, fieldOfView, tileXYArray) {\nreturn cost;\n}\n</code></pre><ul> <li>Cost of blocker : <code>fieldOfView.BLOCKER</code></li> <li><code>curTile</code> : Currest testing tileXY.</li> <li><code>tileXYArray</code> : A read only  tileXY array of sight path.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-fieldofview/#is-tilexychess-visible","title":"Is tileXY/chess visible","text":"<pre><code>var isVisible = fieldOfView.isInLOS(chess);\n// var isVisible = fieldOfView.isInLOS(chess, visiblePoints);\n// var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY);\n</code></pre> <ul> <li><code>chess</code> : Chess object or tileXY</li> <li><code>visiblePoints</code><ul> <li><code>fieldOfView.INFINITY</code> (undefined) : Infinity visible points. Default value.</li> </ul> </li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#get-tilexy-array-in-field-of-view","title":"Get tileXY array in field of view","text":"<pre><code>var tileXYArray = fieldOfView.findFOV();\n// var tileXYArray = fieldOfView.findFOV(visiblePoints);\n// var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY);\n// var out = fieldOfView.findFOV(visiblePoints, out);\n// var out = fieldOfView.findFOV(visiblePoints, originTileXY, out);\n</code></pre> <ul> <li><code>visiblePoints</code><ul> <li><code>fieldOfView.INFINITY</code> (undefined) : Infinity visible points. Default value.</li> </ul> </li> <li><code>out</code> : Returned tileXY array.</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#filter-visible-tilexy-array","title":"Filter visible tileXY array","text":"<ul> <li>Filter visible tileXY array     <pre><code>var out = fieldOfView.LOS(chessArray);\n// var out = fieldOfView.LOS(chessArray, originTileXY);\n// var out = fieldOfView.LOS(chessArray, out);\n// var out = fieldOfView.LOS(chessArray, originTileXY, out);\n</code></pre><ul> <li><code>chessArray</code> : Array of chess object or tileXY</li> <li><code>out</code> : Array of visible chess object or tileXY</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul> </li> <li>Filter visible tileXY array with visible points     <pre><code>var out = fieldOfView.LOS(chessArray, visiblePoints);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, out);\n// var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out);\n</code></pre><ul> <li><code>chessArray</code> : Array of chess object or tileXY</li> <li><code>out</code> : Array of visible chess object or tileXY</li> <li><code>originTileXY</code> : Put chess at this tileXY position for visible testing temporary.<ul> <li><code>undefined</code> : Use current tileXY position for visible testing.</li> </ul> </li> </ul> </li> </ul>"},{"location":"board-fieldofview/#face","title":"Face","text":"<p>Face direction</p> <ul> <li>Get     <pre><code>var face = fieldOfView.face;\n</code></pre></li> <li>Set     <pre><code>fieldOfView.setFace(direction);\n</code></pre>     or     <pre><code>fieldOfView.face = direction;\n// fieldOfView.face ++;\n</code></pre></li> <li><code>face</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul>"},{"location":"board-fieldofview/#debug","title":"Debug","text":"<ul> <li>Clear debug graphics     <pre><code>fieldOfView.clearDebugGraphics();\n</code></pre></li> <li>Set color of lines     <pre><code>fieldOfView.setDebugLineColor(visibleLineColor, invisibleLineColor);\n</code></pre><ul> <li><code>visibleLineColor</code>, <code>invisibleLineColor</code> : Set <code>undefined</code> to not draw any line.</li> </ul> </li> </ul>"},{"location":"board-hexagongrid/","title":"Hexagon","text":""},{"location":"board-hexagongrid/#introduction","title":"Introduction","text":"<p>Hexagon grid object of Board system.</p> <ul> <li>Author: Rex</li> <li>Grid object of board</li> </ul>"},{"location":"board-hexagongrid/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-hexagongrid/#create-instance","title":"Create instance","text":"<pre><code>var grid = scene.rexBoard.add.hexagonGrid({\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\n// size: undefined,\nstaggeraxis: 1,\nstaggerindex: 1\n});\n</code></pre> <p>or</p> <pre><code>// import { HexagonGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\nvar grid = new HexagonGrid(config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position of origin tile (i.e. tileX = 0, tileY = 0)</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>size</code> : Distance between center to each corner. Get <code>cellWidth</code> and <code>cellHeight</code> from <code>size</code> if this parameter is not <code>undefined</code>.</li> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#world-position-of-tile-0-0","title":"World position of tile (0, 0)","text":"<ul> <li>Get     <pre><code>var worldX = grid.x;\nvar worldY = grid.y;\n</code></pre></li> <li>Set     <pre><code>grid.setOriginPosition(worldX, worldY);\n</code></pre>     or     <pre><code>grid.x = worldX;\ngrid.y = worldY;\n</code></pre></li> </ul>"},{"location":"board-hexagongrid/#cell-size","title":"Cell size","text":"<ul> <li>Get     <pre><code>var width = grid.width;\nvar height = grid.height;\n</code></pre></li> <li>Set     <pre><code>grid.setCellSize(width, height);\n</code></pre>     or     <pre><code>grid.width = width;\ngrid.height = height;\n</code></pre>     or     <pre><code>grid.setCellRadius(size);\n</code></pre><ul> <li><code>size</code> : Distance between center to each corner.</li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#grid-type","title":"Grid type","text":"<ul> <li>Get     <pre><code>var staggeraxis = grid.staggeraxis;\nvar staggerindex = grid.staggerindex;\n</code></pre></li> <li>Set     <pre><code>grid.setType(staggeraxis, staggerindex);\n</code></pre><ul> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-hexagongrid/#get-world-position","title":"Get world position","text":"<pre><code>var worldXY = grid.getWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = grid.getWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board-hexagongrid/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXY = grid.getTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = grid.getTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board-hexagongrid/#directions","title":"Directions","text":"<ul> <li>staggeraxis = <code>0</code>/<code>y</code><ul> <li><code>0</code> : Down-right</li> <li><code>1</code> : Down</li> <li><code>2</code> : Down-left</li> <li><code>3</code> : Up-left</li> <li><code>4</code> : Up</li> <li><code>5</code> : Up-right</li> </ul> </li> <li>staggeraxis = <code>1</code>/<code>x</code><ul> <li><code>0</code> : Right</li> <li><code>1</code> : Down-right</li> <li><code>2</code> : Down-left</li> <li><code>3</code> : Left</li> <li><code>4</code> : Up-left</li> <li><code>5</code> : Up-right</li> </ul> </li> </ul>"},{"location":"board-hexagonmap/","title":"Hexagon map","text":""},{"location":"board-hexagonmap/#introduction","title":"Introduction","text":"<p>Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. </p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-hexagonmap/#live-demos","title":"Live demos","text":"<ul> <li>Hexagon</li> </ul>"},{"location":"board-hexagonmap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-hexagonmap/#install-plugin","title":"Install plugin","text":""},{"location":"board-hexagonmap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = scene.rexBoard.add.hexagonMap.hexagon(board, radius);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = scene.rexBoard.add.hexagonMap.hexagon(board, radius);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = scene.rexBoard.add.hexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { HexagonMap } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create tile positions     <pre><code>var tileXYArray = HexagonMap.hexagon(board, radius);\nvar tileXYArray = HexagonMap.parallelogram(board, type, width, height);\nvar tileXYArray = HexagonMap.triangle(board, type, height);\n</code></pre></li> </ul>"},{"location":"board-hexagonmap/#create-tile-positions","title":"Create tile positions","text":""},{"location":"board-hexagonmap/#hexagon","title":"Hexagon","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.hexagon(board, radius);\n// var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>radius</code> : Radius in tile count.</li> </ul> staggeraxis y x"},{"location":"board-hexagonmap/#parallelogram","title":"Parallelogram","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height);\n// var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>width</code>, <code>height</code> : Size of parallelogram</li> </ul> type\\staggeraxis y x 0 1 2"},{"location":"board-hexagonmap/#triangle","title":"Triangle","text":"<pre><code>var tileXYArray = scene.rexBoard.hexagonMap.triangle(board, type, height);\n// var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x, y}</code>.</li> <li><code>board</code> : Board object.</li> <li><code>height</code> : Size of Triangle</li> </ul> type\\staggeraxis y x 0 1"},{"location":"board-hexagonmap/#retrieve-tile-positions","title":"Retrieve tile positions","text":"<ol> <li>Offset all of tile positions to <code>(0, 0)</code>, and set board size to fit these tile positions.     <pre><code>var tileXYArray = board.fit(tileXYArray);\n</code></pre></li> <li>Retrieve tile positions     <pre><code>var tileXY;\nfor(var i = 0, cnt = tileXYArray.length; i &lt; cnt; i++) {\ntileXY = tileXYArray[i];\n// ...\n}\n</code></pre></li> </ol>"},{"location":"board-match/","title":"Match","text":""},{"location":"board-match/#introduction","title":"Introduction","text":"<p>Get matched chess in lines, or neighbors grouping.</p> <ul> <li>Author: Rex</li> <li>Application of Board system</li> </ul>"},{"location":"board-match/#live-demos","title":"Live demos","text":"<ul> <li>Match line</li> <li>Match neighbors</li> </ul>"},{"location":"board-match/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-match/#install-plugin","title":"Install plugin","text":""},{"location":"board-match/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add match object     <pre><code>var match = scene.rexBoard.add.match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add match object     <pre><code>var match = scene.rexBoard.add.match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Match } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add match object     <pre><code>var match = new Match(config);\n</code></pre></li> </ul>"},{"location":"board-match/#add-match-object","title":"Add match object","text":"<pre><code>var match = scene.rexBoard.add.match({\nboard: board,\n// wildcard: undefined\n// dirMask: undefined\n});\n</code></pre> <ul> <li><code>board</code> : A board object</li> <li><code>wildcard</code> : A string or a number</li> <li><code>dirMask</code> : Enable/Disable matching at directions, all directions are enbale by default.<ul> <li>Quad grid, 4 directions     <pre><code>{\n0: true,  // set false to disable left/right matching\n1: true   // set false to disable up/down matching\n}\n</code></pre></li> <li>Quad grid, 8 directions     <pre><code>{\n0: true,  // set false to disable left/right matching\n1: true,  // set false to disable up/down matching\n4: true,  // set false to disable left-down/right-up matching\n5: true   // set false to disable right-down/left-up matching\n}\n</code></pre></li> <li>Hexagon grid <pre><code>{\n0: true,\n1: true,\n3: true\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-match/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyMatch extends RexPlugins.Board.Match {\nconstructor(config) {\nsuper(config);\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var match = new MyMatch(config);\n</code></pre></li> </ul>"},{"location":"board-match/#set-board","title":"Set board","text":"<p>Board object could be assigned later.</p> <pre><code>match.setBoard(board);\n</code></pre>"},{"location":"board-match/#update-symbols","title":"Update symbols","text":"<p>Each tile position (tileX, tileY)  has a symbol.</p>"},{"location":"board-match/#update-all-symbols-in-board","title":"Update all symbols in board","text":"<pre><code>match.refreshSymbols(function(tileXY, board) {\n// var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0);\n// if (chess == null) { return null; }\nreturn symbol;\n}, scope);\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code></li> <li><code>board</code> : Board object</li> <li><code>symbol</code> : A string or a number<ul> <li><code>null</code> : No symbol</li> </ul> </li> </ul>"},{"location":"board-match/#updata-a-symbol","title":"Updata a symbol","text":"<pre><code>match.setSymbol(tileX, tileY, symbol);\n</code></pre>"},{"location":"board-match/#get-symbol","title":"Get symbol","text":"<pre><code>var symbol = match.getSymbol(tileX, tileY);\n</code></pre>"},{"location":"board-match/#for-each-symbol-cahce","title":"For each symbol cahce","text":"<pre><code>match.forEach(function(tileXY, symbol, board) {\n// return true; // Break for each loop\n}, scope)\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code></li> <li><code>symbol</code> : A string or a number<ul> <li><code>null</code> : No symbol</li> </ul> </li> <li><code>board</code> : Board object</li> </ul>"},{"location":"board-match/#wildcard-symbol","title":"Wildcard symbol","text":"<ul> <li>Set     <pre><code>match.setWildcard(symbol);\n</code></pre>     or     <pre><code>match.wildcard = symbol;\n</code></pre></li> <li>Get     <pre><code>var wildcard = match.wildcard;\n</code></pre></li> </ul>"},{"location":"board-match/#directions-mask","title":"Directions mask","text":"<p>Enable/Disable matching at directions, all directions are enbale by default.</p> <pre><code>match.setDirMask(dir, value);\n</code></pre> <ul> <li><code>dir</code> :<ul> <li>Quad grid, 4 directions : <code>0</code>, <code>1</code></li> <li>Quad grid, 8 directions : <code>0</code>, <code>1</code>, <code>4</code>, <code>5</code></li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code></li> </ul> </li> <li><code>value</code> : <code>true</code> or <code>false</code></li> </ul>"},{"location":"board-match/#line-grouping","title":"Line grouping","text":""},{"location":"board-match/#match-n","title":"Match-N","text":"<pre><code>match.match(n, function (result, board) {\n// var chess = board.tileXYArrayToChess(result.tileXY, 0);\n// GroupCall(chess, function (chess) { chess.setScale(0.8); });\n\n// return true; // Break for each loop\n}, scope);\n</code></pre> <ul> <li><code>n</code> : A number, to get matched chess with n equal symbols</li> <li><code>result</code> : A group of chess     <pre><code>{\ntileXY: [],\ndirection: 0\npattern: symbol\n}\n</code></pre><ul> <li><code>tileXY</code> : An array of tile positions <code>{x, y}</code></li> <li><code>direction</code> : Direction of this chess group<ul> <li><code>0</code>, <code>1</code>, for quad grid with 4 directions</li> <li><code>0</code>, <code>1</code>, <code>4</code>, <code>5</code>, for quad grid with 8 directions</li> <li><code>0</code>, <code>1</code>, <code>2</code>, for hexagon grid</li> </ul> </li> <li><code>pattern</code> : Matched symbol</li> </ul> </li> <li><code>board</code> : Board object</li> </ul>"},{"location":"board-match/#any-match-n","title":"Any match-N","text":"<pre><code>var hasAnyMatchN = match.anyMatch(n);\n</code></pre>"},{"location":"board-match/#match-pattern","title":"Match pattern","text":"<pre><code>match.match(pattern, function (result, board) {\n// var chess = board.tileXYArrayToChess(result.tileXY, 0);\n// GroupCall(chess, function (chess) { chess.setScale(0.8); });\n}, scope);\n</code></pre> <ul> <li><code>pattern</code> : A list of symbols</li> </ul>"},{"location":"board-match/#any-match-pattern","title":"Any match pattern","text":"<pre><code>var hasAnyMatchN = match.anyMatch(pattern);\n</code></pre>"},{"location":"board-match/#neighbors-grouping","title":"Neighbors grouping","text":"<ul> <li>Group by neighbors with the same symbol     <pre><code>tileXYArray = match.group(startTileX, startTileY);\n// out = match.group(startTileX, startTileY, out);\n</code></pre><ul> <li><code>startTileX</code>, <code>startTileY</code> : Tile position of grouping, to group neighbors with the same symbol. Can't start from <code>null</code>, <code>undefined</code> or wildcard symbol.</li> </ul> </li> </ul>"},{"location":"board-miniboard/","title":"Mini board","text":""},{"location":"board-miniboard/#introduction","title":"Introduction","text":"<p>Chess Container, to rotate/mirror/drag chess together.</p> <ul> <li>Author: Rex</li> <li>Container Game object of chess group</li> </ul>"},{"location":"board-miniboard/#live-demos","title":"Live demos","text":"<ul> <li>Group 4</li> </ul>"},{"location":"board-miniboard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-miniboard/#install-plugin","title":"Install plugin","text":""},{"location":"board-miniboard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add container     <pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add container     <pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { MiniBoard } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add match object     <pre><code>var miniBoard = new MiniBoard(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#add-container","title":"Add Container","text":"<pre><code>var miniBoard = scene.rexBoard.add.miniBoard(x, y, {\ngrid: grid,\ndraggable: undefined,\n});\n</code></pre> <ul> <li><code>grid</code> : Create board object first, then get grid object via <code>board.grid</code>.<ul> <li><code>gridType</code> :<ul> <li><code>'quadGrid'</code> : Quad grid</li> <li><code>'hexagonGrid'</code> : hexagon grid</li> </ul> </li> </ul> </li> <li><code>draggable</code> : Set <code>true</code> to enable dragging events</li> </ul>"},{"location":"board-miniboard/#add-chess","title":"Add chess","text":"<pre><code>miniBoard.addChess(gameObject, tileX, tileY, tileZ);\n</code></pre> <ul> <li><code>chess</code> : A game object.</li> <li><code>tileX</code> , <code>tileY</code> , <code>tileZ</code> : Tile position.<ul> <li><code>tileX</code> , <code>tileY</code> : Number.</li> <li><code>tileZ</code> : Number or string.</li> </ul> </li> </ul> <p>Chess and tile position</p> <ul> <li>Any chess has a (tileX, tileY, tileZ) index</li> <li>Any (tileX, tileY, tileZ) index contains only 1 chess.</li> <li>(tileX, tileY) could have more then 1 chess with different tileZ index.</li> <li>tileZ is not equal to <code>depth</code>.</li> </ul> <p>These world properties of chess will be changed with container.</p> <ul> <li>Position/Angle/Scale</li> <li>Visible</li> <li>Alpha</li> <li>Scroll factor</li> <li>Mask</li> </ul>"},{"location":"board-miniboard/#remove-chess","title":"Remove chess","text":"<ul> <li>Remove chess object from board     <pre><code>miniBoard.removeChess(chess, null, null, null, destroy);\n</code></pre><ul> <li><code>chess</code> : A game object</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove chess at (tileX, tileY, tileZ) from board     <pre><code>miniBoard.removeChess(null, tileX, tileY, tileZ, destroy);\n</code></pre><ul> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove all chess     <pre><code>miniBoard.removeAllChess(destroy);\n</code></pre><ul> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> </ul>"},{"location":"board-miniboard/#set-origin","title":"Set origin","text":"<ul> <li>Set origin tileXY by offset tileXY of all chess.     <pre><code>miniBoard.setOrigin(origin);\n// miniBoard.setOrigin(originX, originY);\n</code></pre><ul> <li><code>originX</code>, <code>originY</code>: 0~1. <ul> <li><code>0</code> : Left/top.</li> <li><code>0.5</code> : Center. </li> <li><code>1</code> : Right/bottom.</li> </ul> </li> </ul> </li> <li>Set origin tileXY to center by offset tileXY of all chess.     <pre><code>miniBoard.setOrigin();\n// miniBoard.setOrigin('center');\n</code></pre></li> <li>Set origin tileXY to top-left.      <pre><code>miniBoard.setOrigin('top-left');\n</code></pre></li> </ul>"},{"location":"board-miniboard/#main-board","title":"Main board","text":"<p>Put chess to a main-board (Board object) with the same tile position in mini-board, or pull chess out from main-board.</p>"},{"location":"board-miniboard/#put-on-main-board","title":"Put on main-board","text":"<pre><code>miniBoard.putOnMainBoard(mainBoard, tileX, tileY);\n// miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align);\n</code></pre> <ul> <li><code>mainBoard</code> : Board object.</li> <li><code>tileX</code>, <code>tileY</code> : Tile position to put on.</li> <li><code>align</code> : Set <code>true</code> to align world position of each chess Game object to grid of main-board. Default is <code>true</code>.</li> </ul> <p>or</p> <pre><code>miniBoard.putOnMainBoard(mainBoard);\n</code></pre> <p>To put this mini-board to nearest grid of main-board.</p>"},{"location":"board-miniboard/#pull-out-from-main-board","title":"Pull out from main-board","text":"<pre><code>miniBoard.pullOutFromMainBoard();\n</code></pre> <p>Remove all chess from main-board.</p>"},{"location":"board-miniboard/#put-back-to-previous-main-board","title":"Put back to previous main-board","text":"<pre><code>miniBoard.putBack();\n</code></pre> <p>Previous main-board and tile position will be remembered for putting back.</p>"},{"location":"board-miniboard/#is-overlapping-to-main-board","title":"Is overlapping to main-board","text":"<p>Return <code>true</code> if any chess is overlapping to main-board.</p> <pre><code>miniBoard.isOverlapping(mainBoard);\n</code></pre> <p>or</p> <pre><code>miniBoard.isOverlapping(mainBoard, tileZ);\n</code></pre>"},{"location":"board-miniboard/#align-world-position-to-grid-of-main-board","title":"Align world position to grid of main-board","text":"<pre><code>miniBoard.alignToMainBoard(mainBoard, tileX, tileY);\n</code></pre> <ul> <li><code>mainBoard</code> : Board object</li> <li><code>tileX</code>, <code>tileY</code> : Tile position on main-board</li> </ul> <p>or</p> <pre><code>miniBoard.alignToMainBoard(mainBoard);\n</code></pre> <p>to align this mini-board to nearest grid of main-board.</p>"},{"location":"board-miniboard/#get-current-main-board","title":"Get current main-board","text":"<pre><code>var board = miniBoard.mainBoard;\n</code></pre> <ul> <li><code>board</code> : Board object</li> </ul> <p>Return <code>null</code> if this mini-board is not at any main-board.</p>"},{"location":"board-miniboard/#rotate","title":"Rotate","text":""},{"location":"board-miniboard/#can-rotate","title":"Can rotate","text":"<pre><code>miniBoard.canRotate(n);\n</code></pre> <ul> <li><code>n</code> : Rotate to direction <code>current direction + n</code></li> </ul> <p>or </p> <pre><code>miniBoard.canRotateTo(direction);\n</code></pre> <ul> <li><code>direction</code> : Rotate to direction<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Always return <code>true</code> if this mini-board is not on a main-board.</p>"},{"location":"board-miniboard/#rotate_1","title":"Rotate","text":"<pre><code>miniBoard.rotate(n);\n</code></pre> <ul> <li><code>n</code> : Rotate direction to <code>current direction + n</code></li> </ul> <p>or</p> <pre><code>miniBoard.rotateTo(direction);\n</code></pre> <ul> <li><code>direction</code> : Rotate to direction<ul> <li><code>0</code> ~ <code>3</code> : Quad grid.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Return <code>true</code> if this rotating request is accepted.</p> <pre><code>var isSuccess = miniBoard.lastTransferResult;\n</code></pre>"},{"location":"board-miniboard/#mirror","title":"Mirror","text":""},{"location":"board-miniboard/#can-mirror","title":"Can mirror","text":"<pre><code>miniBoard.canMirror(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>0</code>, or <code>'x'</code> : Set tileX to <code>-tileX</code></li> <li><code>1</code>, or <code>'y'</code> : Set tileY to <code>-tileY</code></li> <li><code>3</code>, or <code>'x&amp;y'</code> : Set tileX to <code>-tileX</code>, and tileY to <code>-tileY</code></li> </ul> </li> </ul> <p>Always return <code>true</code> if this mini-board is not on a main-board.</p>"},{"location":"board-miniboard/#mirror_1","title":"Mirror","text":"<pre><code>miniBoard.mirror(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>0</code>, or <code>'x'</code> : Set tileX to <code>-tileX</code></li> <li><code>1</code>, or <code>'y'</code> : Set tileY to <code>-tileY</code></li> <li><code>3</code>, or <code>'x&amp;y'</code> : Set tileX to <code>-tileX</code>, and tileY to <code>-tileY</code></li> </ul> </li> </ul> <p>Return <code>true</code> if this mirroring request is accepted.</p> <pre><code>var isSuccess = miniBoard.lastTransferResult;\n</code></pre>"},{"location":"board-miniboard/#touch-events","title":"Touch events","text":""},{"location":"board-miniboard/#set-interactive","title":"Set interactive","text":"<ul> <li>Enable     <pre><code>miniBoard.setInteractive();\n</code></pre></li> <li>Disable     <pre><code>miniBoard.setInteractive(false);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#set-drag-able","title":"Set drag-able","text":"<ul> <li>Enable     <pre><code>miniBoard.setDragEnable();\n</code></pre></li> <li>Disable     <pre><code>miniBoard.setDragEnable(false);\n</code></pre></li> </ul>"},{"location":"board-miniboard/#touch-event","title":"Touch event","text":""},{"location":"board-miniboard/#pointer-down","title":"Pointer down","text":"<ul> <li>Pointer down at any chess     <pre><code>miniBoard.on('pointerdown', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer down at a chess     <pre><code>miniBoard.on('gameobjectdown', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointerdown', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board-miniboard/#pointer-up","title":"Pointer up","text":"<ul> <li>Pointer up     <pre><code>miniBoard.on('pointerup', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer up at a chess     <pre><code>miniBoard.on('gameobjectup', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointerup', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)    </li> </ul> </li> </ul>"},{"location":"board-miniboard/#pointer-move","title":"Pointer move","text":"<ul> <li>Pointer move     <pre><code>miniBoard.on('pointermove', function(pointer, miniBoard) {\n})\n</code></pre></li> <li>Pointer move to another chess     <pre><code>miniBoard.on('gameobjectmove', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('miniboard.pointermove', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board-miniboard/#drag-events","title":"Drag events","text":"<ul> <li>Drag-start     <pre><code>miniBoard.on('dragstart', function(pointer, dragX, dragY){\n/*\n    miniBoard.pullOutFromMainBoard();\n    */\n}, scope);\n</code></pre>     Pull out from main-board for dragging.</li> <li>Dragging     <pre><code>miniBoard.on('drag', function(pointer, dragX, dragY){\n/*\n    miniBoard.setPosition(dragX, dragY);\n    if (miniBoard.isOverlapping(mainBoard)) {\n        miniBoard.alignToMainBoard(mainBoard);\n    }\n    */\n}, scope);\n</code></pre>     Set world position of mini-board via (<code>dragX</code>, <code>dragY</code>), align to nearest grid of main-board if overlapping with that main-board.</li> <li>Drag-end     <pre><code>miniBoard.on('dragend', function(pointer, dragX, dragY){\n/*\n    miniBoard.putOnMainBoard(mainBoard);\n    if (miniBoard.mainBoard) {\n    }\n    */\n}, scope);\n</code></pre>     Put chess on main-board at nearest grid.</li> </ul>"},{"location":"board-monopoly/","title":"Monopoly","text":""},{"location":"board-monopoly/#introduction","title":"Introduction","text":"<p>Move through path tiles, used in monopoly-like application, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-monopoly/#live-demos","title":"Live demos","text":"<ul> <li>Monopoly</li> </ul>"},{"location":"board-monopoly/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-monopoly/#install-plugin","title":"Install plugin","text":""},{"location":"board-monopoly/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Monopoly } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add monopoly behavior     <pre><code>var board = new Monopoly(chess, config);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#create-instance","title":"Create instance","text":"<pre><code>var monopoly = scene.rexBoard.add.monopoly(chess, {\nface: 0,\n\n// ** cost **\n// pathTileZ: 0,\n// cost: 1,   // constant cost\n// costCallback: undefined,\n// costCallbackScope: undefined\n})\n</code></pre> <ul> <li><code>face</code> : Moving direction.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li>Cost function<ul> <li><code>pathTileZ</code> : TileZ of path tiles.</li> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback <pre><code>function(curTileXY, preTileXY, monopoly) {\nreturn cost;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"board-monopoly/#cost-function","title":"Cost function","text":"<pre><code>var callback = function(curTileXY, preTileXY, monopoly) {\nreturn cost;\n}\n</code></pre> <ul> <li><code>cost</code> : Number cost.</li> <li><code>curTileXY</code>, <code>preTileXY</code> : TileXY position <code>{x, y}</code>. Cost of moving from <code>preTileXY</code> to <code>curTileXY</code>.</li> <li><code>monopoly</code> : Path finder object.<ul> <li><code>monopoly.board</code> : Board object</li> <li><code>monopoly.gameObject</code> : Chess game object.</li> <li><code>monopoly.STOP</code> : Cost of stop. Return this value means chess will stop at <code>curTileXY</code>.</li> <li><code>monopoly.BLOCKER</code> : Cost of blocker. Return this value means that chess can not move to <code>curTileXY</code>.</li> </ul> </li> </ul>"},{"location":"board-monopoly/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>monopoly.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>monopoly.setCostFunction(callback, scope);\n</code></pre></li> </ul>"},{"location":"board-monopoly/#set-face-direction","title":"Set face direction","text":"<pre><code>monopoly.setFace(direction);\n</code></pre> <ul> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul> <p>Moving direction</p> <p>Get path toward this face direction.</p>"},{"location":"board-monopoly/#get-path","title":"Get path","text":"<pre><code>var tileXYArray = monopoly.getPath(movingPoints);\n// var out = monopoly.getPath(movingPoints, out);\n</code></pre> <ul> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> </ul>"},{"location":"board-moveto/","title":"Move to","text":""},{"location":"board-moveto/#introduction","title":"Introduction","text":"<p>Move chess towards target position with a steady speed, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Behavior of chess</li> </ul>"},{"location":"board-moveto/#live-demos","title":"Live demos","text":"<ul> <li>Push</li> <li>Follow chess</li> </ul>"},{"location":"board-moveto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-moveto/#install-plugin","title":"Install plugin","text":""},{"location":"board-moveto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { MoveTo } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = new MoveTo(chess, config);\n</code></pre></li> </ul>"},{"location":"board-moveto/#create-instance","title":"Create instance","text":"<pre><code>var moveTo = scene.rexBoard.add.moveTo(chess, {\n// speed: 400,\n\n// rotateToTarget: false,\n\n// occupiedTest: false,\n// blockerTest: false,\n// moveableTest: undefined,\n// moveableTestScope: undefined,\n\n// sneak: false,\n})\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li><code>rotateToTarget</code> : Set <code>true</code> to change angle towards path.</li> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not, in moveable testing.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property in moveable testing.</li> <li><code>moveableTest</code>, <code>moveableTestScope</code> : Custom moveable test callback     <pre><code>function(fromTileXYZ, toTileXYZ, direction, board) {\nreturn true;\n}\n</code></pre><ul> <li><code>fromTileXYZ</code>, <code>toTileXYZ</code> : Move chess from tileXYZ <code>{x, y, z}</code>, to tileXYZ <code>{x, y, z}</code></li> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>board</code> : Board object.</li> </ul> </li> <li><code>sneak</code> : Set <code>true</code> to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied.<ul> <li><code>occupiedTest</code> will be ignored when <code>sneak</code> is <code>true</code>.</li> </ul> </li> </ul>"},{"location":"board-moveto/#move-to-destination-tile","title":"Move to destination tile","text":"<pre><code>moveTo.moveTo(tileX, tileY);\n// moveTo.moveTo(tileXY);\n</code></pre> <ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul>"},{"location":"board-moveto/#move-to-neighbor-tile","title":"Move to neighbor tile","text":"<pre><code>moveTo.moveToward(direction);\n</code></pre> <ul> <li><code>direction</code> :<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> </ul>"},{"location":"board-moveto/#move-to-random-neighbor-tile","title":"Move to random neighbor tile","text":"<pre><code>moveTo.moveToRandomNeighbor();\n</code></pre>"},{"location":"board-moveto/#move-away-or-move-closer","title":"Move away or move closer","text":"<ul> <li>Move away from a tile position     <pre><code>moveTo.moveAway(tileX, tileY);\n</code></pre>     or     <pre><code>moveTo.moveAway(tileXY);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul> </li> <li>Move closer to a tile position     <pre><code>moveTo.moveCloser(tileX, tileY);\n</code></pre>     or     <pre><code>moveTo.moveCloser(tileXY);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x,y}</code></li> </ul> </li> </ul>"},{"location":"board-moveto/#can-move-to-tile","title":"Can move to tile","text":"<pre><code>var canMoveTo = moveTo.canMoveTo(tileX, tileY);\n</code></pre> <p>Return <code>true</code> if chess can move to (tileX, tileY)</p>"},{"location":"board-moveto/#last-move-result","title":"Last move result","text":"<pre><code>var lastMoveResult = moveTo.lastMoveResult;\n</code></pre> <p>Return <code>true</code> if chess is moved by <code>moveTo.moveTo()</code>, <code>moveTo.moveToward()</code>, or <code>moveTo.moveToRandomNeighbor()</code></p>"},{"location":"board-moveto/#destination","title":"Destination","text":"<pre><code>var destinationTileX = moveTo.destinationTileX;\nvar destinationTileY = moveTo.destinationTileY;\nvar destinationDirection = moveTo.destinationDirection;\n</code></pre>"},{"location":"board-moveto/#pause-resume-stop-moving","title":"Pause, Resume, stop moving","text":"<pre><code>moveTo.pause();\nmoveTo.resume();\nmoveTo.stop();\n</code></pre>"},{"location":"board-moveto/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>moveTo.setEnable();\n</code></pre>     or     <pre><code>moveTo.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>moveTo.setEnable(false);\n</code></pre>     or     <pre><code>moveTo.enable = false;\n</code></pre></li> </ul>"},{"location":"board-moveto/#set-speed","title":"Set speed","text":"<pre><code>moveTo.setSpeed(speed);\n// moveTo.speed = speed;\n</code></pre>"},{"location":"board-moveto/#set-rotate-to-target","title":"Set rotate-to-target","text":"<pre><code>moveTo.setRotateToTarget(rotateToTarget);\n</code></pre> <ul> <li><code>rotateToTarget</code> : Set <code>true</code> to change angle towards target</li> </ul>"},{"location":"board-moveto/#events","title":"Events","text":"<ul> <li>Try to move on an occupied tile position     <pre><code>moveTo.on('occupy', function(occupiedChess, gameObject, moveTo){\n// Move away occupiedChess\n});\n</code></pre></li> <li>On reached target     <pre><code>moveTo.on('complete', function(gameObject, moveTo){});\n// moveTo.once('complete', function(gameObject, moveTo){});\n</code></pre></li> </ul>"},{"location":"board-moveto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = moveTo.isRunning;\n</code></pre></li> </ul>"},{"location":"board-overview/","title":"Overview","text":""},{"location":"board-overview/#install-plugin","title":"Install plugin","text":""},{"location":"board-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board-overview/#using-typescript-declaration-file","title":"Using typescript declaration file","text":"<pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\n\nclass Game extends Phaser.Scene {\nrexBoard: BoardPlugin;  // Declare scene property 'rexBoard' as BoardPlugin type\n\ncreate() {\nvar board = this.rexBoard.add.board({\n// ...\n})\n}\n}\n\nvar game = new Phaser.Game({\nscene: Game,\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n});\n</code></pre> <ul> <li><code>'phaser3-rex-plugins/plugins/board-plugin'</code> : Factories of board components.</li> <li><code>'phaser3-rex-plugins/plugins/board-components'</code> : Class of board components.     <pre><code>import { Board } from 'phaser3-rex-plugins/plugins/board-components';\n</code></pre></li> </ul> <p>See this example</p>"},{"location":"board-overview/#list-of-board-plugins","title":"List of board plugins","text":""},{"location":"board-overview/#board","title":"Board","text":"<ul> <li>Board</li> <li>Grids<ul> <li>Quad grid</li> <li>Hexagon grid</li> </ul> </li> <li>Chess</li> </ul>"},{"location":"board-overview/#shapes","title":"Shapes","text":"<ul> <li>Shape</li> <li>Tile texture</li> </ul>"},{"location":"board-overview/#behaviors","title":"Behaviors","text":"<ul> <li>Move to</li> </ul>"},{"location":"board-overview/#applications","title":"Applications","text":"<ul> <li>Path finder</li> <li>Monopoly</li> <li>Field of view</li> <li>Match</li> <li>Hexagon map</li> </ul>"},{"location":"board-overview/#mini-board","title":"Mini-board","text":"<ul> <li>Mini-board</li> </ul>"},{"location":"board-overview/#templates","title":"Templates","text":"<ul> <li>Bejeweled</li> </ul>"},{"location":"board-pathfinder/","title":"Path finder","text":""},{"location":"board-pathfinder/#introduction","title":"Introduction","text":"<p>Find moveable area or moving path, chess behavior of Board system.</p> <ul> <li>Author: Rex</li> <li>Application of Board system, or behavior of chess</li> </ul>"},{"location":"board-pathfinder/#live-demos","title":"Live demos","text":"<ul> <li>Find area, get path</li> <li>Draw path</li> <li>Energy drain</li> <li>Turning cost</li> <li>Move from high to low</li> <li>Chinese checkers</li> </ul>"},{"location":"board-pathfinder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-pathfinder/#install-plugin","title":"Install plugin","text":""},{"location":"board-pathfinder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = scene.rexBoard.add.pathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = scene.rexBoard.add.pathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PathFinder } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add path-finder     <pre><code>var pathFinder = new PathFinder(config);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#create-instance","title":"Create instance","text":"<pre><code>var pathFinder = scene.rexBoard.add.pathFinder({\n// occupiedTest: false,\n// blockerTest: false,\n\n// ** cost **\n// cost: 1,   // constant cost\n// costCallback: undefined,\n// costCallbackScope: undefined,\n// cacheCost: true,\n\n// pathMode: 10,  // A*\n// weight: 10,   // weight for A* searching mode\n// shuffleNeighbors: false,\n})\n</code></pre> <ul> <li><code>occupiedTest</code> : Set <code>true</code> to test if target tile position is occupied or not, in cost function.</li> <li><code>blockerTest</code> : Set <code>true</code> to test blocker property in cost function.</li> <li>Cost function<ul> <li><code>cost</code> : A constant cost for each non-blocked tile</li> <li><code>costCallback</code>, <code>costCallbackScope</code> :  Get cost via callback     <pre><code>function(curTile, preTile, pathFinder) {\nreturn cost;\n}\n</code></pre><ul> <li>Board : <code>pathFinder.board</code></li> <li>Chess game object : <code>pathFinder.gameObject</code></li> <li>Cost of blocker : <code>pathFinder.BLOCKER</code></li> </ul> </li> </ul> </li> <li><code>pathMode</code><ul> <li>Shortest path<ul> <li><code>'random'</code>, or <code>0</code></li> <li><code>'diagonal'</code>, or <code>1</code></li> <li><code>'straight'</code>, or <code>2</code></li> <li><code>'line'</code>, or <code>3</code></li> </ul> </li> <li>A* path<ul> <li><code>'A*'</code>, or <code>10</code></li> <li><code>'A*-random'</code>, or <code>11</code></li> <li><code>'A*-line'</code>, or <code>12</code></li> </ul> </li> </ul> </li> <li><code>weight</code> : Weight parameter for A* searching mode.</li> <li><code>cacheCost</code> : Set <code>false</code> to get cost every time. It is useful when cost is a function of (current tile, previous tile).</li> <li><code>shuffleNeighbors</code> : Shuffle neighbors.</li> </ul>"},{"location":"board-pathfinder/#create-behavior","title":"Create behavior","text":"<pre><code>var pathFinder = scene.rexBoard.add.pathFinder(chess, config);\n</code></pre>"},{"location":"board-pathfinder/#set-chess","title":"Set chess","text":"<pre><code>pathFinder.setChess(chess);\n</code></pre> <p>Note</p> <p>Don't use this method if pathFinder is a behavior of Chess</p>"},{"location":"board-pathfinder/#cost-function","title":"Cost function","text":"<pre><code>var callback = function(curTileXY, preTileXY, pathFinder) {\nreturn cost;\n}\n</code></pre> <ul> <li><code>cost</code> : Number cost.</li> <li><code>curTileXY</code>, <code>preTileXY</code> : TileXY position <code>{x, y}</code>. Cost of moving from <code>preTileXY</code> to <code>curTileXY</code>.<ul> <li><code>preTileXY.pathCost</code> : Path cost of <code>preTilexY</code>.</li> <li><code>preTileXY.preNodes</code> : Previous tiles of <code>preTileXY</code>.    </li> </ul> </li> <li><code>pathFinder</code> : Path finder object.<ul> <li><code>pathFinder.board</code> : Board object</li> <li><code>pathFinder.gameObject</code> : Chess game object.</li> <li><code>pathFinder.BLOCKER</code> : Cost of blocker. Return this value means that chess can not move to <code>curTileXY</code>.</li> </ul> </li> </ul>"},{"location":"board-pathfinder/#set-cost-function","title":"Set cost function","text":"<ul> <li>Constant cost for each non-blocked tile     <pre><code>pathFinder.setCostFunction(cost);\n</code></pre></li> <li>Get cost via callback     <pre><code>pathFinder.setCostFunction(callback, scope);\n</code></pre></li> </ul>"},{"location":"board-pathfinder/#set-path-mode","title":"Set path mode","text":"<pre><code>pathFinder.setPathMode(pathMode)\n</code></pre> <ul> <li><code>pathMode</code><ul> <li>Shortest path<ul> <li><code>'random'</code>, or <code>0</code></li> <li><code>'diagonal'</code>, or <code>1</code></li> <li><code>'straight'</code>, or <code>2</code></li> <li><code>'line'</code>, or <code>3</code></li> </ul> </li> <li>A* path<ul> <li><code>'A*'</code>, or <code>10</code></li> <li><code>'A*-random'</code>, or <code>11</code></li> <li><code>'A*-line'</code>, or <code>12</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-pathfinder/#find-moveable-area","title":"Find moveable area","text":"<pre><code>var tileXYArray = pathFinder.findArea(movingPoints);\n// var out = pathFinder.findArea(movingPoints, out);\n</code></pre> <ul> <li><code>movingPoints</code><ul> <li><code>pathFinder.INFINITY</code> (undefined) : Infinity moving points. Default value.</li> </ul> </li> <li><code>tileXYArray</code> : An array of moveable tile positions <code>{x,y,pathCost}</code></li> </ul>"},{"location":"board-pathfinder/#get-shortest-path-to-a-moveable-tile","title":"Get shortest path to a moveable tile","text":"<pre><code>var tileXYArray = pathFinder.getPath(endTileXY);\n</code></pre> <ul> <li><code>endTileXY</code> : Tile position of moveable area in last result of <code>pathFinder.findArea()</code></li> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y,pathCost}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> </ul> <p>Path mode</p> <ul> <li>Path info of each tile is calculated during <code>pathFinder.findArea()</code></li> </ul>"},{"location":"board-pathfinder/#find-moving-path","title":"Find moving path","text":"<pre><code>var tileXYArray = pathFinder.findPath(endTileXY);\n// var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out);\n</code></pre> <ul> <li><code>endTileXY</code> : Tile position</li> <li><code>tileXYArray</code> : Moving path in an array of tile positions <code>{x,y,pathCost}</code><ul> <li>Uses moveTo behavior to move chess along path.</li> </ul> </li> <li><code>movingPoints</code><ul> <li><code>pathFinder.INFINITY</code> (undefined) : Infinity moving points. Default value.</li> </ul> </li> <li><code>isClosest</code> : Set <code>true</code> to get closest path.</li> </ul> <p>Path mode</p> <ul> <li>Set <code>pathMode</code> to A* (<code>'A*'</code>, <code>'A*-random'</code>, or <code>'A*-line'</code>) to speed up calculating.</li> </ul>"},{"location":"board-pathfinder/#cost-of-tile","title":"Cost of tile","text":"<p>During or after finding moveable area...</p> <ul> <li>Get cost of path from chess to tile     <pre><code>var pathCost = pathFinder.tileXYToCost(tileX, tileY, true);\n</code></pre></li> <li>Get cost of tile     <pre><code>var tileCost = pathFinder.tileXYToCost(tileX, tileY, false);\n</code></pre></li> </ul>"},{"location":"board-quadgrid/","title":"Quad","text":""},{"location":"board-quadgrid/#introduction","title":"Introduction","text":"<p>Quad grid object of Board system.</p> <ul> <li>Author: Rex</li> <li>Grid object of board</li> </ul>"},{"location":"board-quadgrid/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-quadgrid/#create-instance","title":"Create instance","text":"<pre><code>var grid = scene.rexBoard.add.quadGrid({\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 0,\n// dir: 4\n});\n</code></pre> <p>or</p> <pre><code>// import { QuadGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\nvar grid = new QuadGrid(config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : World position of tile (0, 0)</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>type</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> <li><code>dir</code> :<ul> <li><code>4</code> or <code>'4dir'</code> : Left/Down/Right/Up</li> <li><code>8</code> or <code>'8dir'</code> : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left</li> </ul> </li> </ul>"},{"location":"board-quadgrid/#world-position-of-tile-0-0","title":"World position of tile (0, 0)","text":"<ul> <li>Get     <pre><code>var worldX = grid.x;\nvar worldY = grid.y;\n</code></pre></li> <li>Set     <pre><code>grid.setOriginPosition(worldX, worldY);\n</code></pre>     or     <pre><code>grid.x = worldX;\ngrid.y = worldY;\n</code></pre></li> </ul>"},{"location":"board-quadgrid/#cell-size","title":"Cell size","text":"<ul> <li>Get     <pre><code>var width = grid.width;\nvar height = grid.height;\n</code></pre></li> <li>Set     <pre><code>grid.setCellSize(width, height);\n</code></pre>     or     <pre><code>grid.width = width;\ngrid.height = height;\n</code></pre></li> </ul>"},{"location":"board-quadgrid/#grid-type","title":"Grid type","text":"<ul> <li>Get     <pre><code>var mode = grid.mode;\n</code></pre></li> <li>Set     <pre><code>grid.setType(mode);\n</code></pre><ul> <li><code>mode</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"board-quadgrid/#get-world-position","title":"Get world position","text":"<pre><code>var worldXY = grid.getWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = grid.getWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board-quadgrid/#get-tile-position","title":"Get tile position","text":"<pre><code>var tileXY = grid.getTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = grid.getTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board-quadgrid/#directions","title":"Directions","text":"<ul> <li><code>0</code> : Right</li> <li><code>1</code> : Down</li> <li><code>2</code> : Left</li> <li><code>3</code> : Up</li> <li><code>4</code> : Right-down</li> <li><code>5</code> : Left-down</li> <li><code>6</code> : Left-up</li> <li><code>7</code> : Right-up</li> </ul> <pre><code>6|3|7\n-+-+-\n2|A|0\n-+-+-\n5|1|4\n</code></pre>"},{"location":"board-shape/","title":"Shape","text":""},{"location":"board-shape/#introduction","title":"Introduction","text":"<p>Grid (polygon) shape object.</p> <ul> <li>Author: Rex</li> <li>Polygon Shape Game object of Board system</li> </ul>"},{"location":"board-shape/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-shape/#install-plugin","title":"Install plugin","text":""},{"location":"board-shape/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add shape object     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n</code></pre></li> </ul>"},{"location":"board-shape/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n</code></pre></li> </ul>"},{"location":"board-shape/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Shape } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add shape object     <pre><code>var shape = new Shape(board, tileX, tileY, tileZ, fillColor);\nscene.add.existing(shape);\n</code></pre></li> </ul>"},{"location":"board-shape/#add-shape-object","title":"Add shape object","text":"<ul> <li>Create shape object and add to board     <pre><code>var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor);\n// var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha);\n</code></pre><ul> <li><code>board</code> : Board object</li> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>fillColor</code>, <code>fillAlpha</code> : Color of this shape object</li> </ul> </li> <li>Create shape object but not add to board     <pre><code>var shape = scene.rexBoard.add.shape(board, x, y, undefined, fillColor, fillAlpha, false);\n</code></pre><ul> <li><code>board</code> : Board object</li> <li><code>x</code>, <code>y</code> : World position</li> <li><code>fillColor</code>, <code>fillAlpha</code> : Color of this shape object</li> </ul> </li> </ul>"},{"location":"board-shape/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>polygon.setFillStyle(color, alpha)\n</code></pre></li> <li>Stroke color     <pre><code>polygon.setStrokeStyle(lineWidth, color, alpha)\n</code></pre></li> </ul> <p>No tint methods</p> <p>Uses <code>shape.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"board-shape/#other-properties","title":"Other properties","text":"<p>See polygon shape game object, game object</p>"},{"location":"board-texture/","title":"Tile texture","text":""},{"location":"board-texture/#introduction","title":"Introduction","text":"<p>Create canvas-texture of tile.</p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-texture/#live-demos","title":"Live demos","text":"<ul> <li>Tile texture</li> </ul>"},{"location":"board-texture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-texture/#install-plugin","title":"Install plugin","text":""},{"location":"board-texture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create tile texture     <pre><code>scene.rexBoard.createTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create tile texture     <pre><code>scene.rexBoard.createTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { CreateTileTexture } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create tile texture     <pre><code>CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n</code></pre></li> </ul>"},{"location":"board-texture/#create-tile-texture","title":"Create tile texture","text":""},{"location":"board-texture/#hexagon","title":"Hexagon","text":"<pre><code>CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth);\n// CreateTileTexture(board, key, fillStyle, strokeStyle, lineWidth, overlapGrid, lineJoin);\n</code></pre> <ul> <li><code>board</code> : Board object.</li> <li><code>fillStyle</code> : Fill color of tile texture.<ul> <li><code>undefined</code> : Don't fill tile texture.</li> </ul> </li> <li><code>strokeStyle</code>, <code>lineWidth</code> : Stroke color, stroke line width of tile texture.<ul> <li><code>undefined</code> : Don't stroke tile texture.</li> </ul> </li> <li><code>overlapGrid</code> : <ul> <li><code>true</code> : Overlap grid. i.e. Grid width = lineWidth. Default behavior.</li> <li><code>false</code> : Don't overlap grid. i.e. Grid width = 2 * lineWidth.</li> </ul> </li> <li><code>lineJoin</code> : Join style of stroke lines. <code>'round'</code>, <code>'bevel'</code> and <code>'miter'</code>. Default is <code>'miter'</code>.</li> </ul>"},{"location":"board-tilemap/","title":"Tilemap","text":""},{"location":"board-tilemap/#introduction","title":"Introduction","text":"<p>Create board from tilemap</p> <ul> <li>Author: Rex</li> <li>Help method of board</li> </ul>"},{"location":"board-tilemap/#live-demos","title":"Live demos","text":"<ul> <li>Create board from tilemap</li> </ul>"},{"location":"board-tilemap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board-tilemap/#install-plugin","title":"Install plugin","text":""},{"location":"board-tilemap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = scene.rexBoard.createBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = scene.rexBoard.createBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { CreateBoardFromTilemap } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Create board from tilemap     <pre><code>var board = CreateBoardFromTilemap(tilemap, layers);\n</code></pre></li> </ul>"},{"location":"board-tilemap/#create-board-from-tilemap","title":"Create board from tilemap","text":"<pre><code>var board = CreateBoardFromTilemap(tilemap, layers);\n</code></pre> <ul> <li><code>tilemap</code> : Tilemap object</li> <li><code>layers</code> : Add tiles of layers into board, tileZ will be name of layer (<code>layer.name</code>)<ul> <li><code>undefined</code> : Add tiles of all layers.</li> <li>Array of TilemapLayer game object, or a TilemapLayer game object</li> <li>Array of layers' name, or a name of layer.</li> </ul> </li> <li><code>board</code> : Board object.</li> </ul>"},{"location":"board/","title":"Board","text":""},{"location":"board/#introduction","title":"Introduction","text":"<p>Core object of Board system.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"board/#live-demos","title":"Live demos","text":"<ul> <li>Touch events</li> <li>Get tileXY at direction</li> <li>Line to tileXY array</li> <li>Triangle to tileXY array</li> <li>Ellipse to tileXY array</li> <li>Bounds</li> </ul>"},{"location":"board/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"board/#install-plugin","title":"Install plugin","text":""},{"location":"board/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexBoard',\nplugin: BoardPlugin,\nmapping: 'rexBoard'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add board object     <pre><code>var board = scene.rexBoard.add.board(config);\n</code></pre></li> </ul>"},{"location":"board/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Board, HexagonGrid, QuadGrid } from 'phaser3-rex-plugins/plugins/board-components.js';\n</code></pre></li> <li>Add board object     <pre><code>var board = new Board(scene, {\ngrid: QuadGrid(gridConfig),  // or HexagonGrid(gridConfig)\n// ...\n});\n</code></pre></li> </ul>"},{"location":"board/#add-board-object","title":"Add board object","text":"<ul> <li>Quad board     <pre><code>var board = scene.rexBoard.add.board({\ngrid: {\ngridType: 'quadGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 'orthogonal'  // 'orthogonal'|'isometric'\n},\n// width: 0,\n// height: 0,\n// wrap: false,\n// infinity: false,\n});\n</code></pre></li> <li>Hexagon board     <pre><code>var board = scene.rexBoard.add.board({\ngrid: {\ngridType: 'hexagonGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\nstaggeraxis: 'x',   // 'x'|'y'\nstaggerindex: 'odd' // 'odd'|'even'\n},\n// width: 0,\n// height: 0,\n// wrap: false,\n// infinity: false,\n});\n</code></pre></li> </ul> <p>Configuration</p> <ul> <li><code>grid</code> :<ul> <li><code>gridType</code> :<ul> <li><code>'quadGrid'</code> : Quad grid</li> <li><code>'hexagonGrid'</code> : hexagon grid</li> </ul> </li> </ul> </li> <li><code>width</code> : Board width in tiles</li> <li><code>height</code> : Board height in tiles</li> <li><code>wrap</code> : Set <code>true</code> to wrap board bounds. Default value is <code>false</code>.</li> <li><code>infinity</code> : Infinity board size if set to <code>true</code>. Default value is <code>false</code>.</li> </ul>"},{"location":"board/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBoard extends RexPlugins.Board.Board {\nconstructor(scene) {\nsuper(scene, {\ngrid: {\ngridType: 'quadGrid',\nx: 0,\ny: 0,\ncellWidth: 0,\ncellHeight: 0,\ntype: 'orthogonal'  // 'orthogonal'|'isometric'\n},\nwidth: 0,\nheight: 0\n});\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var board = new MyBoard(scene);\n</code></pre></li> </ul>"},{"location":"board/#board-size","title":"Board size","text":"<ul> <li>Width : Board width in tiles<ul> <li>Get     <pre><code>var width = board.width;\n</code></pre></li> <li>Set     <pre><code>board.setBoardWidth(width);\n</code></pre></li> </ul> </li> <li>Height : Board height in tiles<ul> <li>Get     <pre><code>var height = board.height;\n</code></pre></li> <li>Set     <pre><code>board.setBoardHeight(height);\n</code></pre></li> </ul> </li> </ul>"},{"location":"board/#add-chess","title":"Add chess","text":"<pre><code>board.addChess(chess, tileX, tileY, tileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object.</li> <li><code>tileX</code> , <code>tileY</code> , <code>tileZ</code> : Tile position.<ul> <li><code>tileX</code> , <code>tileY</code> : Number.</li> <li><code>tileZ</code> : Number or string.</li> </ul> </li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>true</code>.</li> </ul> <p>Chess and tile position</p> <ul> <li>Any chess has a (tileX, tileY, tileZ) index</li> <li>Any (tileX, tileY, tileZ) index contains only 1 chess.</li> <li>(tileX, tileY) could have more then 1 chess with different tileZ index.</li> <li>tileZ is not equal to <code>depth</code>.</li> </ul>"},{"location":"board/#kick-out-event","title":"Kick-out event","text":"<p>Board will fire <code>kickout</code> event when adding chess to an occupied grid.</p> <pre><code>board.on('kickout', function(chessToAdd, occupiedChess, tileXYZ){\n})\n</code></pre> <p><code>chessToAdd</code> kicks out <code>occupiedChess</code> at tile position <code>tileXYZ</code>(<code>{x,y,z}</code>).</p>"},{"location":"board/#remove-chess","title":"Remove chess","text":"<ul> <li>Remove chess object from board     <pre><code>board.removeChess(chess, null, null, null, destroy);\n</code></pre><ul> <li><code>chess</code> : A game object</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove chess at (tileX, tileY, tileZ) from board     <pre><code>board.removeChess(null, tileX, tileY, tileZ, destroy);\n</code></pre><ul> <li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> <li>Remove all chess     <pre><code>board.removeAllChess(destroy);\n</code></pre><ul> <li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li> </ul> </li> </ul>"},{"location":"board/#move-chess","title":"Move chess","text":"<pre><code>board.moveChess(chess, toTileX, toTileY, toTileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>toTileX</code>, <code>toTileY</code>, <code>toTileZ</code> : Target tile position</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>true</code>.</li> </ul> <p>Do nothing if chess is not at this board.</p>"},{"location":"board/#set-tilez-of-chess","title":"Set tileZ of chess","text":"<pre><code>board.setChessTileZ(chess, toTileZ, align);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>toTileZ</code> : Target tileZ</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>false</code>.</li> </ul>"},{"location":"board/#swap-chess","title":"Swap chess","text":"<pre><code>board.swapChess(chessA, chessB, align);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Game objects</li> <li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY).</li> </ul>"},{"location":"board/#chess-tile-position","title":"Chess -&gt; tile position","text":"<pre><code>var tileXYZ = board.chessToTileXYZ(chess);\n</code></pre> <ul> <li><code>chess</code> : A game object</li> <li><code>tileXYZ</code> : <code>{x,y,z}</code> or <code>null</code> if chess is not added to board.</li> </ul>"},{"location":"board/#tile-position-chess","title":"Tile position -&gt; chess","text":"<ul> <li>Get chess at (tileX, tileY, tileZ)     <pre><code>var chess = board.tileXYZToChess(tileX, tileY, tileZ);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> <li>Get chess at (tileX, tileY)     <pre><code>var out = board.tileXYToChessArray(tileX, tileY);\n// var out = board.tileXYToChessArray(tileX, tileY, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess at tileZ     <pre><code>var out = board.tileZToChessArray(tileZ);\n// var out = board.tileZToChessArray(tileZ, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess from array of (tileX, tileY)     <pre><code>var out = board.tileXYArrayToChessArray(tileXYArray);\n// var out = board.tileXYArrayToChessArray(tileXYArray, out);\n</code></pre>     or     <pre><code>var out = board.tileXYArrayToChessArray(tileXYArray, tileZ);\n// var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out);\n</code></pre><ul> <li><code>tileXYArray</code> : An array of tileXY <code>{x, y}</code></li> <li><code>out</code> : An array of chess</li> </ul> </li> </ul>"},{"location":"board/#world-position-chess","title":"World position -&gt; chess","text":"<ul> <li>Get chess at (worldX, worldY)     <pre><code>var out = board.worldXYToChessArray(worldX, worldY);\n// var out = board.worldXYToChessArray(worldX, worldY, out);\n</code></pre><ul> <li><code>out</code> : An array of chess</li> </ul> </li> <li>Get chess at (worldX, worldY), tileZ     <pre><code>var chess = board.worldXYToChess(worldX, worldY, tileZ);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> <li>Get chess at (worldX, worldY)     <pre><code>var chess = board.worldXYToChess(worldX, worldY);\n</code></pre><ul> <li><code>chess</code> : A game object at a tileZ.</li> </ul> </li> </ul>"},{"location":"board/#contains","title":"Contains","text":"<ul> <li>Is (tileX, tileY) inside board?     <pre><code>var isTileInBoard = board.contains(tileX, tileY);\n</code></pre></li> <li>Does (tileX, tileY, tileZ) have chess?     <pre><code>var isTileInBoard = board.contains(tileX, tileY, tileZ);\n</code></pre></li> <li>Is chess inside board?     <pre><code>var isChessInBoard = board.exists(chess);\n</code></pre><ul> <li><code>chess</code> : A game object</li> </ul> </li> </ul>"},{"location":"board/#for-each-tile","title":"For each tile","text":"<pre><code>board.forEachTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope);\n</code></pre> <p>Iteration order :</p> <pre><code>board.forEachTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n\n// return isBreak;\n}, scope, order);\n</code></pre> <ul> <li><code>order</code> :<ul> <li><code>0</code>, or <code>'x+'</code> : Increasing x, increasing y.</li> <li><code>1</code>, or <code>'x-'</code> : Decreasing x, increasing y.</li> <li><code>2</code>, or <code>'y+'</code> : Increasing y, increasing x.</li> <li><code>3</code>, or <code>'y-'</code> : Decreasing y, increasing x.</li> </ul> </li> </ul> <p>Or using for-loop</p> <pre><code>for (var tileY = 0; tileY &lt; board.height; tileY++) {\nfor (var tileX = 0; tileX &lt; board.width; tileX++) {\n// ...\n}\n}\n</code></pre> <ul> <li><code>board.width</code> , <code>board.height</code> : Board width/height in tiles.</li> </ul>"},{"location":"board/#for-each-tile-in-viewport-of-a-camera","title":"For each tile in viewport of a camera","text":"<pre><code>board.forEachCullTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope);\n</code></pre> <pre><code>board.forEachCullTileXY(function(tileXY, board) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n}, scope, {\ncamera: board.scene.cameras.main,\npaddingX: 1,\npaddingY: 1,\norder: 0,\n});\n</code></pre> <ul> <li><code>camera</code> : Camera of scene. Default value is the main camera.</li> <li><code>paddingX</code> , <code>paddingY</code> : Padding space of camera's viewport</li> <li><code>order</code> :<ul> <li><code>0</code>, or <code>'x+'</code> : Increasing x, increasing y.</li> <li><code>1</code>, or <code>'x-'</code> : Decreasing x, increasing y.</li> <li><code>2</code>, or <code>'y+'</code> : Increasing y, increasing x.</li> <li><code>3</code>, or <code>'y-'</code> : Decreasing y, increasing x.</li> </ul> </li> </ul>"},{"location":"board/#tile-position-world-position","title":"Tile position -&gt; world position","text":"<pre><code>var worldXY = board.tileXYToWorldXY(tileX, tileY);  // worldXY: {x, y}\n// var out = board.tileXYToWorldXY(tileX, tileY, out);\n</code></pre>"},{"location":"board/#world-position-tile-position","title":"World position -&gt; tile position","text":"<pre><code>var tileXY = board.worldXYToTileXY(worldX, worldY);  // tileXY: {x, y}\n// var out = board.worldXYToTileXY(worldX, worldY, out);\n</code></pre>"},{"location":"board/#world-position-grid-world-position","title":"World position -&gt; Grid world position","text":"<pre><code>var gridWorldXY = board.worldXYSnapToGrid(worldX, worldY);\n// var out = board.worldXYSnapToGrid(worldX, worldY, out);\n</code></pre>"},{"location":"board/#grid-distance","title":"Grid distance","text":"<pre><code>var distance = board.getDistance(tileA, tileB);\n</code></pre> <ul> <li><code>tileA</code>, <code>tileB</code> : Chess object, or tileXY <code>{x, y}</code>. </li> </ul>"},{"location":"board/#ring-tile-position","title":"Ring -&gt; tile position","text":"<ul> <li>Get array of tile position around a ring.     <pre><code>var out = board.ringToTileXYArray(centerTileXY, radius);\n// var out = board.ringToTileXYArray(centerTileXY, radius, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> </ul> </li> <li>Get array of tile position within a filled ring. <code>centerTileXY</code> will be included.     <pre><code>var out = board.filledRingToTileXYArray(centerTileXY, radius);\nvar out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, out);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>nearToFar</code> : From near ring to far ring. Default value is <code>true</code>.</li> </ul> </li> </ul>"},{"location":"board/#ring-chess","title":"Ring -&gt; chess","text":"<ul> <li>Get array of chess around a ring.     <pre><code>var out = board.ringToChessArray(centerTileXY, radius, tileZ);\n// var out = board.ringToChessArray(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> </ul> </li> <li>Get array of chess within a filled ring. Chess at <code>centerTileXY</code> will be included.     <pre><code>var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ);\nvar out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, nearToFar);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, out);\n// var out = board.filledRingToTileXYArray(centerTileXY, radius, tileZ, nearToFar, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> </ul> </li> </ul>"},{"location":"board/#shape-tile-position","title":"Shape -&gt; tile position","text":""},{"location":"board/#line-tile-position","title":"Line -&gt; tile position","text":"<p>Get array of tile position along a line defined via (<code>startWorldX</code>, <code>startWorldY</code>) to (<code>endWorldX</code>, <code>endWorldY</code>)</p> <pre><code>var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY);\n// var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out);\n</code></pre> <ul> <li><code>startWorldX</code>, <code>startWorldY</code>, <code>endWorldX</code>, <code>endWorldY</code> : Start and end pointer of a line</li> <li><code>out</code> : An array of tile position</li> </ul> <p>or</p> <pre><code>var out = board.lineToTileXYArray(line);\n// var out = board.lineToTileXYArray(line, out);\n</code></pre> <ul> <li><code>line</code> : Line object</li> </ul>"},{"location":"board/#circle-tile-position","title":"Circle -&gt; tile position","text":"<p>Get array of tile position inside a circle shape</p> <pre><code>var out = board.circleToTileXYArray(circle);\n// var out = board.circleToTileXYArray(circle, out);\n// var out = board.circleToTileXYArray(circle, testMode, out);\n</code></pre> <ul> <li><code>circle</code> : Circle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#rectangle-tile-position","title":"Rectangle -&gt; tile position","text":"<p>Get array of tile position inside a rectangle shape</p> <pre><code>var out = board.rectangleToTileXYArray(rectangle);\n// var out = board.rectangleToTileXYArray(rectangle, out);\n// var out = board.rectangleToTileXYArray(rectangle, testMode, out);\n</code></pre> <ul> <li><code>rectangle</code> : Rectangle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#ellipse-tile-position","title":"Ellipse -&gt; tile position","text":"<p>Get array of tile position inside a ellipse shape</p> <pre><code>var out = board.ellipseToTileXYArray(ellipse);\n// var out = board.ellipseToTileXYArray(ellipse, out);\n// var out = board.ellipseToTileXYArray(ellipse, testMode, out);\n</code></pre> <ul> <li><code>ellipse</code> : Ellipse shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#triangle-tile-position","title":"Triangle -&gt; tile position","text":"<p>Get array of tile position inside a triangle shape</p> <pre><code>var out = board.triangleToTileXYArray(triangle);\n// var out = board.triangleToTileXYArray(triangle, out);\n// var out = board.triangleToTileXYArray(triangle, testMode, out);\n</code></pre> <ul> <li><code>triangle</code> : Triangle shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#polygon-tile-position","title":"Polygon -&gt; tile position","text":"<p>Get array of tile position inside a polygon shape</p> <pre><code>var out = board.polygonToTileXYArray(polygon);\n// var out = board.polygonToTileXYArray(polygon, out);\n// var out = board.polygonToTileXYArray(polygon, testMode, out);\n</code></pre> <ul> <li><code>polygon</code> : Polygon shape</li> <li><code>testMode</code> : <ul> <li><code>0</code> : Test if shape is overlapping center position of a grid. Default behavior.</li> <li><code>1</code> : Test if shape is overlapping grid bounds of a grid.</li> <li><code>2</code> : Test if shape is overlapping grid points of a grid.</li> </ul> </li> <li><code>out</code> : An array of tile position.</li> </ul>"},{"location":"board/#angle-between-world-position-of-2-tiles","title":"Angle between world position of 2 tiles","text":"<pre><code>var radian = board.angleBetween(tileA, tileB);\n</code></pre> <ul> <li><code>tileA</code>, <code>tileB</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radian</code> : Angle between world position of 2 tiles, in radian.</li> </ul>"},{"location":"board/#is-angle-in-cone","title":"Is angle in cone","text":"<pre><code>var isInCone = board.isAngleInCone(chessA, chessB, face, cone);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Chess object, or tileXY <code>{x, y}</code>. </li> <li><code>face</code>, <code>cone</code> : Range of compared angle is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Angle in radian.</li> </ul>"},{"location":"board/#direction-between-2-tiles","title":"Direction between 2 tiles","text":"<pre><code>var direction = board.directionBetween(chessA, chessB);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : A chess object, or tile position <code>{x,y}</code>.</li> <li><code>direction</code> : Integer number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li> </ul> </li> </ul> <pre><code>var direction = board.directionBetween(chessA, chessB, false);\n</code></pre> <ul> <li><code>direction</code> : Integer number, or float number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li> </ul> </li> </ul>"},{"location":"board/#is-direction-in-cone","title":"Is direction in cone","text":"<pre><code>var isInCone = board.isDirectionInCone(chessA, chessB, face, cone);\n</code></pre> <ul> <li><code>chessA</code>, <code>chessB</code> : Chess object, or tileXY <code>{x, y}</code>.</li> <li><code>face</code>, <code>cone</code> : Range of compared direction is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Integer number, or float number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, or float number between 0~1, 1~2, 2~3, 3~4.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li> </ul> </li> </ul>"},{"location":"board/#opposite-direction","title":"Opposite direction","text":"<pre><code>var direction = board.getOppositeDirection(tileX, tileY, direction);\n</code></pre> <p>or</p> <pre><code>var direction = board.getOppositeDirection(tileXY, direction);\n</code></pre> <ul> <li><code>tileXY</code> : Chess object, or tileXY <code>{x, y}</code>.</li> </ul>"},{"location":"board/#angle-snap-to-direction","title":"Angle snap to direction","text":"<pre><code>var direction = board.angleSnapToDirection(tileXY, angle);\n</code></pre> <ul> <li><code>tileXY</code> : Chess object, or tileXY <code>{x, y}</code>, or <code>undefined</code>.</li> <li><code>angle</code> : Angle in radius.</li> <li><code>direction</code> : Integer number.<ul> <li>Quad grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li> <li>Hexagon grid : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li> </ul> </li> </ul>"},{"location":"board/#align-world-position-to-grid","title":"Align world position to grid","text":"<ul> <li>Align one chess object     <pre><code>board.gridAlign(chess);\n</code></pre></li> <li>Align all chess     <pre><code>board.gridAlign();\n</code></pre></li> </ul>"},{"location":"board/#is-overlapping-with-world-position","title":"Is overlapping with world position","text":"<pre><code>var isOverlapping = board.isOverlappingPoint(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var isOverlapping = board.isOverlappingPoint(worldX, worldY, tileZ);\n</code></pre>"},{"location":"board/#neighbors","title":"Neighbors","text":""},{"location":"board/#neighbor-tile-position","title":"Neighbor tile position","text":"<ul> <li>Get neighbor tile position at 1 direction     <pre><code>var neighborTileXY = board.getNeighborTileXY(srcTileXY, direction);\n// var out = board.getNeighborTileXY(srcTileXY, direction, out);\n</code></pre><ul> <li><code>srcTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of source.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li> </ul> </li> <li>Get neighbor tile position at directions     <pre><code>var neighborTileXY = board.getNeighborTileXY(srcTileXY, directions);\n// var out = board.getNeighborTileXY(srcTileXY, directions, out);\n</code></pre><ul> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Tile position array of all neighbors</li> </ul> </li> <li>Get neighbor tile position at all directions     <pre><code>var out = board.getNeighborTileXY(srcTileXY, null);\n// var out = board.getNeighborTileXY(srcTileXY, null, out);\n</code></pre><ul> <li><code>out</code> : Tile position array of all neighbors</li> </ul> </li> <li>Get direction between 2 tile positions     <pre><code>var direction = board.getNeighborTileDirection(srcTile, neighborTileXY);\n</code></pre><ul> <li><code>srcTile</code>, <code>neighborTileXY</code> : Chess object, or tileXY <code>{x, y}</code>.</li> <li><code>direction</code> : Retu1rn <code>null</code> if these 2 tile positions are not neighbors.</li> </ul> </li> <li>Get neighbor tile position at angle     <pre><code>var neighborTileXY = board.getNeighborTileXYAtAngle(srcTileXY, angle);\n// var out = board.getNeighborTileXYAtAngle(srcTileXY, angle, out);\n</code></pre><ul> <li><code>srcTileXY</code> : Tile position <code>{x, y}</code> of source.</li> <li><code>angle</code> : Angle in radius.</li> <li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li> </ul> </li> </ul>"},{"location":"board/#neighbor-chess","title":"Neighbor chess","text":"<ul> <li>Get neighbor chess at 1 direction     <pre><code>var neighborChess = board.getNeighborChess(chess, direction); // neighborTileZ = tileZ of chess\n// var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x, y, z}</code>.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>neighborChess</code> : A chess object.</li> </ul> </li> <li>Get neighbor chess at directions     <pre><code>var out = board.getNeighborChess(chess, directions); // neighborTileZ = tileZ of chess\n// var out = board.getNeighborChess(chess, directions, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Chess array of neighbors.</li> </ul> </li> <li>Get neighbor chess at all directions     <pre><code>var out = board.getNeighborChess(chess, null); // neighborTileZ = tileZ of chess\n// var out = board.getNeighborChess(chess, null, neighborTileZ);\n</code></pre><ul> <li><code>chess</code> : A chess object, or tile position <code>{x, y, z}</code>.</li> <li><code>out</code> : Chess array of all neighbors.</li> </ul> </li> <li>Get direction between 2 chess     <pre><code>var direction = board.getNeighborChessDirection(chess, neighborChess);\n</code></pre><ul> <li><code>direction</code> : Return <code>null</code> if these 2 chess are not neighbors.</li> </ul> </li> <li>Are 2 chess neighbors?    <pre><code>var areNeighbor = board.areNeighbors(tileA, tileB);\n</code></pre></li> <li><code>tileA</code>, <code>tileB</code> : A chess object, or tile position <code>{x, y}</code>.</li> <li><code>areNeighbor</code> : Return <code>true</code> if <code>chessA</code> and <code>chessB</code> are neighbors.</li> </ul>"},{"location":"board/#map-neighbor-tile-position","title":"Map neighbor tile position","text":"<pre><code>var newArray = board.mapNeighbors(chess, function(neighborTileXY, index, neighborTileXYArray){\nreturn {};\n}, scope);\n</code></pre> <p>or</p> <pre><code>var newArray = board.mapNeighbors(chess, distance, function(neighborTileXY, index, neighborTileXYArray){\nreturn {};\n}, scope);\n</code></pre> <ul> <li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li> <li><code>neighborTileXY</code> : Neighbor tile position <code>{x,y,direction}</code></li> </ul>"},{"location":"board/#tile-at-direction","title":"Tile at direction","text":"<ul> <li>Get tile position at 1 direction     <pre><code>var out = board.getTileXYAtDirection(srcTileXY, direction, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out);\n</code></pre><ul> <li><code>srcTileXY</code> : A chess object, or tile position <code>{x, y}</code> of source.</li> <li><code>direction</code> : Number, or string number.<ul> <li><code>0</code> ~ <code>3</code> : Quad grid in 4 directions mode.</li> <li><code>0</code> ~ <code>7</code> : Quad grid in 8 directions mode.</li> <li><code>0</code> ~ <code>5</code> : Hexagon grid.</li> </ul> </li> <li><code>distance</code> : A JSON, number, or number array.<ul> <li>JSON : Range of distances. <code>{end: 3}</code> is equal to <code>[1,2,3]</code>.     <pre><code>{\nstart: 1,\nend: 1,\nstep: 1\n}\n</code></pre><ul> <li><code>start</code> : Start distance. Default value is <code>1</code>.</li> <li><code>end</code> : End distance. Default value is <code>1</code>.</li> <li><code>step</code> : Step. Default value is <code>1</code>.</li> </ul> </li> <li>Number, <code>3</code>.</li> <li>Array of numbers, <code>[2, 3, 5]</code> : Array of distances.</li> </ul> </li> <li><code>out</code> :<ul> <li>A single tile position, if <code>distance</code> is a number.</li> <li>Tile position <code>{x, y}</code> array, if <code>distance</code> is a JSON or a number array.</li> </ul> </li> </ul> </li> <li>Get tile positions at directions     <pre><code>var neighborTileXY = board.getTileXYAtDirection(srcTileXY, directions, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out);\n</code></pre><ul> <li><code>directions</code><ul> <li>Array of numbers, <code>[0, 2, 4]</code>.</li> <li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li> </ul> </li> <li><code>out</code> : Tile position <code>{x, y}</code> array.</li> </ul> </li> <li>Get tile positions at all directions     <pre><code>var out = board.getTileXYAtDirection(srcTileXY, null, distance);\n// var out = board.getTileXYAtDirection(srcTileXY, null, distance, out);\n</code></pre><ul> <li><code>out</code> : Tile position <code>{x, y}</code> array.</li> </ul> </li> </ul>"},{"location":"board/#empty-tile-position","title":"Empty tile position","text":"<ul> <li>Is tile empty? (TileXY is inside board, and TileXYZ has no chess)     <pre><code>var isEmpty = board.isEmptyTileXYZ(tileX, tileY, tileZ);\n</code></pre></li> <li>Get a random tile position which does not have any chess     <pre><code>var tileXY = board.getRandomEmptyTileXY(tileZ);\n// var out = board.getRandomEmptyTileXY(tileZ, out);\n</code></pre><ul> <li><code>tileXY</code> : Tile position <code>{x, y}</code>, <ul> <li><code>null</code> : All positions are occupied.</li> </ul> </li> </ul> </li> <li>Get an array of tile position which does not have any chess     <pre><code>var tileXYArray = board.getEmptyTileXYArray(tileZ);\n// var out = board.getEmptyTileXYArray(tileZ, out);\n</code></pre><ul> <li><code>tileXYArray</code> : An array of tile position</li> </ul> </li> <li>Get a random tile position of neighbor which does not have any chess     <pre><code>var tileXY = board.getRandomEmptyTileXYInRange(centerTileXY, radius, tileZ);\n// var out = board.getRandomEmptyTileXYInRange(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>tileXY</code> : Tile position <code>{x, y}</code>, <ul> <li><code>null</code> : All positions are occupied.</li> </ul> </li> </ul> </li> <li>Get an array of tile position of neighbors which does not have any chess     <pre><code>var tileXYArray = board.getEmptyTileXYArrayInRange(centerTileXY, radius, tileZ);\n// var out = board.getEmptyTileXYArrayInRange(centerTileXY, radius, tileZ, out);\n</code></pre><ul> <li><code>centerTileXY</code> : Chess object, or tileXY <code>{x, y}</code> of ring center.</li> <li><code>radius</code> : Radius of the ring.</li> <li><code>tileXYArray</code> : An array of tile position</li> </ul> </li> </ul>"},{"location":"board/#get-all-chess","title":"Get all chess","text":"<pre><code>var chessArray = board.getAllChess();\n</code></pre>"},{"location":"board/#fit","title":"Fit","text":"<pre><code>var out = board.fit(tileXYArray);\n</code></pre> <ul> <li><code>tileXYArray</code> : An array of tile position <code>{x,y}</code>.</li> </ul> <p>Offset all of tile positions to <code>(0, 0)</code>, and set board size to fit these tile positions.</p>"},{"location":"board/#blocker","title":"Blocker","text":"<ul> <li>Set blocker property : See chess data</li> <li>Has blocker at tile position (tileX, tileY, tileZ)     <pre><code>var hasBlocker = board.hasBlocker(tileX, tileY, tileZ);\n// var hasBlocker = board.hasBlocker(chess);  // chess or tileXYZ\n</code></pre></li> <li>Any chess at (tileX, tileY) has <code>blocker</code> property     <pre><code>var hasBlocker = board.hasBlocker(tileX, tileY);\n// var hasBlocker = board.hasBlocker(chess);  // chess or tileXY\n</code></pre></li> </ul>"},{"location":"board/#touch-events","title":"Touch events","text":""},{"location":"board/#set-interactive","title":"Set interactive","text":"<ul> <li>Enable     <pre><code>board.setInteractive();\n// board.setInteractive({ useTouchZone: false });\n</code></pre><ul> <li><code>useTouchZone</code> : <ul> <li><code>true</code> : Detect touch input by input event of a full-screen zone game object. Default behavior.</li> <li><code>false</code> : Detect touch input by input event of scene.</li> </ul> </li> </ul> </li> <li>Disable     <pre><code>board.setInteractive(false);\n</code></pre></li> </ul>"},{"location":"board/#touch-zone","title":"Touch Zone","text":"<ul> <li>Get     <pre><code>var touchZone = board.getTouchZone();\n// var touchZone = board.touchZone;\n</code></pre><ul> <li>Return <code>null</code> if <code>useTouchZone</code> is <code>false</code>.</li> </ul> </li> <li>Set depth     <pre><code>touchZone.setDepth(depth);\n</code></pre>     or     <pre><code>scene.children.bringToTop(touchZone);\nscene.children.sendToBack(touchZone);\nscene.children.moveUp(touchZone);\nscene.children.moveDown(touchZone);\nscene.children.moveUp(touchZone);\nscene.children.moveTo(touchZone, index);\nscene.children.moveAbove(touchZone, child); // Move touchZone above child\nscene.children.moveBelow(touchZone, child); // Move touchZone below child\nscene.children.swap(touchZone, child);\n</code></pre></li> </ul>"},{"location":"board/#pointer-down","title":"Pointer down","text":"<ul> <li>Pointer down at any tile     <pre><code>board.on('tiledown', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Pointer down at chess     <pre><code>board.on('gameobjectdown', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerdown', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-up","title":"Pointer up","text":"<ul> <li>Pointer up at any tile     <pre><code>board.on('tileup', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Pointer up at chess     <pre><code>board.on('gameobjectup', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerup', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-move","title":"Pointer move","text":"<ul> <li>Pointer move to another tile     <pre><code>board.on('tilemove', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer move to another chess     <pre><code>board.on('gameobjectmove', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointermove', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-over","title":"Pointer over","text":"<ul> <li>Pointer over to another tile     <pre><code>board.on('tileover', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer over to another chess     <pre><code>board.on('gameobjectover', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerover', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#pointer-out","title":"Pointer out","text":"<ul> <li>Pointer out tile     <pre><code>board.on('tileout', function(pointer, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>tileXY</code> : <code>{x, y}</code></li> <li>Only triggered when <code>tileXY</code> is changed.</li> </ul> </li> <li>Pointer out chess     <pre><code>board.on('gameobjectout', function(pointer, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pointerout', function(pointer) {\n})\n</code></pre><ul> <li><code>pointer</code> : Touch pointer</li> <li><code>gameObject</code> : Game object at pointer-out (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#tap","title":"Tap","text":"<ul> <li>Tap at any tile     <pre><code>board.on('tiletap', function(tap, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n// var tapsCount = tap.tapsCount;\n});\n</code></pre><ul> <li><code>tap</code> : Tap behavior.<ul> <li><code>tap.tapsCount</code> : Taps count.</li> </ul> </li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>N-taps at any tile     <pre><code>board.on('tile' + tapsCount + 'tap' , function(tap, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>'tile' + tapsCount + 'tap'</code> : <code>'tile1tap'</code>, <code>'tile2tap'</code>, <code>'tile3tap'</code>, etc ...</li> <li><code>tap</code> : Tap behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Tap at chess     <pre><code>board.on('gameobjecttap', function(tap, gameObject) {\n// var tapsCount = tap.tapsCount;\n})\n</code></pre>     or     <pre><code>gameObject.on('board.tap', function(tap) {\n// var tapsCount = tap.tapsCount;\n})\n</code></pre><ul> <li><code>tap</code> : Tap behavior.<ul> <li><code>tap.tapsCount</code> : Taps count.</li> </ul> </li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> <li>N-taps at chess     <pre><code>board.on('gameobject' + tapsCount + 'tap' , function(tap, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.' + tapsCount + 'tap', function(tap) {\n})\n</code></pre><ul> <li><code>'gameobject' + tapsCount + 'tap'</code> : <code>'gameobject1tap'</code>, <code>'gameobject2tap'</code>, <code>'gameobject3tap'</code>, etc ...</li> <li><code>'board.' + tapsCount + 'tap'</code> : <code>'board.1tap'</code>, <code>'board.2tap'</code>, <code>'board.3tap'</code>, etc ...</li> <li><code>tap</code> : Tap behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#press","title":"Press","text":"<ul> <li>Press-start at any tile     <pre><code>board.on('tilepressstart', function(press, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Press-end at any tile     <pre><code>board.on('tilepressend', function(press, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n});\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Press-star at chess     <pre><code>board.on('gameobjectpressstart', function(press, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pressstart', function(press) {\n})\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> <li>Press-end at chess     <pre><code>board.on('gameobjectpressend', function(press, gameObject) {\n})\n</code></pre>     or     <pre><code>gameObject.on('board.pressend', function(press) {\n})\n</code></pre><ul> <li><code>press</code> : Press behavior.</li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#swipe","title":"Swipe","text":"<ul> <li>Swipe at any tile     <pre><code>board.on('tileswipe', function(swipe, tileXY) {\n// var tileX = tileXY.x;\n// var tileY = tileXY.y;\n// var direction = swipe.direction;\n});\n</code></pre><ul> <li><code>swipe</code> : Swipe behavior.<ul> <li><code>swipe.direction</code> : Integer number.<ul> <li>Quad grid : 0, 1, 2, 3, 4, 5, 6, 7.</li> <li>Hexagon grid : 0, 1, 2, 3, 4, 5.</li> </ul> </li> </ul> </li> <li><code>tileXY</code> : <code>{x, y}</code></li> </ul> </li> <li>Swipe at chess     <pre><code>board.on('gameobjectswipe', function(swipe, gameObject) {\n// var direction = swipe.direction;\n})\n</code></pre>     or     <pre><code>gameObject.on('board.swipe', function(swipe) {\n// var direction = swipe.direction;\n})\n</code></pre><ul> <li><code>swipe</code> : Swipe behavior.<ul> <li><code>swipe.direction</code> : Integer number.<ul> <li>Quad grid : 0, 1, 2, 3, 4, 5, 6, 7.</li> <li>Hexagon grid : 0, 1, 2, 3, 4, 5.</li> </ul> </li> </ul> </li> <li><code>gameObject</code> : Game object at touched (tileX, tileY)</li> </ul> </li> </ul>"},{"location":"board/#grid-points","title":"Grid points","text":"<ul> <li>Get an array of grid points at tile position (tileX, tileY).     <pre><code>var points = board.getGridPoints(tileX, tileY);\n// var out = board.getGridPoints(tileX, tileY, out);\n// var points = board.getGridPoints(chess, out);  // chess or tileXY\n</code></pre><ul> <li><code>points</code> :\u3000Array of world position <code>{x, y}</code>.</li> </ul> </li> <li>Draw grid polygon on graphics object <pre><code>graphics.strokePoints(points, true);\n</code></pre></li> </ul>"},{"location":"board/#bounds","title":"Bounds","text":""},{"location":"board/#board-bounds","title":"Board bounds","text":"<ul> <li>Get a rectangle of all tiles     <pre><code>var rectangle = board.getBoardBounds();\n// var out = board.getGridBounds(out);\n</code></pre><ul> <li><code>rectangle</code> : Rectangle object.</li> </ul> </li> <li>Draw rectangle on graphics object <pre><code>graphics.strokeRectShape(rectangle);\n</code></pre></li> </ul>"},{"location":"board/#grid-bounds","title":"Grid bounds","text":"<ul> <li>Get a rectangle of a tile     <pre><code>var rectangle = board.getGridBounds(tileX, tileY);\n// var out = board.getGridBounds(tileX, tileY, out);\n// var rectangle = board.getGridBounds(chess, out);  // chess or tileXY\n</code></pre><ul> <li><code>rectangle</code> : Rectangle object.</li> </ul> </li> <li>Draw rectangle on graphics object <pre><code>graphics.strokeRectShape(rectangle);\n</code></pre></li> </ul>"},{"location":"board/#get-board","title":"Get Board","text":"<ul> <li> <p>Static method      <pre><code>var board = Board.GetBoard(chess);\n</code></pre></p> <ul> <li><code>GetBoard</code> is a static method of <code>Board</code> class.</li> </ul> </li> <li> <p>Member method     <pre><code>var board = board.chessToBoard(chess);\n</code></pre></p> </li> <li>Board property<ul> <li>Chess     <pre><code>var board = chess.rexChess.board;\n</code></pre></li> <li>Miniboard <pre><code>var board = miniboard.mainBoard;\n</code></pre></li> </ul> </li> </ul>"},{"location":"board/#other-properties","title":"Other properties","text":"<ul> <li>Scene     <pre><code>var scene = board.scene;\n</code></pre></li> <li>Grid object<ul> <li>Get     <pre><code>var grid = board.grid;\n</code></pre><ul> <li><code>grid</code> : Quad grid, or hexagon grid.</li> </ul> </li> <li>Set     <pre><code>board.setGrid(grid);\n</code></pre><ul> <li><code>grid</code> : Quad grid, or hexagon grid.</li> </ul> </li> </ul> </li> </ul>"},{"location":"bounds/","title":"Bounds","text":""},{"location":"bounds/#introduction","title":"Introduction","text":"<p>Clamp game object inside target bounds.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"bounds/#live-demos","title":"Live demos","text":"<ul> <li>Drag inside bounds</li> <li>Target bounds</li> </ul>"},{"location":"bounds/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bounds/#install-plugin","title":"Install plugin","text":""},{"location":"bounds/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexboundsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboundsplugin.min.js', true);\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = scene.plugins.get('rexboundsplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BoundsPlugin from 'phaser3-rex-plugins/plugins/bounds-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBounds',\nplugin: BoundsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = scene.plugins.get('rexBounds').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Bounds from 'phaser3-rex-plugins/plugins/bounds.js';\n</code></pre></li> <li>Add bounds behavior     <pre><code>var bounds = new Bounds(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bounds/#create-instance","title":"Create instance","text":"<pre><code>var bounds = scene.plugins.get('rexBounds').add(gameObject, {\n// target: undefined,\n// bounds: undefined,\n// enable: true,\n// alignMode: 0\n});\n</code></pre> <ul> <li><code>target</code> :     <ul> <li>A game object : Update target bounds from this game object in each tick.</li> <li><code>undefined</code>, <code>null</code>, or <code>false</code> : Set target bounds in <code>bounds</code> parameter. Default behavior.</li> </ul> </li> <li><code>bounds</code> : Target bounds used when <code>target</code> is not a game object.<ul> <li>A rectangle object</li> <li>An object :     <pre><code>{\nwidth: 0, height: 0,\nx: 0, y: 0,\ncenterX: 0, centerY: 0,            }\n</code></pre><ul> <li><code>width</code>, <code>height</code> : Size of target bounds.</li> <li><code>x</code>, <code>y</code>, or <code>centerX</code>, <code>centerY</code> : Position of target bounds.</li> </ul> </li> </ul> </li> <li><code>enable</code> :<ul> <li><code>true</code> : Clamp game object at left/right/top/bottom bounds.</li> <li><code>false</code> : Don't clamp game object at any bound</li> <li>An objecct : Set <code>true</code> to clamp at a bound      <pre><code>{\nleft: true,\nright: true,\ntop: true,\nbottom: true\n}\n</code></pre></li> </ul> </li> <li><code>alignMode</code> : <ul> <li><code>0</code>, or <code>'bounds'</code> : Align bounds of game object to target bound. Default behavior.</li> <li><code>1</code>, or <code>'origin'</code> : Set position of game object to target bound.</li> </ul> </li> </ul>"},{"location":"bounds/#target-game-object","title":"Target game object","text":"<ul> <li>Set     <pre><code>bounds.setBoundsTarget(gameObject);\n// bounds.boundsTarget = gameObject;\n</code></pre></li> <li>Clear     <pre><code>bounds.setBoundsTarget();\n// bounds.boundsTarget = undefined;\n</code></pre></li> <li>Get     <pre><code>var gameObject = bounds.boundsTarget;\n</code></pre></li> </ul>"},{"location":"bounds/#target-bounds","title":"Target bounds","text":"<ul> <li>Set     <pre><code>bounds.setBounds(bounds);\n</code></pre><ul> <li><code>bounds</code> : Target bounds used when <code>target</code> is not a game object.<ul> <li>A rectangle</li> <li>An object :     <pre><code>{\nwidth: 0, height: 0,\nx: 0, y: 0,\ncenterX: 0, centerY: 0,            }\n</code></pre><ul> <li><code>width</code>, <code>height</code> : Size of target bounds.</li> <li><code>x</code>, <code>y</code>, or <code>centerX</code>, <code>centerY</code> : Position of target bounds.</li> </ul> </li> </ul> </li> </ul> </li> <li>Get     <pre><code>var rect = bounds.bounds;\n</code></pre><ul> <li><code>rect</code> : A rectangle object</li> </ul> </li> </ul>"},{"location":"bounds/#enable","title":"Enable","text":"<ul> <li>Set<ul> <li>Enable all bounds     <pre><code>bounds.setEnable();\n//  bounds.setEnable(true);\n</code></pre></li> <li>Disable all bounds     <pre><code>bounds.setEnable(false);\n</code></pre></li> <li>Enable bounds via object     <pre><code>bounds.setEnable({\nleft: true,\nright: true,\ntop: true,\nbottom: true\n});\n</code></pre></li> </ul> </li> <li>Get     <pre><code>var enable = bounds.enable;\n</code></pre><ul> <li><code>true</code> : Has any enabled bounds</li> <li><code>false</code> : All bounds are disabled.</li> </ul> </li> <li>Get enabled of a bound     <pre><code>var enableLeftBound = bounds.boundsEnable.left;\nvar enableRightBound = bounds.boundsEnable.right;\nvar enableTopBound = bounds.boundsEnable.top;\nvar enableBottomBound = bounds.boundsEnable.bottom;\n</code></pre></li> </ul>"},{"location":"bounds/#align-mond","title":"Align mond","text":"<ul> <li>Set     <pre><code>bounds.setAlignMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'bounds'</code> : Align bounds of game object to target bound.</li> <li><code>1</code>, or <code>'origin'</code> : Set position of game object to target bound.</li> </ul> </li> <li>Get     <pre><code>var alignMode = bounds.alignMode;\n</code></pre><ul> <li><code>0</code> : Align bounds of game object to target bound.</li> <li><code>1</code> : Set position of game object to target bound.</li> </ul> </li> </ul>"},{"location":"bounds/#hit-result","title":"Hit result","text":"<ul> <li>Game object is hitting any bound     <pre><code>var isHitAny = bounds.isHitAny;\n</code></pre></li> <li>Game object is hitting a bound     <pre><code>var isHitLeft = this.isHitLeft;\nvar isHitRight = this.isHitRight;\nvar isHitTop = this.isHitTop;\nvar isHitBottom = this.isHitBottom;\n</code></pre></li> </ul>"},{"location":"bounds/#event","title":"Event","text":"<ul> <li>On hit any bound     <pre><code>bounds.on('hitany', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit left bound     <pre><code>bounds.on('hitleft', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit right bound     <pre><code>bounds.on('hitright', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit top bound     <pre><code>bounds.on('hittop', function(gameObject, bounds) {\n\n})\n</code></pre></li> <li>On hit bottom bound     <pre><code>bounds.on('hitbottom', function(gameObject, bounds) {\n\n})\n</code></pre></li> </ul>"},{"location":"bracketparser/","title":"Bracket parser","text":""},{"location":"bracketparser/#introduction","title":"Introduction","text":"<p>A lite-weight delimiter parser.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"bracketparser/#live-demoes","title":"Live demoes","text":"<ul> <li>Basic</li> <li>Markup text</li> </ul>"},{"location":"bracketparser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bracketparser/#install-plugin","title":"Install plugin","text":""},{"location":"bracketparser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbracketparserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbracketparserplugin.min.js', true);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexbracketparserplugin').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BracketParserPlugin from 'phaser3-rex-plugins/plugins/bracketparser-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBracketParser',\nplugin: BracketParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexBracketParser').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BracketParser from 'phaser3-rex-plugins/plugins/bracketparser.js';\n</code></pre></li> <li>Add parser object     <pre><code>var parser = new BracketParser(config);\n</code></pre></li> </ul>"},{"location":"bracketparser/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexBracketParser').add({\n// delimiters: '&lt;&gt;', // or ['&lt;', '&gt;']\n// valueConvert: true,\n// translateTagNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>delimiters</code>: String of left-delimiter and right-delimiter.<ul> <li>A single string with 2 characters. Default value is <code>'&lt;&gt;'</code>.</li> <li>A array with 2 strings</li> </ul> </li> <li><code>valueConvert</code> : A callback to convert values.<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li><code>false</code>, or <code>null</code> : Bypass string value.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"bracketparser/#tag-and-content","title":"Tag and content","text":"<p>Assume that left-delimiter and right-delimiter is <code>'&lt;&gt;'</code></p> <ul> <li>Start-tag : <code>'&lt;TAG&gt;'</code><ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code><ul> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code></li> </ul> </li> <li>End-tag : <code>'&lt;\\TAG&gt;'</code></li> <li>Content : Any string outside of tag-start, or tag-end.</li> </ul>"},{"location":"bracketparser/#start-parsing","title":"Start parsing","text":"<pre><code>parser.start(text);\n</code></pre> <p>These events will be emitted under this method.</p>"},{"location":"bracketparser/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>parser.pause();\n</code></pre></li> <li>Pause until event     <pre><code>parser.pauseUntilEvent(eventEmitter, eventName);\n</code></pre><ul> <li>Will invoke      <pre><code>eventEmitter.once(eventName, function() {\nparser.next();\n})\n</code></pre></li> </ul> </li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"bracketparser/#resume","title":"Resume","text":"<pre><code>parser.next();\n</code></pre>"},{"location":"bracketparser/#skip-any-tag-startany-tag-end-event","title":"Skip any-tag-start/any-tag-end event","text":"<pre><code>parser.skipEvent();\n</code></pre> <p>When getting a tag-start, or a tag-end event, parser will emitts </p> <ul> <li>Start-tag : <code>'+TAG'</code>, then <code>'+'</code></li> <li>End-tag : <code>'-TAG'</code>, then <code>'-'</code></li> </ul> <p>Invoke this medthod under <code>'+TAG'</code>, or <code>'-TAG'</code> event to skip <code>'+'</code>, or <code>'-'</code> event.</p>"},{"location":"bracketparser/#status","title":"Status","text":"<ul> <li>Is parsing     <pre><code>var isRunning = parser.isRunning;\n</code></pre><ul> <li><code>true</code> : Has remainder characters</li> <li><code>false</code> : After parsing last character</li> </ul> </li> <li>Is paused     <pre><code>var isPaused = parser.isPaused;\n</code></pre></li> </ul>"},{"location":"bracketparser/#events","title":"Events","text":""},{"location":"bracketparser/#tagscontent","title":"Tags/Content","text":"<ul> <li>Get a specific tag-start<ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code> <pre><code>parser.on('+' + TagName, function(value){ /* ... */ });\n</code></pre></li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code> <pre><code>parser.on('+' + TagName, function(value0, value1, value2){ /* ... */ });\n</code></pre></li> </ul> </li> <li>Get any-tag-start<ul> <li>Start-tag with a single value : <code>'&lt;TAG=value&gt;'</code> <pre><code>parser.on('+', function(tagName, value){ /* ... */ });\n</code></pre></li> <li>Start-tag with array values, separated via <code>','</code> : <code>'&lt;TAG=value0,value1,value2&gt;'</code> <pre><code>parser.on('+', function(tagName, value0, value1, value2){ /* ... */ });\n</code></pre></li> </ul> </li> <li>Get a specific tag-end     <pre><code>parser.on('-' + TagName, function(){ /* ... */ });\n</code></pre></li> <li>Get a content     <pre><code>parser.on('content', function(content){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code></li> </ul> </li> <li>Get any-tag-end     <pre><code>parser.on('-', function(tagName){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code></li> <li>Previous Content : <code>parser.lastContent</code></li> </ul> </li> </ul>"},{"location":"bracketparser/#control-flow","title":"Control flow","text":"<ul> <li>Parsing start     <pre><code>parser.on('start', function(){ /* ... */ });\n</code></pre></li> <li>Parsing end     <pre><code>parser.on('complete', function(){ /* ... */ });\n</code></pre></li> <li>On pause     <pre><code>parser.on('pause', function(){ /* ... */ });\n</code></pre></li> <li>On resume     <pre><code>parser.on('resume', function(){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"bracketparser2/","title":"Bracket parser 2","text":""},{"location":"bracketparser2/#introduction","title":"Introduction","text":"<p>A lite-weight delimiter parser.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"bracketparser2/#live-demoes","title":"Live demoes","text":"<ul> <li>Basic</li> </ul>"},{"location":"bracketparser2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bracketparser2/#install-plugin","title":"Install plugin","text":""},{"location":"bracketparser2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbracketparser2plugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbracketparser2plugin.min.js', true);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexbracketparser2plugin').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BracketParserPlugin from 'phaser3-rex-plugins/plugins/bracketparser2-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBracketParser',\nplugin: BracketParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser object     <pre><code>var parser = scene.plugins.get('rexBracketParser').add(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BracketParser from 'phaser3-rex-plugins/plugins/bracketparser2.js';\n</code></pre></li> <li>Add parser object     <pre><code>var parser = new BracketParser(config);\n</code></pre></li> </ul>"},{"location":"bracketparser2/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexBracketParser').add({\n// delimiters: '&lt;&gt;', // or ['&lt;', '&gt;']\n// valueConvert: true,\n// translateTagNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>delimiters</code>: String of left-delimiter and right-delimiter.<ul> <li>A single string with 2 characters. Default value is <code>'&lt;&gt;'</code>.</li> <li>A array with 2 strings</li> </ul> </li> <li><code>valueConvert</code> : A callback to convert values.<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li><code>false</code>, or <code>null</code> : Bypass string value.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"bracketparser2/#tag-and-content","title":"Tag and content","text":"<p>Assume that left-delimiter and right-delimiter is <code>'&lt;&gt;'</code></p> <ul> <li>Start-tag : <code>&lt;TAG&gt;</code></li> <li>Start-tag with payload :      <pre><code>&lt;TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n    TAG\n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>payload will be <code>{param0:value0, param1:value1}</code></li> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>String with <code>'...'</code>, or <code>\"...\"</code></li> <li>JSON array with <code>[...]</code></li> <li>JSON object with <code>{...}</code></li> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>End-tag : <code>&lt;\\TAG&gt;</code></li> <li>End-tag with payload     <pre><code>&lt;\\TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n    \\TAG\n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>payload will be <code>{param0:value0, param1:value1}</code></li> <li><code>value</code> : If <code>valueConvert</code> is <code>true</code>,<ul> <li>String with <code>'...'</code>, or <code>\"...\"</code></li> <li>JSON array with <code>[...]</code></li> <li>JSON object with <code>{...}</code></li> <li>Number</li> <li>Boolean</li> <li>null</li> <li>String</li> </ul> </li> </ul> </li> <li>Content : Any string outside of tag-start, or tag-end.</li> </ul>"},{"location":"bracketparser2/#start-parsing","title":"Start parsing","text":"<pre><code>parser.start(text);\n</code></pre> <p>These events will be emitted under this method.</p>"},{"location":"bracketparser2/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>parser.pause();\n</code></pre></li> <li>Pause until event     <pre><code>parser.pauseUntilEvent(eventEmitter, eventName);\n</code></pre><ul> <li>Will invoke      <pre><code>eventEmitter.once(eventName, function() {\nparser.next();\n})\n</code></pre></li> </ul> </li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"bracketparser2/#resume","title":"Resume","text":"<pre><code>parser.next();\n</code></pre>"},{"location":"bracketparser2/#skip-any-tag-startany-tag-end-event","title":"Skip any-tag-start/any-tag-end event","text":"<pre><code>parser.skipEvent();\n</code></pre> <p>When getting a tag-start, or a tag-end event, parser will emitts </p> <ul> <li>Start-tag : <code>'+TAG'</code>, then <code>'+'</code></li> <li>End-tag : <code>'-TAG'</code>, then <code>'-'</code></li> </ul> <p>Invoke this medthod under <code>'+TAG'</code>, or <code>'-TAG'</code> event to skip <code>'+'</code>, or <code>'-'</code> event.</p>"},{"location":"bracketparser2/#status","title":"Status","text":"<ul> <li>Is parsing     <pre><code>var isRunning = parser.isRunning;\n</code></pre><ul> <li><code>true</code> : Has remainder characters</li> <li><code>false</code> : After parsing last character</li> </ul> </li> <li>Is paused     <pre><code>var isPaused = parser.isPaused;\n</code></pre></li> </ul>"},{"location":"bracketparser2/#events","title":"Events","text":""},{"location":"bracketparser2/#tagscontent","title":"Tags/Content","text":"<ul> <li>Get a specific tag-start<ul> <li>Start-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('+' + TagName, function(payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code></li> </ul> </li> </ul> </li> <li>Get any-tag-start<ul> <li>Start-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('+', function(tagName, payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code> </li> </ul> </li> </ul> </li> <li>Get a specific tag-end<ul> <li>End-tag with payload : <code>'&lt;\\TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('-' + TagName, function(payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code></li> </ul> </li> </ul> </li> <li>Get a content     <pre><code>parser.on('content', function(content){ /* ... */ });\n</code></pre><ul> <li>Previous tag-start : <code>parser.lastTagStart</code> <pre><code>{\nname: '',\npayload: {}\n}\n</code></pre></li> </ul> </li> <li>Get any-tag-end<ul> <li>End-tag with payload : <code>'&lt;TAG param0=value0 param1=value1&gt;'</code> <pre><code>parser.on('-', function(tagName, payload){ /* ... */ });\n</code></pre><ul> <li><code>payload</code> : <code>{param0:value0, param1:value1, ...}</code> </li> </ul> </li> <li>Previous tag-start : <code>parser.lastTagStart</code> <pre><code>{\nname: '',\npayload: {}\n}\n</code></pre></li> <li>Previous Content : <code>parser.lastContent</code></li> </ul> </li> </ul>"},{"location":"bracketparser2/#control-flow","title":"Control flow","text":"<ul> <li>Parsing start     <pre><code>parser.on('start', function(){ /* ... */ });\n</code></pre></li> <li>Parsing end     <pre><code>parser.on('complete', function(){ /* ... */ });\n</code></pre></li> <li>On pause     <pre><code>parser.on('pause', function(){ /* ... */ });\n</code></pre></li> <li>On resume     <pre><code>parser.on('resume', function(){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"bracketparser2/#compare-with-bracket-parser","title":"Compare with bracket-parser","text":"<p>Tag format in </p> <ul> <li>bracket-parser:      <pre><code>&lt;TAG=value0,value1&gt;\n</code></pre><ul> <li>Carried parameters is an array, more compactly.</li> </ul> </li> <li>bracket-parser2:      <pre><code>&lt;TAG param0=value0 param1=value1&gt;\n</code></pre>     or     <pre><code>&lt;\n  TAG \n    param0=value0 \n    param1=value1\n&gt;\n</code></pre><ul> <li>Carried parameters is a dictionary, more clearly.</li> </ul> </li> </ul>"},{"location":"buffdata/","title":"Buff data","text":""},{"location":"buffdata/#introduction","title":"Introduction","text":"<p>Data manager with buffs, extends from built-in data manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"buffdata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"buffdata/#install-plugin","title":"Install plugin","text":""},{"location":"buffdata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuffdataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuffdataplugin.min.js', true);\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = scene.plugins.get('rexbuffdataplugin').add(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BuffDataPlugin from 'phaser3-rex-plugins/plugins/buffdata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBuffData',\nplugin: BuffDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = scene.plugins.get('rexBuffData').add(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BuffData from 'phaser3-rex-plugins/plugins/buffdata.js';\n</code></pre></li> <li>Add buff data manager object     <pre><code>var data = new BuffData(parent);\n</code></pre></li> </ul>"},{"location":"buffdata/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexBuffData').add(parent);\n// var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter);\n</code></pre> <ul> <li><code>data</code> : Buff data manager</li> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"buffdata/#extend-existing-data-manager","title":"Extend existing data manager","text":"<pre><code>var data = scene.plugins.get('rexBuffData').extend(data);\n</code></pre> <ul> <li><code>data</code> : Existing data manager</li> </ul>"},{"location":"buffdata/#buff","title":"Buff","text":"<p>A value is composed of <code>baseValue</code>, and some <code>buffs</code>, clamped by <code>min</code>, <code>max</code> values.</p> <ul> <li> <p>Base value</p> <ul> <li>Set     <pre><code>data.setBaseValue(key, value);\n</code></pre></li> <li>Remove     <pre><code>data.removeBaseValue(key);\n</code></pre></li> <li>Get     <pre><code>var baseValue = data.getBaseValue(key);\n</code></pre></li> </ul> </li> <li> <p>Buffs, each value can have many buffs, or no buff.</p> <ul> <li>Add/set a buff     <pre><code>data.setBuff(key, buffKey, value);\n</code></pre><ul> <li><code>value</code> :<ul> <li>A number</li> <li>A string for percentage like <code>'10%'</code>, which means that <code>(baseValue * percentage)</code></li> </ul> </li> </ul> </li> <li>Remove a buff of a key     <pre><code>data.removeBuff(key, buffKey);\n</code></pre></li> <li>Remove all buffs of a key     <pre><code>data.removeBuff(key);\n</code></pre></li> <li>Get a buff value     <pre><code>var buffValue = data.getBuffValue(key, buffKey);\n</code></pre></li> </ul> </li> <li>Min, max bounds, optional.<ul> <li>Set     <pre><code>data.setMin(key, min);\n</code></pre> <pre><code>data.setMax(key, max);\n</code></pre> <pre><code>data.setBounds(key, min, max);\n</code></pre><ul> <li><code>min</code>, <code>max</code> : Clamp buffed result value between <code>min</code> and <code>max</code> value. Set <code>undefined</code> to ignore it.</li> </ul> </li> <li>Get     <pre><code>var min = data.getMinBound(key);\nvar max = data.getMaxBound(key);\n</code></pre></li> </ul> </li> <li>Buffed result<ul> <li>Get     <pre><code>var result = data.get(key);\n</code></pre></li> <li>Events</li> </ul> </li> </ul>"},{"location":"buildarcadeobject/","title":"Build arcade object","text":""},{"location":"buildarcadeobject/#introduction","title":"Introduction","text":"<p>Create arcade body, and inject arcade object methods.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"buildarcadeobject/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"buildarcadeobject/#install-plugin","title":"Install plugin","text":""},{"location":"buildarcadeobject/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuildarcadeobjectplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuildarcadeobjectplugin.min.js', true);\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = scene.plugins.get('rexbuildarcadeobjectplugin').build(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import BuildArcadeObjectPlugin from 'phaser3-rex-plugins/plugins/buildarcadeobject-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBuildArcadeObject',\nplugin: BuildArcadeObjectPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import BuildArcadeObject from 'phaser3-rex-plugins/plugins/buildarcadeobject.js';\n</code></pre></li> <li>Inject arcade object methods     <pre><code>var gameObject = BuildArcadeObject(gameObject);\n</code></pre></li> </ul>"},{"location":"buildarcadeobject/#inject-arcade-object-methods","title":"Inject arcade object methods","text":"<ul> <li>Create dynamic arcade body     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject);\n// var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects);\n</code></pre></li> <li>Create static arcade body     <pre><code>var gameObject = scene.plugins.get('rexBuildArcadeObject').build(gameObject, true);\n// var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);\n</code></pre></li> </ul>"},{"location":"bullet/","title":"Bullet","text":""},{"location":"bullet/#introduction","title":"Introduction","text":"<p>Move game object toward current angle of game object, with a constant speed.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"bullet/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"bullet/#install-plugin","title":"Install plugin","text":""},{"location":"bullet/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbulletplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbulletplugin.min.js', true);\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = scene.plugins.get('rexbulletplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import BulletPlugin from 'phaser3-rex-plugins/plugins/bullet-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBullet',\nplugin: BulletPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = scene.plugins.get('rexBullet').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import Bullet from 'phaser3-rex-plugins/plugins/bullet.js';\n</code></pre></li> <li>Add bullet behavior     <pre><code>var bullet = new Bullet(gameObject, config);\n</code></pre></li> </ul>"},{"location":"bullet/#create-instance","title":"Create instance","text":"<pre><code>var bullet = scene.plugins.get('rexBullet').add(gameObject, {\nspeed: 200,\n// wrap: false,\n// padding: 0,\n// enable: true,\n\n// angle: undefined,\n// rotation: undefined\n});\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>false</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>angle</code>, <code>rotation</code> : <ul> <li><code>undefined</code> : Use angle of game object as angle of bullet. Default value.</li> <li>A number : Angle of bullet, in degrees or radians.</li> </ul> </li> </ul>"},{"location":"bullet/#speed","title":"Speed","text":"<ul> <li>Set     <pre><code>bullet.setSpeed(speed);\n// bullet.speed = speed;\n</code></pre></li> <li>Get     <pre><code>var speed = bullet.speed;\n</code></pre></li> </ul>"},{"location":"bullet/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>bullet.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"bullet/#angle","title":"Angle","text":"<ul> <li>Set angle     <pre><code>bullet.setAngle(degrees);\n// bullet.angle = degrees;\n</code></pre>     or     <pre><code>bullet.setRotation(radians);\n// bullet.rotation  = radians;\n</code></pre></li> <li>Use angle of game object     <pre><code>bullet.setAngle();\n// bullet.setRotation();\n</code></pre></li> </ul>"},{"location":"button/","title":"Button","text":""},{"location":"button/#introduction","title":"Introduction","text":"<p>Fires 'click' event when touch releasd after pressed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"button/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"button/#install-plugin","title":"Install plugin","text":""},{"location":"button/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbuttonplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbuttonplugin.min.js', true);\n</code></pre></li> <li>Add button behavior     <pre><code>var button = scene.plugins.get('rexbuttonplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ButtonPlugin from 'phaser3-rex-plugins/plugins/button-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexButton',\nplugin: ButtonPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add button behavior     <pre><code>var button = scene.plugins.get('rexButtonn').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Button from 'phaser3-rex-plugins/plugins/button.js';\n</code></pre></li> <li>Add button behavior     <pre><code>var button = new Button(gameObject, config);\n</code></pre></li> </ul>"},{"location":"button/#create-instance","title":"Create instance","text":"<pre><code>var button = scene.plugins.get('rexButton').add(gameObject, {\n// enable: true,\n// mode: 1,              // 0|'press'|1|'release'\n// clickInterval: 100    // ms\n// threshold: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Clickable.</li> <li><code>mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior.</li> </ul> </li> </ul>"},{"location":"button/#events","title":"Events","text":"<ul> <li>Click     <pre><code>button.on('click', function (button, gameObject, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Enable     <pre><code>button.on('enable', function (button, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable     <pre><code>button.on('disable', function (button, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer over     <pre><code>button.on('over', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer out     <pre><code>button.on('out', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer down     <pre><code>button.on('down', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer up     <pre><code>button.on('up', function (button, gameObject, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"button/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = button.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>button.setEnable(enabled);  // enabled: true, or false\n// button.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>button.toggleEnable();\n</code></pre></li> </ul>"},{"location":"button/#set-mode","title":"Set mode","text":"<pre><code>button.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> </ul>"},{"location":"button/#set-click-interval","title":"Set click interval","text":"<pre><code>button.setClickInterval(interval);  // interval in ms\n</code></pre>"},{"location":"button/#set-dragging-threshold","title":"Set dragging threshold","text":"<pre><code>button.setDragThreshold(distance);  // distance in pixels\n</code></pre>"},{"location":"camera-controllor/","title":"Controllor","text":""},{"location":"camera-controllor/#introduction","title":"Introduction","text":"<p>Scroll/zoom camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-controllor/#usage","title":"Usage","text":""},{"location":"camera-controllor/#setup","title":"Setup","text":"<ol> <li>Create controllor     <pre><code>// var cursors = scene.input.keyboard.createCursorKeys();\nvar controls = new Phaser.Cameras.Controls.SmoothedKeyControl({\ncamera: camera,\n\nleft: cursors.left,    // { isDown, isUp }\nright: cursors.right,  // { isDown, isUp }\nup: cursors.up,        // { isDown, isUp }\ndown: cursors.down,    // { isDown, isUp }\nzoomIn: null,          // { isDown, isUp }\nzoomOut: null,         // { isDown, isUp }\n\nzoomSpeed: 0.01,\nminZoom: 0.001,\nmaxZoom: 1000,\n\nacceleration: null,\n// acceleration: {\n//    x: 0,\n//    y: 0\n// }\n\ndrag: null,\n// drag: {\n//    x: 0,\n//    y: 0\n// }\n\nmaxSpeed: null\n// maxSpeed: {\n//    x: 0,\n//    y: 0\n// }\n});\n</code></pre>     or     <pre><code>var controls = new Phaser.Cameras.Controls.FixedKeyControl(config);\n</code></pre></li> <li>Update     <pre><code>scene.update = function (time, delta) {\ncontrols.update(delta);\n}\n</code></pre></li> </ol>"},{"location":"camera-controllor/#other-methods","title":"Other methods","text":"<ul> <li>Start     <pre><code>controls.start();\n</code></pre></li> <li>Stop     <pre><code>controls.stop();\n</code></pre></li> <li>Set camera     <pre><code>controls.setCamera(camera);\n</code></pre></li> </ul>"},{"location":"camera-effects/","title":"Effects","text":""},{"location":"camera-effects/#introduction","title":"Introduction","text":"<p>Effects of camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-effects/#usage","title":"Usage","text":""},{"location":"camera-effects/#fade","title":"Fade","text":"<ul> <li>Fades the Camera in, from the given color over the duration specified.     <pre><code>camera.fadeIn(duration);   // duration in ms\n// camera.fadeIn(duration, red, green, blue, callback, context);\n// red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255.\n</code></pre><ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera out, to the given color over the duration specified.     <pre><code>camera.fadeOut(duration);   // duration in ms\n// camera.fadeOut(duration, red, green, blue, callback, context);\n</code></pre><ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera, from the given color to transparent over the duration specified.     <pre><code>camera.fadeFrom(duration);   // duration in ms\n// camera.fadeFrom(duration, red, green, blue, force, callback, context);\n</code></pre><ul> <li><code>force</code> : Force the effect to start immediately, even if already running.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> <li>Fades the Camera, from transparent to the given color over the duration specified.     <pre><code>camera.fade(duration);   // duration in ms\n// camera.fade(duration, red, green, blue, force, callback, context);\n</code></pre><ul> <li><code>force</code> : Force the effect to start immediately, even if already running.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera-effects/#events","title":"Events","text":"<pre><code>camera.on('camerafadeincomplete', camera, fade);\n</code></pre> <pre><code>camera.on('camerafadeoutcomplete', camera, fade);\n</code></pre>"},{"location":"camera-effects/#flash","title":"Flash","text":"<pre><code>camera.flash(duration);   // duration in ms\n// camera.flash(duration, red, green, blue, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_1","title":"Events","text":"<pre><code>camera.on('cameraflashstart', camera, flash, duration, red, green, blue);\n</code></pre> <pre><code>camera.on('cameraflashcomplete', camera, flash);\n</code></pre>"},{"location":"camera-effects/#shake","title":"Shake","text":"<pre><code>camera.shake(duration);   // duration in ms\n// camera.shake(duration, intensity, force, callback, context);  // callback: invoked when completed\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_2","title":"Events","text":"<pre><code>camera.on('camerashakestart', camera, shake, duration, intensity);\n</code></pre> <pre><code>camera.on('camerashakecomplete', camera, shake);\n</code></pre>"},{"location":"camera-effects/#pan","title":"Pan","text":"<pre><code>camera.pan(x, y, duration);   // duration in ms\n// camera.pan(x, y, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The destination x/y coordinate to scroll the center of the Camera viewport to.</li> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, x, y) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_3","title":"Events","text":"<pre><code>camera.on('camerapanstart', camera, pan, duration, x, y);\n</code></pre> <pre><code>camera.on('camerapancomplete', camera, pan);\n</code></pre>"},{"location":"camera-effects/#zoom","title":"Zoom","text":"<pre><code>camera.zoomTo(zoomValue, duration);   // duration in ms\n// camera.zoomTo(zoomValue, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, zoomValue) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_4","title":"Events","text":"<pre><code>camera.on('camerazoomstart', camera, zoom, duration, zoomValue);\n</code></pre> <pre><code>camera.on('camerazoomcomplete', camera, zoom);\n</code></pre>"},{"location":"camera-effects/#rotate-to","title":"Rotate to","text":"<pre><code>camera.rotateTo(radians, shortestPath, duration);   // duration in ms\n// camera.rotateTo(radians, shortestPath, duration, ease, force, callback, context);\n</code></pre> <ul> <li><code>callback</code> , <code>context</code> : It will be invoked every frame for the duration of the effect.     <pre><code>function(camera, progress, angle) {}\n</code></pre></li> </ul>"},{"location":"camera-effects/#events_5","title":"Events","text":"<pre><code>camera.on('camerarotatestart', camera, rotateTo, duration, angle);\n</code></pre> <pre><code>camera.on('camerarotatecomplete', camera, rorotateTotate);\n</code></pre>"},{"location":"camera-effects/#mask","title":"Mask","text":"<ul> <li>Add mask     <pre><code>camera.setMask(mask);\n</code></pre></li> <li>Clear mask     <pre><code>camera.clearMask();\n</code></pre></li> </ul> <p>More detail about mask</p>"},{"location":"camera-shader-effect/","title":"Shader effect","text":""},{"location":"camera-shader-effect/#introduction","title":"Introduction","text":"<p>Shader effect of camera.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera-shader-effect/#usage","title":"Usage","text":""},{"location":"camera-shader-effect/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import PostFxClass from 'path';\nvar config = {\n// ...\npipeline: [PostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ul> <p>Some post-fx pipelines:</p> <ul> <li>Barrel: Barrel post processing filter.</li> <li>Color replace: Replace color post processing filter.</li> <li>Cross-stitching: Cross-stitching post processing filter.</li> <li>Dissolve: Dissolve transition post processing filter.</li> <li>Fish eye: Fish-eye post processing filter.</li> <li>Glow-filter: Glow post processing filter.</li> <li>Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Gray-scale: Gray scale post processing filter.</li> <li>Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Horri-fi: 6-in-1 post processing filter.</li> <li>Inverse: Inverse color post processing filter.</li> <li>Kawase-blur: Kawase-blur post processing filter.</li> <li>Pixelation: Pixelation post processing filter.</li> <li>Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shockwave: Shockwave post processing filter.</li> <li>Split: Split image into 4 parts.</li> <li>Swirl: Swirl post processing filter.</li> <li>Warp: Warp post processing filter. </li> </ul>"},{"location":"camera-shader-effect/#add-post-fx-pipeline","title":"Add post-fx pipeline","text":"<pre><code>camera.setPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>PostFxClass</code> : Class of post-fx pipeline.</li> </ul>"},{"location":"camera-shader-effect/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<ul> <li>Remove a kind of post-fx pipeline     <pre><code>camera.removePostPipeline(PostFxClass);\n</code></pre></li> <li>Remove all post-fx pipelines     <pre><code>camera.resetPipeline(true);\n</code></pre>     or     <pre><code>camera.postPipelines = [];\ncamera.hasPostPipeline = false;\n</code></pre></li> </ul>"},{"location":"camera-shader-effect/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<pre><code>var pipelineInstance = camera.getPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>pipelineInstance</code> : <ul> <li>A pipeline instance</li> <li>An array of pipeline instances</li> </ul> </li> </ul>"},{"location":"camera-shader-effect/#add-effect-properties","title":"Add effect properties","text":"<p>See Add effect properties behavior</p>"},{"location":"camera/","title":"Camera","text":""},{"location":"camera/#introduction","title":"Introduction","text":"<p>Camera to display game objects, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"camera/#usage","title":"Usage","text":""},{"location":"camera/#get-camera","title":"Get camera","text":"<p>Each scene has one or more cameras.</p> <ul> <li>Main camera     <pre><code>var camera = scene.cameras.main;\n</code></pre></li> <li>Add new camera     <pre><code>var camera = scene.cameras.add();\n// var camera = scene.cameras.add(x, y, width, height);\n</code></pre></li> <li>Add existed camera     <pre><code>scene.cameras.addExisting(camera);\n</code></pre></li> </ul>"},{"location":"camera/#create-cameras-from-json","title":"Create cameras from JSON","text":"<pre><code>scene.cameras.fromJSON(config);\n// scene.cameras.fromJSON(configArray);\n</code></pre> <ul> <li><code>config</code> :     <pre><code>{\nname: '',\nx: 0,\ny: 0,\nwidth: scene.sys.scale.width,\nheight: scene.sys.scale.height,\nzoom: 1,\nrotation: 0,\nscrollX: 0,\nscrollY: 0,\nroundPixels: false,\nvisible: true,\nbackgroundColor: false,\nbounds: null, // {x, y, width, height}\n}\n</code></pre></li> </ul>"},{"location":"camera/#remove-camera","title":"Remove camera","text":"<pre><code>scene.cameras.remove(camera);\n</code></pre>"},{"location":"camera/#destroy-camera","title":"Destroy camera","text":"<pre><code>camera.destroy();\n</code></pre>"},{"location":"camera/#view-port","title":"View port","text":"<ul> <li>Set     <pre><code>camera.setViewport(top, left, width, height);\n</code></pre>     or     <pre><code>camera.setPosition(top, left);\n// camera.x = top;\n// camera.y = left;\n</code></pre> <pre><code>camera.setSize(width, height);\n// camera.width = width;\n// camera.height = height;\n</code></pre></li> <li>Get<ul> <li>Position<ul> <li>Top-left     <pre><code>var top = camera.x;\nvar left = camera.y;\n</code></pre></li> <li>Center, relative to the top-left of the game canvas.     <pre><code>var x = camera.centerX;\nvar y = camera.centerY;\n</code></pre></li> </ul> </li> <li>Width &amp; height     <pre><code>var width = camera.width;\nvar height = camera.height;\n</code></pre> <pre><code>var displayWidth = camera.displayWidth;\nvar displayHeight = camera.displayHeight;\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera/#zoom","title":"Zoom","text":"<ul> <li>Set     <pre><code>camera.setZoom(zoomValue);  // The minimum it can be is 0.001.\ncamera.zoom = zoomValue;\n</code></pre></li> <li>Get     <pre><code>var zoomValue = camera.zoom;\n</code></pre></li> </ul>"},{"location":"camera/#rotation","title":"Rotation","text":"<ul> <li>Set     <pre><code>camera.setAngle(angle);  // angle in degree\ncamera.setRotation(angle);  // angle in radians\ncamera.rotation = angle; // angle in radians\n</code></pre></li> <li>Get     <pre><code>var angle = camera.rotation;  // angle in radians\n</code></pre></li> </ul>"},{"location":"camera/#origin","title":"Origin","text":"<ul> <li>Set     <pre><code>camera.setOrigin(x, y);\n// camera.originX = 0.5;\n// camera.originY = 0.5;\n</code></pre></li> <li>Get     <pre><code>var originX = camera.originX\nvar originY = camera.originY\n</code></pre></li> </ul>"},{"location":"camera/#visible","title":"Visible","text":"<p>A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests.</p> <pre><code>camera.setVisible(value);\n// camera.visible = value\n</code></pre> <pre><code>var visible = camera.visible;\n</code></pre>"},{"location":"camera/#alpha","title":"Alpha","text":"<pre><code>camera.setAlpha(value);\n// camera.alpha = value;\n</code></pre> <pre><code>var alpha = camera.alpha;\n</code></pre>"},{"location":"camera/#scroll","title":"Scroll","text":"<pre><code>camera.setScroll(x, y)\n</code></pre> <pre><code>camera.scrollX = scrollX;\ncamera.scrollY = scrollY;\n</code></pre> <pre><code>camera.centerToBounds();\n</code></pre> <pre><code>camera.centerOn(x, y);  // centered on the given coordinates\n</code></pre> <pre><code>camera.centerOnX(x);\ncamera.centerOnY(y);\n</code></pre> <pre><code>camera.centerToSize();\n</code></pre>"},{"location":"camera/#follow-game-object","title":"Follow game object","text":"<ul> <li>Start following     <pre><code>camera.startFollow(gameObject);\n// camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY);  // \n</code></pre><ul> <li><code>roundPx</code> : set true to round the camera position to integers</li> <li><code>lerpX</code>, <code>lerpY</code> : A value between 0 and 1. <ul> <li><code>1</code> : Camera will instantly snap to the target coordinates.</li> <li><code>0.1</code> : Camera will more slowly track the target, giving a smooth transition.</li> </ul> </li> <li><code>offsetX</code>, <code>offsetY</code> : The horizontal/vertical offset from the camera follow target.x position.</li> </ul> </li> <li>Stop following     <pre><code>camera.stopFollow();\n</code></pre></li> <li>Set follow offset     <pre><code>camera.setFollowOffset(x, y);\n</code></pre></li> <li>Set lerp     <pre><code>camera.setLerp(x, y);\n</code></pre><ul> <li><code>1</code> : Camera will instantly snap to the target coordinates.</li> <li><code>0.1</code> : Camera will more slowly track the target, giving a smooth transition.</li> </ul> </li> <li>Deadzone     <pre><code>camera.setDeadzone(width, height);\n</code></pre>     If the target moves outside of this area, the camera will begin scrolling in order to follow it.<ul> <li>Boundaries     <pre><code>var left = camera.deadzone.left;\nvar right = camera.deadzone.right;\nvar top = camera.deadzone.top;\nvar bootom = camera.deadzone.bottom;\n</code></pre></li> <li>Clear deadzone     <pre><code>camera.setDeadzone();\n</code></pre></li> </ul> </li> </ul>"},{"location":"camera/#events","title":"Events","text":"<ul> <li>Follower Update     <pre><code>camera.on('followupdate', function(camera, gameObject){ })\n</code></pre></li> </ul>"},{"location":"camera/#scroll-factor","title":"Scroll factor","text":"<p>See Scroll factor in game object.</p>"},{"location":"camera/#bounds","title":"Bounds","text":"<ul> <li>Set     <pre><code>camera.setBounds(x, y, width, height)\n</code></pre></li> <li>Get     <pre><code>var bounds = camera.getBounds();  // bounds: a rectangle object\n// var out = camera.getBounds(out);\n</code></pre></li> </ul>"},{"location":"camera/#world-coordinates","title":"World coordinates","text":"<ul> <li>World view, a rectangle object <pre><code>var worldView = camera.worldView;\nvar x = worldView.x;\nvar y = worldView.y;\nvar width = worldView.width;  // displayWidth\nvar height = worldView.height; // displayHeight\nvar left = worldView.left;  // x\nvar right = worldView.right;  // x + width\nvar top = worldView.top;  // y\nvar bottom = worldView.bottom;  // y + height\nvar centerX = worldView.centerX;\nvar centerY = worldView.centerY;\nvar isInside = worldView.contains(x, y);\nvar randPoint = worldView.getRandomPoint(point); // point: {x, y}\n</code></pre></li> <li>Middle point     <pre><code>var x = camera.midPoint.x;\nvar y = camera.midPoint.y;\n</code></pre></li> <li>Get world position     <pre><code>var out = camera.getWorldPoint(x, y);\n// var out = camera.getWorldPoint(x, y, out);\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Position of camera.</li> <li><code>out</code> : World position <code>{x, y}</code></li> </ul> </li> </ul>"},{"location":"camera/#set-background-color","title":"Set background color","text":"<pre><code>camera.setBackgroundColor(color);\n</code></pre>"},{"location":"camera/#ignore-game-object","title":"Ignore game object","text":"<p>Ignored game objects won't show at that camera.</p> <pre><code>camera.ignore(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> :<ul> <li>A game object</li> <li>An array of game objects</li> <li>A group</li> </ul> </li> </ul>"},{"location":"camera/#get-cameras-below-pointer","title":"Get cameras below pointer","text":"<pre><code>var cameras = scene.cameras.getCamerasBelowPointer(pointer);\n</code></pre> <ul> <li><code>cameras</code> : An array of cameras.</li> <li><code>pointer</code> : <code>{x, y}</code></li> </ul>"},{"location":"camera/#pause-resume","title":"Pause, resume","text":"<ul> <li>Pause     <pre><code>camera.renderToTexture = false; // Pause\n</code></pre></li> <li>Resume     <pre><code>camera.renderToTexture = true; // Resume\n</code></pre></li> </ul>"},{"location":"camera/#clear","title":"Clear","text":"<pre><code>camera.clearRenderToTexture();\n</code></pre>"},{"location":"camera/#children","title":"Children","text":""},{"location":"camera/#visible-children","title":"Visible children","text":"<ul> <li>Filter visible children     <pre><code>var visible = scene.cameras.getVisibleChildren(children, camera);\n</code></pre></li> <li>Get all visible children     <pre><code>var visible = scene.cameras.getVisibleChildren(scene.sys.displayList.list, camera);\n</code></pre></li> </ul> <p>See also: gameObject.willRender(camera)</p>"},{"location":"camera/#render-children","title":"Render children","text":"<pre><code>var children = camera.renderList;\n</code></pre> <p>Read only.</p>"},{"location":"canvas-circularprogress/","title":"Circular progres","text":""},{"location":"canvas-circularprogress/#introduction","title":"Introduction","text":"<p>Circular progress bar on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-circularprogress/#live-demos","title":"Live demos","text":"<ul> <li>Circular-progress</li> </ul>"},{"location":"canvas-circularprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-circularprogress/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-circularprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcircularprogresscanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcircularprogresscanvasplugin.min.js', true);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircularProgressCanvasPlugin from 'phaser3-rex-plugins/plugins/circularprogresscanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressCanvasPlugin',\nplugin: CircularProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircularProgressCanvas from 'phaser3-rex-plugins/plugins/circularprogresscanvas.js';\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = new CircularProgressCanvas(scene, x, y, radius, color, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressCanvasPlugin',\nplugin: CircularProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"canvas-circularprogress/#create-instance","title":"Create instance","text":"<pre><code>var circularProgress = scene.add.rexCircularProgressCanvas(x, y, radius, barColor, value, {\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\n// textFont: ,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var circularProgress = scene.add.rexCircularProgressCanvas({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\n// textFont: ,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>radius</code> : Radius of this circle. Size will be <code>(radius*2, radius*2)</code>.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>textColor</code> : Color of display text. Default is <code>undefined</code>.</li> <li><code>textStrokeColor</code>, <code>textStrokeThickness</code> : Stroke color, stroke line width of display text. Default is <code>undefined</code>.</li> <li><code>textSize</code>, <code>textFamily</code>, <code>textStyle</code> : Size, family, style of display text.</li> <li><code>textFormatCallback</code>, <code>textFormatCallbackScope</code> : Formating callback of display text. ex:     <pre><code>function(value) {\nreturn Math.floor(value * 100).toString();\n}\n</code></pre>     Default value is <code>undefined</code>.</li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, circularProgress) {\n}\n</code></pre></li> </ul> <p>Add circular-progress from JSON</p> <pre><code>var circularProgress = scene.make.rexCircularProgressCanvas({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\ntextColor: undefined,\ntextStrokeColor: undefined,\ntextStrokeThickness: undefined,\ntextSize: '16px',\ntextFamily: 'Courier',\ntextStyle: '',\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"canvas-circularprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircularProgressCanvas extends CircularProgressCanvas {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circularProgress = new MyCircularProgressCanvas(scene, x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = circularProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = circularProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = circularProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>circularProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>circularProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>circularProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>circularProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>circularProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>circularProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>circularProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = circularProgress.radius;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setRadius(radius);\n// circularProgress.radius = radius;\n</code></pre><ul> <li>Also resize this game object to <code>(radius*2, radius*2)</code></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#circular-track","title":"Circular track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = circularProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setTrackColor(trackColor);\n// circularProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#circular-bar","title":"Circular bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = circularProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setBarColor(barColor);\n// circularProgress.barColor = barColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> <li>Start angle<ul> <li>Get     <pre><code>var startAngle = circularProgress.startAngle;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setStartAngle(startAngle);\ncircularProgress.startAngle = startAngle;\n</code></pre><ul> <li><code>startAngle</code> : Start angle of circular bar, in radians.</li> </ul> </li> </ul> </li> <li>Anticlockwise<ul> <li>Get     <pre><code>var anticlockwise = circularProgress.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAnticlockwise(anticlockwise);\n// circularProgress.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#center-circle","title":"Center circle","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var centerColor = circularProgress.centerColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setCenterColor(centerColor);\n// circularProgress.centerColor = centerColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#display-text","title":"Display text","text":"<ul> <li>Fill color     <pre><code>circularProgress.setTextColor(color);\n</code></pre></li> <li>Stroke color     <pre><code>circularProgress.setTextStrokeColor(color, thickness);\n</code></pre></li> <li>Font     <pre><code>circularProgress.setTextFont(fontSize, fontFamily, fontStyle);\n</code></pre></li> <li>Format callback     <pre><code>circularProgress.setTextFormatCallback(callback, scope);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(value) {\nreturn Math.floor(value * 100).toString(); }\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-circularprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>circularProgress.on('valuechange', function(newValue, oldValue, circularProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"canvas-circularprogress/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"canvas-circularprogress/#create-mask","title":"Create mask","text":"<pre><code>var mask = circularProgress.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"canvas-circularprogress/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"canvas-circularprogress/#compare-with-circular-progress-shape","title":"Compare with Circular-progress shape","text":"<ul> <li>Circular-progress canvas creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Circular-progress canvas can draw text directly, circular progress shape can't draw any text.</li> </ul>"},{"location":"canvas-data/","title":"Canvas image data","text":""},{"location":"canvas-data/#introduction","title":"Introduction","text":"<p>Get image data from texture, or text object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"canvas-data/#live-demos","title":"Live demos","text":"<ul> <li>Text to bit-map</li> <li>Texture to color-map</li> </ul>"},{"location":"canvas-data/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-data/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-data/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasdataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasdataplugin.min.js', true);\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasData = scene.plugins.get('rexcanvasdataplugin').canvasObjectToBitmap(gameObject);\nvar canvasData = scene.plugins.get('rexcanvasdataplugin').textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasDataPlugin from 'phaser3-rex-plugins/plugins/canvasdata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasData',\nplugin: CanvasDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);\nvar canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasData from 'phaser3-rex-plugins/plugins/canvasdata.js';\n</code></pre></li> <li>Add canvas-data object     <pre><code>var canvasdata = CanvasData.canvasObjectToBitmap(gameObject);\nvar canvasdata = CanvasData.textureTColorMap(textureKey, frameName);\n</code></pre></li> </ul>"},{"location":"canvas-data/#textcanvas-object-bitmap","title":"Text/canvas object -&gt; Bitmap","text":"<pre><code>var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);\n</code></pre> <ul> <li><code>gameObject</code> : <ul> <li>Any kind of text object : Text object, bbcode text object, or tag text object.</li> <li>Canvas object</li> </ul> </li> <li>For each pixel data     <pre><code>canvasData.forEach(function(value, x, y, canvasData){\n\n}, scope);\n</code></pre><ul> <li><code>value</code> : <code>true</code>, or <code>false</code></li> </ul> </li> </ul>"},{"location":"canvas-data/#texture-color-map","title":"Texture -&gt; Color map","text":"<ul> <li>Texture -&gt; Color map     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(textureKey, frameName, out);\n</code></pre></li> <li>Texture of game object -&gt; Color map     <pre><code>var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(gameObject);\n// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);\n</code></pre></li> <li>For each pixel data     <pre><code>canvasData.forEach(function(value, x, y, canvasData){\n\n}, scope);\n</code></pre><ul> <li><code>value</code> : Color32 integer = color integer + (alpha &lt;&lt; 24)<ul> <li>Get color integer (0 ~ 0xffffff)     <pre><code>var color = value &amp; 0xffffff;\n</code></pre>     or     <pre><code>var color = canvasData.color32ToColorInt(value);\n</code></pre></li> <li>Get alpha (0 ~ 0xff)     <pre><code>var alpha = value &gt;&gt;&gt; 24;\n</code></pre> <pre><code>var alpha = canvasData.color32ToAlpha(value);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"canvas-data/#canvas-data","title":"Canvas data","text":""},{"location":"canvas-data/#for-each-pixel","title":"For each pixel","text":"<ul> <li>For each pixel data     <pre><code>canvasData.forEach(callback, scope);\n</code></pre><ul> <li><code>callback</code> : Callback for each pixel     <pre><code>function(value, x, y, canvasData) {\n\n}\n</code></pre></li> </ul> </li> <li>For each non zero pixel data     <pre><code>canvasData.forEachNonZero(callback, scope);\n</code></pre></li> </ul>"},{"location":"canvas-data/#get-pixel-data","title":"Get pixel data","text":"<pre><code>var data = canvasData.get(x, y);\n</code></pre> <ul> <li><code>data</code> :<ul> <li><code>true</code>, or <code>false</code> in result of <code>canvasObjectToBitmap</code> method</li> <li>Color32 in result of <code>textureTColorMap</code> method</li> </ul> </li> </ul>"},{"location":"canvas-data/#size","title":"Size","text":"<pre><code>var width = canvasData.width;\nvar height = canvasData.height;\n</code></pre>"},{"location":"canvas-lineprogress/","title":"Line progres","text":""},{"location":"canvas-lineprogress/#introduction","title":"Introduction","text":"<p>Horizontal line progress bar filled with gradient color on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-lineprogress/#live-demos","title":"Live demos","text":"<ul> <li>Line-progress</li> </ul>"},{"location":"canvas-lineprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-lineprogress/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-lineprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineprogresscanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineprogresscanvasplugin.min.js', true);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LineProgressCanvasPlugin from 'phaser3-rex-plugins/plugins/lineprogresscanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressCanvasPlugin',\nplugin: LineProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LineProgressCanvas from 'phaser3-rex-plugins/plugins/lineprogresscanvas.js';\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = new LineProgressCanvas(scene, x, y, width, height, barColor, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressCanvasPlugin',\nplugin: LineProgressCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"canvas-lineprogress/#create-instance","title":"Create instance","text":"<pre><code>var lineProgress = scene.add.rexLineProgressCanvas(x, y, width, height, barColor, value, {    barColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var lineProgress = scene.add.rexLineProgressCanvas({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\nbarColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>barColor</code>, <code>barColor2</code>, <code>isHorizontalGradient</code> : Fill color of line bar, in number or css string value. Assign gradient start color by <code>barColor2</code>.</li> <li><code>trackColor</code> : Fill color of line track, in number or css string value.</li> <li><code>trackStrokeColor</code> : Stroke color of track, in number or css string value.</li> <li><code>trackStrokeThickness</code> : Stroke line width of track.</li> <li><code>skewX</code> : Horizontal skew of track and bar.</li> <li><code>rtl</code> : <ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, lineProgress) {\n}\n</code></pre></li> </ul> <p>Add line-progress from JSON</p> <pre><code>var lineProgress = scene.make.rexLineProgressCanvas({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\nbarColor2: undefined,\nisHorizontalGradient: true,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"canvas-lineprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLineProgressCanvas extends LineProgressCanvas {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var lineProgress = new MyLineProgressCanvas(scene, x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = lineProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = lineProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = lineProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>lineProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>lineProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>lineProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>lineProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>lineProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>lineProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>lineProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#line-track","title":"Line track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = lineProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(trackColor);\n// lineProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Stroke<ul> <li>Get     <pre><code>var trackStrokeColor = lineProgress.trackStrokeColor;\nvar trackStrokeThickness = lineProgress.trackStrokeThickness;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(color);\nlineProgress.setTrackStroke(lineWidth, color);\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#line-bar","title":"Line bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = lineProgress.barColor;\nvar barColor2 = lineProgress.barColor2;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setBarColor(barColor, barColor2);\n// lineProgress.barColor = barColor;\n// lineProgress.barColor2 = barColor2;\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-lineprogress/#horizontal-skew","title":"Horizontal skew","text":"<ul> <li>Get     <pre><code>var skewX = lineProgress.skewX;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setSkewX(skewX);\n// lineProgress.skewX = skewX;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#right-to-left","title":"Right-to-left","text":"<ul> <li>Get     <pre><code>var rtl = lineProgress.rtl;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setRTL(rtl);\n// lineProgress.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>lineProgress.on('valuechange', function(newValue, oldValue, lineProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = lineProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setAlpha(alpha);\n// lineProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"canvas-lineprogress/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"canvas-lineprogress/#create-mask","title":"Create mask","text":"<pre><code>var mask = lineProgress.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"canvas-lineprogress/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"canvas-lineprogress/#compare-with-line-progress-shape","title":"Compare with Line-progress shape","text":"<ul> <li>Line-progress canvas creates a canvas then draw on that canvas, line progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Line-progress canvas can fill gradient color, line progress shape only can fill 1 color.</li> </ul>"},{"location":"canvas-roundrectangle/","title":"Round rectangle","text":""},{"location":"canvas-roundrectangle/#introduction","title":"Introduction","text":"<p>Round rectangle on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas-roundrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Round rectangle</li> </ul>"},{"location":"canvas-roundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas-roundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"canvas-roundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexroundrectanglecanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexroundrectanglecanvasplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RoundRectanglePlugin from 'phaser3-rex-plugins/plugins/roundrectanglecanvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRoundRectangleCanvasPlugin',\nplugin: RoundRectangleCanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RoundRectangleCanvas from 'phaser3-rex-plugins/plugins/roundrectanglecanvas.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new RoundRectangleCanvas(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner            </li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>fillStyle</code> : Fill color in number or css string value, or a callback<ul> <li>Number, or css string value : Color value</li> <li>Callback :      <pre><code>function(canvas, context) {\n// Radial gradient\nvar grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);\ngrd.addColorStop(0, color0);\ngrd.addColorStop(1, color1);\nreturn grd;\n}\n</code></pre></li> </ul> </li> <li><code>strokeStyle</code> : Stroke color in number or css string value.</li> <li><code>lineWidth</code> : Stroke line width.</li> <li><code>fillColor2</code> : Gradient color in number or css string value.</li> <li><code>isHorizontalGradient</code> :<ul> <li><code>true</code> : Horizontal gradient.</li> <li><code>false</code> : Vertical gradient.</li> </ul> </li> </ul> <p>Note</p> <p>If <code>radius</code> &gt;= 0, draw convex corner, else draw concave corner</p>"},{"location":"canvas-roundrectangle/#deform","title":"Deform","text":"<ul> <li>Rectangle, set radius of 4 corners to <code>0</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, 0, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Circle, set width and height to <code>2*radius</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radius), (2*radius), radius, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Ellipse, set width and height to <code>2*radiusX</code>, <code>2*radiusY</code>.     <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radiusX), (2*radiusX), {x: radiusX, y: radiusY}, fillColor, fillAlpha);\n</code></pre></li> <li>Rhombus, set width and height to <code>2*radius</code>, and assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, (2*radius), (2*radius), {\nradius: radius,\niteration: 0\n}, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> <li>Octagon, assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangleCanvas(x, y, width, height, {\nradius: radius,\niteration: 0\n}, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangleCanvas extends RexPlugins.GameObjects.RoundRectangleCanvas {\nconstructor(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient) {\nsuper(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangleCanvas(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var fillStyle = rect.fillStyle;\nvar fillColor2 = rect.fillColor2;\nvar isHorizontalGradient = rect.isHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(fillStyle);\n// rect.setFillStyle(fillStyle, fillColor2, isHorizontalGradient);\n</code></pre><ul> <li><code>fillStyle</code> : Fill color in number or css string value, or a callback<ul> <li>Number, or css string value : Color value</li> <li>Callback :      <pre><code>function(canvas, context) {\n// Radial gradient\nvar grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);\ngrd.addColorStop(0, color0);\ngrd.addColorStop(1, color1);\nreturn grd;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var strokeStyle = rect.strokeStyle;\nvar lineWidth = rect.lineWidth;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(strokeStyle, lineWidth);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvas-roundrectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"canvas-roundrectangle/#radius","title":"Radius","text":"<ul> <li>Set     <pre><code>rect.setRadius(value);\n</code></pre>     or     <pre><code>rect.radius = radius;\n</code></pre><ul> <li><code>radius</code> :<ul> <li>Number : 4 corners with the same radius.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner        </li> </ul> </li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"canvas-roundrectangle/#iteration","title":"Iteration","text":"<ul> <li>Get     <pre><code>var iteration = rect.iteration;\n</code></pre></li> <li>Set     <pre><code>rect.setIteration(value);\n</code></pre>     or     <pre><code>rect.iteration = value;\n</code></pre></li> </ul> <p>Number of interpolation points in each round corner. Default value is <code>4</code>.</p> <ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul>"},{"location":"canvas-roundrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"canvas-roundrectangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = rect.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"canvas-roundrectangle/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"canvas-roundrectangle/#compare-with-shape-roundrectangle","title":"Compare with Shape-Roundrectangle","text":"<ul> <li>Gradient<ul> <li>Canvas-RoundRectangle can fill with gradient color.</li> <li>Shape-Roundrectangle can't fill gradient color.</li> </ul> </li> <li>Drawing method<ul> <li>Canvas-RoundRectangle draw shape on canvas, then map this canvas to frame buffer.</li> <li>Shape-Roundrectangle draw shape on frame buffer directly without drawing to canvas first.</li> </ul> </li> </ul>"},{"location":"canvas-texture/","title":"Canvas texture","text":""},{"location":"canvas-texture/#introduction","title":"Introduction","text":"<p>Canvas Canvas Texture stored in texture cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"canvas-texture/#usage","title":"Usage","text":""},{"location":"canvas-texture/#create-canvas-texture","title":"Create canvas texture","text":"<pre><code>var texture = scene.textures.createCanvas(key, width, height);\n</code></pre>"},{"location":"canvas-texture/#get-canvas-element","title":"Get canvas element","text":"<pre><code>var canvas = texture.getCanvas();\nvar context = texture.getContext();\n</code></pre> <p>Canvas api</p>"},{"location":"canvas-texture/#draw-frame","title":"Draw frame","text":"<pre><code>texture.drawFrame(key, frame, x, y);\n// texture.drawFrame(key, frame, x, y, update);\n</code></pre> <ul> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#draw-image","title":"Draw image","text":"<pre><code>texture.draw(x, y, source);\n// texture.draw(x, y, source, update);\n</code></pre> <ul> <li><code>source</code> : The HTML Image element, or HTML Canvas element to draw to this canvas.</li> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#clear","title":"Clear","text":"<pre><code>texture.clear();\n</code></pre> <pre><code>texture.clear(x, y, width, height);\n// // texture.clear(x, y, width, height, update);\n</code></pre> <ul> <li><code>update</code> : Update the internal ImageData buffer and arrays. Default value is <code>true</code>.</li> </ul>"},{"location":"canvas-texture/#refresh-texture","title":"Refresh texture","text":"<pre><code>texture.refresh();\n</code></pre>"},{"location":"canvas-texture/#color","title":"Color","text":"<ul> <li>Set     <pre><code>texture.setPixel(x, y, red, green, blue);\n// texture.setPixel(x, y, red, green, blue, alpha);\n</code></pre></li> <li>Get     <pre><code>var color = texture.getPixel(x, y);\n// var color = texture.getPixel(x, y, color);\n</code></pre> <pre><code>var colors = texture.getPixels(x, y, width, height);\n</code></pre><ul> <li><code>colors</code> : <code>[{x, y, color, alpha}, ...]</code></li> </ul> </li> </ul>"},{"location":"canvas-texture/#image-data","title":"Image data","text":"<ul> <li>Set     <pre><code>texture.putData(imageData, x, y);\n</code></pre></li> <li>Get     <pre><code>var imageData = texture.getData(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas-texture/#add-frame","title":"Add frame","text":"<pre><code>texture.add(name, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>name</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code> : The x coordinate of the top-left of this Frame.</li> <li><code>y</code> : The y coordinate of the top-left of this Frame.</li> <li><code>width</code> : The width of this Frame.</li> <li><code>height</code> : The height of this Frame.</li> </ul>"},{"location":"canvas/","title":"Canvas","text":""},{"location":"canvas/#introduction","title":"Introduction","text":"<p>Drawing on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvas/#live-demos","title":"Live demos","text":"<ul> <li>Kaleidoscope</li> <li>chartjs</li> </ul>"},{"location":"canvas/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvas/#install-plugin","title":"Install plugin","text":""},{"location":"canvas/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasplugin.min.js', true);\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasPlugin from 'phaser3-rex-plugins/plugins/canvas-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasPlugin',\nplugin: CanvasPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Canvas from 'phaser3-rex-plugins/plugins/canvas.js';\n</code></pre></li> <li>Add canvas object     <pre><code>var canvas = new Canvas(scene, x, y, width, height);\nscene.add.existing(canvas);\n</code></pre></li> </ul>"},{"location":"canvas/#create-instance","title":"Create instance","text":"<pre><code>var canvas = scene.add.rexCanvas(x, y, width, height);\n</code></pre> <p>Add canvas from JSON</p> <pre><code>var canvas = scene.make.rexCanvas({\nx: 0,\ny: 0,\nwidth: 256,\nheight: 256,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"canvas/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCanvas extends Canvas {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var canvas = new MyCanvas(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"canvas/#clear-or-fill-canvas","title":"Clear or fill canvas","text":"<ul> <li>Clear     <pre><code>canvas.clear();\n</code></pre></li> <li>Fill color     <pre><code>canvas.fill(color);\n</code></pre></li> </ul>"},{"location":"canvas/#update-canvas","title":"Update canvas","text":"<ol> <li>Get canvas elemet     <pre><code>var canvasElem = canvas.getCanvas();\nvar context = canvas.getContext();\n</code></pre>     or     <pre><code>var canvaesElem = canvas.canvas;\nvar context = canvas.context;\n</code></pre></li> <li>Draw on context</li> </ol>"},{"location":"canvas/#update-display-texture","title":"Update display texture","text":"<ul> <li>Update texture when rendering     <pre><code>canvas.needRedraw();\n</code></pre>     or     <pre><code>canvas.dirty = true;\n</code></pre></li> <li>Update texture now     <pre><code>canvas.updateTexture();\n</code></pre>     or update canvas and texture     <pre><code>canvas.updateTexture(function(canvasElem, context) { });\n// canvas.updateTexture(callback, scope);\n</code></pre></li> </ul>"},{"location":"canvas/#load-or-save-texture","title":"Load or save texture","text":"<ul> <li>Save canvas to texuture     <pre><code>canvas.generateTexture(key);\n// canvas.generateTexture(key, x, y, width, height);\n</code></pre></li> <li>Copy canvas from texture     <pre><code>canvas.loadTexture(key, frame);\n</code></pre></li> </ul>"},{"location":"canvas/#paste-frame","title":"Paste frame","text":"<pre><code>canvas.drawFrame(key, frame);\n// canvas.drawFrame(key, frame, dx, dy, dWidth, dHeight);\n// canvas.drawFrame(key, frame, dx, dy, dWidth, dHeight, sxOffset, syOffset, sWidth, sHeight);\n</code></pre> <ul> <li><code>dx</code>, <code>dy</code> : Top-left position in this canvas. Default value is <code>0</code>, <code>0</code>.</li> <li><code>dWidth</code>, <code>dHeight</code> : The size to draw the image in this canvas. Default value is origin size of frame.</li> <li><code>sxOffset</code>, <code>syOffset</code> : Offset position of source frame.  Default value is <code>0</code>, <code>0</code></li> <li><code>sWidth</code>, <code>sHeight</code> : The size of the sub-rectangle of the source frame to draw into this canvas. Default value is origin size of frame.</li> </ul>"},{"location":"canvas/#data-url","title":"Data URL","text":"<ul> <li>Load image from URL     <pre><code>canvas.loadFromURL(url);\n// canvas.loadFromURL(url, callback);\n</code></pre>     or     <pre><code>canvas.loadFromURLPromise(url)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>url</code> : Image url/uri(base64 string)</li> <li><code>callback</code> : Load complete callback.</li> </ul> </li> <li>Get data URL of image     <pre><code>var dataURL = canvas.getDataURL();\n// var dataURL = canvas.getDataURL(type, encoderOptions);\n</code></pre><ul> <li><code>dataURL</code> : A base64 string.</li> <li><code>type</code> : A DOMString indicating the image format. The default format type is image/png.</li> <li><code>encoderOptions</code> : A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.</li> </ul> </li> </ul>"},{"location":"canvas/#file","title":"File","text":"<ul> <li>Load image from File object     <pre><code>canvas.loadFromFile(file);\n// canvas.loadFromFile(file, callback);\n</code></pre>     or     <pre><code>canvas.loadFromFilePromise(file)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>file</code> : File object</li> <li><code>callback</code> : Load complete callback.</li> </ul> </li> </ul>"},{"location":"canvas/#pixel-color","title":"Pixel color","text":"<ul> <li>Get color     <pre><code>var color = canvas.getPixel(x, y);\n</code></pre><ul> <li><code>color</code> : Color object<ul> <li><code>color.red</code>, <code>color.green</code>, <code>color.blue</code>, <code>color.alpha</code></li> </ul> </li> </ul> </li> <li>Set color     <pre><code>canvas.setPixel(x, y, r, g, b);\n// canvas.setPixel(x, y, r, g, b, a);\n</code></pre>     or     <pre><code>canvas.setPixel(x, y, color);\n</code></pre><ul> <li><code>r</code>, <code>g</code>, <code>b</code>, <code>a</code> : Integer number between 0 ~ 255.</li> <li><code>color</code> : Color object</li> </ul> </li> </ul>"},{"location":"canvas/#size","title":"Size","text":"<pre><code>canvas.setCanvasSize(width, height);\n</code></pre> <p>or</p> <pre><code>canvas.setSize(width, height);\n</code></pre> <p>or</p> <pre><code>canvas.resize(width, height);\n</code></pre>"},{"location":"canvas/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"canvas/#create-mask","title":"Create mask","text":"<pre><code>var mask = canvas.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"canvas/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"canvas/#compare-with-graphics-object","title":"Compare with Graphics object","text":"<ul> <li>Drawing method<ul> <li>This canvas object draws stuff on canvas in WEBGL or CANVAS render mode.  </li> <li>Graphics object draws stuff on webgl render pipeline in WEBGL render mode.</li> </ul> </li> <li>Size<ul> <li>This canvas object has size (width, height) and origin.  </li> <li>Graphics object does not have size and origin.</li> </ul> </li> </ul>"},{"location":"canvasframemanager/","title":"Canvas frame manager","text":""},{"location":"canvasframemanager/#introduction","title":"Introduction","text":"<p>Generate bitmapfont from text game object, or bbcode text game object.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"canvasframemanager/#live-demos","title":"Live demos","text":"<ul> <li>Paste text</li> </ul>"},{"location":"canvasframemanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvasframemanager/#install-plugin","title":"Install plugin","text":""},{"location":"canvasframemanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasframemanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasframemanagerplugin.min.js', true);\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = scene.plugins.get('rexcanvasframemanagerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasFrameManagerPlugin from 'phaser3-rex-plugins/plugins/canvasframemanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasFrameManager',\nplugin: CanvasFrameManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasFrameManager from 'phaser3-rex-plugins/plugins/canvasframemanager.js';\n</code></pre></li> <li>Add canvas-frame-manager object     <pre><code>var canvasFrames = new CanvasFrameManager(scene, config);\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#create-instance","title":"Create instance","text":"<pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, {\nkey: '',\nwidth: 4096,\nheight: 4096,\ncellWidth: 64,\ncellHeight: 64,\nfillColor: undefined\n});\n</code></pre> <ul> <li><code>key</code> : Texture key in texture manager</li> <li><code>width</code>, <code>height</code> : Size of canvas.</li> <li><code>cellWidth</code>, <code>cellHeight</code> : Maximum frame size.</li> <li><code>fillColor</code> : Fill an initial color, in css color string.<ul> <li><code>undefined</code> : Don't fill color.</li> </ul> </li> </ul> <p>or</p> <pre><code>var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, key, width, height, cellWidth, cellHeight, fillColor);\n</code></pre> <p>Steps of generating bitmapfont :</p> <ol> <li>Add frames :     <pre><code>canvasFrames.paste(frameName, gameObject);\n</code></pre></li> <li>Update texture    <pre><code>canvasFrames.updateTexture();\n</code></pre></li> <li>Export frame data to bitmapfont    <pre><code>canvasFrames.addToBitmapFont();\n</code></pre></li> </ol>"},{"location":"canvasframemanager/#add-frame","title":"Add frame","text":""},{"location":"canvasframemanager/#from-game-object","title":"From game object","text":"<p>After rendering content on text, bbcode text, canvas</p> <pre><code>canvasFrames.paste(frameName, gameObject);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>gameObject</code> : text, bbcode text, or canvas.</li> </ul>"},{"location":"canvasframemanager/#custom-drawing","title":"Custom drawing","text":"<pre><code>canvasFrames.draw(frameName, callback, scope)\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>callback</code> :      <pre><code>function(canvas, context, frameSize) {\n// The maximum frame size\nvar cellWidth = frameSize.width;\nvar cellHeight = frameSize.height;\n\n// Draw content in area of (0, 0) - (cellWidth, cellHeight)\n\n// Update frame size\n// frameSize.width = ...\n// frameSize.height = ...\n}\n</code></pre></li> </ul>"},{"location":"canvasframemanager/#empty-frame","title":"Empty frame","text":"<pre><code>canvasFrames.addEmptyFrame(frameName);\n// canvasFrames.addEmptyFrame(frameName, width, height);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> <li><code>width</code> : Frame width, default value is <code>cellWidth</code></li> <li><code>height</code> : Frame height, default value is <code>cellHeight</code></li> </ul>"},{"location":"canvasframemanager/#update-texture","title":"Update texture","text":"<p>Update texture after adding frames.</p> <pre><code>canvasFrames.updateTexture();\n</code></pre>"},{"location":"canvasframemanager/#remove-frame","title":"Remove frame","text":"<pre><code>canvasFrames.remove(frameName);\n</code></pre> <ul> <li><code>frameName</code> : Frame name.</li> </ul>"},{"location":"canvasframemanager/#export-to-bitmapfont","title":"Export to bitmapfont","text":"<pre><code>canvasFrames.addToBitmapFont();\n</code></pre>"},{"location":"canvasframemanager/#destroy-instance","title":"Destroy instance","text":"<pre><code>canvasFrames.destroy();\n</code></pre>"},{"location":"canvasinput/","title":"Canvas input","text":""},{"location":"canvasinput/#introduction","title":"Introduction","text":"<p>An invisible Input DOM element to  receive character input and display on DynamicText.</p> <p>Inspirited from CanvasInput.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"canvasinput/#live-demos","title":"Live demos","text":"<ul> <li>Simple</li> <li>Text input</li> <li>Number input</li> <li>With rexui-Label</li> <li>Text area</li> </ul>"},{"location":"canvasinput/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"canvasinput/#install-plugin","title":"Install plugin","text":""},{"location":"canvasinput/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcanvasinputplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasinputplugin.min.js', true);\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = scene.add.rexCanvasInput(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CanvasInputPlugin from 'phaser3-rex-plugins/plugins/canvasinput-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCanvasInputPlugin',\nplugin: CanvasInputPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = scene.add.rexCanvasInput(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CanvasInput from 'phaser3-rex-plugins/plugins/canvasinput.js';\n</code></pre></li> <li>Add canvas-input object     <pre><code>var txt = new CanvasInput(textGameObject, x, y, width, height, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"canvasinput/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexCanvasInput({\n// Parameters of DynamicText\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n\n// Style when focus\n// 'focus.color': ...\n// 'focus.color2': ...\n// 'focus.stroke': ...\n},\nfocusStyle: undefined,\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0,\n\n// Style when cursor move on\n// 'cursor.color': ...\n// 'cursor.backgroundColor': ...\n// 'cursor.xxx': ...\n},\ncursorStyle: undefined,\n\nchildrenInteractive: false,\n\ntext: '',\n\nwrap: {\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nlineHeight: undefined,\nuseDefaultLineHeight: true,\nmaxLines: 1,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 'center',  // For single line text input\ncharWrap: true,    // For single line text input\n},\n\ntextArea: false,\n\n// Parameters of hidden-text-editor   \n// inputType: 'text',  // 'text'|'password'|'textarea'|...                \n\n// readOnly: false,\n// maxLength: undefined,\n// minLength: undefined,\n// selectAll: false,\n\n// enterClose: true,\n\n// Callbacks\n// onOpen: function (textObject, hiddenInputText) {\n// },\n\n// onClose: function (textObject, hiddenInputText) {\n// },\n\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },   \n\n// onAddChar: function(child, index, canvasInput) {\n//    child.modifyStyle({...})\n// },\n\n// onCursorOut: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// onCursorIn: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// parseTextCallback: function(text) {\n//     return text;\n// }.\n\n});\n</code></pre> <ul> <li><code>textArea</code> : <ul> <li><code>false</code> : Single line text input. Default behavior.</li> <li><code>true</code> : Multiple lines text input.</li> </ul> </li> <li>Parameters of DynamicText...<ul> <li><code>wrap</code> : Some default value in <code>wrap</code> are changed<ul> <li><code>wrap.useDefaultLineHeight</code> : Default value is <code>true</code></li> <li><code>wrap.maxLines</code> : Default value is <code>1</code></li> <li><code>wrap.vAlign</code> : Default value is <code>'center'</code></li> </ul> </li> </ul> </li> <li>Parameters of hidden-text-editor<ul> <li><code>inputType</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, ...</li> </ul> </li> <li><code>enterClose</code> : Set <code>true</code> to close input text when enter-key was pressed. Default value is <code>true</code>.</li> <li><code>readOnly</code> : <ul> <li><code>true</code> : un-editable.</li> <li><code>false</code> : Editable. Defaule behavior.</li> </ul> </li> <li><code>maxLength</code>, <code>minLength</code> : Maximun or minimun of input characters</li> <li><code>selectAll</code> : Set to <code>true</code> to select all characters when focusing.</li> </ul> </li> <li>Callbacks<ul> <li><code>onOpen</code> : Callback invoked when focus on this hidden input text.     <pre><code>function (textObject) {\n// textObject.setInputText(txt);\n}\n</code></pre></li> <li><code>onClose</code> : Callback invoked when blur.     <pre><code>function (textObject) {            }\n</code></pre></li> <li><code>onUpdate</code> : <ul> <li>A callback invoked in each tick of editing.     <pre><code>function (text, textObject) {\n// return text;\n}\n</code></pre><ul> <li>Can return a new string for text game object displaying.</li> </ul> </li> <li><code>'number'</code> : Only output number string.</li> </ul> </li> <li><code>onAddChar</code> : Callback invoked when adding new character child <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>onCursorOut</code> : Callback invoked when cursor move out of a character child     <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>onCursorIn</code> : Callback invoked when cursor move on a character child     <pre><code>function(child, index, canvasInput) {\nchild.modifyStyle({...})\n}\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li><code>parseTextCallback</code> : Callback of parsing text (<code>txt.text</code>) to value (<code>txt.value</code>)<ul> <li><code>undefined</code> : Bypass text to value. Default behavior.</li> <li>A function object     <pre><code>function(text) {\nreturn text;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>focusStyle</code> : Will apply this style to background when focusing.<ul> <li><code>undefined</code> : Ignore this behavior.</li> <li>A plain object     <pre><code>{\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n}\n</code></pre></li> <li>Or add these style settings in <code>background</code> parameter, with prefix <code>'focus.'</code>.</li> </ul> </li> <li><code>cursorStyle</code> : Will apply this style when cursor move on a character child.<ul> <li><code>undefined</code> : Ignore this behavior.</li> <li>A plain object     <pre><code>{\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0\n}\n</code></pre></li> <li>Or add these style settings in <code>style</code> parameter, with prefix <code>'cursor.'</code>.</li> </ul> </li> </ul>"},{"location":"canvasinput/#number-input","title":"Number input","text":"<pre><code>txt.setNumberInput();\n</code></pre>"},{"location":"canvasinput/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCanvasInput extends CanvasInput {\nconstructor(textGameObject, x, y, width, height, config)) {\nsuper(textGameObject, x, y, width, height, config)) {\n// ...            \n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyCanvasInput(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"canvasinput/#open-editor","title":"Open editor","text":"<pre><code>txt.open();\n</code></pre> <p>or</p> <pre><code>txt.open(onCloseCallback);\n</code></pre> <ul> <li><code>onCloseCallback</code> : Callback invoked when closing text-editor</li> </ul>"},{"location":"canvasinput/#close-editor","title":"Close editor","text":"<pre><code>txt.close();\n</code></pre>"},{"location":"canvasinput/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = txt.isOpened;\n</code></pre>"},{"location":"canvasinput/#read-only","title":"Read only","text":"<ul> <li>Enable read only     <pre><code>txt.setReadOnly();\n// txt.setReadOnly(true);\n</code></pre>     or     <pre><code>txt.readOnly = true;\n</code></pre></li> <li>Disable read only     <pre><code>txt.setReadOnly(false);\n</code></pre>     or     <pre><code>txt.readOnly = false;\n</code></pre></li> <li>Get read only     <pre><code>var readOnlyEanble = txt.readOnly;\n</code></pre></li> </ul>"},{"location":"canvasinput/#text","title":"Text","text":"<ul> <li>Display text on dynamic text game object<ul> <li>Get     <pre><code>var text = txt.text;\n</code></pre>     or     <pre><code>var text = txt.displayText;\n</code></pre></li> <li>Set     <pre><code>txt.setText(text);\n</code></pre>     or      <pre><code>txt.setDisplayText(text);\n</code></pre></li> </ul> </li> <li>Input text on hidden text edit behavior<ul> <li>Get     <pre><code>var text = txt.inputText;\n</code></pre></li> <li>Set     <pre><code>var text = txt.setInputText(text);\n</code></pre></li> </ul> </li> </ul>"},{"location":"canvasinput/#value","title":"Value","text":"<ul> <li>Get. Parse text to value.     <pre><code>var value = txt.getValue();\n// var value = txt.value;\n</code></pre><ul> <li>Set <code>parseTextCallback</code> <pre><code>txt.setParseTextCallback(callback);\n</code></pre><ul> <li><code>callback</code> : <ul> <li><code>undefined</code> : Bypass text to value. Default behavior.</li> <li>A function object     <pre><code>function(text) {\nreturn text;\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul> </li> <li>Set. Conver any type of <code>value</code> to string.     <pre><code>txt.setValue(value);\n// txt.value = value;\n</code></pre></li> </ul>"},{"location":"canvasinput/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"canvasinput/#events","title":"Events","text":"<ul> <li>On text change     <pre><code>txt.on('textchange', function(text, txt){\n})\n</code></pre></li> <li>On character child adding     <pre><code>txt.on('addchar', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On cursor moving out of a character child     <pre><code>txt.on('cursorout', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On cursor moving on a character child     <pre><code>txt.on('cursorin', function(child, index, canvasInput) {\nchild.modifyStyle({...})\n})\n</code></pre><ul> <li><code>child</code> : character child</li> </ul> </li> <li>On open text-editor     <pre><code>txt.on('open', function() {\n\n})\n</code></pre></li> <li>On close text-editor     <pre><code>txt.on('close', function() {\n\n})\n</code></pre></li> <li>Not a number input     <pre><code>txt.on('nan', function(text){\n\n})\n</code></pre></li> </ul>"},{"location":"canvasinput/#select-text","title":"Select text","text":"<p>This feature does not support.</p>"},{"location":"canvasinput/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"canvasinput/#other-properties","title":"Other properties","text":"<p>See Dynamic text game object game object</p>"},{"location":"canvasinput/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"canvasinput/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"capitalizes-first/","title":"Capitalizes first","text":""},{"location":"capitalizes-first/#introduction","title":"Introduction","text":"<p>Capitalizes the first letter of a string, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"capitalizes-first/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.UppercaseFirst(str);\n</code></pre>"},{"location":"charactercache/","title":"Character cache","text":""},{"location":"charactercache/#introduction","title":"Introduction","text":"<p>Generate bitmapfont from text game object, or bbcode text game object.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"charactercache/#live-demos","title":"Live demos","text":"<ul> <li>Set text</li> <li>Textbox</li> </ul>"},{"location":"charactercache/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"charactercache/#install-plugin","title":"Install plugin","text":""},{"location":"charactercache/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcharactercacheplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcharactercacheplugin.min.js', true);\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = scene.plugins.get('rexcharactercacheplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CharacterCachePlugin from 'phaser3-rex-plugins/plugins/charactercache-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCharacterCache',\nplugin: CharacterCachePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = scene.plugins.get('rexCharacterCache').add(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CharacterCache from 'phaser3-rex-plugins/plugins/charactercache.js';\n</code></pre></li> <li>Add character-cache object     <pre><code>var characterCache = new CharacterCache(scene, config);\n</code></pre></li> </ul>"},{"location":"charactercache/#create-instance","title":"Create instance","text":"<pre><code>var characterCache = scene.plugins.get('rexCharacterCache').add(scene, {\nkey: '',  cellWidth: 32,\ncellHeight: 32,\nmaxCharacterCount: 4096,\nfreqMode: true,\n\ntextObject: textGameOject,\n\ncontent: '',\n});\n</code></pre> <ul> <li><code>key</code> : Texture key in texture manager</li> <li><code>cellWidth</code>, <code>cellHeight</code> : Maximum frame size.</li> <li><code>maxCharacterCount</code> : Maximun character count.<ul> <li>Width of texture = <code>Math.ceil(Math.sqrt(maxCharacterCount)) * cellWidth</code></li> <li>Height of texture = <code>Math.ceil(Math.sqrt(maxCharacterCount)) * cellHeight</code></li> </ul> </li> <li><code>freqMode</code> : <ul> <li><code>true</code> : Swap out un-unsed and low-frequence character.</li> <li><code>false</code> : Swap out any un-unsed character.</li> </ul> </li> <li><code>textObject</code> : Text game object, or bbcode text game object for drawing character.</li> <li><code>content</code> : Load these characters into cache.</li> </ul>"},{"location":"charactercache/#load-characters","title":"Load characters","text":"<p>Load characters into bitmap font, replace unused characters if no free character space.</p> <pre><code>characterCache.load(content);\n// characterCache.load(content, lock);\n</code></pre> <ul> <li><code>content</code> : Characters in a string.</li> <li><code>lock</code><ul> <li><code>true</code> : Lock these characters, won't be replaced out later.</li> <li><code>false</code> : Don't lock these characters, can be replaced out later. Default behavior.</li> </ul> </li> </ul> <p>Warning</p> <p>Console.warn messages if no unused character is found.</p>"},{"location":"charactercache/#events","title":"Events","text":"<ul> <li>Add a character     <pre><code>characterCache.on('add', function(character, textObject) {\n// Can change style of textObject here\n})\n</code></pre></li> <li>Swap out a character     <pre><code>characterCache.on('remove', function(character, textObject) {\n})\n</code></pre></li> </ul>"},{"location":"charactercache/#override-bitmaptext","title":"Override bitmaptext","text":"<p>Inject <code>characterCache.load(text)</code> into <code>bitmapText.setText(text)</code> method.</p> <pre><code>characterCache.overrideBitmapText(bitmapText);\n// var bitmapText = characterCache.overrideBitmapText(bitmapText);\n</code></pre> <p>Now <code>setText</code> method has <code>lock</code> parameter : <code>bitmapText.setText(text, lock)</code>.</p> <p>Or user can override <code>bitmapText.setText</code> by extending <code>Phaser.GameObjects.BitmapText</code> class.</p>"},{"location":"charactercache/#unlock-all-characters","title":"Unlock all characters","text":"<pre><code>characterCache.unlock();\n</code></pre>"},{"location":"charactercache/#get-all-cache-data","title":"Get all cache data","text":"<pre><code>var cacheData = characterCache.getAllData();\n</code></pre> <ul> <li><code>cacheData</code> : Array of cache data     <pre><code>{\ncharacter: string,\nfreq: number,\nalive: boolean,\nlock: boolean,\n}\n</code></pre></li> </ul>"},{"location":"charactercache/#destroy-instance","title":"Destroy instance","text":"<pre><code>characterCache.destroy();\n</code></pre>"},{"location":"charactercache/#properties","title":"Properties","text":"<ul> <li><code>characterCache.key</code> : Font key.</li> <li><code>characterCache.cellWidth</code>, <code>characterCache.cellHeight</code> : Cell size.</li> <li><code>characterCache.inCacheCount</code> : Amount of characters in cache.</li> </ul>"},{"location":"circlemaskimage/","title":"Circle mask image","text":""},{"location":"circlemaskimage/#introduction","title":"Introduction","text":"<p>Load a texture, then apply a circle mask. Extended from canvas plugin.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"circlemaskimage/#live-demos","title":"Live demos","text":"<ul> <li>Circle-mask-image</li> </ul>"},{"location":"circlemaskimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"circlemaskimage/#install-plugin","title":"Install plugin","text":""},{"location":"circlemaskimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcirclemaskimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcirclemaskimageplugin.min.js', true);\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircleMaskImagePlugin',\nplugin: CircleMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircleMaskImage from 'phaser3-rex-plugins/plugins/circlemaskimage.js';\n</code></pre></li> <li>Add circle-mask-image object     <pre><code>var image = new CircleMaskImage(scene, x, y, key, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircleMaskImagePlugin',\nplugin: CircleMaskImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"circlemaskimage/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, frame, {\nmaskType: 0,\n// radius: undefined,\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexCircleMaskImage(x, y, key, {\nmaskType: 0,\n// radius: undefined,\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n});\n</code></pre> <ul> <li><code>maskType</code> : Type of mask.<ul> <li><code>null</code> : No mask.</li> <li><code>'circle'</code>, or <code>0</code> : Circle mask.</li> <li><code>'ellipse'</code>, or <code>1</code> : Ellipse mask.</li> <li><code>'roundRectangle'</code>, or <code>2</code> : Round rectangle mask.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle mask.<ul> <li><code>0</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>backgroundColor</code> : Fill background with color.<ul> <li><code>undefined</code>, or <code>null</code> : No background filling. Default behavior.</li> </ul> </li> <li><code>strokeColor</code> : Add stroke around masked image.<ul> <li><code>undefined</code>, or <code>null</code> : No stroke line. Default behavior.</li> </ul> </li> <li><code>strokeWidth</code> : Stroke line width.</li> </ul> <p>Add image from JSON</p> <pre><code>var image = scene.make.rexCircleMaskImage({\nx: 0,\ny: 0,\nkey: key,\nframe: name,\nmaskType: 0,\n// radius: undefined\n// origin: {x: 0.5, y: 0.5},\n\n// backgroundColor: undefined,\n\n// strokeColor: undefined,\n// strokeWidth: 0,\n\nadd: true\n});\n</code></pre>"},{"location":"circlemaskimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends CircleMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, key, frame, config);\n</code></pre></li> </ul>"},{"location":"circlemaskimage/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n// image.setTexture(key, frame, maskType);\n</code></pre> <p>or</p> <pre><code>image.setTexture(key, frame, {\nmaskType: 0,\n// radius: undefined\n});\n</code></pre> <ul> <li><code>maskType</code> : Type of mask<ul> <li><code>null</code> : No mask.</li> <li><code>0</code>, or <code>'circle'</code> : Circle mask. Default value.</li> <li><code>1</code>, or <code>'ellipse'</code> : Ellipse mask.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle mask.<ul> <li><code>0</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"circlemaskimage/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"circlemaskimage/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"circlemaskimage/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"clamp/","title":"Clamp","text":""},{"location":"clamp/#introduction","title":"Introduction","text":"<p>Force a value within the boundaries by clamping it to the range <code>min</code>, <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"clamp/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Clamp(value, min, max);\n</code></pre> <ul> <li><code>value</code> : The value to be clamped.</li> </ul>"},{"location":"clickoutside/","title":"Click outside","text":""},{"location":"clickoutside/#introduction","title":"Introduction","text":"<p>Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"clickoutside/#live-demos","title":"Live demos","text":"<ul> <li>Click outside</li> </ul>"},{"location":"clickoutside/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"clickoutside/#install-plugin","title":"Install plugin","text":""},{"location":"clickoutside/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexclickoutsideplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexclickoutsideplugin.min.js', true);\n</code></pre></li> <li>Add click-outside behavior     <pre><code>var clickOutside = scene.plugins.get('rexclickoutsideplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ClickOutsidePlugin from 'phaser3-rex-plugins/plugins/clickoutside-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexClickOutsiden',\nplugin: ClickOutsidePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add click-outside behavior     <pre><code>var clickOutside = scene.plugins.get('rexClickOutsiden').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ClickOutside from 'phaser3-rex-plugins/plugins/clickoutside.js';\n</code></pre></li> <li>Add clickoutside behavior     <pre><code>var clickOutside = new ClickOutside(gameObject, config);\n</code></pre></li> </ul>"},{"location":"clickoutside/#create-instance","title":"Create instance","text":"<pre><code>var clickOutside = scene.plugins.get('rexClickOutside').add(gameObject, {\n// enable: true,\n// mode: 1,              // 0|'press'|1|'release'\n// clickInterval: 100,   // ms\n// threshold: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Clickable.</li> <li><code>mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior.</li> </ul> </li> </ul>"},{"location":"clickoutside/#events","title":"Events","text":"<ul> <li>Click-outside     <pre><code>clickOutside.on('clickoutside', function (clickoutside, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable     <pre><code>clickOutside.on('enable', function (clickoutside, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable     <pre><code>clickOutside.on('disable', function (clickoutside, gameObject) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"clickoutside/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = clickOutside.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>clickOutside.setEnable(enabled);  // enabled: true, or false\n// clickOutside.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>clickOutside.toggleEnable();\n</code></pre></li> </ul>"},{"location":"clickoutside/#set-mode","title":"Set mode","text":"<pre><code>clickOutside.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> </ul>"},{"location":"clickoutside/#set-click-interval","title":"Set click interval","text":"<pre><code>clickOutside.setClickInterval(interval);  // interval in ms\n</code></pre>"},{"location":"clickoutside/#set-dragging-threshold","title":"Set dragging threshold","text":"<pre><code>clickOutside.setDragThreshold(distance);  // distance in pixels\n</code></pre>"},{"location":"clock/","title":"Clock","text":""},{"location":"clock/#introduction","title":"Introduction","text":"<p>A clock to count elapsed time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"clock/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"clock/#install-plugin","title":"Install plugin","text":""},{"location":"clock/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexclockplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexclockplugin.min.js', true);\n</code></pre></li> <li>Add clock object     <pre><code>var clock = scene.plugins.get('rexclockplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ClockPlugin from 'phaser3-rex-plugins/plugins/clock-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexClock',\nplugin: ClockPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add clock object     <pre><code>var clock = scene.plugins.get('rexClock').add(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Clock from 'phaser3-rex-plugins/plugins/clock.js';\n</code></pre></li> <li>Add clock object     <pre><code>var clock = new Clock(scene, config);\n</code></pre></li> </ul>"},{"location":"clock/#create-instance","title":"Create instance","text":"<pre><code>var clock = scene.plugins.get('rexClock').add(scene, {\n// timeScale: 1\n});\n</code></pre> <ul> <li><code>timeScale</code> : time-scale for counting elapsed time.</li> </ul>"},{"location":"clock/#start-counting","title":"Start counting","text":"<pre><code>clock.start();\n// clock.start(startAt);  // start-at time in ms\n</code></pre>"},{"location":"clock/#force-ticking","title":"Force ticking","text":"<pre><code>clock.tick(0);\n// clock.tick(delta);\n</code></pre>"},{"location":"clock/#get-elapsed-time","title":"Get elapsed time","text":"<pre><code>var now = clock.now;  // Elapsed time in ms\n</code></pre>"},{"location":"clock/#pause-resume-stop-counting","title":"Pause, Resume, stop counting","text":"<pre><code>clock.pause();\nclock.resume();\nclock.stop();\n</code></pre>"},{"location":"clock/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>clock.seek(time);   // elapsed time in ms\n</code></pre>"},{"location":"clock/#state-of-counting","title":"State of counting","text":"<pre><code>var isRunning = clock.isRunning;\n</code></pre>"},{"location":"clock/#time-scale","title":"Time-scale","text":"<ul> <li>Get     <pre><code>var timeScale = clock.timeScale;\n</code></pre></li> <li>Set     <pre><code>clock.setTimeScale(timeScale);\n// clock.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"clock/#events","title":"Events","text":"<ul> <li>On ticking     <pre><code>clock.on('update', function(now, delta){ })\n</code></pre><ul> <li><code>now</code> : Elapsed time in ms.</li> <li><code>delta</code> : Delta time in ms.</li> </ul> </li> </ul>"},{"location":"color/","title":"Color","text":""},{"location":"color/#introduction","title":"Introduction","text":"<p>Get color value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"color/#usage","title":"Usage","text":""},{"location":"color/#get-color-integer","title":"Get color integer","text":"<ul> <li>Hex string, or color integer     <pre><code>var color = Phaser.Display.Color.ValueToColor(input);\n</code></pre><ul> <li><code>input</code> : Hex string, or color integer</li> </ul> </li> <li>RGB to color     <pre><code>var color = Phaser.Display.Color.GetColor(red, green, blue);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : 0 ~ 255</li> </ul> </li> <li>RGBA to color     <pre><code>var color = Phaser.Display.Color.GetColor32(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code> : 0 ~ 255</li> </ul> </li> <li>Hex string to color     <pre><code>var color = Phaser.Display.Color.HexStringToColor(hex).color;\n</code></pre><ul> <li>hex : <code>#0033ff</code>, <code>#03f</code>, <code>0x0033ff</code>, or <code>0x03f</code></li> </ul> </li> <li>RGB string to color     <pre><code>var color = Phaser.Display.Color.RGBStringToColor(rgb);\n</code></pre><ul> <li>rgb : <code>'rgb(r,g,b)'</code>, or <code>'rgba(r,g,b,a)'</code><ul> <li>r, g, b : 0 ~ 255</li> <li>a : 0 ~ 1</li> </ul> </li> </ul> </li> <li>HSV to color     <pre><code>var color = Phaser.Display.Color.HSVToRGB(h, s, v).color;\n</code></pre><ul> <li><code>h</code>, <code>s</code>, <code>v</code> : 0 ~ 1</li> </ul> </li> </ul>"},{"location":"color/#color-integer-to-rgb","title":"Color integer to RGB","text":"<pre><code>var rgb = Phaser.Display.Color.IntegerToRGB(color);\n</code></pre> <ul> <li><code>color</code> : Color integer (<code>0xAARRGGBB</code>)</li> <li><code>rgb</code> : JSON object (<code>{r, g, b, a}</code>)</li> </ul>"},{"location":"color/#hsv-color-wheel","title":"HSV color wheel","text":"<ol> <li>Create color array     <pre><code>var colorArray = Phaser.Display.Color.HSVColorWheel(s, v);\n</code></pre></li> <li>Get color     <pre><code>var color = colorArray[i].color;  // i : 0 ~ 359\n</code></pre></li> </ol>"},{"location":"color/#color-object","title":"Color object","text":""},{"location":"color/#create-color-object","title":"Create color object","text":"<ul> <li>Create via r,g,b,a components     <pre><code>var color = new Phaser.Display.Color(red, green, blue); // alpha = 255\n// var color = new Phaser.Display.Color(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 255</li> </ul> </li> <li>Create via color integer     <pre><code>var color = Phaser.Display.Color.IntegerToColor(colorInteger);\n</code></pre><ul> <li>colorInteger : Color integer (<code>0xAARRGGBB</code>)</li> </ul> </li> </ul>"},{"location":"color/#set-color","title":"Set color","text":"<ul> <li>Set color     <pre><code>color.setTo(red, green, blue);  // alpha = 255\n// color.setTo(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 255</li> </ul> </li> <li>Set color in GL values     <pre><code>color.setGLTo(red, green, blue);  // alpha = 1\n// color.setTo(red, green, blue, alpha);\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code>, <code>alpha</code>: 0 ~ 1</li> </ul> </li> <li>Set color from color object     <pre><code>color.setFromRGB(rgba);\n</code></pre><ul> <li>rgba :     <pre><code>{\nr: 0,\ng: 0,\nb: 0,\n// a: 0\n}\n</code></pre></li> </ul> </li> <li>Set color from HSV     <pre><code>color.setFromHSV(h, s, v);\n</code></pre></li> <li>Set to transparent ()     <pre><code>color.transparent();\n</code></pre><ul> <li>Set (red, green, blue) to <code>0</code></li> </ul> </li> <li>Set to gray color    <pre><code>color.gray(value);\n</code></pre></li> <li>Set to a random color     <pre><code>color.random();\n</code></pre>     or     <pre><code>color.random(min, max);\n</code></pre><ul> <li><code>min</code> : 0 ~ 255. Default value is 0.</li> <li><code>max</code> : 0 ~ 255. Default value is 255.</li> </ul> </li> <li>Set to random gray     <pre><code>color.randomGray();\n</code></pre>     or     <pre><code>color.randomGray(min, max);\n</code></pre></li> <li>Set red/green/blue/alpha channel : 0 ~ 255     <pre><code>color.red = value;\n// color.red += value;\ncolor.green = value;\n// color.green += value;\ncolor.blue = value;\n// color.blue += value;\ncolor.alpha = value;\n// color.alpha += value;\n</code></pre></li> <li>Set H/S/V channel : 0 ~ 1     <pre><code>color.h = value;\n// color.h += value;\ncolor.s = value;\n// color.s += value;\ncolor.v = value;\n// color.v += value;\n</code></pre></li> <li>Set normalized red, green, blue, alpha : 0 ~ 1     <pre><code>color.redGL = value;\n// color.redGL += value;\ncolor.greenGL = value;\n// color.greenGL += value;\ncolor.blueGL = value;\n// color.blueGL += value;\ncolor.alphaGL = value;\n// color.alphaGL += value;\n</code></pre></li> <li>Set brighten     <pre><code>color.brighten(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Saturate : Increase the saturation (S) of this Color by the percentage amount given.     <pre><code>color.saturate(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Desaturate : Decrease the saturation (S) of this Color by the percentage amount given.     <pre><code>color.desaturate(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Lighten : Increase the lightness (V) of this Color by the percentage amount given.     <pre><code>color.lighten(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> <li>Darken : Decrease the lightness (V) of this Color by the percentage amount given.     <pre><code>color.darken(value);\n</code></pre><ul> <li><code>value</code> : Percentage, 0 ~ 100</li> </ul> </li> </ul>"},{"location":"color/#properties","title":"Properties","text":"<ul> <li>RGB Color, not including the alpha channel     <pre><code>var c = color.color;\n</code></pre></li> <li>RGB Color, including the alpha channel.     <pre><code>var c = color.color32;\n</code></pre></li> <li>RGB color string which can be used in CSS color values.     <pre><code>var c = color.rgba;\n</code></pre></li> <li>Red, green, blue, alpha : 0 ~ 255     <pre><code>var r = color.red;\nvar g = color.green;\nvar b = color.blue;\nvar a = color.alpha;\n</code></pre></li> <li>H, S, V : 0 ~ 1     <pre><code>var h = color.h;\nvar s = color.s;\nvar v = color.v;\n</code></pre></li> <li>Normalized red, green, blue, alpha : 0 ~ 1     <pre><code>var r = color.redGL;\nvar g = color.greenGL;\nvar b = color.blueGL;\nvar a = color.alphaGL;\n</code></pre></li> </ul>"},{"location":"color/#clone","title":"Clone","text":"<pre><code>var newColor = color.clone();\n</code></pre>"},{"location":"color/#to-hex-string","title":"To hex string","text":"<pre><code>var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a);\n// var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix);\n</code></pre>"},{"location":"color/#interpolation","title":"Interpolation","text":"<p>Interpolate between 2 colors.</p> <pre><code>var colorOut = Phaser.Display.Color.Interpolate.RGBWithRGB(r1, g1, b1, r2, g2, b2, length, index);\nvar colorOut = Phaser.Display.Color.Interpolate.ColorWithColor(color1, color2, length, index);\nvar colorOut = Phaser.Display.Color.Interpolate.ColorWithRGB(color, r, g, b, length, index);\n</code></pre> <ul> <li><code>length</code>, <code>index</code> : t = <code>index/length</code> (0~1)</li> </ul>"},{"location":"conditionstable/","title":"CSV Conditions table","text":""},{"location":"conditionstable/#introduction","title":"Introduction","text":"<p>Check conditions to find passed tests listed in a csv table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"conditionstable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"conditionstable/#install-plugin","title":"Install plugin","text":""},{"location":"conditionstable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexconditionstableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexconditionstableplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexconditionstableplugin').add();\n</code></pre></li> </ul>"},{"location":"conditionstable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ConditionsTablePlugin from 'phaser3-rex-plugins/plugins/conditionstable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexConditionsTable',\nplugin: ConditionsTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexConditionsTable').add();\n</code></pre></li> </ul>"},{"location":"conditionstable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ConditionsTable from 'phaser3-rex-plugins/plugins/conditionstable.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = new ConditionsTable();\n</code></pre></li> </ul>"},{"location":"conditionstable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexConditionsTable').add();\n</code></pre>"},{"location":"conditionstable/#load-table-from-csv-string","title":"Load table from csv string","text":"<pre><code>table.loadCSV(csvString, {\n// delimiter: ','\n});\n</code></pre> <p>For exameple, csv string</p> name A A B Test1 &gt;= 10 &lt;= 20 Test2 3 <pre><code>,A,A,B\nTest1,&gt;= 10,&lt;= 20,\nTest2,,,3\n</code></pre> <p>means that:</p> <pre><code>Test1: (A&gt;=10) &amp;&amp; (A&lt;=20)\nTest2: (B==3)\n</code></pre> <p>Equations will be evaled by new Function.</p>"},{"location":"conditionstable/#test","title":"Test","text":""},{"location":"conditionstable/#get-test-results","title":"Get test results","text":"<pre><code>var results = table.getTestResults(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> <li><code>results</code> : <code>{name: boolean}</code>, use OR operation to combine result of tests with the same name.</li> </ul>"},{"location":"conditionstable/#get-first-pass-test-name","title":"Get first pass test name","text":"<pre><code>var testName = table.anyPassTest(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> </ul>"},{"location":"config-data/","title":"Configuration data","text":""},{"location":"config-data/#introduction","title":"Introduction","text":"<p>Get parameters from configuration object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"config-data/#usage","title":"Usage","text":""},{"location":"config-data/#quick-start","title":"Quick start","text":"<pre><code>const GetValue = Phaser.Utils.Objects.GetValue;\nvar myMethod = function(config) {\nvar x = GetValue(config, 'x', 0);\nvar y = GetValue(config, 'y', 0);\nvar width = GetValue(config, 'width', 0);\nvar height = GetValue(config, 'height', 0);\n// ...\n}\n</code></pre>"},{"location":"config-data/#get-value","title":"Get value","text":"<ul> <li>Retrieves a value from an object.     <pre><code>var value = Phaser.Utils.Objects.GetValue(source, key, defaultValue);\n</code></pre><ul> <li><code>source</code> : Configuration object.</li> <li><code>key</code> : The name of the property to retrieve from the object. For example,<ul> <li>Property <code>source.name</code>, key = <code>name</code></li> <li>Property <code>source.position.x</code>, key = <code>position.x</code></li> </ul> </li> <li><code>defaultValue</code> : The value to return if the <code>key</code> isn't found in the <code>source</code> object.</li> </ul> </li> <li>Finds the key within the top level of the source object, or returns <code>defaultValue</code>.     <pre><code>var value = Phaser.Utils.Objects.GetFastValue(source, key, defaultValue);\n</code></pre><ul> <li><code>key</code> : The key for the property on source. Must exist at the top level of the source object.</li> </ul> </li> <li>Retrieves a value from an object. Allows for more advanced selection options.     <pre><code>var value = Phaser.Utils.Objects.GetAdvancedValue(source, key, defaultValue);\n</code></pre><ul> <li>Implicit     <pre><code>var source = {x: 4};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = 4\n</code></pre></li> <li>From function     <pre><code>var source = {x: function(key){return 4;}};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = 4\n</code></pre><ul> <li>Pass <code>key</code> to function's 1st parameter, and get return value as final result.</li> </ul> </li> <li>Randomly pick one element from the array     <pre><code>var source = {x: [a, b, c]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random item from array [a, b, c]\n</code></pre></li> <li>Random integer between min and max     <pre><code>var source = {x: randInt: [min, max]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random int min~max\n</code></pre></li> <li>Random float between min and max     <pre><code>var source = {x: randFloat: [min, max]};\nvar value = Phaser.Utils.Objects.GetAdvancedValue(source, 'x'); // value = random float min~max\n</code></pre></li> </ul> </li> </ul>"},{"location":"config-data/#is-plain-object","title":"Is plain object","text":"<pre><code>var isPlainObject = Phaser.Utils.Objects.IsPlainObject(object);\n</code></pre> <p>Plain object:</p> <ul> <li><code>var obj = {};</code></li> <li><code>var obj = new Object();</code></li> </ul>"},{"location":"config-data/#merge-configuration","title":"Merge configuration","text":"<pre><code>var configOut = Phaser.Utils.Objects.Merge(configIn, defaultConfig);\n</code></pre>"},{"location":"container/","title":"Container","text":""},{"location":"container/#introduction","title":"Introduction","text":"<p>Control the position and angle of children game objects, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"container/#usage","title":"Usage","text":""},{"location":"container/#container","title":"Container","text":""},{"location":"container/#add-container-object","title":"Add container object","text":"<pre><code>var container = scene.add.container(x, y);\n// var container = scene.add.container(x, y, children); // children: an array of game object\n</code></pre>"},{"location":"container/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyContainer extends Phaser.GameObjects.Container {\nconstructor(scene, x, y, children) {\nsuper(scene, x, y, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var container = new MyContainer(scene, x, y, children);\n</code></pre></li> </ul>"},{"location":"container/#destroy","title":"Destroy","text":"<pre><code>container.destroy();\n</code></pre> <p>Also destroy all children game objects.</p>"},{"location":"container/#set-properties","title":"Set properties","text":"<p>Reference game object, to set position, angle, visible, alpha, etc...</p>"},{"location":"container/#set-size","title":"Set size","text":"<pre><code>container.setSize(width, height);\n</code></pre> <p>Default size is 0x0.</p>"},{"location":"container/#set-scroll-factor","title":"Set scroll factor","text":"<pre><code>container.setScrollFactor(x, y);\n</code></pre> <p>Apply this scrollFactor to all Container children.</p> <pre><code>container.setScrollFactor(x, y, true);\n</code></pre>"},{"location":"container/#hit-area","title":"Hit area","text":"<pre><code>container.setInteractive(new Phaser.Geom.Circle(0, 0, radius), Phaser.Geom.Circle.Contains);\n// container.setInteractive(false); // disable\n</code></pre> <p>Assign hit area with a circle shape.</p>"},{"location":"container/#non-exclusive","title":"Non-exclusive","text":"<pre><code>container.setExclusive(false);\n</code></pre> <p>Allows a game object added to container many times.</p>"},{"location":"container/#children","title":"Children","text":""},{"location":"container/#add-child","title":"Add child","text":"<pre><code>container.add(child);  // child: a game object or an array of game objects\n</code></pre> <pre><code>container.addAt(child, index);\n</code></pre>"},{"location":"container/#exist","title":"Exist","text":"<pre><code>var hasChild = container.exists(child);\n</code></pre>"},{"location":"container/#get-child","title":"Get child","text":"<pre><code>var firstChild = container.first;\nvar nextChild = container.next;\nvar prevChild = container.previous;\nvar lastChild = container.last;\n</code></pre> <pre><code>var child = container.getByName(name);\n</code></pre> <pre><code>var child = container.getRandom(startIndex, length);\n</code></pre> <pre><code>var child = container.getFirst(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var children = container.getAll(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var amount = container.count(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre>"},{"location":"container/#sort-children","title":"Sort children","text":"<pre><code>container.sort(property);\n</code></pre> <pre><code>container.sort(property, function(childA, childB){\nreturn 0; // 0, 1, -1\n});\n</code></pre>"},{"location":"container/#remove-child","title":"Remove child","text":"<pre><code>container.remove(child);\n// container.remove(child, true);  // remove child object and destroy it\n</code></pre> <pre><code>container.removeAt(index);\n// container.removeAt(index, true);  // remove child object and destroy it\n</code></pre> <pre><code>container.removeBetween(startIndex, endIndex);\n// container.removeBetween(startIndex, endIndex, true);  // remove children objects and destroy them\n</code></pre> <pre><code>container.removeAll();\n// container.removeAll(true);  // remove all children objects and destroy them\n</code></pre>"},{"location":"container/#order-of-child","title":"Order of child","text":"<pre><code>container.moveTo(child, index);\n</code></pre> <pre><code>container.bringToTop(child);\n</code></pre> <pre><code>container.sendToBack(child);\n</code></pre> <pre><code>container.moveUp(child);\n</code></pre> <pre><code>container.moveDown(child);\n</code></pre> <pre><code>container.moveAbove(child1, child2);  // Move child1 above child2\n</code></pre> <pre><code>container.moveBelow(child1, child2);  // Move child1 below child2\n</code></pre> <pre><code>container.swap(child1, child2);\n</code></pre> <pre><code>container.reverse();\n</code></pre> <pre><code>container.shuffle();\n</code></pre>"},{"location":"container/#replace-child","title":"Replace child","text":"<pre><code>container.replace(oldChild, newChild);\n// container.replace(oldChild, newChild, true);  // destroy oldChild\n</code></pre>"},{"location":"container/#set-properties_1","title":"Set properties","text":"<pre><code>container.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"container/#for-each-child","title":"For each child","text":"<ul> <li>Iterate current children list     <pre><code>container.iterate(callback);\n// container.iterate(callback, context);\n// container.iterate(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> <li>Iterate a copy of current children list     <pre><code>container.each(callback);\n// container.each(callback, context);\n// container.each(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"container/#get-world-position-rotation-scale","title":"Get world position, rotation, scale","text":"<pre><code>var matrix = child.getWorldTransformMatrix();\nvar x = matrix.tx;\nvar y = matrix.ty;\nvar rotation = matrix.rotation;\nvar scaleX = matrix.scaleX;\nvar scaleY = matrix.scaleY;\n</code></pre>"},{"location":"container/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"container/#create-mask","title":"Create mask","text":"<pre><code>var mask = container.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"container/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"container/#compare-with-group-object","title":"Compare with group object","text":"<ul> <li>Container and group objects are all have a children list.</li> <li>Container has position, angle, alpha, visible, ...etc, but group does not have.</li> <li>Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't.</li> <li>A game object could be added to many groups, but it only could be added to one container (<code>exclusive</code> mode).</li> </ul>"},{"location":"containerlite-perspective/","title":"Perspective","text":""},{"location":"containerlite-perspective/#introduction","title":"Introduction","text":"<p>Snapshot children of containerlite, to a perspective render texture.</p> <ul> <li>Author: Rex</li> <li>Behavior of containerlite</li> </ul>"},{"location":"containerlite-perspective/#live-demos","title":"Live demos","text":"<ul> <li>Flip ui</li> </ul>"},{"location":"containerlite-perspective/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite-perspective/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite-perspective/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = scene.plugins.get('rexperspectiveimageplugin').addContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = scene.plugins.get('rexPerspectiveImagePlugin').addContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ContainerPerspective } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add perspective behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar perspective = new ContainerPerspective(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#create-instance","title":"Create instance","text":"<pre><code>var perspective = scene.plugins.get('rexPerspectiveImagePlugin').addContainerPerspective(container, {\nuseParentBounds: false,\n// hideCCW: true,\n});\n</code></pre> <ul> <li><code>useParentBounds</code> :<ul> <li><code>true</code> : Use bounds of parent container</li> <li><code>false</code> : Union all visible children's bounds</li> </ul> </li> <li><code>hideCCW</code> :<ul> <li><code>true</code> : Hide backward facing Faces. Default behavior.</li> <li><code>false</code> : Show backward facing Faces</li> </ul> </li> </ul>"},{"location":"containerlite-perspective/#perspective-mode","title":"Perspective mode","text":""},{"location":"containerlite-perspective/#enter","title":"Enter","text":"<pre><code>perspective.enter();\n</code></pre> <ol> <li>Snapshot current visible children into perspective render texture</li> <li>Set current visible children to invisible</li> <li>Set this perspective render texture to visible</li> </ol>"},{"location":"containerlite-perspective/#exit","title":"Exit","text":"<pre><code>perspective.exit();\n</code></pre> <ol> <li>Inverse visible of children and perspective render texture</li> </ol>"},{"location":"containerlite-perspective/#is-in-perspective-mode","title":"Is in perspective mode","text":"<pre><code>var isInPerspectiveMode = perspective.perspectiveState;\n</code></pre>"},{"location":"containerlite-perspective/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = perspective.angleX; // Angle in degrees\nvar angleY = perspective.angleY; // Angle in degrees\nvar angleZ = perspective.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = perspective.rotationX; // Angle in radians\nvar rotationY = perspective.rotationY; // Angle in radians\nvar rotationZ = perspective.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>perspective.angleX = angleX; // Angle in degrees\nperspective.angleY = angleY; // Angle in degrees\nperspective.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>perspective.rotationX = rotationX; // Angle in radians\nperspective.rotationY = rotationY; // Angle in radians\nperspective.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"containerlite-perspective/#flip","title":"Flip","text":"<pre><code>scene.tweens.add({\ntargets: perspective,\nangleY: { start: 0, to: -180}\n})\n</code></pre>"},{"location":"containerlite-perspective/#other-properties","title":"Other properties","text":"<p>See Perspective rendertexture game object.</p>"},{"location":"containerlite-skew/","title":"Skew","text":""},{"location":"containerlite-skew/#introduction","title":"Introduction","text":"<p>Snapshot children of containerlite, to a skew render texture.</p> <ul> <li>Author: Rex</li> <li>Behavior of containerlite</li> </ul>"},{"location":"containerlite-skew/#live-demos","title":"Live demos","text":"<ul> <li>Skew ui</li> </ul>"},{"location":"containerlite-skew/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite-skew/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite-skew/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = scene.plugins.get('rexquadimageplugin').addContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = scene.plugins.get('rexQuadImagePlugin').addContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ContainerSkew } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add skew behavior     <pre><code>// var container = scene.add.rexContainerLite(x, y);\nvar skew = new ContainerSkew(container, config);\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#create-instance","title":"Create instance","text":"<pre><code>var quad = scene.plugins.get('rexQuadImagePlugin').addContainerSkew(container, {\nuseParentBounds: false\n});\n</code></pre> <ul> <li><code>useParentBounds</code> :<ul> <li><code>true</code> : Use bounds of parent container</li> <li><code>false</code> : Union all visible children's bounds</li> </ul> </li> </ul>"},{"location":"containerlite-skew/#skew-mode","title":"Skew mode","text":""},{"location":"containerlite-skew/#enter","title":"Enter","text":"<pre><code>skew.enter();\n</code></pre> <ol> <li>Snapshot current visible children into skew render texture</li> <li>Set current visible children to invisible</li> <li>Set this skew render texture to visible</li> </ol>"},{"location":"containerlite-skew/#exit","title":"Exit","text":"<pre><code>skew.exit();\n</code></pre> <ol> <li>Inverse visible of children and skew render texture</li> </ol>"},{"location":"containerlite-skew/#is-in-skew-mode","title":"Is in skew mode","text":"<pre><code>var isInSkewMode = skew.skewState;\n</code></pre>"},{"location":"containerlite-skew/#skew","title":"Skew","text":"<ul> <li>Set     <pre><code>image.setSkewX(skewXRad);\nimage.setSkewXDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkewY(skewXRad);\nimage.setSkewYDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkew(skewXRad, skewYRad);\nimage.setSkewDeg(skewXDeg, skewYDeg);\n</code></pre> <pre><code>image.skewX = skewXRad;\nimage.skewXDeg = skewXDeg;\n</code></pre> <pre><code>image.skewY = skewYRad;\nimage.skewYDeg = skewYDeg;\n</code></pre></li> <li>Get     <pre><code>var skewXRad = image.skewX;\nvar skewXDeg = image.skewXDeg;\n</code></pre> <pre><code>var skewYRad = image.skewY;\nvar skewYDeg = image.skewYDeg;\n</code></pre></li> </ul>"},{"location":"containerlite-skew/#other-properties","title":"Other properties","text":"<p>See Skew rendertexture game object.</p>"},{"location":"containerlite/","title":"Container Lite","text":""},{"location":"containerlite/#introduction","title":"Introduction","text":"<p>Control the position and angle of children game objects.</p> <p>It is inspired from Ziao/phaser3-interim-containers.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"containerlite/#live-demos","title":"Live demos","text":"<ul> <li>Rotate, alpha</li> <li>Tween child</li> <li>Create tween config</li> <li>Timeline child</li> <li>Mix timeline</li> <li>Snapshot</li> <li>Destory</li> <li>Add to p3-container</li> </ul>"},{"location":"containerlite/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"containerlite/#install-plugin","title":"Install plugin","text":""},{"location":"containerlite/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcontainerliteplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcontainerliteplugin.min.js', true);\n</code></pre></li> <li>Add container object     <pre><code>var container = scene.add.rexContainerLite(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ContainerLitePlugin from 'phaser3-rex-plugins/plugins/containerlite-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexContainerLitePlugin',\nplugin: ContainerLitePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add container object     <pre><code>var container = scene.add.rexContainerLite(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ContainerLite from 'phaser3-rex-plugins/plugins/containerlite.js';\n</code></pre></li> <li>Add container object     <pre><code>var container = new ContainerLite(scene, x, y);\nscene.add.existing(container);\n</code></pre></li> </ul>"},{"location":"containerlite/#add-container-object","title":"Add container object","text":"<pre><code>var container = scene.add.rexContainerLite(x, y);  // width = 1, height = 1\n// var container = scene.add.rexContainerLite(x, y, width, height);\n</code></pre> <p>or</p> <pre><code>var container = scene.add.rexContainerLite(x, y, children);  // width = 1, height = 1\n// var container = scene.add.rexContainerLite(x, y, width, height, children);\n</code></pre> <p>Add container from JSON</p> <pre><code>var container = scene.make.rexContainerLite({\nx: 0,\ny: 0,\nwidth: 1,\nheight: 1,\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"containerlite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyContainer extends ContainerLite {\nconstructor(scene, x, y, width, height, children) {\nsuper(scene, x, y, width, height, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var container = new MyContainer(scene, x, y, width, height, children);\n</code></pre></li> </ul>"},{"location":"containerlite/#destroy","title":"Destroy","text":"<pre><code>container.destroy();\n</code></pre> <p>Also destroy all children.</p>"},{"location":"containerlite/#other-properties","title":"Other properties","text":"<p>This container game object inherits from Zone.</p>"},{"location":"containerlite/#add-child","title":"Add child","text":""},{"location":"containerlite/#pin","title":"Pin","text":"<p>Add(pin) a game obejct to container</p> <pre><code>container.add(child);  // child: a game object\n// container.pin(child);\n</code></pre> <ul> <li><code>child</code> : A game object</li> </ul> <p>or</p> <pre><code>container.pin(child, {\n// syncPosition: true,\n// syncRotation: true,\n// syncScale : true,\n// syncAlpha: true,\n// syncScrollFactor: true,\n});\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>syncPosition</code> : <ul> <li><code>true</code> : Sync position of child, default behavior.</li> <li><code>false</code> : Don't sync position of child.</li> </ul> </li> <li><code>syncRotation</code> : <ul> <li><code>true</code> : Sync angle of child, default behavior.</li> <li><code>false</code> : Don't sync angle of child.</li> </ul> </li> <li><code>syncScale</code> : <ul> <li><code>true</code> : Sync scale of child, default behavior.</li> <li><code>false</code> : Don't sync angle of child.    </li> </ul> </li> <li><code>syncAlpha</code> : <ul> <li><code>true</code> : Sync alpha of child, default behavior.</li> <li><code>false</code> : Don't sync alpha of child. </li> </ul> </li> <li><code>syncScrollFactor</code> : <ul> <li><code>true</code> : Sync scrollFactor of child, default behavior.</li> <li><code>false</code> : Don't sync scrollFactor of child. </li> </ul> </li> </ul> <p>Or add(pin) children</p> <pre><code>container.addMultiple(children);\n// container.add(children);\n</code></pre> <ul> <li><code>children</code> : An array of game objects</li> </ul> <p>These world properties of children will be changed with container.</p> <ul> <li>Position/Angle/Scale</li> <li>Visible</li> <li>Alpha</li> <li>Scroll factor</li> <li>Mask</li> </ul> <p>Note</p> <ul> <li>Position of child is the world position, i.e. position of child won't be changed when adding to container initially.<ul> <li>For example, container-lite is at (100, 100), and child is at (110, 110), then child will be placed at (110, 110) after adding to container-lite.</li> </ul> </li> <li>This behavior is different from official container, which using related position of child when adding to container.<ul> <li>For example, official container is at (100, 100), and child is at (10, 10), then child will be placed at (110, 110) after adding to official container.</li> </ul> </li> </ul>"},{"location":"containerlite/#add-local","title":"Add local","text":"<pre><code>container.addLocal(child);\n</code></pre> <p>or</p> <pre><code>container.addLocalMultiple(children);\n</code></pre> <p>or</p> <pre><code>container.pinLocal(child, {\n// syncPosition: true,\n// syncRotation: true,\n// syncScale : true,\n// syncAlpha: true,\n});\n</code></pre> <p>Add child to container with related properties, like official container. For example, container-lite is at (100, 100), and child is at (10, 10), then child will be placed at (110, 110) after adding to container-lite.</p>"},{"location":"containerlite/#remove-child","title":"Remove child","text":"<ul> <li>Remove(unpin) a child     <pre><code>container.remove(child);\n// container.remove(child, destroyChild);\n</code></pre>     or     <pre><code>container.unpin(child);\n// container.unpin(child, destroyChild);\n</code></pre><ul> <li><code>child</code> : Game object</li> <li><code>destroyChild</code> : Set true to destroy child. Default is <code>false</code>.</li> </ul> </li> <li>Remove all children     <pre><code>container.clear();\n// container.clear(destroyChild);\n</code></pre></li> </ul>"},{"location":"containerlite/#get-child","title":"Get child","text":"<ul> <li>Get first child by name     <pre><code>var gameObject = container.getByName(name);\n// var gameObject = container.getByName(name, recursive);\n</code></pre><ul> <li><code>gameObject</code> : A child, or <code>null</code> if not found.</li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> <li>Get a random child     <pre><code>var gameObject = container.getRandom();\n// var gameObject = container.getRandom(startIndex, length);\n</code></pre></li> <li>Get children in this container-lite<ul> <li>Internal children array     <pre><code>var gameObjects = container.getChildren();\n</code></pre></li> <li>Copy of children array     <pre><code>var gameObjects = container.getChildren([]);\n// var gameObjects = container.getChildren(out);\n</code></pre></li> </ul> </li> <li>Get all children under this container-lite recursively     <pre><code>var gameObjects = container.getAllChildren();\n</code></pre><ul> <li>Put container itself and all children into Layer <pre><code>layer.add(container.getAllChildren([container]));\n</code></pre></li> <li>Draw on render texture <pre><code>rt.draw(container.getAllChildren());\n</code></pre></li> <li>Ignored in camera <pre><code>camera.ignore(container.getAllChildren());\n</code></pre></li> </ul> </li> </ul>"},{"location":"containerlite/#traversal","title":"Traversal","text":"<ul> <li>Depth-First Search     <pre><code>container.dfs(function(current) {\n// return true;  // Discard children traveraling\n})\n</code></pre><ul> <li>Return <code>true</code> to discard children traveraling</li> </ul> </li> <li>Breadth-First Search     <pre><code>container.bfs(function(current) {\n// return true;  // Discard children traveraling\n})\n</code></pre><ul> <li>Return <code>true</code> to discard children traveraling</li> </ul> </li> </ul>"},{"location":"containerlite/#exist","title":"Exist","text":"<p>Return true if child is under this container-lite (nested).</p> <pre><code>var hasChild = container.contains(child);\n</code></pre>"},{"location":"containerlite/#children","title":"Children","text":"<pre><code>var children = container.children;\n</code></pre> <ul> <li><code>children</code> : Array of child game objects.</li> </ul>"},{"location":"containerlite/#get-parent","title":"Get parent","text":"<pre><code>var parentContainer = scene.plugins.get('rexContainerLitePlugin').getParent(child);\n</code></pre> <p>or</p> <pre><code>var parentContainer = Container.GetParent(child); // Static method\n</code></pre>"},{"location":"containerlite/#set-properties-of-child","title":"Set properties of child","text":""},{"location":"containerlite/#position","title":"Position","text":"<pre><code>container.setChildPosition(child, x, y);\n</code></pre>"},{"location":"containerlite/#rotation","title":"Rotation","text":"<pre><code>container.setChildRotation(child, rotation);\n</code></pre> <ul> <li><code>rotation</code> : Angle in radians.</li> </ul>"},{"location":"containerlite/#scale","title":"Scale","text":"<pre><code>container.setChildScale(child, scaleX, scaleY);\n</code></pre> <p>or </p> <pre><code>container.setChildDisplaySize(child, width, height);\n</code></pre>"},{"location":"containerlite/#visible","title":"Visible","text":"<pre><code>container.setChildVisible(child, visible);\n</code></pre>"},{"location":"containerlite/#alpha","title":"Alpha","text":"<pre><code>container.setChildAlpha(child, alpha);\n</code></pre>"},{"location":"containerlite/#local-state-of-child","title":"Local state of child","text":"<p>Get local state</p> <pre><code>var localState = container.getLocalState(child);\n</code></pre> <p>or</p> <pre><code>var localState = child.rexContainer;\n</code></pre> <ul> <li>Properties of <code>localState</code><ul> <li><code>x</code>, <code>y</code></li> <li><code>rotation</code></li> <li><code>scaleX</code>, <code>scaleY</code></li> <li><code>visible</code></li> <li><code>alpha</code></li> </ul> </li> </ul>"},{"location":"containerlite/#change-local-state-of-child","title":"Change local state of child","text":"<ul> <li>Local position     <pre><code>container.setChildLocalPosition(child, x, y);\n</code></pre></li> <li>Local scale     <pre><code>container.setChildLocalScale(child, scaleX, scaleY);\n</code></pre></li> <li>Local alpha     <pre><code>container.setChildLocalAlpha(child, alpha);\n</code></pre></li> <li>Local visible     <pre><code>container.setChildLocalVisible(child, visible);\n</code></pre></li> </ul>"},{"location":"containerlite/#reset-local-state-of-child","title":"Reset local state of child","text":"<p>Reset local state of child according to current properties of children</p> <ul> <li>Reset local state of all properties     <pre><code>container.resetChildState(child);\n</code></pre></li> <li>Reset local state of position     <pre><code>container.resetChildPositionState(child);\n</code></pre></li> <li>Reset local state of rotation     <pre><code>container.resetChildRotationState(child);\n</code></pre></li> <li>Reset local state of scale     <pre><code>container.resetChildScaleState(child);\n</code></pre></li> <li>Reset local state of alpha     <pre><code>container.resetChildAlphaState(child);\n</code></pre></li> <li>Reset local state of visible     <pre><code>container.resetChildVisibleState(child);\n</code></pre></li> <li>Reset local state of active     <pre><code>container.resetChildActiveState(child);\n</code></pre></li> </ul>"},{"location":"containerlite/#tween-local-state","title":"Tween local state","text":"<pre><code>var tweenObj = container.tweenChild({\ntargets: child,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre> <ul> <li><code>targets</code> : A game object, or an array of game object.<ul> <li>A containerLite child, can tween its local state.</li> </ul> </li> </ul> <p>Paramters of configuration is the same as tween task.</p> <p>Supported properties :</p> <ul> <li><code>x</code>, <code>y</code>,</li> <li><code>angle</code>, <code>rotation</code></li> <li><code>scaleX</code>, <code>scaleY</code>, <code>displayWidth</code>, <code>displayHeight</code></li> <li><code>alpha</code></li> </ul>"},{"location":"containerlite/#tween-local-state-of-a-containerlite-child","title":"Tween local state of a containerlite child","text":"<pre><code>var tweenObj = containerLiteChild.tweenSelf({    // x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre> <p>Equal to</p> <pre><code>containerLiteChild.tweenChild({\ntargets: containerLiteChild,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n})\n</code></pre>"},{"location":"containerlite/#create-tween-config","title":"Create tween config","text":"<pre><code>var tweenConfig = container.createTweenChildConfig({\ntargets: child,\n// x: '+=100',\n// y: '+=100',\n// repeat: -1,\n// yoyo: true\n});\nscene.tweens.add(tweenConfig);\n</code></pre> <ul> <li>Input of <code>targets</code> is/are game object(s), will be replaced by local state of game object(S)</li> <li>Wrap <code>onUpdate</code> callback, to update properties of child according to local state.</li> </ul>"},{"location":"containerlite/#depth","title":"Depth","text":"<ul> <li>Get depth of container     <pre><code>var depth = container.depth;\n</code></pre></li> <li>Set depth of container     <pre><code>container.setDepth(value, true);\n// container.depth = depth;\n</code></pre></li> <li>Set depth of container and all children     <pre><code>container.setDepth(value);\n</code></pre></li> <li>Bring this container and its children to top     <pre><code>container.bringToTop();\n</code></pre></li> <li>Swap depth with another container     <pre><code>containerA.swapDepth(containerB);\n</code></pre></li> <li>Increase of container and all children     <pre><code>container.incDepth(value);\n</code></pre></li> <li>Move game object below this container and all children     <pre><code>container.moveDepthBelow(gameObject);\n</code></pre></li> <li>Move game object above this container and all children     <pre><code>container.moveDepthAbove(gameObject);\n</code></pre></li> <li>Bring a child of container to top of this container     <pre><code>container.bringChildToTop(gameObject);\n</code></pre></li> <li>Send a child of container to bottom of this container     <pre><code>container.sendChildToBack(gameObject);\n</code></pre></li> </ul>"},{"location":"containerlite/#layer","title":"Layer","text":"<p>A containerLite can have a layer.  Current children and new children will draw on this layer, instead of display list of scene.</p> <ul> <li>Enable layer. Do nothing if layer is existed.     <pre><code>container.enableLayer();\n</code></pre></li> <li>Get layer game object. Will enable layer if layer is not existed.     <pre><code>var layer = container.getLayer();\n</code></pre></li> <li>Get layer game object, without enable layer.     <pre><code>var layer = container.privateRenderLayer;\n</code></pre></li> </ul>"},{"location":"containerlite/#mask","title":"Mask","text":"<ul> <li>Assign mask object to children     <pre><code>container.setMask(mask);  // container.mask = mask;\n</code></pre></li> <li>Remove mask object of children     <pre><code>container.clearMask();\n</code></pre></li> <li>Remove mask object of children, and destroy mask object     <pre><code>container.clearMask(true);\n</code></pre></li> </ul>"},{"location":"containerlite/#shader-effects","title":"Shader effects","text":"<p>Apply post-fx pipeline on layer of containerLite.</p>"},{"location":"containerlite/#snapshot","title":"Snapshot","text":"<ul> <li>Draw all visible children on a render-texture.     <pre><code>var renderTexture = container.snapshot({\nrenderTexture: undefined,\npadding: 0\n});\n</code></pre><ul> <li><code>renderTexture</code> : Draw on this render-texture<ul> <li><code>undefined</code> : Create a new render-texture</li> </ul> </li> <li><code>padding</code> : <ul> <li><code>0</code> : No extra padding space. Default value.</li> <li>A number : Add extra padding space around this render-texture.</li> </ul> </li> </ul> </li> <li>Draw all visible children on a texture     <pre><code>container.snapshot({\npadding: 0,\nsaveTexture: textureKey\n});\n</code></pre><ul> <li><code>saveTexture</code> : Save render result to texture manager.</li> </ul> </li> </ul>"},{"location":"containerlite/#draw-bounds","title":"Draw bounds","text":"<ul> <li>Draw bounds of shown game object on a graphics game object     <pre><code>container.drawBounds(graphics);\n// container.drawBounds(graphics, color);\n</code></pre>     or     <pre><code>container.drawBounds(graphics, {\n// color: 0xffffff,\n// lineWidth: 1,\n// padding: 0,\n// drawContainer: true,\n// children: undefined,\n});\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code>.</li> <li><code>lineWidth</code> : Default value is <code>1</code>.</li> <li><code>padding</code> : Extra space around bounds. Default value is <code>0</code>.</li> <li><code>drawContainer</code> : <ul> <li><code>true</code> : Draw all children game objects included containerLite. Default behavior.</li> <li><code>false</code> : Draw all children game objects excluded containerLite</li> </ul> </li> <li><code>children</code> : <ul> <li>Array of game objects : Only draw bounds of these children</li> <li><code>undefined</code> : Draw bounds of all children</li> </ul> </li> </ul> </li> </ul>"},{"location":"containerlite/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Set scroll factor to children    <pre><code>container.setScrollFactor(x, y);\n</code></pre></li> </ul>"},{"location":"containerlite/#change-origin","title":"Change origin","text":"<pre><code>container.changeOrigin(originX, originY);\n</code></pre> <p>This method also will reset all local state of children.</p>"},{"location":"containerlite/#add-to-container","title":"Add to container","text":"<ul> <li>Add to built-in container <pre><code>p3Container.add(containerLite);\n</code></pre>     or     <pre><code>containerLite.addToContainer(p3Container);\n</code></pre><ul> <li><code>container</code> : Container game object.</li> </ul> </li> <li>Add to Layer <pre><code>container.addToLayer(layer);\n</code></pre><ul> <li><code>layer</code> : Layer game object.</li> </ul> </li> </ul> <p>Note</p> <p><code>container.add(containerLite)</code>, or <code>layer.add(containerLite)</code> won't add children of containerLite.</p>"},{"location":"containerlite/#other-properties_1","title":"Other properties","text":"<p>See game object</p>"},{"location":"containerlite/#compare-with-official-container","title":"Compare with Official Container","text":"<ul> <li>Position/anlge/scale of a child object :<ul> <li>Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale.</li> <li>Container-Lite : World position/anlge/scale.</li> </ul> </li> <li>Updating period<ul> <li>Container : Re-calculate position/anlge/scale of each child every render.</li> <li>Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale.</li> </ul> </li> <li>Mask<ul> <li>Container : It has mask property, and it could become a mask object.</li> <li>Container-Lite : It has mask property, but it could not become a mask object.</li> </ul> </li> </ul>"},{"location":"create-number-array/","title":"Number array","text":""},{"location":"create-number-array/#introduction","title":"Introduction","text":"<p>Create an array representing the range of numbers, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"create-number-array/#usage","title":"Usage","text":""},{"location":"create-number-array/#create-number-array","title":"Create number array","text":"<p>Create an array representing the range of numbers (usually integers), between, and inclusive of, the given <code>start</code> and <code>end</code> arguments.</p> <pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArray(2, 4);\n// arr = [2, 3, 4]\n</code></pre></p>"},{"location":"create-number-array/#create-number-array-with-step","title":"Create number array with step","text":"<p>Create an array of numbers (positive and/or negative) progressing from <code>start</code> up to but not including <code>end</code> by advancing by <code>step</code>.</p> <pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end, step);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArrayStep(0, 20, 5);\n// arr =  [0, 5, 10, 15]\n</code></pre></p>"},{"location":"create-number-array/#create-prefix-number-suffix-string-array","title":"Create prefix-number-suffix string array","text":"<pre><code>var arr = Phaser.Utils.Array.NumberArray(start, end, prefix, suffix);\n</code></pre> <p>For example, <pre><code>var arr = Phaser.Utils.Array.NumberArray(5, 7, 'HD-', '.png');\n// arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']\n</code></pre></p>"},{"location":"csvscenario/","title":"CSV scenario","text":""},{"location":"csvscenario/#introduction","title":"Introduction","text":"<p>Run script in csv format. Csv could be edited by excel or google document.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"csvscenario/#live-demos","title":"Live demos","text":"<ul> <li>CSV-scenario</li> <li>With TextPlayer</li> </ul>"},{"location":"csvscenario/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvscenario/#install-plugin","title":"Install plugin","text":""},{"location":"csvscenario/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcsvscenarioplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcsvscenarioplugin.min.js', true);\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = scene.plugins.get('rexcsvscenarioplugin').add(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CsvScenarioPlugin from 'phaser3-rex-plugins/plugins/csvscenario-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCsvScenario',\nplugin: CsvScenarioPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = scene.plugins.get('rexCsvScenario').add(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CsvScenario from 'phaser3-rex-plugins/plugins/csvscenario.js';\n</code></pre></li> <li>Add csv-scenario object     <pre><code>var scenario = new CsvScenario(scene);\n</code></pre></li> </ul>"},{"location":"csvscenario/#create-instance","title":"Create instance","text":"<pre><code>var scenario = scene.plugins.get('rexCSVScenario').add(scene, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// prefix: /^#([a-zA-Z]+)/\n// argsConvert: true,\n// argsConvertScope: undefined,\n// delimiter: ','\n// translateCommandNameCallback: undefined,\n});\n</code></pre> <ul> <li><code>csvString</code> : Commands in csv-string.</li> <li><code>scope</code> : Running commands via methods in this scope object.<ul> <li>Get scope : <code>var scope = scenario.scope</code></li> </ul> </li> <li><code>timeUnit</code>: time-unit of dt, for delay-execution<ul> <li><code>'ms'</code>, or <code>0</code> : dt in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : dt in second</li> </ul> </li> <li><code>prefix</code>: regex of picking control instructions</li> <li><code>argsConvert</code>: A callback to convert parameters of run-custom-function<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>argsConvertScope</code>: scope of argsConvert</li> <li><code>delimiter</code> : Delimiter of CSV string.</li> <li><code>translateCommandNameCallback</code> : Callback to translate custom command name<ul> <li><code>undefined</code> : Use original custom command name. Default behavior.</li> <li>A function, return new custom command name.     <pre><code>function(commandName) {\nreturn newCommandName;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"csvscenario/#load-csv-script","title":"Load csv script","text":"<pre><code>scenario.load(csvString, scope, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// prefix: /^#([a-zA-Z]+)/\n// argsConvert: true,\n// argsConvertScope: undefined,\n// delimiter: ',',\n// translateCommandNameCallback: undefined,\n})\n</code></pre> <ul> <li><code>csvString</code> : Commands in csv-string.</li> <li><code>scope</code> : Running commands via methods in this scope object.<ul> <li>Get scope : <code>var scope = scenario.scope</code></li> </ul> </li> <li><code>timeUnit</code>: time-unit of dt, for delay-execution<ul> <li><code>'ms'</code>, or <code>0</code> : dt in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : dt in second</li> </ul> </li> <li><code>prefix</code>: regex of picking control instructions</li> <li><code>argsConvert</code>: A callback to convert parameters of run-custom-function<ul> <li><code>true</code> : Use defaule value converter. Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string.</li> <li>Function object:     <pre><code>function(s) {\nreturn s;\n}\n</code></pre></li> </ul> </li> <li><code>argsConvertScope</code>: scope of argsConvert</li> <li><code>delimiter</code> : Delimiter of CSV string.</li> </ul>"},{"location":"csvscenario/#append-csv-script","title":"Append csv script","text":"<pre><code>scenario.append(csvString);\n</code></pre>"},{"location":"csvscenario/#start-running-instructions","title":"Start running instructions","text":"<p><pre><code>scenario.start({\n// label: '',\n// offset: 0\n})\n</code></pre> <pre><code>scenario.play({\n// label: '',\n// offset: 0\n})\n</code></pre></p> <ul> <li><code>label</code> : Go to the label and execute. '' label is starting from 1st instruction</li> <li><code>offset</code> : Offset time</li> </ul> <p>or</p> <pre><code>scenario.playPromise({\n// label: '',\n// offset: 0\n})\n.then(function(){\n// On complete\n})\n</code></pre>"},{"location":"csvscenario/#events","title":"Events","text":"<ul> <li>Complete     <pre><code>scenario.on('complete', function(scope, scenario){ });\n</code></pre></li> <li>Wait event     <pre><code>scenario.on('wait.' + eventName, function(scenario){ });\n</code></pre> <pre><code>scenario.on('wait', function(eventName, scenario){ });\n</code></pre></li> <li>Label has changed     <pre><code>scenario.on('labelchange', function(lastLabel, prevLabel, scope, scenario){ });\n</code></pre></li> <li>Dump execution log     <pre><code>scenario.on('log', function(msg, scope, scenario){ });\n</code></pre></li> <li>Notify error     <pre><code>scenario.on('error', function(msg, scope, scenario){ });\n</code></pre></li> </ul>"},{"location":"csvscenario/#types-of-instructions","title":"Types of instructions","text":"<p>Each row in csv table is an instruction.</p>"},{"location":"csvscenario/#run-custom-function","title":"Run custom function","text":"<p>Run custom function of <code>scope</code>, which passed from <code>scenario.load(...)</code></p> <p>Format:</p> <pre><code>-,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: <code>-</code></li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> <li>Method name of last custom command :     <pre><code>var methodName = scenario.lastCustomCommandName;\n</code></pre></li> <li>An <code>error</code> event will be fired if <code>fnName</code> is invalid in <code>scope</code>.</li> </ul>"},{"location":"csvscenario/#delay-execution","title":"Delay execution","text":"<p>Run custom function after a delay.</p> <p>Format:</p> <pre><code>time,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: a number</li> <li>time-unit of delay is set from <code>scenario.load(...)</code></li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> </ul>"},{"location":"csvscenario/#wait-then-execution","title":"Wait then execution","text":"<p>Run custom function until <code>scenario.continue(eventName)</code></p> <p>Format:</p> <pre><code>eventName,fnName,param0,param1,...\n</code></pre> <ul> <li>1st column of instruction: not a number, not a string start from <code>#</code></li> <li>Execution will be hang until <code>scenario.continue(eventName)</code> is called</li> <li>Parameters will be converted to number, boolean, null, or string by default.</li> </ul>"},{"location":"csvscenario/#skip-waiting","title":"Skip waiting","text":"<pre><code>scenario.continue(true);\n</code></pre>"},{"location":"csvscenario/#task","title":"Task","text":"<p>Sample code</p> <p>Scenario will be paused if custom function return an event emitter, resumed when that evnt emitter fires <code>complete</code> event.</p> <p>See also: Sequence</p>"},{"location":"csvscenario/#label","title":"Label","text":"<p>Sample code</p> <p>A label for <code>#GOTO</code> or <code>#IF</code> instructions.</p> <p>Format:</p> <pre><code>#LABEL,label\n</code></pre> <ul> <li>1st column of instruction: <code>#LABEL</code>, case insensitive.</li> <li>Label <code>''</code> is reserved, don't use <code>''</code> for label name.</li> </ul> <p>Example: A label named 'AA'</p> <pre><code>#LABEL,AA\n</code></pre> <ul> <li>Last label :     <pre><code>var label = scenario.lastLabel;\n</code></pre></li> <li>Previous label :     <pre><code>var previousLabel = scenario.previousLabel;\n</code></pre></li> </ul>"},{"location":"csvscenario/#exit","title":"Exit","text":"<p>Exit current execution.</p> <p>Format:</p> <pre><code>#EXIT\n</code></pre> <ul> <li>1st column of instruction: <code>#EXIT</code>, case insensitive.</li> </ul>"},{"location":"csvscenario/#goto","title":"Goto","text":"<p>Sample code</p> <p>Go to label and execute.</p> <p>Format:</p> <pre><code>#GOTO,label\n</code></pre> <ul> <li>1st column of instruction: <code>#GOTO</code>, case insensitive.</li> <li>An <code>error</code> event will be fired if label is not found.</li> </ul> <p>Example: Goto label 'AA'</p> <pre><code>#GOTO,AA\n</code></pre>"},{"location":"csvscenario/#if-goto","title":"If-goto","text":"<p>Sample code</p> <p>Go to trueLabel if condition is true, otherwise go to falseLabel.</p> <p>Format:</p> <pre><code>#IF,condition,trueLabel,falseLabel\n</code></pre> <ul> <li>1st column of instruction: <code>#IF</code>, case insensitive.</li> <li>conditon: boolean equation<ul> <li>this is the <code>scope</code> passed from <code>scenario.load(...)</code></li> </ul> </li> <li>trueLabel/falseLabel: go to this label if condition is true/false<ul> <li>run next instruction if label is <code>''</code></li> <li>An <code>error</code> event will be fired if label is not found.</li> </ul> </li> </ul> <p>Example: Goto label 'AA' if (this.coin &gt; 100), else run next instruction</p> <pre><code>#IF,this.coin &gt; 100,AA\n</code></pre>"},{"location":"csvscenario/#wait","title":"Wait","text":"<p>Run next instruction after a delay time, or <code>scenario.continue(eventName)</code>.</p> <p>Format:</p> <pre><code>#WAIT,time\n</code></pre> <pre><code>#WAIT,eventName\n</code></pre> <ul> <li>1st column of instruction: <code>#WAIT</code>, case insensitive.</li> <li>2nd colume of instruction:<ul> <li>a number: a delay time<ul> <li>time-unit of delay is set from <code>scenario.load(...)</code></li> </ul> </li> <li>a string: an event name for <code>scenario.continue(eventName)</code></li> </ul> </li> </ul> <p>Example: </p> <ul> <li>Wait 1 time-unit     <pre><code>#WAIT,1\n</code></pre></li> <li>Wait until 'click'     <pre><code>#WAIT,click\n</code></pre> <pre><code>scenario.continue('click');\n</code></pre></li> </ul>"},{"location":"csvscenario/#pause","title":"Pause","text":"<pre><code>scenario.pause();\n</code></pre>"},{"location":"csvscenario/#resume","title":"Resume","text":"<pre><code>scenario.resume();\n</code></pre>"},{"location":"csvscenario/#time-scale","title":"Time-scale","text":"<ul> <li>Get     <pre><code>var timeScale = scenario.timeScale;\n</code></pre></li> <li>Set     <pre><code>scenario.setTimeScale(timeScale);\n// scenario.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"csvscenario/#clear","title":"Clear","text":"<p>Stop running and clear instructions.</p> <pre><code>scenario.clear();\n</code></pre>"},{"location":"csvscenario/#states","title":"States","text":"<ul> <li>Is running     <pre><code>var isRunning = scenario.isRunning;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = scenario.isPaused;\n</code></pre></li> </ul>"},{"location":"csvtoarray/","title":"CSV to array","text":""},{"location":"csvtoarray/#introduction","title":"Introduction","text":"<p>Generate array from csv string.</p> <ul> <li>Reference: Papa Parse</li> <li>Method only</li> </ul>"},{"location":"csvtoarray/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvtoarray/#import-class","title":"Import class","text":"<pre><code>import rexCSVToArray from './plugins/csvtoarray.js';\n</code></pre>"},{"location":"csvtoarray/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CSVToArrayPlugin from 'phaser3-rex-plugins/plugins/csvtoarray-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCSVToArray',\nplugin: CSVToArrayPlugin,\nstart: true\n}\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Convert csv     <pre><code>var arr = scene.plugins.get('rexCSVToArray').convert(csvString, config);\n</code></pre></li> </ul>"},{"location":"csvtoarray/#convert-csv","title":"Convert csv","text":"<pre><code>var arr = scene.plugins.get('rexCSVToArray').convert(csvString, {\n// delimiter: ',',\n// convert: true\n});\n</code></pre> <p>Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string, if <code>convert</code> is <code>true</code>.</p>"},{"location":"csvtohashtable/","title":"CSV to hash table","text":""},{"location":"csvtohashtable/#introduction","title":"Introduction","text":"<p>Hash table indexed by (col-key, row-key) from csv string.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"csvtohashtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"csvtohashtable/#install-plugin","title":"Install plugin","text":""},{"location":"csvtohashtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcsvtohashtableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcsvtohashtableplugin.min.js', true);\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = scene.plugins.get('rexcsvtohashtableplugin').add();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CsvToHashTablePlugin from 'phaser3-rex-plugins/plugins/csvtohashtable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCsvToHashTable',\nplugin: CsvToHashTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = scene.plugins.get('rexCsvToHashTable').add();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CsvToHashTable from 'phaser3-rex-plugins/plugins/csvtohashtable.js';\n</code></pre></li> <li>Add hash-table object     <pre><code>var table = new CsvToHashTable();\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexCsvToHashTable').add();\n</code></pre>"},{"location":"csvtohashtable/#append-rows-from-csv-string","title":"Append rows from csv string","text":"<pre><code>table.loadCSV(csvString, {\n// delimiter: ',',\n// convert: true\n// convertScope: undefined\n});\n</code></pre> <p>For exameple, csv string</p> name hp mp Rex 100 20 Alice 300 40 <pre><code>name,hp,mp\nRex,100,20\nAlice,300,40\n</code></pre> <p>will be converted to</p> <pre><code>{\n\"Alice\": {\n\"name\": \"Alice\",\n\"hp\": 300,\n\"mp\": 40\n},\n\"Rex\": {\n\"name\": \"Rex\",\n\"hp\": 100,\n\"mp\": 20\n}\n}\n</code></pre> <p>Then get value by</p> <pre><code>var value = table.get('Rex', 'hp');\n</code></pre>"},{"location":"csvtohashtable/#convert-value-type","title":"Convert value type","text":"<p>Values will be converted to number (include hex number string like '0xFF'), boolean, null, or string, if <code>convert</code> is <code>true</code>, or assign your convert function by <code>convert</code> and <code>convertScope</code> when loading table (<code>table.loadCSV(...)</code>).</p> <pre><code>var convertCallback = function(table, rowKey, colKey, value) {\n// value = ...\nreturn value;\n};\n</code></pre> <p>Or uses these metheds to convert columns or rows.</p> <ul> <li>convert values in column     <pre><code>table.convertCol(colKey);  // colKey: a colKey, or an array of colKeys\n// table.convertCol(colKey, convertCallback, convertCallbackScope);\n</code></pre></li> <li>convert values in row     <pre><code>table.convertRow(rowKey);  // rowKey: a rowKey, or an array of rowKeys\n// table.convertRow(rowKey, convertCallback, convertCallbackScope);\n</code></pre></li> </ul>"},{"location":"csvtohashtable/#get-value","title":"Get value","text":"<pre><code>var val = table.get(rowKey, colKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#set-value","title":"Set value","text":"<pre><code>table.set(rowKey, colKey, value);\n</code></pre> <pre><code>table.add(rowKey, colKey, value);\n// equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#has-columnrow-key","title":"Has column/row key","text":"<pre><code>var hasRow = table.hasRowKey(rowKey);\n</code></pre> <pre><code>var hasCol = table.hasColKey(colKey);\n</code></pre> <pre><code>var hasCell = table.hasKey(rowKey, colKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#value-in-column-or-row","title":"Value in column or row","text":"<pre><code>var existed = table.isValueInRol(rowKey, value);\n</code></pre> <pre><code>var existed = table.isValueInCol(colKey, value);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#create-table","title":"Create table","text":""},{"location":"csvtohashtable/#clear-table","title":"Clear table","text":"<pre><code>table.clear();\n</code></pre>"},{"location":"csvtohashtable/#append-a-column","title":"Append a column","text":"<pre><code>table.appendCol(colKey, initValue);\n// table.appendCol(colKey, callback, scope);  // get initValue from callback\n</code></pre> <p>Callback</p> <pre><code>var callback = function (table, rowKey, colKey) { // value = ...\nreturn value;\n};\n</code></pre> <ul> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#append-a-row","title":"Append a row","text":"<pre><code>table.appendRow(rowKey, initValue);\n// table.appendRow(rowKey, callback, scope);  // get initValue from callback\n</code></pre> <p>Callback</p> <pre><code>var callback = function (table, rowKey, colKey) { // value = ...\nreturn value;\n};\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> </ul>"},{"location":"csvtohashtable/#remove-a-column","title":"Remove a column","text":"<pre><code>table.removeCol(colKey);\n</code></pre> <ul> <li><code>colKey</code> : Column key string, or column index number.</li> </ul>"},{"location":"csvtohashtable/#remove-a-row","title":"Remove a row","text":"<pre><code>table.removeRol(rowKey);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> </ul>"},{"location":"csvtohashtable/#sort-column-or-row","title":"Sort column or row","text":"<pre><code>table.sortCol(colKey, mode);\n// table.sortCol(callback, scope);  // sort columns by callback\n</code></pre> <pre><code>table.sortRow(rowKey, mode);\n// table.sortRow(callback, scope);  // sort rows by callback\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul> <p>Mode:</p> <ul> <li><code>'ascending'</code>, or <code>0</code></li> <li><code>'descending'</code>, or <code>1</code></li> <li><code>'logical ascending'</code>, or <code>2</code></li> <li><code>'logical descending'</code>, or <code>3</code></li> </ul> <p>Sorting callback</p> <pre><code>var callback = function(rowKeyA, rowKeyB) {\nreturn result; // 1, -1, or 0\n};\n</code></pre>"},{"location":"csvtohashtable/#retrieve-columns-or-rows","title":"Retrieve columns or rows","text":"<pre><code>table.eachCol(rowKey, callback, scope);\n</code></pre> <pre><code>table.eachRow(colKey, callback, scope);\n</code></pre> <ul> <li><code>rowKey</code> : Row key string, or row index number.</li> <li><code>colKey</code> : Column key string, or column index number.</li> </ul> <p>Callback</p> <pre><code>var callback = function(table, rowKey, colKey, value) {\n// ...\n};\n</code></pre>"},{"location":"csvtohashtable/#json","title":"JSON","text":"<ul> <li>Table to json     <pre><code>var jsonData = table.toJSON();\n</code></pre></li> <li>Reset table by JSON     <pre><code>table.resetFromJSON(jsonData);\n</code></pre></li> </ul>"},{"location":"cursor/","title":"Cursor","text":""},{"location":"cursor/#introduction","title":"Introduction","text":"<p>Custom cursor, built-in feature of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"cursor/#usage","title":"Usage","text":"<p>References:</p> <ul> <li>Cursor</li> <li>Using URL values for the cursor property</li> </ul>"},{"location":"cursor/#set-default-cursor","title":"Set default cursor","text":"<pre><code>scene.input.setDefaultCursor(CSSString);\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre>"},{"location":"cursor/#set-cursor-of-a-game-object","title":"Set cursor of a Game Object","text":"<p>Change cursor image when cursor is over that Game Object.</p> <pre><code>gameObject.setInteractive({\ncursor: CSSString\n});\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre> <p>Set cursor image directly after <code>gameObject.setInteractive()</code>.</p> <pre><code>gameObject.input.cursor = CSSString;\n// CSSString: 'url(assets/input/cursors/sword.cur), pointer'\n</code></pre> <p>Use pointer (hand cursor).</p> <pre><code>gameObject.setInteractive({\nuseHandCursor: true\n});\n</code></pre>"},{"location":"cursor/#change-current-cursor","title":"Change current cursor","text":"<pre><code>scene.input.manager.canvas.style.cursor = cursor;\n</code></pre> <ul> <li><code>cursor</code> : CSSString</li> </ul>"},{"location":"cursoratbound/","title":"Cursor at bound","text":""},{"location":"cursoratbound/#introduction","title":"Introduction","text":"<p>Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"cursoratbound/#live-demos","title":"Live demos","text":"<ul> <li>Camera scrolling</li> </ul>"},{"location":"cursoratbound/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"cursoratbound/#install-plugin","title":"Install plugin","text":""},{"location":"cursoratbound/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcursoratboundplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcursoratboundplugin.min.js', true);\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = scene.plugins.get('rexcursoratboundplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CursorAtBoundPlugin from 'phaser3-rex-plugins/plugins/cursoratbound-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCursorAtBound',\nplugin: CursorAtBoundPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = scene.plugins.get('rexCursorAtBound').add(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CursorAtBound from 'phaser3-rex-plugins/plugins/cursoratbound.js';\n</code></pre></li> <li>Add cursor-at-bound object     <pre><code>var cursorAtBound = new CursorAtBound(scene, config);\n</code></pre></li> </ul>"},{"location":"cursoratbound/#create-instance","title":"Create instance","text":"<pre><code>var cursorAtBound = scene.plugins.get('rexCursorAtBound').add(scene, {\n// bounds: undefined,\n// sensitiveDistance: 20,\n});\n</code></pre> <ul> <li><code>bounds</code> : A rectangle object\u311d or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>sensitiveDistance</code> : A sensitive distance in pixels.</li> </ul> <p>Map position of cursor to state of cursor key</p> <ul> <li>Position x is between left bound and left bound + sensitive distance : left cursor key is pressed.</li> <li>Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed.</li> <li>Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed.</li> <li>Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed.</li> </ul>"},{"location":"cursoratbound/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = cursorAtBound.createCursorKeys();\n\nvar leftKeyDown = cursorKeys.left.isDown;\nvar rightKeyDown = cursorKeys.right.isDown;\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var leftKeyDown = cursorAtBound.left;\nvar rightKeyDown = cursorAtBound.right;\nvar upKeyDown = cursorAtBound.up;\nvar downKeyDown = cursorAtBound.down;\nvar noKeyDown = cursorAtBound.noKey;\n</code></pre>"},{"location":"cursoratbound/#destroy","title":"Destroy","text":"<pre><code>cursorAtBound.destroy();\n</code></pre>"},{"location":"curve-spiral/","title":"Spiral curve","text":""},{"location":"curve-spiral/#introduction","title":"Introduction","text":"<p>Spiral curve.</p> <ul> <li>Author: Rex</li> <li>Curve object</li> </ul>"},{"location":"curve-spiral/#live-demos","title":"Live demos","text":"<ul> <li>Spiral curve</li> <li>Particles along spiral curve</li> </ul>"},{"location":"curve-spiral/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"curve-spiral/#install-plugin","title":"Install plugin","text":""},{"location":"curve-spiral/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexspiralcurveplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspiralcurveplugin.min.js', true);\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = scene.plugins.get('rexspiralcurveplugin').add(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SpiralCurvePlugin from 'phaser3-rex-plugins/plugins/spiralcurve-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSpiralCurve',\nplugin: SpiralCurvePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import SpiralCurve from 'phaser3-rex-plugins/plugins/spiralcurve.js';\n</code></pre></li> <li>Add spiral curve object     <pre><code>var spiral = new SpiralCurve(config);\n</code></pre></li> </ul>"},{"location":"curve-spiral/#create-shape","title":"Create shape","text":"<ul> <li>All properties     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add({\n// Origin point\n// Ease origin point\n// startX:0, endX: 0, easeX: 'Linear',\n// startY:0, endY: 0, easeY: 'Linear',\n// Fixed point\n// x, y,\n\n// x-radius\n// startXRadius: 0, endXRadius, easeXRadius: 'Linear',\n// y-radius\n// startYRadius: 0, endYRadius, easeYRadius: 'Linear',\n// start-end radius\n// startRadius, endRadiux\n\n// angle\n// startAngle: 0, endAngle: 360, easeAngle: 'Linear',\n\n// rotation: 0\n});\n</code></pre><ul> <li>Origin point<ul> <li><code>startX</code>, <code>endX</code>, <code>easeX</code>, <code>startY</code>, <code>endY</code>, <code>easeY</code> : Ease origin point.<ul> <li><code>easeX</code>, <code>easeY</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Fixed origin point, i.e. start point is equal to end point.</li> </ul> </li> <li>Radius<ul> <li><code>startXRadius</code>, <code>endXRadius</code>, <code>easeXRadius</code> : Ease x-radius.<ul> <li><code>easeXRadius</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>startYRadius</code>, <code>endYRadius</code>, <code>easeYRadius</code> : Ease y-radius.<ul> <li><code>easeYRadius</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> <li><code>startRadius</code>, <code>endRadiux</code> : <ul> <li>Set <code>startXRadius</code>, and <code>startYRadius</code> to <code>startRadius</code>.</li> <li>Set <code>endXRadius</code>, and <code>endYRadius</code> to <code>endRadius</code>.</li> </ul> </li> </ul> </li> <li>Angle<ul> <li><code>startAngle</code>, <code>endAngle</code>, <code>easeAngle</code> : Ease angle, in degrees.<ul> <li><code>easeAngle</code> : Ease equation, default value is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>rotation</code> : Rotate curve.</li> </ul> </li> <li>Simple spiral curve     <pre><code>var spiral = scene.plugins.get('rexSpiralCurve').add(x, y, startRadius, endRadius, startAngle, endAngle, rotation);\n</code></pre><ul> <li><code>x</code> : Set <code>startX</code>, <code>endX</code> to <code>x</code>, and <code>easeX</code> to <code>'Linear'</code>.</li> <li><code>y</code> : Set <code>startY</code>, <code>endY</code> to <code>y</code>, and <code>easeY</code> to <code>'Linear'</code>.</li> <li><code>startRadius</code> : Set <code>startXRadius</code>, <code>startYRadius</code> to <code>startRadius</code></li> <li><code>endRadius</code> : Set <code>endXRadius</code>, <code>endYRadius</code> to <code>endRadius</code>, and <code>easeXRadius</code>, <code>easeYRadius</code> to <code>Linear</code>.</li> <li>Set <code>easeAngle</code> to <code>'Linear'</code></li> </ul> </li> </ul>"},{"location":"curve-spiral/#properties","title":"Properties","text":"<ul> <li>Origin point<ul> <li>Get     <pre><code>var startX = spiral.startX;\nvar startY = spiral.startY;\nvar endX = spiral.endX;\nvar endY = spiral.endY;\n</code></pre>     or     <pre><code>var startPoint = spiral.p0; // {x, y}\nvar endPoint = spiral.p1; // {x, y}\n</code></pre></li> <li>Set     <pre><code>spiral.setStartX(x);\nspiral.setStartY(y);\nspiral.setEndX(x);\nspiral.setEndY(y);\n</code></pre>     or     <pre><code>spiral.startX = x;\nspiral.startY = y;\nspiral.endX = x;\nspiral.endY = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var startXRadius = spiral.startXRadius;\nvar startYRadius = spiral.startYRadius;\nvar endXRadius = spiral.endXRadius;\nvar endYRadius = spiral.endYRadius;\n</code></pre></li> <li>Set     <pre><code>spiral.setStartXRadius(startXRadius);\nspiral.setStartYRadius(startYRadius);\nspiral.setEndXRadius(endXRadius);\nspiral.setEndYRadius(endYRadius);\n</code></pre>     or     <pre><code>spiral.startXRadius = startXRadius;\nspiral.startYRadius = startYRadius;\nspiral.endXRadius = endXRadius;\nspiral.endYRadius = endYRadius;\n</code></pre></li> </ul> </li> <li>Angle, in degrees.<ul> <li>Get     <pre><code>var startAnlge = spiral.startAngle;\nvar endAnlge = spiral.endAngle;\n</code></pre></li> <li>Set     <pre><code>spiral.setStartAngle(startAnlge);\nspiral.setEndAngle(endAnlge);\n</code></pre> <pre><code>spiral.startAngle = startAnlge;\nspiral.endAngle = endAnlge;\n</code></pre></li> </ul> </li> </ul>"},{"location":"curve-spiral/#other-methods","title":"Other methods","text":"<p>See path</p>"},{"location":"datamanager/","title":"Built-in data","text":""},{"location":"datamanager/#introduction","title":"Introduction","text":"<p>Store data in key-value pairs, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"datamanager/#usage","title":"Usage","text":""},{"location":"datamanager/#write","title":"Write","text":""},{"location":"datamanager/#set-value","title":"Set value","text":"<ul> <li>Set value     <pre><code>parent.data.set(key, value);\n</code></pre>     or     <pre><code>parent.data.values[key] = value;\n</code></pre><ul> <li><code>key</code> : Key string.</li> </ul> </li> <li>Increase number value. If the key doesn't already exist in the Data Manager then it is increased from 0.     <pre><code>parent.data.inc(key, data);\n</code></pre>     or     <pre><code>parent.data.values[key] += value;\n</code></pre><ul> <li><code>data</code> : The value to increase. </li> </ul> </li> <li>Toggle boolean value. If the key doesn't already exist in the Data Manager then it is toggled from false.     <pre><code>parent.data.toggle(key);\n</code></pre>     or     <pre><code>parent.data.values[key] = !parent.data.values[key];\n</code></pre></li> </ul>"},{"location":"datamanager/#set-values","title":"Set values","text":"<pre><code>parent.data.set(data);    // data: {key:value, ...}\n</code></pre>"},{"location":"datamanager/#merge-values","title":"Merge values","text":"<pre><code>parent.data.merge(data);  // data: {key:value, ...}\nparent.data.merge(data, false);  // won't overwrite existed keys\n</code></pre>"},{"location":"datamanager/#events","title":"Events","text":"<p>Fires <code>setdata</code> event when a value is first set.</p> <pre><code>parent.data.events.on('setdata', function(parent, key, value){ /* ... */ });\n</code></pre> <p>Fires <code>changedata</code>, and <code>changedata- + key</code> events when a value is set that already exists.</p> <pre><code>parent.data.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>parent.data.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n</code></pre>"},{"location":"datamanager/#read","title":"Read","text":""},{"location":"datamanager/#get-value","title":"Get value","text":"<p><pre><code>var value = parent.data.get(key);\n</code></pre> or <pre><code>var value = parent.data.values[key];\n</code></pre></p>"},{"location":"datamanager/#get-values","title":"Get values","text":"<pre><code>var values = parent.data.get(keys); // values: [value, value, ...], keys: [key, key, ...]\n</code></pre>"},{"location":"datamanager/#get-all-values","title":"Get all values","text":"<pre><code>var allValues = parent.data.getAll();  // return a copy of data\n</code></pre>"},{"location":"datamanager/#query","title":"Query","text":"<p>Using string.match() to pick matched keys.</p> <pre><code>var result = parent.data.query(rgExp);\n</code></pre>"},{"location":"datamanager/#remove","title":"Remove","text":""},{"location":"datamanager/#remove-key","title":"Remove key","text":"<pre><code>parent.data.remove(key);\n</code></pre>"},{"location":"datamanager/#remove-keys","title":"Remove keys","text":"<pre><code>parent.data.remove(keys);  // keys: [key, key, ...]\n</code></pre>"},{"location":"datamanager/#pop-key","title":"Pop key","text":"<pre><code>var value = parent.data.pop(key);\n</code></pre> <p>Get and remove that key.</p>"},{"location":"datamanager/#delet-all-keys","title":"Delet all keys","text":"<p>Delete all data in this Data Manager and unfreeze it.</p> <pre><code>parent.data.reset();\n</code></pre>"},{"location":"datamanager/#events_1","title":"Events","text":"<p>Fires <code>removedata</code> event when a key is removed.</p> <pre><code>parent.data.events.on('removedata', function(parent, key, value){ /* ... */ });\n</code></pre>"},{"location":"datamanager/#freeze","title":"Freeze","text":"<pre><code>var isFrozen = parent.data.freeze;\nparent.data.freeze = true;\n</code></pre> <p>No changes can be written to it.</p>"},{"location":"datamanager/#has-key","title":"Has key","text":"<pre><code>var hasKey = parent.data.has(key);\n</code></pre>"},{"location":"datamanager/#for-each-key","title":"For each key","text":"<pre><code>parent.data.each(function(parent, key, value){\n/* ... */\n}, scope);\n</code></pre>"},{"location":"datamanager/#count-of-data","title":"Count of data","text":"<pre><code>var cnt = parent.data.count;\n</code></pre>"},{"location":"datamanager/#reset","title":"Reset","text":"<p>Reset status and clear all keys.</p> <pre><code>parent.data.reset()\n</code></pre>"},{"location":"date/","title":"Date","text":""},{"location":"date/#introduction","title":"Introduction","text":"<p>Get current date or unix-timestamp.</p> <ul> <li>Author: Built-in javascript function</li> </ul>"},{"location":"date/#usage","title":"Usage","text":"<p>Reference</p>"},{"location":"date/#create-instance","title":"Create instance","text":"<pre><code>var d = new Date();\nvar d = new Date(timestamp);\nvar d = new Date(dateString);\nvar d = new Date(year, month, day, hours, minutes, seconds, milliseconds);\n</code></pre>"},{"location":"date/#get-date","title":"Get date","text":"<pre><code>var year = d.getFullYear();    // returns the year\nvar month = d.getMonth();      // returns the month (0-11)\nvar date = d.getDate();        // returns the day of the month (1-31)\nvar day = d.getDay();          // returns the day of the week\nvar hour = d.getHours();       // returns the hour (0-23)\nvar min = d.getMinutes();      // returns the minutes (0-59)\nvar sec = d.getSeconds();      // returns the seconds (0-59)\nvar ms = d.getMilliseconds();  // returns the milliseconds (0-999)\n</code></pre>"},{"location":"date/#get-unix-timestamp","title":"Get unix-timestamp","text":"<pre><code>var timestamp = d.getTime();;   // unix-timestamp in milliseconds\n</code></pre> <p>or</p> <pre><code>var timestamp = Date.now();;    // unix-timestamp in milliseconds\n</code></pre>"},{"location":"date/#to-string","title":"To string","text":"<pre><code>var s = d.toLocaleString();   // locale conventions\nvar iso = d.toISOString();    // ISO standard\n</code></pre>"},{"location":"device/","title":"Device","text":""},{"location":"device/#introduction","title":"Introduction","text":"<p>Get information of device, built-in properties of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"device/#usage","title":"Usage","text":""},{"location":"device/#os","title":"OS","text":"<ul> <li>Platform      <pre><code>scene.sys.game.device.os.android      // Is running on android?\nscene.sys.game.device.os.chromeOS     // Is running on chromeOS?\nscene.sys.game.device.os.cordova      // Is the game running under Apache Cordova?\nscene.sys.game.device.os.crosswalk    // Is the game running under the Intel Crosswalk XDK?\nscene.sys.game.device.os.desktop      // Is running on a desktop?\nscene.sys.game.device.os.ejecta       // Is the game running under Ejecta?\nscene.sys.game.device.os.electron     // Is the game running under GitHub Electron?\nscene.sys.game.device.os.iOS          // Is running on iOS?\nscene.sys.game.device.os.iPad         // Is running on iPad?\nscene.sys.game.device.os.iPhone       // Is running on iPhone?\nscene.sys.game.device.os.kindle       // Is running on an Amazon Kindle?\nscene.sys.game.device.os.linux        // Is running on linux?\nscene.sys.game.device.os.macOS        // Is running on macOS?\nscene.sys.game.device.os.node         // Is the game running under Node.js?\nscene.sys.game.device.os.nodeWebkit   // Is the game running under Node-/Webkit?\nscene.sys.game.device.os.webApp       // Set to true if running as a WebApp, i.e. within a WebView\nscene.sys.game.device.os.windows      // Is running on windows?\nscene.sys.game.device.os.windowsPhone // Is running on a Windows Phone?\n</code></pre></li> <li>Major version number of ios     <pre><code>var version = scene.sys.game.device.os.iOSVersion;\n</code></pre></li> <li>Pixel-ratio of the host device     <pre><code>var pixelRatio = scene.sys.game.device.os.pixelRatio;\n</code></pre></li> </ul>"},{"location":"device/#browser","title":"Browser","text":"<ul> <li>Platform     <pre><code>scene.sys.game.device.browser.chrome       // Is running in Chrome?\nscene.sys.game.device.browser.edge         // Is running in Microsoft Edge browser?\nscene.sys.game.device.browser.firefox      // Is running in Firefox?\nscene.sys.game.device.browser.ie           // Is running in Internet Explorer 11 or less (not Edge)?\nscene.sys.game.device.browser.mobileSafari // Is running in Mobile Safari?\nscene.sys.game.device.browser.opera        // Is running in Opera?\nscene.sys.game.device.browser.safari       // Is running in Safari?\nscene.sys.game.device.browser.silk         // Is running in the Silk browser (as used on the Amazon Kindle)?\nscene.sys.game.device.browser.trident       // Is running a Trident version of Internet Explorer (IE11+)?\n</code></pre></li> <li>Version     <pre><code>var version = scene.sys.game.device.browser.chromeVersion;\nvar version = scene.sys.game.device.browser.firefoxVersion;\nvar version = scene.sys.game.device.browser.ieVersion;\nvar version = scene.sys.game.device.browser.safariVersion;\nvar version = scene.sys.game.device.browser.tridentVersion;\n</code></pre></li> </ul>"},{"location":"device/#audio","title":"Audio","text":"<pre><code>var flac = scene.sys.game.device.audio.flac;\nvar aac = scene.sys.game.device.audio.aac;\nvar dolby = scene.sys.game.device.audio.dolby;\nvar m4a = scene.sys.game.device.audio.m4a;\nvar mp3 = scene.sys.game.device.audio.mp3;\nvar ogg = scene.sys.game.device.audio.ogg;\nvar opus = scene.sys.game.device.audio.opus;\nvar wav = scene.sys.game.device.audio.wav;\nvar webm = scene.sys.game.device.audio.webm;\nvar webAudio = scene.sys.game.device.audio.webAudio;\nvar audioData = scene.sys.game.device.audio.audioData;\n</code></pre>"},{"location":"device/#video","title":"Video","text":"<pre><code>var h264Video = scene.sys.game.device.video.h264;  // Can this device play h264 mp4 video files?\nvar hlsVideo = scene.sys.game.device.video.hls;    // Can this device play hls video files?\nvar mp4Video = scene.sys.game.device.video.mp4;    // Can this device play h264 mp4 video files?\nvar m4vVideo = scene.sys.game.device.video.m4v;    // Can this device play m4v (typically mp4) video files?\nvar oggVideo = scene.sys.game.device.video.ogg;    // Can this device play ogg video files?\nvar vp9Video = scene.sys.game.device.video.vp9;    // Can this device play vp9 video files?\nvar webmVideo = scene.sys.game.device.video.webm;  // Can this device play webm video files?\n</code></pre>"},{"location":"dialog-quest/","title":"Dialog-quest","text":""},{"location":"dialog-quest/#introduction","title":"Introduction","text":"<p>Flow control of question manager with a dialog.</p> <ul> <li>Author: Rex</li> <li>Template</li> </ul>"},{"location":"dialog-quest/#live-demos","title":"Live demos","text":"<ul> <li>Branch</li> <li>Shuffle</li> </ul>"},{"location":"dialog-quest/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dialog-quest/#install-plugin","title":"Install plugin","text":""},{"location":"dialog-quest/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');    scene.load.script('rexdialogquest', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdialogquest.min.js');\n</code></pre></li> <li>Add dialog and quest object     <pre><code>var dialog = scene.rexUI.add.dialog(config); var quest = new rexdialogquest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nimport DialogQuest from 'phaser3-rex-plugins/templates/dialog-quest/DialogQuest.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog and quest object     <pre><code>var dialog = scene.rexUI.add.dialog(config); var quest = new DialogQuest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Dialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\nimport DialogQuest from 'phaser3-rex-plugins/templates/dialog-quest/DialogQuest.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new Dialog(scene, config);\nscene.add.existing(dialog);\nvar quest = new DialogQuest({\ndialog: dialog,\n// ...\n});\n</code></pre></li> </ul>"},{"location":"dialog-quest/#create-dialog-quest-object","title":"Create dialog-quest object","text":"<pre><code>var quest = new DialogQuest({\ndialog: dialog,\n\nquestions: undefined,\n// format: undefined,\n// delimiter: ',',\n// types: {\n//     question: 'q',\n//     option: '',\n// },\n// convert: true,\n\nquest: true,\n// quest: {\n//     shuffleQuestions: false,\n//     shuffleOptions: false,\n// }\n});\n</code></pre> <ul> <li><code>dialog</code> : A dialog game object.<ul> <li>UI plugin does not included in this template, install it before creating a dialog game object.</li> <li>Reuse/update dialog game object for each question.</li> <li>The number of choice buttons should be equal or larger than the maximun number of options. </li> </ul> </li> <li>Other parameters : See quest</li> </ul>"},{"location":"dialog-quest/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nStart[\"quest.start()\"] --&gt; EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)&lt;br&gt;----&lt;br&gt;Update each choice button via question.option[i]\"]\n\nEventUpdateChoice --&gt; EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)&lt;br&gt;----&lt;br&gt;Update dialog, action button via question\"]\n\nEventUpdateDialog --&gt; EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)&lt;br&gt;----&lt;br&gt;Click any choice button\"]\n\nEventClickChoice --&gt; EventClickAction[\"quest.emit('click-action', action, dialog, quest)&lt;br&gt;----&lt;br&gt;Click any action button\"]\n\nEventClickAction --&gt; IsLast{\"quest.isLast()\"}\nEventClickChoice --&gt; IsLast\n\nIsLast --&gt; |No| Next[\"quest.next()\"]\nIsLast --&gt; |Yes| Complete(\"Complete\")\n\nNext --&gt; EventUpdateChoice</code></pre>"},{"location":"dialog-quest/#events","title":"Events","text":"<ul> <li>Update dialog events<ul> <li>Update each choice button via question.option[i]     <pre><code>quest.on('update-choice', function(choice, option, quest){\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Choice button game object.<ul> <li>Unused choice button game object will be hideen.</li> </ul> </li> <li><code>option</code> : Option object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> <li>Update dialog, action buttos via question     <pre><code>quest.on('update-dialog', function(dialog, question, quest){\n}, scope);\n</code></pre><ul> <li><code>dialog</code> : Dialog game object.<ul> <li>Call <code>dialog.layout()</code> if needs.</li> </ul> </li> <li><code>question</code> : Question object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> </ul> </li> <li>Button clicking events<ul> <li>Click choice button     <pre><code>quest.on('click-choice', function(choice, dialog, quest) {\n\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Clicked choice button game object.</li> <li><code>dialog</code> : Dialog game object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> <li>Click choice button     <pre><code>quest.on('click-action', function(action, dialog, quest) {\n\n}, scope);\n</code></pre><ul> <li><code>choice</code> : Clicked action button game object.</li> <li><code>dialog</code> : Dialog game object.</li> <li><code>quest</code> : Quest object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"dialog-quest/#quest-methods","title":"Quest methods","text":"<ul> <li>Start quest     <pre><code>quest.start();\n</code></pre></li> <li>Next quest     <pre><code>quest.next();\n</code></pre>     or     <pre><code>quest.next(key);\n</code></pre></li> <li>Is last question     <pre><code>var isLast = quest.isLast();\n</code></pre></li> </ul>"},{"location":"dialog-quest/#private-data-methods","title":"Private data methods","text":"<ul> <li>Get data     <pre><code>var value = quest.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = quest.getData();\n</code></pre></li> <li>Set value     <pre><code>quest.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>quest.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>quest.mulData(key, mul, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>quest.clearData();\n</code></pre></li> </ul>"},{"location":"distance/","title":"Distance","text":""},{"location":"distance/#introduction","title":"Introduction","text":"<p>Get distance, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"distance/#usage","title":"Usage","text":""},{"location":"distance/#distance","title":"Distance","text":"<ul> <li>Get distance between 2 points     <pre><code>var d = Phaser.Math.Distance.Between(x1, y1, x2, y2);\n</code></pre>     or     <pre><code>var d = Phaser.Math.Distance.BetweenPoints(a, b); // a, b: {x, y}\n</code></pre></li> <li>Get squared distance     <pre><code>var d = Phaser.Math.Distance.BetweenPointsSquared(a, b); // a, b: {x, y}\n</code></pre></li> <li>Get Chebyshev distance (the maximum of the horizontal and vertical distances)     <pre><code>var d = Phaser.Math.Distance.Chebyshev(x1, y1, x2, y2);\n</code></pre></li> <li>Get snake distance(i.e. rectilinear distance, Manhattan distance, the sum of the horizontal and vertical distance)     <pre><code>var d = Phaser.Math.Distance.Snake(x1, y1, x2, y2);\n</code></pre></li> <li>Get power distance (the sum of the horizontal power distance and vertical power distance)     <pre><code>var d = Phaser.Math.Distance.Power(x1, y1, x2, y2);\n</code></pre></li> </ul>"},{"location":"distance/#speed","title":"Speed","text":"<ul> <li>Get speed     <pre><code>var d = Phaser.Math.GetSpeed(distance, time);\n</code></pre><ul> <li>distance : The distance to travel in pixels.</li> <li>time : The time, in ms, to cover the distance in.</li> </ul> </li> </ul>"},{"location":"domelement/","title":"DOM element","text":""},{"location":"domelement/#introduction","title":"Introduction","text":"<p>Carry DOM element, built-in game object of phaser.</p> <p>Limitations</p> <p>Dom elements appear above or below your game canvas. You cannot blend them into the display list, meaning you cannot have a DOM Element, then a Sprite, then another DOM Element behind it.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"domelement/#usage","title":"Usage","text":""},{"location":"domelement/#configuration","title":"Configuration","text":"<ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> <pre><code>var config = {\n// ...\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"domelement/#add-dom-element-object","title":"Add DOM element object","text":""},{"location":"domelement/#add-html-string","title":"Add html string","text":"<ol> <li>Load html string in preload stage     <pre><code>scene.load.html(key, url);\n</code></pre>     Reference: load html</li> <li>Add DOM element object with html string from cache     <pre><code>var domElement = scene.add.dom(x, y).createFromCache(key);  // elementType = 'div'\n// var domElement = scene.add.dom(x, y).createFromCache(key, elementType);\n</code></pre><ul> <li>Add DOM element object with html string     <pre><code>var domElement = scene.add.dom(x, y).createFromHTML(htmlString);  // elementType = 'div'\n// var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType);\n</code></pre><ul> <li>`elementType : The tag name of the element into which all of the html will be inserted. Defaults to a plain div tag.</li> </ul> </li> </ul> </li> </ol>"},{"location":"domelement/#create-element","title":"Create element","text":"<pre><code>scene.add.dom(x, y).createElement(tagName);\n// scene.add.dom(x, y).createElement(tagName, style, innerText);\n</code></pre> <ul> <li><code>tagName</code> : A string that specifies the type of element to be created. For example, <code>'div'</code></li> <li><code>style</code> : Either a DOMString that holds the CSS styles to be applied to the created element, or an object the styles will be readyfrom. Optional.</li> <li><code>innerText</code> : A DOMString that holds the text that will be set as the innerText of the created element. Optional.</li> </ul>"},{"location":"domelement/#add-existing-dom","title":"Add existing DOM","text":"<ol> <li>Create DOM element     <pre><code>var el = document.createElement('div');\n// el.style = '...';\n// el.innerText = '...';\n</code></pre></li> <li>Add to scene    <pre><code>var domElement = scene.add.dom(x, y, el);\n// var domElement = scene.add.dom(x, y, el, style, innerText);\n</code></pre></li> </ol>"},{"location":"domelement/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDOMElement extends Phaser.GameObjects.DOMElement {\nconstructor(scene, x, y, element, style, innerText) {\nsuper(scene, x, y, element, style, innerText);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var domElement = new MyDOMElement(scene, x, y, element);\n</code></pre></li> </ul>"},{"location":"domelement/#event-of-dom-element","title":"Event of DOM element","text":"<ul> <li>Add listener     <pre><code>domElement.addListener(eventName);\n</code></pre><ul> <li><code>eventName</code> : Event name<ul> <li>Single string. ex. <code>'click'</code></li> <li>Event name joined with <code>' '</code></li> </ul> </li> </ul> </li> <li>Add event handler     <pre><code>var callback = function(event) {\n// event.target.name\n};\ndomElement.on(eventName, callback, scope);\n// domElement.once(eventName, callback, scope);\n</code></pre>     Reference: event emitter</li> <li>Remove listener     <pre><code>domElement.removeListener(eventName);\n</code></pre><ul> <li><code>eventName</code> : Event name<ul> <li>Single string. ex. <code>'click'</code></li> <li>Event name joined with <code>' '</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"domelement/#get-child","title":"Get child","text":"<ul> <li>Get child by name     <pre><code>var child = domElement.getChildByName(name)\n</code></pre></li> <li>Get child by id     <pre><code>var child = domElement.getChildByID(id)\n</code></pre></li> <li>Get child by property     <pre><code>var child = domElement.getChildByProperty(property, value)\n</code></pre></li> </ul>"},{"location":"domelement/#set-inner-html-string","title":"Set inner html string","text":"<pre><code>scene.setHTML(html);\n</code></pre> <p>or</p> <pre><code>scene.setText(html);\n</code></pre>"},{"location":"domelement/#dom-element","title":"DOM Element","text":"<p>Each DOM element object has 1 DOM element.</p> <ul> <li>Set    <pre><code>domElement.setElement(el);\n// domElement.setElement(el, style, innerText);\n</code></pre></li> <li>Get    <pre><code>var el = domElement.node;\n</code></pre></li> </ul>"},{"location":"domelement/#depth","title":"Depth","text":"<pre><code>domElement.setDepth(value);\n</code></pre>"},{"location":"domelement/#set-size","title":"Set size","text":"<pre><code>var style = domElement.node.style;\nstyle.width = width + 'px';\nstyle.height = height + 'px';\ndomElement.updateSize();\n</code></pre>"},{"location":"domelement/#skew","title":"Skew","text":"<pre><code>domElement.setSkew(x, y);\n</code></pre> <p>or</p> <pre><code>domElement.skewX = x;\ndomElement.skewY = y;\n</code></pre>"},{"location":"domelement/#rotate-3d","title":"Rotate 3d","text":"<p>The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.</p> <pre><code>domElement.rotate3d.set(x, y, z, a);\n</code></pre> <p>or</p> <pre><code>domElement.rotate3d.x = x;\ndomElement.rotate3d.y = y;\ndomElement.rotate3d.z = z;\ndomElement.rotate3d.w = a;\n</code></pre> <p>Reference</p>"},{"location":"domelement/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<ol> <li>DOM game object always put above game canvas, i.e. DOM game object will render above any other kind of game object.</li> <li>DOM game object will receive touch event even if it is not the first touched game object.</li> <li>P3's <code>'pointerdown'</code>, <code>'pointerup'</code> events will be fired above/under DOM game object.</li> <li>P3's <code>'pointermove'</code> event won't be fired above/under DOM game object, except <ul> <li>Setting DOM game object to be invisilbe.</li> <li>Assign input.mouse.target parameter of game config.</li> </ul> </li> </ol>"},{"location":"domelement/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"drag/","title":"Drag","text":""},{"location":"drag/#introduction","title":"Introduction","text":"<p>Drag game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"drag/#live-demos","title":"Live demos","text":"<ul> <li>Try dragging</li> </ul>"},{"location":"drag/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"drag/#install-plugin","title":"Install plugin","text":""},{"location":"drag/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdragplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragplugin.min.js', true);\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = scene.plugins.get('rexdragplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragPlugin from 'phaser3-rex-plugins/plugins/drag-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDrag',\nplugin: DragPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = scene.plugins.get('rexDrag').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Drag from 'phaser3-rex-plugins/plugins/drag.js';\n</code></pre></li> <li>Add drag behavior     <pre><code>var drag = new Drag(gameObject, config);\n</code></pre></li> </ul>"},{"location":"drag/#create-instance","title":"Create instance","text":"<pre><code>var drag = scene.plugins.get('rexDrag').add(gameObject, {\n// enable: true,\n// axis: 0,      //0|'both'|'h&amp;v'|1|'horizontal'|'h'|2|'vertical'|'v'\n// rotation: Phaser.Math.DegToRad(45)  // axis rotation in rad\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>axis</code> :<ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> <li><code>rotation</code> : Axis rotation in rad, available in horizontal or vertical axis mode.</li> </ul>"},{"location":"drag/#events","title":"Events","text":"<p>Built-in dragging events</p> <pre><code>gameObject.on('dragstart', function(pointer, dragX, dragY){ /*...*/ });\ngameObject.on('drag', function(pointer, dragX, dragY){ /*...*/ });\ngameObject.on('dragend', function(pointer, dragX, dragY, dropped){ /*...*/ });\n</code></pre>"},{"location":"drag/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = drag.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>drag.setEnable(enable);  // enable: true, or false\n// drag.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>drag.toggleEnable();\n</code></pre></li> </ul>"},{"location":"drag/#get-dragging-state","title":"Get dragging state","text":"<pre><code>var isDragging = drag.isDragging;\n</code></pre>"},{"location":"drag/#set-rotation-of-axis","title":"Set rotation of axis","text":"<pre><code>drag.setAxisRotation(rad);\n// drag.axisRotation = rad;\n</code></pre>"},{"location":"drag/#set-axis-mode","title":"Set axis mode","text":"<pre><code>drag.setAxisMode(axis);\n</code></pre> <ul> <li><code>axis</code> : <ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"drag/#try-drag","title":"Try drag","text":"<p>Game object will be dragged if there is any point above it.</p> <pre><code>drag.drag();\n</code></pre>"},{"location":"drag/#drop","title":"Drop","text":"<p>Game object will be dropped(dragend) manually.</p> <pre><code>drag.dragend();\n</code></pre>"},{"location":"dragrotate/","title":"Drag rotate","text":""},{"location":"dragrotate/#introduction","title":"Introduction","text":"<p>Get dragging angle around a specific point.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"dragrotate/#live-demos","title":"Live demos","text":"<ul> <li>Spin-button</li> </ul>"},{"location":"dragrotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dragrotate/#install-plugin","title":"Install plugin","text":""},{"location":"dragrotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdragrotateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragrotateplugin.min.js', true);\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = scene.plugins.get('rexdragrotateplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragRotatePlugin from 'phaser3-rex-plugins/plugins/dragrotate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDragRotate',\nplugin: DragRotatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = scene.plugins.get('rexDragRotate').add(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DragRotate from 'phaser3-rex-plugins/plugins/dragrotate.js';\n</code></pre></li> <li>Add drag-rotate input     <pre><code>var dragRotate = new DragRotate(scene, config);\n</code></pre></li> </ul>"},{"location":"dragrotate/#create-instance","title":"Create instance","text":"<pre><code>var dragRotate = scene.plugins.get('rexDragRotate').add(scene, {\nx: 0,\ny: 0,\nmaxRadius: 100\nminRadius: 0,\n// enable: true,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Orgin point, in world position.</li> <li><code>maxRadius</code>, <code>minRadius</code> : Dragging is valid when distance between touch pointer and origin position is larger then <code>minRadius</code> and less then <code>maxRadius</code>.</li> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> </ul>"},{"location":"dragrotate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = dragRotate.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>dragRotate.setEnable(enable);  // enable: true, or false\n// dragRotate.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>dragRotate.toggleEnable();\n</code></pre></li> </ul>"},{"location":"dragrotate/#origin-point","title":"Origin point","text":"<ul> <li>Get     <pre><code>var x = dragRotate.x;\nvar y = dragRotate.y;\n</code></pre></li> <li>Set     <pre><code>dragRotate.setOrigin(x, y);\n</code></pre>     or     <pre><code>dragRotate.setOrigin(pointer); // pointer: {x, y}\n</code></pre></li> </ul> <p>Note</p> <p>Parameter <code>(x,y)</code> is world position, not camera position.</p>"},{"location":"dragrotate/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var maxRadius = dragRotate.maxRadius;\nvar minRadius = dragRotate.minRadius;\n</code></pre></li> <li>Set     <pre><code>dragRotate.setRadius(maxRadius, minRadius);\n</code></pre></li> </ul>"},{"location":"dragrotate/#get-dragging-state","title":"Get dragging state","text":"<pre><code>var state = dragRotate.state;\n</code></pre> <ul> <li><code>0</code> : No touch pointer</li> <li><code>1</code> : Catch touch pointer<ul> <li>Fire <code>'dragstart'</code> event when catching touch pointers.</li> <li>Fire <code>'drag'</code> event when any catched touch pointer moved.</li> <li>Fire <code>'dragend'</code> event when releasing catched touch pointer.</li> </ul> </li> </ul>"},{"location":"dragrotate/#is-drag","title":"Is drag","text":"<pre><code>var isDrag = dragRotate.isDrag;\n</code></pre> <p>Return <code>true</code> if <code>(dragRotate.state === 1)</code> and catched touch pointer just moved.</p>"},{"location":"dragrotate/#drag-cancel","title":"Drag cancel","text":"<pre><code>dragRotate.dragCancel();\n</code></pre>"},{"location":"dragrotate/#events","title":"Events","text":""},{"location":"dragrotate/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging     <pre><code>dragRotate.on('drag', function(dragRotate) {\n// gameObject.rotation += dragRotate.deltaRotation;\n}, scope);\n</code></pre><ul> <li><code>dragRotate.deltaRotation</code> : Dragging angle around origin position, in radians.<ul> <li>Add to <code>gameObject.rotation</code> to spin target game object.     <pre><code>gameObject.rotation += dragRotate.deltaRotation;\n</code></pre></li> </ul> </li> <li><code>dragRotate.deltaAngle</code> : Dragging angle around origin position, in degrees.<ul> <li>Add to <code>gameObject.angle</code> to spin target game object.     <pre><code>gameObject.angle += dragRotate.deltAangle;\n</code></pre></li> </ul> </li> <li><code>dragRotate.cw</code> : Return <code>true</code> if dragging is dragrotate-wise.</li> <li><code>dragRotate.ccw</code> : Return <code>true</code> if dragging is counter-dragrotate-wise.</li> </ul> </li> </ul>"},{"location":"dragrotate/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag touch pointer start, fired when catching touch pointer.     <pre><code>dragRotate.on('dragstart', function(dragRotate) {\n\n}, scope);\n</code></pre></li> <li>On drag touch pointer end, fired when releasing the catched touch pointer.     <pre><code>dragRotate.on('dragend', function(dragRotate) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"dragrotate/#catched-touch-pointer","title":"Catched touch pointer","text":"<ul> <li>Pointer, available when state is <code>1</code> <pre><code>var pointer = dragRotate.pointer;\n</code></pre><ul> <li>World position of pointer     <pre><code>var x = pointer.worldX;\nvar y = pointer.worldY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"dropdown/","title":"Drop down","text":""},{"location":"dropdown/#introduction","title":"Introduction","text":"<p>Drop down game object below another target game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"dropdown/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down</li> </ul>"},{"location":"dropdown/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dropdown/#install-plugin","title":"Install plugin","text":""},{"location":"dropdown/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdropdownplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdropdownplugin.min.js', true);\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = scene.plugins.get('rexdropdownplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = scene.plugins.get('rexDropDown').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DropDownBehavoir from 'phaser3-rex-plugins/plugins/dropdown.js';\n</code></pre></li> <li>Add drop-down behavior     <pre><code>var dropDown = new DropDownBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"dropdown/#create-instance","title":"Create instance","text":"<pre><code>var dropDown = scene.plugins.get('rexDropDown').add(gameObject, {        // expandDirection: 0,\n// alignTargetX: \n// alignTargetY: \n// alignOffsetX: \n// alignOffsetY: \n// bounds:\n\n// When to close dropdown dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n\n// duration: {\n//     in: 200,\n//     out: 200\n// }\n\n// transitIn: undefined,\n// transitOut: undefined,\n\n// destroy: true\n});\n</code></pre> <ul> <li><code>expandDirection</code> : Expand direction<ul> <li><code>0</code>, <code>'down'</code> : Expand game object down. i.e. game object will put below target game object. Defatut behavior.</li> <li><code>1</code>, <code>'up'</code> : Expand game object up. i.e. game object will put above target game object.</li> </ul> </li> <li><code>alignTargetX</code> : Align left side game object to left side of target game object</li> <li><code>alignTargetY</code> : Required parameter<ul> <li>Align top side game object to bottom side of target game object, if <code>expandDirection</code> is <code>0</code>(<code>'down'</code>).</li> <li>Align bottom side game object to top side of target game object, if <code>expandDirection</code> is <code>1</code>(<code>'up'</code>).</li> </ul> </li> <li><code>alignOffsetX</code>, <code>alignOffsetY</code> : Extra position offset. Default value ares <code>0</code>, <code>0</code>.</li> <li><code>bounds</code> : Put game object below target game object if bottom of game object is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>touchOutsideClose</code> : Set to <code>true</code> to close dropdown dialog when clicking out side of gameObject. <ul> <li>Default value is <code>false</code>.  Will be set to <code>false</code> if <code>anyTouchClose</code> is set to <code>true</code>.</li> </ul> </li> <li><code>anyTouchClose</code> : Set to <code>true</code> to close dropdown dialog when any clicking. <ul> <li>Default value is <code>false</code>.</li> </ul> </li> <li><code>duration</code> : Duration of transition-in, hold, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.</li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog).<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Tween behavior of opening dialog. Default behavior is scale up the height of game object.       <ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog. Default behavior is scale down the height of game <ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>destroy</code><ul> <li><code>true</code> : Destroy dialog when closing completed. Default behavior.</li> <li><code>fasle</code> : Don't destroy dialog.</li> </ul> </li> </ul>"},{"location":"dropdown/#close","title":"Close","text":"<pre><code>dropDown.requestClose();\n// dropDown.requestClose();\n</code></pre>"},{"location":"dropdown/#events","title":"Events","text":"<ul> <li>On opened dialog     <pre><code>dropDown.on('open', function(gameObject, dropdown) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>dropDown.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"dynamic-texture/","title":"Dynamic texture","text":""},{"location":"dynamic-texture/#introduction","title":"Introduction","text":"<p>Canvas Dynamic Texture stored in texture cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"dynamic-texture/#usage","title":"Usage","text":""},{"location":"dynamic-texture/#create-dynamic-texture","title":"Create dynamic texture","text":"<pre><code>var texture = scene.textures.addDynamicTexture(key, width, height);\n</code></pre> <p>Disable <code>texture.isSpriteTexture</code> if this texture is not a base texture for Sprite Game Objects.</p> <pre><code>texture.setIsSpriteTexture(false);\n// texture.isSpriteTexture = false;\n</code></pre>"},{"location":"dynamic-texture/#set-size","title":"Set size","text":"<pre><code>texture.setSize(width, height);\n</code></pre>"},{"location":"dynamic-texture/#fill-color","title":"Fill color","text":"<pre><code>texture.fill(rgb);\n// texture.fill(rgb, alpha, x, y, width, height);\n</code></pre> <ul> <li><code>rgb</code> : The number color to fill this Dynamic Texture with.</li> <li><code>alpha</code> : The alpha value used by the fill. Default value is <code>1</code>.</li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : The area of the fill rectangle. Default behavior is filling whole size.</li> </ul>"},{"location":"dynamic-texture/#clear","title":"Clear","text":"<pre><code>texture.clear();\n</code></pre> <pre><code>texture.clear(x, y, width, height);\n</code></pre>"},{"location":"dynamic-texture/#draw-game-object","title":"Draw game object","text":"<pre><code>texture.draw(entries);\n// texture.draw(entries,x, y);\n// texture.draw(entries, x, y, alpha, tint);\n</code></pre> <ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The x/y position to draw the Frame at, or the offset applied to the object.<ul> <li>If the object is a Group, Container or Display List, the coordinates are added to the positions of the children.</li> <li>For all other types of object, the coordinates are exact.</li> </ul> </li> <li><code>alpha</code>, <code>tint</code> : Only used by Texture Frames.<ul> <li>Game Objects use their own alpha and tint values when being drawn.</li> </ul> </li> </ul>"},{"location":"dynamic-texture/#erase-game-object","title":"Erase game object","text":"<pre><code>texture.erase(entries);\n// texture.erase(entries, x, y);\n</code></pre> <ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The x/y position to draw the Frame at, or the offset applied to the object.<ul> <li>If the object is a Group, Container or Display List, the coordinates are added to the positions of the children.</li> <li>For all other types of object, the coordinates are exact.</li> </ul> </li> </ul>"},{"location":"dynamic-texture/#draw-frame","title":"Draw frame","text":"<pre><code>texture.drawFrame(key, frame, x, y);\n// texture.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Top-left position</li> </ul> <p>or</p> <pre><code>texture.stamp(key, frame, x, y, {\nalpha: 1,\ntint: 0xffffff,\nangle: 0,\nrotation: 0,\nscale: 1,\nscaleX: 1,\nscaleY: 1,\noriginX: 0.5,\noriginY: 0.5,\nblendMode: 0,\nerase: false,\nskipBatch: false\n})\n</code></pre>"},{"location":"dynamic-texture/#draw-repeat-frames","title":"Draw repeat frames","text":"<ul> <li>Repeat frames full of size     <pre><code>texture.repeat(key, frame);\n</code></pre></li> <li>Repeat in an area     <pre><code>texture.repeat(key, frame, x, y, width, height);\n// texture.repeat(key, frame, x, y, width, height, alpha, tint, skipBatch);\n</code></pre></li> </ul>"},{"location":"dynamic-texture/#draw-frame_1","title":"Draw frame","text":"<pre><code>texture.add(name, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>name</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code> : The x coordinate of the top-left of this Frame.</li> <li><code>y</code> : The y coordinate of the top-left of this Frame.</li> <li><code>width</code> : The width of this Frame.</li> <li><code>height</code> : The height of this Frame.</li> </ul>"},{"location":"dynamic-texture/#batch-draw","title":"Batch draw","text":"<ol> <li>Begin     <pre><code>texture.beginDraw();\n</code></pre></li> <li>Draw<ul> <li>Draw game object     <pre><code>texture.batchDraw(entries, x, y, alpha, tint);\n</code></pre><ul> <li><code>entries</code> : <ul> <li>Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.</li> <li>Tilemap Layers.</li> <li>A Group. The contents of which will be iterated and drawn in turn.</li> <li>A Container. The contents of which will be iterated fully, and drawn in turn.</li> <li>A Scene Display List. Pass in <code>Scene.children</code> to draw the whole list.</li> <li>Another Dynamic Texture, or a Render Texture.</li> <li>A Texture Frame instance.</li> <li>A string. This is used to look-up the texture from the Texture Manager.</li> </ul> </li> </ul> </li> <li>Draw frame     <pre><code>texture.batchDrawFrame(key, frame, x, y, alpha, tint);\n</code></pre></li> <li>Draw image     <pre><code>texture.stamp(key, frame, x, y, {\n// ...\nskipBatch: true\n})\n</code></pre></li> <li>Draw repeat images     <pre><code>texture.repeat(key, frame, x, y, width, height, alpha, tint, true);\n</code></pre></li> </ul> </li> <li>End     <pre><code>texture.endDraw();\n</code></pre></li> </ol>"},{"location":"dynamic-texture/#snapshot","title":"Snapshot","text":""},{"location":"dynamic-texture/#snapshot-area","title":"Snapshot area","text":"<pre><code>texture.snapshot(callback);\n// texture.snapshot(callback, type, encoderOptions);\n</code></pre> <p>or</p> <pre><code>texture.snapshotArea(x, y, width, height, callback, type, encoderOptions);\n</code></pre> <ul> <li><code>callback</code> : The Function to invoke after the snapshot image is created.     <pre><code>function(imageElement) {\n}\n</code></pre><ul> <li><code>imageElement</code> : HTMLImageElement.</li> </ul> </li> <li><code>type</code> : The format of the image to create, usually <code>'image/png'</code> or <code>'image/jpeg'</code>. Default value is <code>'image/png'</code>.</li> <li><code>encoderOptions</code> : The image quality, between <code>0</code> and <code>1</code>. Used for image formats with lossy compression, such as <code>'image/jpeg'</code>. Default value is <code>0.92</code>.</li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : Snapshot area.</li> </ul>"},{"location":"dynamic-texture/#get-color-of-a-pixel","title":"Get color of a pixel","text":"<pre><code>texture.snapshotPixel(x, y, callback);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The x/y coordinate of the pixel to get.</li> <li><code>callback</code> : The Function to invoke after the snapshot image is created.     <pre><code>function(color) {        }\n</code></pre><ul> <li><code>color</code> : Color object.</li> </ul> </li> </ul>"},{"location":"dynamicbitmaptext/","title":"Dynamic bitmap text","text":""},{"location":"dynamicbitmaptext/#introduction","title":"Introduction","text":"<p>Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"dynamicbitmaptext/#usage","title":"Usage","text":""},{"location":"dynamicbitmaptext/#load-bitmap-font","title":"Load bitmap font","text":"<p>Reference: load bitmap font</p>"},{"location":"dynamicbitmaptext/#add-bitmap-text-object","title":"Add bitmap text object","text":"<pre><code>var txt = scene.add.dynamicBitmapText(x, y, key, text);\n// var txt = scene.add.dynamicBitmapText(x, y, key, text, size, align);\n</code></pre> <ul> <li><code>size</code> : The size of the font</li> <li><code>align</code> : The alignment of the text in a multi-line BitmapText object.<ul> <li><code>0</code> : Left aligned (default)</li> <li><code>1</code> : Middle aligned</li> <li><code>2</code> : Right aligned</li> </ul> </li> </ul> <p>Add text from JSON</p> <pre><code>var txt = scene.make.dynamicBitmapText({\nx: 0,\ny: 0,\ntext: 'Text\\nGame Object\\nCreated from config',\nfont: '',\nsize: false,\nalign: 0,\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"dynamicbitmaptext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.DynamicBitmapText {\nconstructor(scene, x, y, key, text, size, align) {\nsuper(scene, x, y, key, text, size, align);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, key, text);\n</code></pre></li> </ul>"},{"location":"dynamicbitmaptext/#set-callback","title":"Set callback","text":"<pre><code>var callback = function(data) {\n// input\n// data.index, data.charCode\n// data.x, data.y, data.scale, data.rotation\n// data.data\n// data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight    \n\n// modify input `data` then return it\n// ...\n// offset: data.y += 2\n// set tint: data.color = tint\nreturn data;\n}\ntxt.setDisplayCallback(callback);\n</code></pre>"},{"location":"dynamicbitmaptext/#set-text","title":"Set text","text":"<pre><code>txt.setText('...');\n</code></pre> <p>or</p> <pre><code>txt.text = '...';\n</code></pre>"},{"location":"dynamicbitmaptext/#crop","title":"Crop","text":"<ul> <li>Set size     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.cropWidth = width;\ntxt.cropHeight = height;\n</code></pre></li> <li>Set offset     <pre><code>txt.setScrollX(scrollX);\ntxt.setScrollY(scrollY);\n</code></pre>     or     <pre><code>this.scrollX = scrollX;\nthis.scrollY = scrollY;\n</code></pre></li> </ul>"},{"location":"dynamicbitmaptext/#other-properties","title":"Other properties","text":"<p>See  bitmap text, game object</p>"},{"location":"dynamicbitmaptext/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"dynamicbitmaptext/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"dynamictext/","title":"Dynamic text","text":""},{"location":"dynamictext/#introduction","title":"Introduction","text":"<p>Control position, angle of each character drawn on a canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"dynamictext/#live-demos","title":"Live demos","text":"<ul> <li>Page typing</li> <li>Align, rotation, drawBelowCallback</li> <li>Vertical wrap</li> <li>Character's world position</li> <li>Child input event</li> </ul>"},{"location":"dynamictext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"dynamictext/#install-plugin","title":"Install plugin","text":""},{"location":"dynamictext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdynamictextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdynamictextplugin.min.js', true);\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DynamicTextPlugin from 'phaser3-rex-plugins/plugins/dynamictext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDynamicTextPlugin',\nplugin: DynamicTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import DynamicText from 'phaser3-rex-plugins/plugins/dynamictext.js';\n</code></pre></li> <li>Add dynamic-text object     <pre><code>var txt = new DynamicText(scene, x, y, width, height, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"dynamictext/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexDynamicText({\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\n\nchildrenInteractive: false,\n\ntext: '',\n\nwrap: undefined,\n\ntestString: '|M\u00c9qgy',\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this dynamic-text game object.</li> <li><code>width</code> : Fixed width.<ul> <li>A number : Width of this dynamic-text game object. <ul> <li>Wrap-width is <code>width - padding.left - padding.right</code>.</li> </ul> </li> <li><code>undefined</code> : Width of this dynamic-text game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>height</code> : Fixed height.<ul> <li>A number : Height of this dynamic-text game object. </li> <li><code>undefined</code> : Height of this dynamic-text game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>padding</code> : Padding of bounds.<ul> <li>A number </li> <li><code>padding.left</code>, <code>padding.right</code>, <code>padding.top</code>, <code>padding.bottom</code></li> </ul> </li> <li><code>background</code> : Properties of background round-rectangle.<ul> <li><code>background.color</code> : Fill color, number or string.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>background.color2</code> : Gradient fill color, number or string.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>background.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>background.stroke</code> : Stroke color, number or string.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>background.strokeThickness</code> : Line width of stroke.</li> <li><code>background.cornerRadius</code> : Corner-radius of round rectangle.</li> <li><code>background.cornerIteration</code> : Iteration of corner-radius.<ul> <li><code>null</code> : Draw corner-radius via arc directly.</li> <li>A number : Draw corner-radius via lines</li> </ul> </li> </ul> </li> <li><code>innerBounds</code> : Properties of inner-bounds.<ul> <li><code>innerBounds.color</code> : Fill color, number or string.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>innerBounds.color2</code> : Gradient fill color, number or string.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>innerBounds.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>innerBounds.stroke</code> : Stroke color, number or string.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>innerBounds.strokeThickness</code> : Line width of stroke.</li> </ul> </li> <li><code>style</code> : Initial text-style.<ul> <li><code>style.bold</code> : Bold</li> <li><code>style.italic</code> : Italic</li> <li><code>style.fontSize</code> : Font size, number or string.</li> <li><code>style.fontFamily</code> : Font family</li> <li><code>style.color</code> : Fill color, number or string.</li> <li><code>style.stroke</code> : Stroke color, number or string.</li> <li><code>style.strokeThickness</code> : Line width of stroke.</li> <li><code>style.shadowColor</code> : Shadow color, number or string.<ul> <li><code>null</code> : No shadow.</li> </ul> </li> <li><code>style.shadowOffsetX</code> : OffsetX of shadow.</li> <li><code>style.shadowOffsetY</code> : OffsetY of shadow.</li> <li><code>style.shadowBlur</code> : Blur of shadow.</li> <li><code>style.backgroundColor</code> : Background color of a character.</li> <li><code>style.backgroundHeight</code>, <code>style.backgroundBottomY</code> : Background position and height of a character.<ul> <li><code>undefined</code>, or <code>null</code> : Use height of character as background height. Default behavior.</li> </ul> </li> <li><code>style.offsetX</code> : OffsetX.</li> <li><code>style.offsetY</code> : OffsetY.</li> <li><code>style.align</code> : Override default line-alignment setting.<ul> <li><code>0</code>, <code>'left'</code>, <code>'top'</code> : Align remainder lines to left/top.</li> <li><code>1</code>, <code>'center'</code> : Align remainder lines to center.</li> <li><code>2</code>, <code>'right'</code>, <code>'bottom'</code> : Align remainder lines to right/bottom.</li> <li><code>undefined</code> : Use default line-alignment setting.</li> </ul> </li> </ul> </li> <li><code>childrenInteractive</code> :<ul> <li><code>true</code> : Fire input events (<code>'child.pointerdown'</code>, <code>'child.pointerup'</code>, <code>'child.pointerover'</code>, <code>'child.pointerout'</code>) of any child after <code>text.setInteractive()</code>.</li> <li><code>false</code> : Won't fire any input events of child. Default behavior.</li> </ul> </li> <li><code>text</code> : Content of text.</li> <li><code>wrap</code> : Default configuration Horizontal/Vertical wrapping.</li> <li><code>testString</code> : Test string to get text ascent and text height with default text style.</li> </ul> <p>or</p> <pre><code>var txt = scene.add.rexDynamicText(x, y, width, height, config);\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexDynamicText(x, y, config);\n</code></pre> <p>Add dynamictext from JSON</p> <pre><code>var txt = scene.make.rexDynamicText({\nx: 0,\ny: 0,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"dynamictext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDynamicText extends DynamicText {\nconstructor(scene, x, y, width, height, config)) {\nsuper(scene, x, y, width, height, config));\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyDynamicText(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"dynamictext/#clear-content","title":"Clear content","text":"<pre><code>txt.clearContent();\n</code></pre>"},{"location":"dynamictext/#text","title":"Text","text":""},{"location":"dynamictext/#append-text","title":"Append text","text":"<pre><code>txt.appendText(text);\n</code></pre> <p>or</p> <pre><code>txt.appendText(text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre> <p>To overwrite some properties of text-style.</p> <p>Each character will be placed at position (0,0), without rotation.  Uses word-wrap method to rearrange position of characters. </p>"},{"location":"dynamictext/#set-text","title":"Set text","text":"<pre><code>txt.setText(text);\n</code></pre> <p>or</p> <pre><code>txt.setText(text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre>"},{"location":"dynamictext/#insert-text","title":"Insert text","text":"<p><pre><code>txt.insertText(index, text);\n</code></pre> or</p> <pre><code>txt.insertText(index, text, {\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shadowColor: null,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// shadowBlur: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetY: 0,\n// offsetY: 0,\n// align: undefined\n}\n);\n</code></pre>"},{"location":"dynamictext/#remove-text","title":"Remove text","text":"<pre><code>txt.removeText(index);\n</code></pre>"},{"location":"dynamictext/#get-text","title":"Get text","text":"<ul> <li>Get active characters     <pre><code>var text = txt.text;\n</code></pre>     or     <pre><code>var text = txt.getText();\n</code></pre></li> <li>Get all characters     <pre><code>var text = txt.getText(false);\n</code></pre></li> </ul>"},{"location":"dynamictext/#image","title":"Image","text":""},{"location":"dynamictext/#append-image","title":"Append image","text":"<pre><code>txt.appendImage(key, frame, {\n// width\n// height\n// scaleX\n// scaleY\n})\n</code></pre> <ul> <li><code>width</code> : Scaled-width. Aspect-ratio will be keep if no <code>height</code>, or <code>scaleY</code> is set.</li> <li><code>height</code> : Scaled-height. Aspect-ratio will be keep if no <code>width</code>, or <code>scaleX</code> is set.</li> </ul>"},{"location":"dynamictext/#background","title":"Background","text":"<ul> <li>Fill style     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre></li> <li>Stroke style     <pre><code>txt.setBackgroundStroke(color, lineWidth);\n</code></pre></li> <li>Corner radius     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration)\n</code></pre></li> </ul>"},{"location":"dynamictext/#inner-bounds","title":"Inner bounds","text":"<ul> <li>Fill style     <pre><code>txt.setInnerBoundsColor(color);\n// txt.setInnerBoundsColor(color, color2, isHorizontalGradient);\n</code></pre></li> <li>Stroke style     <pre><code>txt.setInnerBoundsStroke(color, lineWidth);\n</code></pre></li> </ul>"},{"location":"dynamictext/#wrap","title":"Wrap","text":"<p>Control characters :</p> <ul> <li><code>'\\n'</code> : New line</li> <li><code>'\\f'</code> : Page break</li> </ul>"},{"location":"dynamictext/#horizontal-wrap","title":"Horizontal wrap","text":"<pre><code>var result = txt.runWordWrap({\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nascent: undefined,\nlineHeight: undefined,\nuseDefaultTextHeight: false,\nmaxLines: undefined,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 0,\ncharWrap: false\n});\n</code></pre> <ul> <li><code>padding</code> :<ul> <li><code>padding.top</code>, <code>padding.bottom</code>, <code>padding.left</code>, <code>padding.right</code> : Extra space around lines.</li> </ul> </li> <li><code>ascent</code>, <code>lineHeight</code> : Height of first line and remainder lines<ul> <li><code>ascent</code> will set to <code>lineHeight</code> if <code>ascent</code> is <code>undefined</code> but <code>lineHeight</code> is not <code>undefined</code> (backward compatible)</li> <li>Get <code>ascent</code>, <code>lineHeight</code> from default text style and test string, if <code>ascent</code>, <code>lineHeight</code> are both <code>undefined</code></li> </ul> </li> <li><code>useDefaultTextHeight</code> : If parameter <code>lineHeight</code> is not given,<ul> <li><code>false</code> : Set line height to (total line height / maxLines), if parameter <code>maxLines</code> is larger than <code>0</code>. Default behavior.</li> <li><code>true</code> : Set line height to default text height.</li> </ul> </li> <li><code>maxLines</code> : Lines number of this page. <ul> <li><code>0</code> : Wrapping whole content.</li> <li><code>undefined</code> : It will be set if <code>lineHeight</code> and <code>height</code> is given</li> </ul> </li> <li><code>wrapWidth</code> : Width of wrapping</li> <li><code>letterSpacing</code> : Space between each character.</li> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound.</li> </ul> </li> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> <li><code>charWrap</code><ul> <li><code>false</code> : Word wrap. Default behavior.</li> <li><code>true</code> : Character wrap.</li> </ul> </li> </ul>"},{"location":"dynamictext/#align","title":"Align","text":"<ul> <li>Set vertical align mode     <pre><code>txt.setVAlign(vAlign);\n</code></pre><ul> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> </ul> </li> <li>Set horizontal align mode     <pre><code>txt.setHAlign(hAlign);\n</code></pre><ul> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound.</li> </ul> </li> </ul> </li> </ul>"},{"location":"dynamictext/#test-string","title":"Test string","text":"<pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"dynamictext/#vertical-wrap","title":"Vertical wrap","text":"<pre><code>var result = txt.runVerticalWrap({\npadding: {\ntop: 0,\nleft: 0,\nright: 0,\nbottom: 0\n},\nlineWidth: undefined,\nmaxLines: undefined,\nfixedChildHeight: undefined,\ncharPerLine: undefined,\nwrapHeight: undefined,\nletterSpacing: 0,\nrtl: true,\nhAlign: 0,\nvAlign: 0,\n});\n</code></pre> <ul> <li><code>padding</code> :<ul> <li><code>padding.top</code>, <code>padding.bottom</code>, <code>padding.left</code>, <code>padding.right</code> : Extra space around lines.</li> </ul> </li> <li><code>lineWidth</code> : Line width. <ul> <li><code>undefined</code> : It will be set if <code>maxLines</code> and <code>fixedWidth</code> is given.</li> </ul> </li> <li><code>maxLines</code> : Lines number of this page. <ul> <li><code>0</code> : Wrapping whole content.</li> <li><code>undefined</code> : It will be set if <code>lineWidth</code> and <code>fixedWidth</code> is given.</li> </ul> </li> <li><code>fixedChildHeight</code> : Each character has the same fixed height.<ul> <li><code>undefined</code> : Get <code>fixedChildHeight</code> according to <code>charPerLine</code> parameter. Or use height of each character if <code>fixedChildHeight</code> and <code>charPerLine</code> parameters are <code>undefined</code>.</li> </ul> </li> <li><code>charPerLine</code> : Amount of characters in each line, to get <code>fixedChildHeight</code>.</li> <li><code>wrapHeight</code> : Height of wrapping</li> <li><code>letterSpacing</code> : Space between each character.</li> <li><code>rtl</code> : <ul> <li><code>true</code> : Place lines from right to left.</li> <li><code>false</code> : Place lines from left to right.</li> </ul> </li> <li><code>hAlign</code> : Horizontal alignment.<ul> <li><code>0</code>, or <code>'left'</code> : Align to left bound. Default value if <code>rtl</code> is set to <code>false</code>. </li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'right'</code> : Align to right bound. Default value if <code>rtl</code> is set to <code>true</code>.</li> </ul> </li> <li><code>vAlign</code> : Vertical alignment.<ul> <li><code>0</code>, or <code>'top'</code> : Align to top bound.</li> <li><code>1</code>, or <code>'center'</code> : Align to center.</li> <li><code>2</code>, or <code>'bottom'</code> : Align to bottom bound.</li> </ul> </li> </ul>"},{"location":"dynamictext/#result","title":"Result","text":"<pre><code>{\nchildren: [],\nlines: [],\nisLastPage: false\n}\n</code></pre> <ul> <li><code>children</code> : Character/Image data in this page.</li> <li><code>lines</code> : Array of line data. A line data contains     <pre><code>{\nchildren: [],\nwidth: 0,     // Horizontal-wrapping\nheight: 0,    // Vertical-wrapping.        \n}\n</code></pre><ul> <li><code>children</code> : Character/Image data in this line.</li> <li><code>width</code> : Width of this line, in result of horizontal-wrapping.</li> <li><code>height</code> : Height of this line, in result of vertical-wrapping.</li> </ul> </li> <li><code>isLastPage</code> : <ul> <li><code>false</code> : Run <code>txt.runWordWrap(result)</code>/<code>txt.runVerticalWrap(result)</code> to get next page of word-wrapping result.</li> <li><code>true</code> : No remainder of characters.</li> </ul> </li> </ul>"},{"location":"dynamictext/#wrap-next-page","title":"Wrap next page","text":"<pre><code>var result = txt.runWordWrap(prevResult);\n</code></pre> <ul> <li><code>prevResult</code> : Result of previous word-wraping.</li> <li><code>result</code> : Current result of word-wraping.</li> </ul>"},{"location":"dynamictext/#default-configuration-of-wrapping","title":"Default configuration of wrapping","text":"<pre><code>txt.setWrapConfig(config);\n</code></pre> <ul> <li><code>config</code> : Default configuration Horizontal/Vertical wrapping.</li> </ul>"},{"location":"dynamictext/#child","title":"Child","text":""},{"location":"dynamictext/#general-properties","title":"General properties","text":"<ul> <li>Visible :<ul> <li>Get     <pre><code>var visible = child.visible;\n</code></pre></li> <li>Set     <pre><code>child.setVisible();\n// child.visible = true;\n</code></pre>     or     <pre><code>child.setVisible(false);  // Set to invisible\n// child.visible = false;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = child.alpha;\n</code></pre></li> <li>Set     <pre><code>child.setAlpha(alpha);\n// child.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Position :<ul> <li>Get     <pre><code>var x = child.x;\nvar y = child.y;\n</code></pre></li> <li>Set     <pre><code>child.setPosition(x, y);\n// child.x = x;\n// child.y = y;\n</code></pre></li> </ul> </li> <li>Angle :<ul> <li>Get     <pre><code>var degrees = child.angle;\n// var radians = child.rotation;\n</code></pre></li> <li>Set     <pre><code>child.setAngle(degrees);\nchild.setRotation(radians);\n// child.angle = degrees;\n// child.rotation = radians;\n</code></pre></li> </ul> </li> <li>Scale<ul> <li>Get     <pre><code>var scaleX = child.scaleX;\nvar scaleY = child.scaleY;\n</code></pre></li> <li>Set     <pre><code>child.setScale(scaleX, scaleY);\n// child.scaleX = scaleX;\n// child.scaleY = scaleY;\n</code></pre></li> </ul> </li> <li>Draw callbacks<ul> <li>Set     <pre><code>child.setDrawBelowCallback(callback);\nchild.setDrawAboveCallback(callback);\n</code></pre><ul> <li><code>callback</code> :     <pre><code>function(child) {\nvar text = child.text;                var context = child.context;\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>World position     <pre><code>var worldXY = child.getWorldPosition();\n// out = child.getWorldPosition(out);\n</code></pre>     or     <pre><code>var worldXY = txt.getCharWorldPosition(char);\n// out = txt.getCharWorldPosition(char, out);\n</code></pre></li> </ul>"},{"location":"dynamictext/#character","title":"Character","text":""},{"location":"dynamictext/#text-style","title":"Text-style","text":"<ul> <li>Get     <pre><code>var bold = char.style.bold;\nvar italic = char.style.italic;\nvar fontSize = char.style.fontSize;\nvar fontFamily = char.style.fontFamily;\nvar color = char.style.color;\nvar stroke = char.style.stroke;\nvar strokeThickness = char.style.strokeThickness;\nvar shaodwColor = char.style.shadowColor;\nvar shadowBlur = char.style.shadowBlur;\nvar shadowOffsetX = char.style.shadowOffsetX;\nvar shadowOffsetY = char.style.shadowOffsetY;\nvar backgroundColor = char.style.backgroundColor;\nvar backgroundHeight = char.style.backgroundHeight;\nvar backgroundBottomY = char.style.backgroundBottomY;\nvar xOffset = char.style.x;\nvar yOffset = char.style.y;\n</code></pre></li> <li>Set     <pre><code>char.modifyStyle({\n// bold: false,\n// italic: false,\n// fontSize: '16px',\n// fontFamily: 'Courier',\n// color: '#fff',\n// stroke: '#fff',\n// strokeThickness: 0,\n// shaodwColor: null,\n// shadowBlur: 0,\n// shadowOffsetX: 0,\n// shadowOffsetY: 0,\n// backgroundColor: null,\n// backgroundHeight: undefined,\n// backgroundBottomY: undefined,\n// offsetX: 0,\n// offsetY: 0\n})\n</code></pre>     or     <pre><code>char.setBold();\n// char.setBold(false);\n</code></pre> <pre><code>char.setItalic();\n// char.setItalic(false);\n</code></pre> <pre><code>char.setFontSize(fontSize); // number, string\n</code></pre> <pre><code>char.setFontFamily(fontFamily);\n</code></pre> <pre><code>char.setColor(color); // number, string\n// char.setColor(); // No filling color\n</code></pre> <pre><code>char.setStrokeStyle(color, thickness);\n// char.setStrokeStyle();  // No stroke\n</code></pre> <pre><code>char.setShadowColor(color);\n// char.setShadowColor();  // No shadow\n</code></pre> <pre><code>char.setShadowOffset(offsetX, offsetY);\n</code></pre> <pre><code>char.setShadowBlur(blur);\n</code></pre> <pre><code>char.setBackgroundColor(color);\n// char.setBackgroundColor();  // No shadow\n</code></pre> <pre><code>char.setOffsetX(offsetX);\nchar.setOffsetY(offsetY);\n</code></pre></li> </ul>"},{"location":"dynamictext/#image_1","title":"Image","text":"<ul> <li>Size<ul> <li>Get     <pre><code>var width = image.width;\nvar height = image.height;\n</code></pre></li> <li>Set     <pre><code>image.setWidth(width);\n// image.setWidth(width, true);  // Resize and keep aspect- ratio\nimage.setHeight(height);\n// image.setHeight(height, true);  // Resize and keep aspect- ratio\n</code></pre></li> </ul> </li> </ul>"},{"location":"dynamictext/#for-each-child","title":"For each child","text":"<ul> <li>Any child<ul> <li>For each active child     <pre><code>txt.forEachChild(function(child, childIndex){\n}, scope)\n</code></pre></li> <li>For each character child     <pre><code>txt.forEachChild(function(child, childIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> <li>Renderable child<ul> <li>For each active renderable child     <pre><code>txt.forEachRenderableChild(function(child, charIndex){\n}, scope)\n</code></pre></li> <li>For each renderable child     <pre><code>txt.forEachRenderableChild(function(child, charIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> <li>Character child<ul> <li>For each active character child     <pre><code>txt.forEachCharChild(function(child, charIndex){\n}, scope)\n</code></pre></li> <li>For each character child     <pre><code>txt.forEachCharChild(function(child, charIndex){\n}, scope, false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"dynamictext/#get-children","title":"Get children","text":"<ul> <li>Get all children     <pre><code>var children = txt.getChildren();\n</code></pre></li> <li>Get last appended children     <pre><code>var children = txt.getLastAppendedChildren();\n</code></pre></li> <li>Get active children, after wrapping     <pre><code>var children = txt.getActiveChildren();\n</code></pre></li> </ul>"},{"location":"dynamictext/#get-character-children","title":"Get character children","text":"<ul> <li>Get active character children     <pre><code>var children = txt.getCharChildren();\n</code></pre></li> <li>Get all character children     <pre><code>var children = txt.getCharChildren(false);\n</code></pre></li> <li>Get character child by character index     <pre><code>var child = txt.getCharChild(charIndex);\n</code></pre></li> </ul>"},{"location":"dynamictext/#move-child","title":"Move child","text":"<ul> <li>Move child to fist     <pre><code>txt.moveChildToFist(child);\n</code></pre></li> <li>Move child to last     <pre><code>txt.moveChildToLast(child);\n</code></pre></li> <li>Move child up     <pre><code>txt.movechildUp(child);\n</code></pre></li> <li>Move child to down     <pre><code>txt.movechildDown(child);\n</code></pre></li> <li>Move child above another child     <pre><code>txt.movechildAbove(child, baseChild);\n</code></pre></li> <li>Move child below another child     <pre><code>txt.movechildBelow(child, baseChild);\n</code></pre></li> </ul>"},{"location":"dynamictext/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"dynamictext/#input-events-of-child","title":"Input events of child","text":"<ul> <li>Enable input events of child on config of constructor, or via method     <pre><code>txt.setChildrenInteractiveEnable();\n</code></pre></li> <li>Pointer down/up on child     <pre><code>txt.on('child.pointerdown', function(child, pointer, localX, localY, event) {        })\n</code></pre> <pre><code>txt.on('child.pointerup', function(child, pointer, localX, localY, event) {        })\n</code></pre><ul> <li><code>child</code> : Any Character or Image child</li> </ul> </li> <li>Pointer over/out on child     <pre><code>txt.on('child.pointerover', function(child, pointer, localX, localY, event) {        })\n</code></pre> <pre><code>txt.on('child.pointerout', function(child, pointer, localX, localY, event) {        })\n</code></pre><ul> <li><code>child</code> : Any Character or Image child</li> </ul> </li> </ul>"},{"location":"dynamictext/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"dynamictext/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"dynamictext/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"dynamictext/#compare-with-other-kinds-of-text-game-object","title":"Compare with other kinds of text game object","text":"<ul> <li>Built-in text: <ul> <li>Single color per game object.</li> <li>Draw content line by line.</li> <li>Best render performance.</li> </ul> </li> <li>BBCode text: <ul> <li>Multiple colors, multiple font size per gaem object.</li> <li>Draw content segment by segment.</li> <li>Slower than built-in text game object.</li> </ul> </li> <li>Dynamic text:<ul> <li>Multiple colors, multiple font size per gaem object.</li> <li>Draw content character by character.</li> <li>Slower than bbcode text game object.</li> </ul> </li> </ul>"},{"location":"ease-function/","title":"Ease","text":""},{"location":"ease-function/#introduction","title":"Introduction","text":"<p>Ease functions, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"ease-function/#usage","title":"Usage","text":""},{"location":"ease-function/#ease-functions","title":"Ease functions","text":"<ul> <li>Linear : <code>Phaser.Math.Easing.Linear</code></li> <li>Quadratic, Power1<ul> <li>Quadratic ease-out : <code>Phaser.Math.Easing.Quadratic.Out</code></li> <li>Quadratic ease-in : <code>Phaser.Math.Easing.Quadratic.In</code></li> <li>Quadratic ease-in/out : <code>Phaser.Math.Easing.Quadratic.InOut</code></li> </ul> </li> <li>Cubic, Power2<ul> <li>Cubic ease-out : <code>Phaser.Math.Easing.Cubic.Out</code></li> <li>Cubic ease-in : <code>Phaser.Math.Easing.Cubic.In</code></li> <li>Cubic ease-in/out : <code>Phaser.Math.Easing.Cubic.InOut</code></li> </ul> </li> <li>Quartic, Power3<ul> <li>Quartic ease-out : <code>Phaser.Math.Easing.Quartic.Out</code></li> <li>Quartic ease-in : <code>Phaser.Math.Easing.Quartic.In</code></li> <li>Quartic ease-in/out : <code>Phaser.Math.Easing.Quartic.InOut</code></li> </ul> </li> <li>Quintic, Power4<ul> <li>Quintic ease-out : <code>Phaser.Math.Easing.Quintic.Out</code></li> <li>Quintic ease-in : <code>Phaser.Math.Easing.Quintic.In</code></li> <li>Quintic ease-in/out : <code>Phaser.Math.Easing.Quintic.InOut</code></li> </ul> </li> <li>Sinusoidal<ul> <li>Sinusoidal ease-out : <code>Phaser.Math.Easing.Sine.Out</code></li> <li>Sinusoidal ease-in : <code>Phaser.Math.Easing.Sine.In</code></li> <li>Sinusoidal ease-in/out : <code>Phaser.Math.Easing.Sine.InOut</code></li> </ul> </li> <li>Exponential<ul> <li>Exponential ease-out : <code>Phaser.Math.Easing.Expo.Out</code></li> <li>Exponential ease-in : <code>Phaser.Math.Easing.Expo.In</code></li> <li>Exponential ease-in/out : <code>Phaser.Math.Easing.Expo.InOut</code></li> </ul> </li> <li>Circular<ul> <li>Circular ease-out : <code>Phaser.Math.Easing.Circular.Out</code></li> <li>Circular ease-in : <code>Phaser.Math.Easing.Circular.In</code></li> <li>Circular ease-in/out : <code>Phaser.Math.Easing.Circular.InOut</code></li> </ul> </li> <li>Elastic<ul> <li>Elastic ease-out : <code>Phaser.Math.Easing.Elastic.Out</code></li> <li>Elastic ease-in : <code>Phaser.Math.Easing.Elastic.In</code></li> <li>Elastic ease-in/out : <code>Phaser.Math.Easing.Elastic.InOut</code></li> </ul> </li> <li>Bounce<ul> <li>Bounce ease-out : <code>Phaser.Math.Easing.Bounce.Out</code></li> <li>Bounce ease-in : <code>Phaser.Math.Easing.Bounce.In</code></li> <li>Bounce ease-in/out : <code>Phaser.Math.Easing.Bounce.InOut</code></li> </ul> </li> <li>Back<ul> <li>Back ease-out : <code>Phaser.Math.Easing.Back.Out</code></li> <li>Back ease-in : <code>Phaser.Math.Easing.Back.In</code></li> <li>Back ease-in/out : <code>Phaser.Math.Easing.Back.InOut</code></li> </ul> </li> <li>Stepped : <code>Phaser.Math.Easing.Stepped(v, step)</code></li> </ul>"},{"location":"ease-function/#get-ease-function-via-string","title":"Get ease function via string","text":"<pre><code>var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease);\n// var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams);\n</code></pre> <ul> <li><code>ease</code> : <ul> <li>A string : <ul> <li><code>Power0</code> : Linear</li> <li><code>Power1</code> : Quadratic.Out</li> <li><code>Power2</code> : Cubic.Out</li> <li><code>Power3</code> : Quartic.Out</li> <li><code>Power4</code> : Quintic.Out</li> <li><code>Linear</code></li> <li><code>Quad</code> : Quadratic.Out</li> <li><code>Cubic</code> : Cubic.Out</li> <li><code>Quart</code> : Quartic.Out</li> <li><code>Quint</code> : Quintic.Out</li> <li><code>Sine</code> : Sine.Out</li> <li><code>Expo</code> : Expo.Out</li> <li><code>Circ</code> : Circular.Out</li> <li><code>Elastic</code> : Elastic.Out</li> <li><code>Back</code> : Back.Out</li> <li><code>Bounce</code> : Bounce.Out</li> <li><code>Stepped</code></li> <li><code>Quad.easeIn</code></li> <li><code>Cubic.easeIn</code></li> <li><code>Quart.easeIn</code></li> <li><code>Quint.easeIn</code></li> <li><code>Sine.easeIn</code></li> <li><code>Expo.easeIn</code></li> <li><code>Circ.easeIn</code></li> <li><code>Back.easeIn</code></li> <li><code>Bounce.easeIn</code></li> <li><code>Quad.easeOut</code></li> <li><code>Cubic.easeOut</code></li> <li><code>Quart.easeOut</code></li> <li><code>Quint.easeOut</code></li> <li><code>Sine.easeOut</code></li> <li><code>Expo.easeOut</code></li> <li><code>Circ.easeOut</code></li> <li><code>Back.easeOut</code></li> <li><code>Bounce.easeOut</code></li> <li><code>Quad.easeInOut</code></li> <li><code>Cubic.easeInOut</code></li> <li><code>Quart.easeInOut</code></li> <li><code>Quint.easeInOut</code></li> <li><code>Sine.easeInOut</code></li> <li><code>Expo.easeInOut</code></li> <li><code>Circ.easeInOut</code></li> <li><code>Back.easeInOut</code></li> <li><code>Bounce.easeInOut</code></li> </ul> </li> <li>A custom function     <pre><code>function(v) {\nreturn v;\n}\n</code></pre> <pre><code>function(v, param0, param1, ...) {\nreturn v;\n}\n</code></pre><ul> <li><code>v</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"ease-function/#get-result","title":"Get result","text":"<pre><code>var result = easeFunction(t);\n</code></pre> <ul> <li><code>t</code> : <code>0</code> ~ <code>1</code></li> </ul>"},{"location":"easedata/","title":"Ease-data","text":""},{"location":"easedata/#introduction","title":"Introduction","text":"<p>Easing data value of game object's data-manager.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"easedata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"easedata/#install-plugin","title":"Install plugin","text":""},{"location":"easedata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeasedataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeasedataplugin.min.js', true);\n</code></pre></li> <li>Add ease-data behavior     <pre><code>var easedata = scene.plugins.get('rexeasedataplugin').add(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EaseDataPlugin from 'phaser3-rex-plugins/plugins/easedata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEaseData',\nplugin: EaseDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add ease-data behavior     <pre><code>var easedata = scene.plugins.get('rexEaseData').add(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import { EaseData } from 'phaser3-rex-plugins/plugins/easedata.js';\n</code></pre></li> <li>EaseData-out-destroy     <pre><code>var easedata = new EaseData(gameObject);\n</code></pre></li> </ul>"},{"location":"easedata/#create-instance","title":"Create instance","text":"<pre><code>var easedata = scene.plugins.get('rexEaseData').add(gameObject);\n</code></pre>"},{"location":"easedata/#ease-data","title":"Ease data","text":"<ul> <li>Start     <pre><code>easedata.easeTo(key, value, duration);\n// easedata.easeTo(key, value, duration, ease);\n</code></pre>     or     <pre><code>easedata.easeTo({\nkey:key,\nvalue:value,\nduration:1000,\nease:'Linear'\n});\n</code></pre>     or     <pre><code>easedata.easeTo({\nkey:key,\nvalue:value,\nspeed: 10,    // value changing rate, per second\nease:'Linear'\n});\n</code></pre></li> <li>Stop     <pre><code>easedata.stopEase(key);           // Set to end value\n// easedata.stopEase(key, false); // Stop at current value\n</code></pre>     or     <pre><code>easedata.stopAll();           // Set to end value\n// easedata.stopAll(false);   // Stop at current value\n</code></pre></li> </ul>"},{"location":"easedata/#events","title":"Events","text":"<ul> <li>Easing complete     <pre><code>easedata.on('complete-' + key, function(gameObject, easedata){\n\n}, scope);\n</code></pre> <pre><code>easedata.on('complete', function(key, gameObject, easedata){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"easemove/","title":"Ease-move","text":""},{"location":"easemove/#introduction","title":"Introduction","text":"<p>Ease-move game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"easemove/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"easemove/#install-plugin","title":"Install plugin","text":""},{"location":"easemove/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeasemoveplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeasemoveplugin.min.js', true);\n</code></pre></li> <li>Ease-move to/from     <pre><code>var easemove = scene.plugins.get('rexeasemoveplugin').moveTo(gameObject, duration, x, y, ease);\nvar easemove = scene.plugins.get('rexeasemoveplugin').moveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EaseMovePlugin from 'phaser3-rex-plugins/plugins/easemove-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEaseMove',\nplugin: EaseMovePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Ease-move to/from     <pre><code>var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease);\nvar easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import { EaseMoveTo, EaseMoveFrom } from 'phaser3-rex-plugins/plugins/easemove.js';\n</code></pre></li> <li>EaseMove-out-destroy     <pre><code>var easemove = EaseMoveTo(gameObject, duration, x, y, ease);\nvar easemove = EaseMoveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> </ul>"},{"location":"easemove/#move-to","title":"Move to","text":"<pre><code>var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y);\n// var easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease);\n// easemove = scene.plugins.get('rexEaseMove').moveTo(gameObject, duration, x, y, ease, easemove);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : End position.<ul> <li>Number : End position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Don't move along x/y axis.</li> </ul> </li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> <li><code>easemove</code> : Ease-move behavior.</li> </ul>"},{"location":"easemove/#move-from","title":"Move from","text":"<pre><code>var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y);\n// var easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease);\n// easemove = scene.plugins.get('rexEaseMove').moveFrom(gameObject, duration, x, y, ease, easemove);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Start position.<ul> <li>Number : Start position x/y.</li> <li>String(<code>-=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Don't move along x/y axis.</li> </ul> </li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> <li><code>easemove</code> : Ease-move behavior.</li> </ul>"},{"location":"easemove/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Move completes or is stopped.     <pre><code>easemove.on('complete', function(gameObject, easemove){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"effect-properties/","title":"Effect properties","text":""},{"location":"effect-properties/#introduction","title":"Introduction","text":"<p>Attach properties to a game object or camera, to add/remove/control builtin preFX or postFX effects.</p> <ul> <li>Author: Rex</li> <li>Method only</li> <li>Pre-fx, and Post-fx shader effects</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"effect-properties/#live-demos","title":"Live demos","text":"<ul> <li>Color effects</li> <li>Reveal</li> <li>Interactive</li> <li>Camera</li> </ul>"},{"location":"effect-properties/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"effect-properties/#install-plugin","title":"Install plugin","text":""},{"location":"effect-properties/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeffectpropertiesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeffectpropertiesplugin.min.js', true);\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>scene.plugins.get('rexeffectpropertiesplugin').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexeffectpropertiesplugin').add(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EffectPropertiesPlugin from 'phaser3-rex-plugins/plugins/effectproperties-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEffectProperties',\nplugin: EffectPropertiesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexEffectProperties').add(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddEffectPropertiesProperties from 'phaser3-rex-plugins/plugins/effectproperties.js';\n</code></pre></li> <li>Attach properties to a game object/camera.     <pre><code>AddEffectPropertiesProperties(gameObject);\n</code></pre> <pre><code>AddEffectPropertiesProperties(camera);\n</code></pre></li> </ul>"},{"location":"effect-properties/#attach-properties","title":"Attach properties","text":"<p>Supported effects are <code>barrel</code>, <code>blackWhite</code>, <code>bloom</code>, <code>blur</code>, <code>bokeh</code>, <code>brightness</code>, <code>brown</code>, <code>circle</code>, <code>contrast</code>,  <code>desaturate</code>, <code>desaturateLuminance</code>, <code>displacement</code>,  <code>glow</code>, <code>gradient</code>, <code>grayscale</code>, <code>hue</code>, <code>kodachrome</code>, <code>lsd</code>, <code>negative</code>, <code>pixelate</code>, <code>polaroid</code>,  <code>reveal</code>, <code>saturate</code>, <code>sepia</code>, <code>shadow</code>, <code>shiftToBGR</code>, <code>shine</code>, <code>technicolor</code>, <code>tiltShift</code>,  <code>vignette</code>, <code>vintagePinhole</code>, <code>wipe</code>.</p> <ul> <li>Attatch properties of all effects to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject);\n</code></pre> <pre><code>scene.plugins.get('rexEffectProperties').add(camera);\n</code></pre></li> <li>Attatch properties of some preFX/postFX effects to a game object/camera.     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, {\nbarrel: true,\nblackWhite: true,\nbloom: true,\nblur: true,\nbokeh: true,\nbrightness: true,\nbrown: true,\ncircle: true,\ncontrast: true,\ndesaturate: true,\ndesaturateLuminance: true,\ndisplacement: true,\nglow: true,\ngradient: true,\ngrayscale: true,\nhue: true,\nkodachrome: true,\nlsd: true,\nnegative: true,\npixelate: true,\npolaroid: true,\nreveal: true,\nsaturate: true,\nsepia: true,\nshadow: true,\nshiftToBGR: true,\nshine: true,\ntechnicolor: true,\ntiltShift: true,\nvignette: true,\nvintagePinhole: true,\nwipe: true,\n});\n</code></pre>     or     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, [\n'barrel', 'blackWhite', 'bloom', 'blur', 'bokeh', 'brightness', 'brown',\n'circle', 'contrast',\n'desaturate', 'desaturateLuminance', 'displacement',\n'glow', 'gradient', 'grayscale',\n'hue',\n'kodachrome',\n'lsd',\n'negative',\n'pixelate', 'polaroid',\n'reveal',\n'saturate', 'sepia', 'shadow', 'shiftToBGR', 'shine',\n'technicolor', 'tiltShift',\n'vignette', 'vintagePinhole',\n'wipe'\n]);\n</code></pre>     or     <pre><code>scene.plugins.get('rexEffectProperties').add(gameObject, effectName);\n</code></pre><ul> <li>A plain object with effect names.</li> <li>A list of effect name string.</li> <li>A effect name string.</li> </ul> </li> </ul>"},{"location":"effect-properties/#effect-properties","title":"Effect properties","text":"<p>Will try to create preFX effect if gameObject has preFX, otherwise, try to create postFX effect.</p>"},{"location":"effect-properties/#barrel","title":"Barrel","text":"<ul> <li><code>barrel</code> : <ul> <li>A number : Enable this effect and set intensity of barrel (1: origin).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#blackwhite","title":"BlackWhite","text":"<ul> <li><code>blackWhite</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#bloom","title":"Bloom","text":"<ul> <li><code>bloomColor</code> : <ul> <li>A number : Enable this effect and set color of bloom (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>bloomOffsetX</code>, <code>bloomOffsetY</code>, <code>bloomBlurStrength</code>, <code>bloomStrength</code>, <code>bloomSteps</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#blur","title":"Blur","text":"<ul> <li><code>blurColor</code> : <ul> <li>A number : Enable this effect and set color of blur (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>blurQuality</code>, <code>blurX</code>, <code>blurY</code>, <code>blurStrength</code>, <code>blurSteps</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#bokeh","title":"Bokeh","text":"<ul> <li><code>bokehRadius</code> : <ul> <li>A number : Enable this effect and set radius of bokeh (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>bokehAmount</code>, <code>bokehContrast</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#brightness","title":"Brightness","text":"<ul> <li><code>brightness</code> : <ul> <li>A number : Enable this effect and set brightness (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#brown","title":"Brown","text":"<ul> <li><code>brown</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#circle","title":"Circle","text":"<ul> <li><code>circleColor</code> : <ul> <li>A number : Enable this effect and set color of circle (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>circleThickness</code>, <code>circleBackgroundColor</code>, <code>circleBackgroundAlpha</code>, <code>circleScale</code>, <code>circleFeather</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#contrast","title":"Contrast","text":"<ul> <li><code>contrast</code> : <ul> <li>A number : Enable this effect and set contrast (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#desaturate","title":"Desaturate","text":"<ul> <li><code>desaturate</code> : <ul> <li>A number : Enable this effect and set desaturate (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#desaturateluminance","title":"DesaturateLuminance","text":"<ul> <li><code>desaturateLuminance</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#displacement","title":"Displacement","text":"<ul> <li><code>displacementKey</code> : <ul> <li>A string : Enable this effect and set displacement reference texture.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>displacementX</code>, <code>displacementY</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#glow","title":"Glow","text":"<ul> <li><code>glowColor</code> : <ul> <li>A number : Enable this effect and set color of glow (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>glowOuterStrength</code>, <code>glowInnerStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#gradient","title":"Gradient","text":"<ul> <li><code>gradientColor</code> : <ul> <li><code>[number, number]</code> : Enable this effect and set gradient color1 and gradient color2 (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>gradientAlpha</code>, <code>gradientFromX</code>, <code>gradientFromY</code>, <code>gradientToX</code>, <code>gradientToY</code>, <code>gradientSize</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#grayscale","title":"Grayscale","text":"<ul> <li><code>grayscale</code> : <ul> <li>A number : Enable this effect and set intensity of grayscale (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#hue","title":"Hue","text":"<ul> <li><code>hue</code> : <ul> <li>A number : Enable this effect and set hue rotation, in degrees.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#kodachrome","title":"Kodachrome","text":"<ul> <li><code>kodachrome</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#lsd","title":"Lsd","text":"<ul> <li><code>lsd</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#negative","title":"Negative","text":"<ul> <li><code>negative</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#pixelate","title":"Pixelate","text":"<ul> <li><code>pixelate</code> : <ul> <li>A number : Enable this effect and set size of pixelate, in pixels.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#polaroid","title":"Polaroid","text":"<ul> <li><code>polaroid</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#reveal","title":"Reveal","text":"<ul> <li><code>revealLeft</code>, <code>revealRight</code>, <code>revealUp</code>, or <code>revealDown</code> :<ul> <li>A number : Enable this effect with specific reveal direction and set progress (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>revealWidth</code> :<ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#saturate","title":"Saturate","text":"<ul> <li><code>saturate</code> : <ul> <li>A number : Enable this effect and set saturate (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#sepia","title":"Sepia","text":"<ul> <li><code>sepia</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#shadow","title":"Shadow","text":"<ul> <li><code>shadowColor</code> : <ul> <li>A number : Enable this effect and set color of shadow (0xffffff).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>shadowX</code>, <code>shadowY</code>, <code>shadowDecay</code>, <code>shadowPower</code>, <code>shadowSamples</code>, <code>shadowIntensity</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#shifttobgr","title":"ShiftToBGR","text":"<ul> <li><code>shiftToBGR</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#shine","title":"Shine","text":"<ul> <li><code>shineSpeed</code> : <ul> <li>A number : Enable this effect and set speed of shine, in seconds.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>shineLineWidth</code>, <code>shineGradient</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#technicolor","title":"Technicolor","text":"<ul> <li><code>technicolor</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#tiltshift","title":"TiltShift","text":"<ul> <li><code>tiltShiftRadius</code> : <ul> <li>A number : Enable this effect and set radius of tiltShift (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>tiltShiftAmount</code>, <code>tiltShiftContrast</code>, <code>tiltShiftBlurX</code>, <code>tiltShiftBlurY</code>, <code>tiltShiftStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#vignette","title":"Vignette","text":"<ul> <li><code>vignetteRadius</code> : <ul> <li>A number : Enable this effect and set radius of vignette (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>vignetteX</code>, <code>vignetteY</code>, <code>vignetteStrength</code> : <ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#vintagepinhole","title":"VintagePinhole","text":"<ul> <li><code>vintagePinhole</code> : <ul> <li><code>true</code>, or <code>1</code> : Enable this effect.</li> <li><code>null</code> : Remove this effect</li> </ul> </li> </ul>"},{"location":"effect-properties/#wipe","title":"Wipe","text":"<ul> <li><code>wipeLeft</code>, <code>wipeRight</code>, <code>wipeUp</code>, or <code>wipeDown</code> :<ul> <li>A number : Enable this effect with specific wipe direction and set progress (0~1).</li> <li><code>null</code> : Remove this effect</li> </ul> </li> <li><code>wipeWidth</code> :<ul> <li>A number</li> </ul> </li> </ul>"},{"location":"effect-properties/#clear-all-effects","title":"Clear all effects","text":"<pre><code>gameObject.clearAllEffects();\n</code></pre>"},{"location":"effectlayer-outline/","title":"Effectlayer outline","text":""},{"location":"effectlayer-outline/#introduction","title":"Introduction","text":"<p>Draw outline of target game objects.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"effectlayer-outline/#live-demos","title":"Live demos","text":"<ul> <li>Outline</li> </ul>"},{"location":"effectlayer-outline/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"effectlayer-outline/#install-plugin","title":"Install plugin","text":""},{"location":"effectlayer-outline/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexoutlineeffectlayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexoutlineeffectlayerplugin.min.js', true);\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = scene.add.rexOutlineEffectLayer(config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import OutlineEffectLayerPlugin from 'phaser3-rex-plugins/plugins/outlineeffectlayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexOutlineEffectLayerPlugin',\nplugin: OutlineEffectLayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = scene.add.rexOutlineEffectLayer(config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import OutlineEffectLayer from 'phaser3-rex-plugins/plugins/outlineeffectlayer.js';\n</code></pre></li> <li>Add outline effect layer object     <pre><code>var effectLayer = new OutlineEffectLayer(scene, config);\nscene.add.existing(effectLayer);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#create-instance","title":"Create instance","text":"<pre><code>var effectLayer = scene.add.rexOutlineEffectLayer({\n// knockout: false,\n// thickness: 3,\n// outlineColor: 0x000000\n});\n</code></pre> <ul> <li><code>knockout</code> :<ul> <li><code>true</code> : Draw outline only.</li> <li><code>false</code> : Draw source texture and outline both.</li> </ul> </li> <li><code>thickness</code> : Thickness of outline.</li> <li><code>outlineColor</code> : Color of outline.</li> </ul>"},{"location":"effectlayer-outline/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyOutlineEffectLayer extends OutlineEffectLayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var effectLayer = new MyOutlineEffectLayer(scene, config);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#thickness","title":"Thickness","text":"<ul> <li>Get     <pre><code>var thickness = effectLayer.thickness;\n</code></pre></li> <li>Set     <pre><code>effectLayer.thickness = thickness;\n// effectLayer.thickness += value;\n</code></pre>     or     <pre><code>effectLayer.setThickness(value);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#outline-color","title":"Outline color","text":"<ul> <li>Get     <pre><code>var color = effectLayer.outlineColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>effectLayer.setOutlineColor(value);\n</code></pre> <pre><code>effectLayer.outlineColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"effectlayer-outline/#target-game-objects","title":"Target game objects","text":"<p>Draw outline of added target game objects.</p> <ul> <li>Add     <pre><code>effectLayer.add(gameObject);\n</code></pre></li> <li>Remove     <pre><code>effectLayer.remove(gameObject);\n</code></pre></li> <li>Clear     <pre><code>effectLayer.clear();\n</code></pre></li> <li>Contains     <pre><code>var hasGameObject = effectLayer.contains(gameObject);\n</code></pre></li> </ul>"},{"location":"effectlayer-outline/#limitation","title":"Limitation","text":"<ul> <li> <p>Can't support if <code>camera.zoom</code> is less then 1</p> </li> <li> <p>Can't support if <code>camera.startFollow(gameObject)</code>, i.e.    please scroll camera before target game objects draw on effect layer game object.</p> </li> </ul>"},{"location":"eightdirection/","title":"8 direction","text":""},{"location":"eightdirection/#introduction","title":"Introduction","text":"<p>Move game object by cursor keys, with a constant speed.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"eightdirection/#live-demos","title":"Live demos","text":"<ul> <li>Virtual-joyStick + Eight-direction</li> </ul>"},{"location":"eightdirection/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"eightdirection/#install-plugin","title":"Install plugin","text":""},{"location":"eightdirection/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeightdirectionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeightdirectionplugin.min.js', true);\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = scene.plugins.get('rexeightdirectionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import EightDirectionPlugin from 'phaser3-rex-plugins/plugins/eightdirection-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEightDirection',\nplugin: EightDirectionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import EightDirection from 'phaser3-rex-plugins/plugins/eightdirection.js';\n</code></pre></li> <li>Add eight-direction behavior     <pre><code>var eightDirection = new EightDirection(gameObject, config);\n</code></pre></li> </ul>"},{"location":"eightdirection/#create-instance","title":"Create instance","text":"<pre><code>var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, {\nspeed: 200,\n// dir: '8dir',     // 0|'up&amp;down'|1|'left&amp;right'|2|'4dir'|3|'8dir'\n// rotateToDirection: false,\n// wrap: false,\n// padding: 0,\n// enable: true,\n// cursorKeys: scene.input.keyboard.createCursorKeys()\n});\n</code></pre> <ul> <li><code>speed</code> : moving speed, pixels in second.</li> <li><code>dir</code> :<ul> <li><code>'up&amp;down'</code>, or <code>0</code> :Aaccept up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Aaccept left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Aaccept up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> <li><code>rotateToDirection</code> : Set true to change angle towards moving direction.</li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>false</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>cursorKeys</code> : CursorKey object, using keyboard's cursorKeys by default.</li> </ul>"},{"location":"eightdirection/#set-speed","title":"Set speed","text":"<pre><code>eightDirection.setSpeed(speed);\n// eightDirection.speed = speed;\n</code></pre>"},{"location":"eightdirection/#set-rotate-to-direction","title":"Set rotate-to-direction","text":"<pre><code>eightDirection.setRotateToDirection(rotateToDirection);\n</code></pre> <ul> <li><code>rotateToDirection</code> : Set true to change angle towards moving direction</li> </ul>"},{"location":"eightdirection/#set-direction-mode","title":"Set direction mode","text":"<pre><code>eightDirection.setDirMode(dir);\n</code></pre> <ul> <li><code>dir</code> :<ul> <li><code>'up&amp;down'</code>, or <code>0</code> :Aaccept up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Aaccept left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Aaccept up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> </ul>"},{"location":"eightdirection/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>ship.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"eventemitter3/","title":"Event emitter","text":""},{"location":"eventemitter3/#introduction","title":"Introduction","text":"<p>Event emitter.</p>"},{"location":"eventemitter3/#usage","title":"Usage","text":""},{"location":"eventemitter3/#get-event-emitter","title":"Get event emitter","text":"<ul> <li>Scene:      <pre><code>var ee = scene.events;\n</code></pre></li> <li>Game object:     <pre><code>var ee = gameObject;\n</code></pre></li> </ul>"},{"location":"eventemitter3/#attach-listener","title":"Attach listener","text":"<pre><code>ee.on(eventName, callback, scope);\nee.once(eventName, callback, scope);  // only fire listeners one time\n</code></pre> <p>Alias</p> <pre><code>ee.addListener(eventName, callback, scope);\nee.addListener(eventName, callback, scope, true);  // only fire listeners one time\n</code></pre>"},{"location":"eventemitter3/#fire-event","title":"Fire event","text":"<pre><code>ee.emit(eventName, parameter0, ...);\n</code></pre>"},{"location":"eventemitter3/#remove-listeners","title":"Remove listeners","text":"<ul> <li>Remove a linstener     <pre><code>ee.off(eventName, callback, scope);\nee.off(eventName, callback, scope, true);   // only remove one-time listeners\n</code></pre>     or     <pre><code>ee.removeListener(eventName, callback, scope); ee.removeListener(eventName, callback, scope, true);  // only remove one-time listeners\n</code></pre></li> <li>Remove listeners of an event     <pre><code>ee.off(eventName);\n</code></pre>     or     <pre><code>ee.removeListener(eventName); </code></pre></li> <li>Remove listeners of all events     <pre><code>ee.removeAllListeners();\n</code></pre></li> </ul>"},{"location":"eventemitter3/#get-listeners-count","title":"Get listeners count","text":"<pre><code>var count = ee.listenerCount(eventName);\n//var noListener = (ee.listenerCount(eventName) === 0);\n</code></pre>"},{"location":"eventemitter3/#get-listeners","title":"Get listeners","text":"<pre><code>var listeners = ee.listeners(eventName);\n</code></pre>"},{"location":"eventemitter3/#get-event-names","title":"Get event names","text":"<pre><code>var names = ee.eventNames();\n</code></pre>"},{"location":"eventemitter3/#listener","title":"Listener","text":"<pre><code>{\nfn: callback,\ncontext: scope,\nonce: once\n}\n</code></pre>"},{"location":"eventemitter3/#custom-event-emitter-class","title":"Custom event emitter class","text":"<pre><code>class MyEventEmitter extends Phaser.Events.EventEmitter {\n// construct() {\n//     super();\n// }\n\n// destroy() {\n//     super.destroy();\n// }\n}\n</code></pre>"},{"location":"eventpromise/","title":"Event promise","text":""},{"location":"eventpromise/#introduction","title":"Introduction","text":"<p>Return a promise of an event.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"eventpromise/#live-demos","title":"Live demos","text":"<ul> <li>Wait complete</li> </ul>"},{"location":"eventpromise/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"eventpromise/#install-plugin","title":"Install plugin","text":""},{"location":"eventpromise/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexeventpromiseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeventpromiseplugin.min.js', true);\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = scene.plugins.get('rexeventpromiseplugin').waitEvent(eventEmitter, eventName);\n// var promoise = scene.plugins.get('rexeventpromiseplugin').waitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import EventPromisePlugin from 'phaser3-rex-plugins/plugins/eventpromise-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexEventPromise',\nplugin: EventPromisePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = scene.plugins.get('rexEventPromise').waitEvent(eventEmitter, eventName);\n// var promoise = scene.plugins.get('rexEventPromise').waitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { WaitEvent, WaitComplete } from 'phaser3-rex-plugins/plugins/eventpromise.js';\n</code></pre></li> <li>Get event promise     <pre><code>var promoise = WaitEvent(eventEmitter, eventName);\n// var promoise = WaitComplete(eventEmitter);\n</code></pre></li> </ul>"},{"location":"eventpromise/#get-event-promise","title":"Get event promise","text":"<pre><code>var promoise = scene.plugins.get('rexEventPromise').waitEvent(eventEmitter, eventName)\n.then(function() {\n\n})\n</code></pre> <ul> <li><code>eventEmitter</code> : Any kind of event emitter. for example, game object, or tween task, or scene event</li> </ul>"},{"location":"eventpromise/#get-complete-event-promise","title":"Get complete event promise","text":"<pre><code>var promoise = scene.plugins.get('rexEventPromise').waitComplete(eventEmitter)\n.then(function() {\n\n})\n</code></pre> <ul> <li><code>eventEmitter</code> : Event emitter which will fire <code>'complete'</code> event, for example, tween task.</li> </ul>"},{"location":"expression-parser/","title":"Expression parser","text":""},{"location":"expression-parser/#introduction","title":"Introduction","text":"<p>Parse expression string into function. Parser is generated from jison</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"expression-parser/#live-demos","title":"Live demos","text":"<ul> <li>Dot-notation</li> <li>Custom method</li> <li>Proxy as context</li> </ul>"},{"location":"expression-parser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"expression-parser/#install-plugin","title":"Install plugin","text":""},{"location":"expression-parser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexexpressionparserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexexpressionparserplugin.min.js', true);\n</code></pre></li> <li>Add parser     <pre><code>var parser = scene.plugins.get('rexexpressionparserplugin').add();\n</code></pre></li> <li>Or, parse expression to function object.     <pre><code>var f = scene.plugins.get('rexexpressionparserplugin').compile(expressionString);\n// var value = f(context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ExpressionParserPlugin from 'phaser3-rex-plugins/plugins/expressionparser-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexExpressionParserPlugin',\nplugin: ExpressionParserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add parser     <pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\n</code></pre></li> <li>Or, parse expression to function object.     <pre><code>var f = scene.plugins.get('rexExpressionParserPlugin').compile(expressionString);\n// var value = f(context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ExpressionParser from 'phaser3-rex-plugins/plugins/expressionparser.js';\n</code></pre></li> <li>Add parser     <pre><code>var parser = new ExpressionParser();\n</code></pre></li> </ul>"},{"location":"expression-parser/#create-instance","title":"Create instance","text":"<pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\n</code></pre>"},{"location":"expression-parser/#execute","title":"Execute","text":""},{"location":"expression-parser/#compile-then-execute","title":"Compile then execute","text":"<ol> <li>Compile expression string into function     <pre><code>var f = parser.compile(expressionString);\n</code></pre>     or     <pre><code>var f = scene.plugins.get('rexExpressionParserPlugin').compile(expressionString);\n</code></pre><ul> <li><code>expressionString</code> :<ul> <li>Number : <code>1</code>, <code>1.5</code>, <code>0xf</code>.</li> <li>Variable : <code>a</code>, <code>$a</code>, <code>_a</code>, <code>a.$b._c_</code>, <code>a['b'].c</code></li> <li>Arithmetic : <code>+</code>, <code>-</code>, <code>*</code>, <code>\\</code>, <code>%</code>, <code>(</code>, <code>)</code>, ex : <code>'(a + b.c) * 3 + (2 % 3)'</code>.</li> <li>Boolean : <code>&gt;</code>, <code>&lt;</code>, <code>&gt;=</code>, <code>&lt;=</code>, <code>==</code>, <code>!=</code>, <code>&amp;&amp;</code>, <code>||</code>, ex <code>'(a &gt; 10) &amp;&amp; (a &lt; 30) || (b.c &gt; c)'</code>.</li> <li>Condition : <code>(cond)? v0:v1</code>, ex<code>'(a &gt; b.c)? a:b.c'</code>.</li> <li>Custom method : <code>randomInt(a, b.c)</code>.</li> <li>String concat : <code>'Hello ' + name</code>.</li> </ul> </li> </ul> </li> <li>Invoke function     <pre><code>var value = f(context);\n</code></pre><ul> <li><code>f</code> : Function object from compiled result.</li> <li><code>context</code> : Varables used in expression.     <pre><code>{\na: 10,  // Number\nb: {c: 10},  // Objet with number property\nc: 20,\nrandomInt(a, b) {  // Custom method\nreturn Math.floor(Math.random()*(b-a)+a);\n}\n}\n</code></pre></li> </ul> </li> </ol>"},{"location":"expression-parser/#execute-directly","title":"Execute directly","text":"<pre><code>var value = parser.exec(expressionString, context);\n</code></pre> <p>or</p> <pre><code>var value = parser.exec(f, context);\n</code></pre>"},{"location":"expression-parser/#custom-method","title":"Custom method","text":"<ul> <li>Add method into parser instance     <pre><code>var parser = scene.plugins.get('rexExpressionParserPlugin').add();\nparser.randomInt = function(a, b) {\nreturn Math.floor(Math.random()*(b-a)+a); }\n// var value = parser.exec('randomInt(a, b)', {a:10, b:20});\n</code></pre></li> <li>Declare method into class of parser     <pre><code>class MyParser extends ExpressionParser {\nrandomInt(a, b) {\nreturn Math.floor(Math.random()*(b-a)+a); }\n}\nvar parser = new MyParser();\n// var value = parser.exec('randomInt(a, b)', {a:10, b:20});\n</code></pre></li> <li>Add method into context     <pre><code>var context = {\na: 10,\nb: 20,\nrandomInt(a, b) {  // Custom method\nreturn Math.floor(Math.random()*(b-a)+a);\n}\n}\nvar value = parser.exec('randomInt(a, b)', context);\n</code></pre></li> </ul>"},{"location":"expression-parser/#proxy-as-context","title":"Proxy as context","text":"<p>Proxy  with <code>has</code> and <code>get</code> handlers could be a context.</p> <p>For example, proxy scene data :</p> <pre><code>var context = new Proxy({}, {\nhas(target, key) {\nreturn scene.data.has(key);\n},\nget(target, prop) {\nreturn scene.data.get(prop);\n}\n})\n</code></pre> <p>or</p> <pre><code>var context = scene.plugins.get('rexExpressionParserPlugin').createProxyContext({\nhas(target, key) {\n// return boolean\n},\nget(target, prop) {\n// return any;\n}\n})\n</code></pre>"},{"location":"fadeoutdestroy/","title":"Fade out destroy","text":""},{"location":"fadeoutdestroy/#introduction","title":"Introduction","text":"<p>Fade out game object then destroy it.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"fadeoutdestroy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fadeoutdestroy/#install-plugin","title":"Install plugin","text":""},{"location":"fadeoutdestroy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfadeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfadeplugin.min.js', true);\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = scene.plugins.get('rexfadeplugin').fadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FadePlugin from 'phaser3-rex-plugins/plugins/fade-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFade',\nplugin: FadePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = scene.plugins.get('rexFade').fadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import FadeOutDestroy from 'phaser3-rex-plugins/plugins/fade-out-destroy.js';\n</code></pre></li> <li>Fade-out-destroy     <pre><code>var fade = FadeOutDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"fadeoutdestroy/#fade-out-destroy","title":"Fade-out-destroy","text":"<pre><code>var fade = scene.plugins.get('rexFade').fadeOutDestroy(gameObject, duration);\n</code></pre>"},{"location":"fadeoutdestroy/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>fade.on('complete', function(gameObject, fade){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"fadevolume/","title":"Volume fading","text":""},{"location":"fadevolume/#introduction","title":"Introduction","text":"<p>Fade-in/fade-out volume of sound.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"fadevolume/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fadevolume/#install-plugin","title":"Install plugin","text":""},{"location":"fadevolume/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsoundfadeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsoundfadeplugin.min.js', true);\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = scene.plugins.get('rexsoundfadeplugin').fadeIn(sound, duration);\nvar sound = scene.plugins.get('rexsoundfadeplugin').fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SoundFadePlugin from 'phaser3-rex-plugins/plugins/soundfade-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSoundFade',\nplugin: SoundFadePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration);\nvar sound = scene.plugins.get('rexSoundFade').fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import SoundFade from 'phaser3-rex-plugins/plugins/soundfade.js';\n</code></pre></li> <li>Sound fade-in/fade-out     <pre><code>var sound = SoundFade.fadeIn(sound, duration);\nvar sound = SoundFade.fadeOut(sound, duration);\n</code></pre></li> </ul>"},{"location":"fadevolume/#fade-in","title":"Fade in","text":"<ul> <li>Play and fade in voluem.     <pre><code>var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration);\n// var sound = scene.plugins.get('rexSoundFade').fadeIn(sound, duration, endVolume, startVolume);\n</code></pre><ul> <li><code>sound</code> : Sound instance, or a key of audio cache.</li> </ul> </li> </ul>"},{"location":"fadevolume/#fade-out","title":"Fade out","text":"<ul> <li>Fade out volume then destroy it     <pre><code>scene.plugins.get('rexSoundFade').fadeOut(sound, duration);\n</code></pre><ul> <li><code>sound</code> : Sound instance.</li> </ul> </li> <li>Fade out volume then stop it     <pre><code>scene.plugins.get('rexSoundFade').fadeOut(sound, duration, false);\n</code></pre><ul> <li><code>sound</code> : Sound instance.</li> </ul> </li> </ul>"},{"location":"filechooser/","title":"File chooser","text":""},{"location":"filechooser/#introduction","title":"Introduction","text":"<p>Create a transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>).</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"filechooser/#live-demos","title":"Live demos","text":"<ul> <li>File chooser button</li> <li>Open file chooser dialog</li> </ul>"},{"location":"filechooser/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"filechooser/#install-plugin","title":"Install plugin","text":""},{"location":"filechooser/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfilechooserplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfilechooserplugin.min.js', true);\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = scene.add.rexFileChooser(config);\n</code></pre></li> </ul>"},{"location":"filechooser/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileChooserPlugin from 'phaser3-rex-plugins/plugins/filechooser-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFileChooser',\nplugin: FileChooserPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = scene.add.rexFileChooser(config);\n</code></pre></li> </ul>"},{"location":"filechooser/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileChooser } from 'phaser3-rex-plugins/plugins/filechooser.js';\n</code></pre></li> <li>Add file chooser object     <pre><code>var fileChooser = new FileChooser(config);\nscene.add.existing(fileChooser);\n</code></pre></li> </ul>"},{"location":"filechooser/#add-file-chooser-object","title":"Add file chooser object","text":"<pre><code>var fileChooser = scene.add.rexFileChooser({\naccept: '',\nmultiple: false\n});\n// var fileChooser = scene.add.rexFileChooser(x, y, width, height, config);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> </ul>"},{"location":"filechooser/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFlieChooser extends FileChooser {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var fileChooser = new MyFlieChooser(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"filechooser/#sync","title":"Sync","text":"<p>Sync position, size and origin to another game object.</p> <pre><code>fileChooser.syncTo(gameObject);\n</code></pre>"},{"location":"filechooser/#selected-files","title":"Selected files","text":"<pre><code>var files = fileChooser.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"filechooser/#set-accept-filter","title":"Set accept filter","text":"<pre><code>fileChooser.setAccept(accept);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> </ul>"},{"location":"filechooser/#multiple-files","title":"Multiple files","text":"<ul> <li>Enable     <pre><code>fileChooser.setMultiple();\n</code></pre></li> <li>Disable     <pre><code>fileChooser.setMultiple(false);\n</code></pre></li> </ul>"},{"location":"filechooser/#events","title":"Events","text":"<ul> <li>Selected file(s) changed     <pre><code>fileChooser.on('change', function(fileChooser) {\nvar files = fileChooser.files;\nif (files.length === 0) { // No selected file\nreturn;\n}\n\nvar file = files[0];\nvar url = URL.createObjectURL(file);\n// ...\n})\n</code></pre></li> </ul>"},{"location":"filechooser/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileChooser.loadFile(file, loaderType, key);\n// fileChooser.loadFile(file, loaderType, key, cahceType);\n</code></pre> <p>or</p> <pre><code>fileChooser.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"filechooser/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.revokeObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"filechooser/#open-file-chooser","title":"Open file chooser","text":"<p>Failure</p> <p>This method can't run at ipad.</p> <p>Note</p> <p>Open a file chooser dialog under any touch event. i.e. User can't open file chooser dialog directly.</p> <pre><code>scene.plugins.get('rexFileChooser').open({\n// accept: '',\n// multiple: false,\n// closeDelay: 200\n})\n.then(function(result) {\n// var files = result.files;\n})\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> <li><code>delay</code> : Add a small delay to detect dialog canceled after game focus.<ul> <li>File chooser dialog dose not have <code>cancel</code> event.</li> </ul> </li> <li><code>files</code> : Array of selected files.     <ul> <li>Each file object (<code>files[i]</code>) has properties<ul> <li><code>file.name</code> : File name with file extension.</li> <li><code>file.type</code> : File type. (ex. <code>'image/jpeg'</code>)</li> <li><code>file.size</code> : File size in bytes.</li> <li><code>file.lastModified</code> : Timestamp of last-modified time.</li> <li><code>file.lastModifiedDate</code> : Date object of last-modified time. Equal to <code>new Data(lastModified)</code>.</li> <li>Get object url :     <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> </ul> </li> <li>Length <code>files</code> is 0 : User cancels file chooser dialog.</li> </ul> </li> </ul>"},{"location":"filechooser/#other-properties","title":"Other properties","text":"<p>See dom game object, game object</p>"},{"location":"filechooser/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"filedropzone/","title":"File drop zone","text":""},{"location":"filedropzone/#introduction","title":"Introduction","text":"<p>Create a div element for dropping file(s).</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"filedropzone/#live-demos","title":"Live demos","text":"<ul> <li>Drop text file</li> <li>Drop image file</li> <li>Interactve with other game objects</li> </ul>"},{"location":"filedropzone/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"filedropzone/#install-plugin","title":"Install plugin","text":""},{"location":"filedropzone/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfiledropzoneplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfiledropzoneplugin.min.js', true);\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = scene.add.rexFileDropZone(config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileDropZonePlugin from 'phaser3-rex-plugins/plugins/filedropzone-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n}, // ...\nplugins: {\nglobal: [{\nkey: 'rexFileDropZone',\nplugin: FileDropZonePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = scene.add.rexFileDropZone(config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileDropZone } from 'phaser3-rex-plugins/plugins/filedropzone.js';\n</code></pre></li> <li>Add file-drop-zone object     <pre><code>var fileDropZone = new FileDropZone(config);\nscene.add.existing(fileDropZone);\n</code></pre></li> </ul>"},{"location":"filedropzone/#add-file-drop-zone-object","title":"Add file-drop-zone object","text":"<pre><code>var fileDropZone = scene.add.rexFileDropZone({\n// style: { },\n\n// dropEnable: true,\n// filters: { filterType: (file, files) =&gt; boolean }\n});\n// var fileDropZone = scene.add.rexFileDropZone(x, y, width, height, config);\n</code></pre> <ul> <li><code>style</code> : CSS style of div element.</li> <li><code>dropEnable</code> :<ul> <li><code>true</code> : Fire drop events when dropping files. Default behavior.</li> <li><code>false</code> : Won't fire drop events.</li> </ul> </li> <li><code>filters</code> : Filter methods, optional. For example, image files filter, will fire <code>'drop.image'</code> event     <pre><code>{\nimage: function(file, files) { return file.name.match(/\\.(jpg|jpeg|png|gif)$/i)\n}\n}\n</code></pre></li> </ul>"},{"location":"filedropzone/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFileDropZone extends FileDropZone {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var fileDropZone = new MyFileDropZone(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"filedropzone/#sync","title":"Sync","text":"<p>Sync position, size and origin to another game object.</p> <pre><code>fileDropZone.syncTo(gameObject);\n</code></pre>"},{"location":"filedropzone/#dropped-files","title":"Dropped files","text":"<pre><code>var files = fileDropZone.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"filedropzone/#events","title":"Events","text":"<ul> <li>Drop files     <pre><code>fileDropZone.on('drop', function(fileDropZone) {\nvar files = fileDropZone.files;\n})\n</code></pre></li> <li>Drop filtered files     <pre><code>fileDropZone.on('drop.' + filterType, function(files) {\n})\n</code></pre></li> <li>Drag-enter/drag-leave/drag-over file(s)     <pre><code>fileDropZone.on('dragenter', function(fileDropZone) {\n})\n</code></pre> <pre><code>fileDropZone.on('dragleave', function(fileDropZone) {\n})\n</code></pre> <pre><code>fileDropZone.on('dragover', function(fileDropZone) {\n})\n</code></pre></li> </ul> <p>Warning</p> <p>Game objects under this file drop zone can't receive touch input events.</p>"},{"location":"filedropzone/#enable-drop-events","title":"Enable drop events","text":"<ul> <li>Enable     <pre><code>fileDropZone.setDropEnable();\n// fileDropZone.setDropEnable(true);\n</code></pre></li> <li>Disable     <pre><code>fileDropZone.setDropEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>fileDropZone.toggleDropEnable();\n</code></pre></li> </ul>"},{"location":"filedropzone/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileDropZone.loadFile(file, loaderType, key);\n// fileDropZone.loadFile(file, loaderType, key, cahceType, onComplete);\n</code></pre> <p>or</p> <pre><code>fileDropZone.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>onComplete</code> : Callback invoked when file loaded to cache.</li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"filedropzone/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.revokeObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"filedropzone/#other-properties","title":"Other properties","text":"<p>See dom game object, game object</p>"},{"location":"filedropzone/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"firebase-auth/","title":"Authentication","text":""},{"location":"firebase-auth/#introduction","title":"Introduction","text":"<p>It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-auth/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-auth/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/auth';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\n</code></pre></li> </ol>"},{"location":"firebase-auth/#on-sign-insign-out","title":"On sign-in/sign-out","text":"<pre><code>firebaseApp.auth().onAuthStateChanged(function (user) {\nif (user) {\n// User is signed in.\nvar displayName = user.displayName;\nvar email = user.email;\nvar emailVerified = user.emailVerified;\nvar photoURL = user.photoURL;\nvar isAnonymous = user.isAnonymous;\nvar uid = user.uid;\nvar providerData = user.providerData;\n// ...\n} else {\n// User is signed out.\n// ...\n}\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-facebook","title":"Sign-in with facebook","text":"<pre><code>var provider = new firebase.auth.FacebookAuthProvider();\nfirebaseApp.auth().signInWithPopup(provider).then(function (result) {\n// This gives you a Facebook Access Token. You can use it to access the Facebook API.\nvar token = result.credential.accessToken;\n// The signed-in user info.\nvar user = result.user;\n// ...\n}).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n// The email of the user's account used.\nvar email = error.email;\n// The firebase.auth.AuthCredential type that was used.\nvar credential = error.credential;\n// ...\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-google","title":"Sign-in with Google","text":"<pre><code>var provider = new firebase.auth.GoogleAuthProvider();\nfirebaseApp.auth().signInWithPopup(provider).then(function (result) {\n// This gives you a Google Access Token. You can use it to access the Google API.\nvar token = result.credential.accessToken;\n// The signed-in user info.\nvar user = result.user;\n// ...\nconsole.log(user);\n}).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n// The email of the user's account used.\nvar email = error.email;\n// The firebase.auth.AuthCredential type that was used.\nvar credential = error.credential;\n// ...\n});\n</code></pre>"},{"location":"firebase-auth/#sign-in-with-password","title":"Sign-in with password","text":"<ul> <li>Create new user     <pre><code>firebaseApp.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n});\n</code></pre></li> <li>Sign-in     <pre><code>firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {\n// Handle Errors here.\nvar errorCode = error.code;\nvar errorMessage = error.message;\n});\n</code></pre></li> </ul>"},{"location":"firebase-auth/#sign-out","title":"Sign-out","text":"<pre><code>firebaseApp.auth().signOut();\n</code></pre>"},{"location":"firebase-auth/#current-sign-in-user","title":"Current sign-in user","text":"<pre><code>var user = firebaseApp.auth().currentUser;\nif (user != null) {\nvar name = user.displayName;\nvar email = user.email;\nvar photoUrl = user.photoURL;\nvar emailVerified = user.emailVerified;\nvar uid = user.uid;\n}\n</code></pre>"},{"location":"firebase-auth/#update-email","title":"Update email","text":"<pre><code>user.updateEmail('...').then(function() {\n// Update successful.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-auth/#update-profile","title":"Update profile","text":"<pre><code>user.updateProfile({\ndisplayName: '...',\nphotoURL: '...'\n}).then(function() {\n// Update successful.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-auth/#send-a-verification-email","title":"Send a verification email","text":"<pre><code>user.sendEmailVerification().then(function() {\n// Email sent.\n}).catch(function(error) {\n// An error happened.\n});\n</code></pre>"},{"location":"firebase-broadcast/","title":"Broadcast","text":""},{"location":"firebase-broadcast/#introduction","title":"Introduction","text":"<p>Broadcast real-time messages, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-broadcast/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-broadcast/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-broadcast/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add messager object     <pre><code>var messager = scene.plugins.get('rexfirebaseplugin').add.broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add messager object     <pre><code>var messager = scene.plugins.get('rexFirebase').add.broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Broadcast } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add messager object     <pre><code>var messager = new Broadcast(config);\n</code></pre></li> </ul>"},{"location":"firebase-broadcast/#create-instance","title":"Create instance","text":"<pre><code>var messager = scene.plugins.get('rexFirebase').add.broadcast({\nroot: '',\n// senderID: '',\n// senderName: '',\n// receiverID: '',\n// history: 0\n});\n</code></pre> <ul> <li><code>root</code> : Path of this messager.</li> <li><code>senderID</code> : ID of sender.</li> <li><code>senderName</code> : Name of sender.</li> <li><code>receiverID</code> : ID of receiver/channel.</li> <li><code>history</code> : Stored received (history)  messages in client side.<ul> <li><code>0</code>, or <code>false</code> : No history message stored.</li> <li><code>-1</code>, or <code>true</code> : Infinity history message stored. i.e. store all messages from starting updating.</li> <li>A number larger then <code>0</code> : Length of stored history message.</li> </ul> </li> </ul>"},{"location":"firebase-broadcast/#send-message","title":"Send message","text":"<ol> <li>Set sender in config, or <code>setSender</code> method.     <pre><code>messager.setSender(userID, userName);\n</code></pre>     or     <pre><code>messager.setSender({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID of sender.</li> <li><code>userName</code> : Display name of sender.</li> </ul> </li> <li>Set receiver in config, or <code>setReceiver</code> method.     <pre><code>messager.setReceiver(receiverID);\n</code></pre><ul> <li><code>receiverID</code> : ID of receiver/channel.</li> </ul> </li> <li>Send message to receiverID.     <pre><code>messager.send(message)\n// .then(function() { })\n// .catch(function() { })\n</code></pre><ul> <li><code>message</code> : A string message, or a JSON data.</li> </ul> </li> </ol>"},{"location":"firebase-broadcast/#receive-messages","title":"Receive messages","text":"<ol> <li>Register receive event     <pre><code>messager.on('receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> <li>Set receiver in config, or <code>setReceiver</code> method     <pre><code>messager.setReceiver(receiverID);\n</code></pre><ul> <li><code>receiverID</code> : ID of receiver/channel.</li> </ul> </li> <li>Start receiving     <pre><code>messager.startReceiving();\n</code></pre></li> <li>Stop receive     <pre><code>messager.stopReceiving();\n</code></pre></li> </ol> <p>Only receive messages after invoking <code>startReceiving</code> method. Previous messages won't be got anymore.</p>"},{"location":"firebase-broadcast/#received-messages","title":"Received messages","text":"<p>Received messages will be saved in client side.</p> <ul> <li>Get received (history) messages.     <pre><code>var messages = messager.getHistory();\n</code></pre></li> <li>Clear history messages.     <pre><code>messager.clearHistory();\n</code></pre></li> </ul>"},{"location":"firebase-files/","title":"Files","text":""},{"location":"firebase-files/#introduction","title":"Introduction","text":"<p>Save JSON data, using firebase-firestore.</p> <p>Each owner has several files, each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-files/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-files/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-files/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = scene.plugins.get('rexfirebaseplugin').add.files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = scene.plugins.get('rexFirebase').add.files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Files } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add file-manager object     <pre><code>var fileManager = new Files(config);\n</code></pre></li> </ul>"},{"location":"firebase-files/#create-instance","title":"Create instance","text":"<pre><code>var fileManager = scene.plugins.get('rexFirebase').add.files({\nroot: ''\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of these files.</li> </ul>"},{"location":"firebase-files/#save-file","title":"Save file","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre>     or     <pre><code>fileManager.setOwner({\nuserID: userID\n});\n</code></pre><ul> <li><code>userID</code> : User ID of file owner.</li> </ul> </li> <li>Save header and content data.<ul> <li>Overwrite     <pre><code>fileManager.save(fileID, header, content);\n</code></pre><ul> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>header</code> : Header data for indexing, a JSON object.<ul> <li>Reserve keys : <code>userID</code>, <code>fileID</code>, <code>type</code>, <code>contentDocID</code>. (i.e. don't use these keys)</li> </ul> </li> <li><code>content</code> : Content/body, a JSON object.<ul> <li>Reserve keys : <code>userID</code>, <code>fileID</code>, <code>type</code>. (i.e. don't use these keys)</li> </ul> </li> </ul> </li> <li>Update     <pre><code>fileManager.save(fileID, header, content, true);\n</code></pre></li> </ul> </li> </ol>"},{"location":"firebase-files/#load-headers","title":"Load headers","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre></li> <li>Load all headers of this file owner.     <pre><code>fileManager.loadHeaders()\n.then(function(result) { // var headers = result.headers;\n// var userID = result.userID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var userID = result.userID;\n})\n</code></pre><ul> <li><code>headers</code> : Get header by <code>headers[fileID]</code>, each header contains<ul> <li><code>header.fileID</code> : Unique ID of this file.</li> <li><code>header.userID</code> : User ID of file owner.        </li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-files/#load-file","title":"Load file","text":"<ol> <li>Set file owner.     <pre><code>fileManager.setOwner(userID);\n</code></pre></li> <li>Load file.     <pre><code>fileManager.load(fileID)\n.then(function(result) { // var header = result.header;\n// var content = result.content;\n// var fileID = result.fileID;\n// var userID = result.userID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var fileID = result.fileID;\n// var userID = result.userID;\n})\n</code></pre><ul> <li><code>header</code>, <code>content</code> : Header/content of this file.</li> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>userID</code> : User ID of file owner.</li> </ul> </li> </ol>"},{"location":"firebase-firestore/","title":"Firestore","text":""},{"location":"firebase-firestore/#introduction","title":"Introduction","text":"<p>Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-firestore/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-firestore/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/firestore';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\nvar db = firebaseApp.firestore();\ndb.settings({\ntimestampsInSnapshots: true\n})\n</code></pre></li> </ol>"},{"location":"firebase-firestore/#references","title":"References","text":"<ul> <li>Reference of collection     <pre><code>var collectionRef = db.collection(collectionName);\n</code></pre></li> <li>Reference of document     <pre><code>var docRef = db.collection(collectionName).doc(docName);\n</code></pre></li> </ul>"},{"location":"firebase-firestore/#save","title":"Save","text":"<ul> <li>Add document     <pre><code>db.collection(collectionName).add(doc)      // doc: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Maximum size for a document : 1 MiB (1,048,576 bytes)</li> <li>Set document     <pre><code>db.collection(collectionName).doc(docName).set(keyValues)  // keyValues: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Overwrite document</li> <li>Update data     <pre><code>db.collection(collectionName).doc(docName).update(keyValues)  // keyValues: { ... }\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Batched writes     <pre><code>// Get a new write batch\nvar batch = db.batch();\n\nbatch.set(db.collection(collectionName).doc(docName), keyValues);\nbatch.update(db.collection(collectionName).doc(docName), keyValues);\nbatch.delete(db.collection(collectionName).doc(docName));\n// ...\n\n// Commit the batch\nbatch.commit()\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre>     Maximum document writting in a commit : 500</li> <li>Delete a document     <pre><code>db.collection(collectionName).doc(docName).delete()\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Delete a field     <pre><code>db.collection(collectionName).doc(docName).update({\nkey: firebase.firestore.FieldValue.delete()\n})\n.then(function() { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre></li> <li>Transaction     <pre><code>var docRef = db.collection(collectionName).doc(docName);\ndb.runTransaction(function(transaction) {\n// read-modify-write\n// This code may get re-run multiple times if there are conflicts.\nreturn transaction.get(docRef).then(function(doc) {\n// doc.exists\ntransaction.update(docRef, keyValues);\n});\n})\n.then(function() {\n//console.log(\"Transaction successfully committed!\");\n})\n.catch(function(error) {\n//console.log(\"Transaction failed: \", error);\n});\n</code></pre></li> </ul> <p>Limitation: Writes and transactions section</p>"},{"location":"firebase-firestore/#server-timestamp","title":"Server timestamp","text":"<pre><code>firebase.firestore.FieldValue.serverTimestamp()\n</code></pre>"},{"location":"firebase-firestore/#load","title":"Load","text":"<ul> <li>Get a document     <pre><code>db.collection(collectionName).doc(docName).get()\n.then(function(doc) { /* ... */ })\n.catch(function(error) { /* ... */ });\n</code></pre><ul> <li>doc<ul> <li><code>doc.id</code></li> <li><code>doc.data()</code></li> </ul> </li> </ul> </li> <li>Get all documents     <pre><code>db.collection(collectionName).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li>querySnapshot <ul> <li><code>querySnapshot.docs</code></li> <li><code>querySnapshot.forEach(callback, thisArg)</code></li> <li><code>querySnapshot.empty</code></li> <li><code>querySnapshot.size</code></li> </ul> </li> </ul> </li> <li>Simple queries     <pre><code>db.collection(collectionName).where(key, op, value).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>op</code> : <code>'&gt;'</code>, <code>'=='</code>, <code>'&lt;'</code>, <code>'&gt;='</code>, <code>'&lt;='</code><ul> <li><code>!=</code> : <code>where(key,'&gt;', value).where(key, '&lt;', value)</code></li> </ul> </li> </ul> </li> <li>Compound queries     <pre><code>db.collection(collectionName).where(key0, op0, value0).where(key1, op1, value1).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li>Range filters (<code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>) on only one field</li> </ul> </li> </ul>"},{"location":"firebase-firestore/#paginate","title":"Paginate","text":"<ul> <li>Order, limit     <pre><code>db.collection(collectionName).orderBy(key).limit(count)\n</code></pre><ul> <li>Descending order : <code>orderBy(key, 'desc')</code></li> <li>Order by multiple fields : <code>orderBy(key0).orderBy(key1)</code></li> </ul> </li> <li>Query, order, limit     <pre><code>db.collection(collectionName).where(key, op, value).orderBy(key).limit(count)\n</code></pre><ul> <li>Key of first order must be equal to range comparison (<code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>)</li> </ul> </li> <li>Page<ol> <li>Start at     <pre><code>db.collection(collectionName).orderBy(key).startAt(value).limit(count).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>endAt(value)</code></li> </ul> </li> <li>Next page     <pre><code>var lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];\ndb.collection(collectionName).orderBy(key).startAfter(lastDoc).limit(count).get()\n.then(function(querySnapshot) { /* ... */ })\n.catch(function(error){ /* ... */ });\n</code></pre><ul> <li><code>endBefore(lastDoc)</code></li> </ul> </li> </ol> </li> </ul>"},{"location":"firebase-firestore/#get-realtime-updates","title":"Get realtime updates","text":"<ul> <li>Get updates of a document     <pre><code>var unsubscribe = db.collection(collectionName).doc(docName)\n.onSnapshot(function(doc) { /* ... */ });\n</code></pre></li> <li>Get updates of documents     <pre><code>var unsubscribe = db.collection(collectionName).where(key, op, value)\n.onSnapshot(function(querySnapshot) { /* ... */ });\n</code></pre><ul> <li>Changes     <pre><code>var changes = querySnapshot.docChanges();  // [change]\n</code></pre><ul> <li>Change<ul> <li><code>change.type</code> : <code>'added'</code>, <code>'modified'</code>, <code>'removed'</code></li> <li><code>change.newIndex</code></li> <li><code>change.oldIndex</code></li> </ul> </li> </ul> </li> </ul> </li> <li>Detach a listener     <pre><code>unsubscribe();\n</code></pre></li> <li>Events for metadata changes     <pre><code>var unsubscribe = db.collection(collectionName).doc(docName)\n.onSnapshot({\nincludeMetadataChanges: true    // Listen for document metadata changes\n},\nfunction(doc) { /* ... */ } );\n</code></pre></li> </ul>"},{"location":"firebase-firestore/#indexing","title":"Indexing","text":"<p>Reference</p>"},{"location":"firebase-idalias/","title":"ID-alias","text":""},{"location":"firebase-idalias/#introduction","title":"Introduction","text":"<p>Map an unique ID to another unique ID (alias), using firebase-firestore.</p> <p>Each owner has several files, each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-idalias/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-idalias/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-idalias/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = scene.plugins.get('rexfirebaseplugin').add.idAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = scene.plugins.get('rexFirebase').add.idAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { IdAlias } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add id-alias object     <pre><code>var idAlias = new IdAlias(config);\n</code></pre></li> </ul>"},{"location":"firebase-idalias/#create-instance","title":"Create instance","text":"<pre><code>var idAlias = scene.plugins.get('rexFirebase').add.idAlias({\nroot: ''\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this id-alias.</li> </ul>"},{"location":"firebase-idalias/#random-alias","title":"Random alias","text":"<p>Get alias of an id, or register an alias from a random word.</p> <pre><code>idAlias.getRandomAlias(id, {\ndigits: 10,\ncandidates: '0123456789',\nretry: 1000\n})\n.then(function(result) { // var alias = result.alias;\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre> <ul> <li><code>id</code> : An unique ID.</li> <li><code>digits</code> : String length of alias.</li> <li><code>candidates</code> : Candidate characters.</li> <li><code>retry</code> : Max retry count.</li> </ul>"},{"location":"firebase-idalias/#specific-alias","title":"Specific alias","text":"<ul> <li>Add a specific alias     <pre><code>idAlias.add(id, alias)\n.then(function(result) { // var alias = result.alias;\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre><ul> <li><code>id</code> : An unique ID.</li> <li><code>alias</code> : Another unique ID.</li> </ul> </li> <li>Get ID from alias     <pre><code>idAlias.getId(alias)\n.then(function(result) { // var alias = result.alias;\n// var id = result.id; // Return undefined if alias is not existed.\n})\n.catch(function(error) { })\n</code></pre></li> <li>Get alias from ID     <pre><code>idAlias.getAlias(id)\n.then(function(result) { // var alias = result.alias; // Return undefined if id is not existed.\n// var id = result.id;\n})\n.catch(function(error) { })\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/","title":"Item table","text":""},{"location":"firebase-itemtable/#introduction","title":"Introduction","text":"<p>1d/2d/3d table, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-itemtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-itemtable/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-itemtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.plugins.get('rexfirebaseplugin').add.itemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.plugins.get('rexFirebase').add.itemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { ItemTable } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new ItemTable(config);\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexFirebase').add.itemTable({\nroot: '',\ntype: 3\n});\n</code></pre> <ul> <li><code>root</code> : Path of this item table.</li> <li><code>type</code> : Table type.<ul> <li><code>1</code>, or <code>'1d'</code> : 1d table, indexing by (key0)</li> <li><code>2</code>, or <code>'2d'</code> : 2d table, indexing by (key0, key1)</li> <li><code>3</code>, or <code>'3d'</code> : 3d table, indexing by (key0, key1, key2)</li> </ul> </li> </ul>"},{"location":"firebase-itemtable/#write","title":"Write","text":"<ul> <li>Set data     <pre><code>table.setData(key0, value)\n// table.setData(key0, key1, value)\n// table.setData(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })\n</code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>value</code> : Number, string, or JSON data.</li> </ul> </li> <li>Increase value     <pre><code>table.incValue(key0, value)\n// table.incValue(key0, key1, value)\n// table.incValue(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>value</code> : Number.</li> </ul> </li> <li>Remove key     <pre><code>table.removeData(key0)\n// table.removeData(key0, key1)\n// table.inremoveDatacValue(key0, key1, key2)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> </ul> </li> <li>Batch writing specific values at key pathes     <pre><code>table.updateData({\n`${key0}` : value0,\n`${key0}/${key1}` : value1,\n`${key0}/${key1}/${key2}` : value2,\n...\n})\n.then(function() { })\n.catch(function() { })    </code></pre></li> <li>Transaction, write new value according to latest value     <pre><code>table.transaction(key0, callback)\n// table.transaction(key0, key1, callback)\n// table.transaction(key0, key1, key2, callback)\n.then(function() { })\n.catch(function() { })    </code></pre><ul> <li><code>key0</code>, <code>key1</code>, <code>key2</code> : Any string.</li> <li><code>callback</code> : Write new value according to latest value.     <pre><code>function(preValue) { return newValue; }\n</code></pre></li> </ul> </li> <li>Remove key when current user disconnect     <pre><code>table.removeDataOnDisconnect(key0)\n// table.removeDataOnDisconnect(key0, key1)\n// table.removeDataOnDisconnect(key0, key1, key2)\n.then(function() { })\n.catch(function() { })        </code></pre></li> <li>Set value when current user disconnect     <pre><code>table.setDataOnDisconnect(key0, value)\n// table.setDataOnDisconnect(key0, key1, value)\n// table.setDataOnDisconnect(key0, key1, key2, value)\n.then(function() { })\n.catch(function() { })        </code></pre></li> </ul>"},{"location":"firebase-itemtable/#read","title":"Read","text":"<ul> <li>Start updating     <pre><code>table.startUpdate();\n</code></pre><ul> <li>Trigger <code>'init'</code> event when all data read back.</li> <li><code>table.initialFlag</code> : Return <code>true</code> when all data read back.</li> </ul> </li> <li>Stop updating     <pre><code>table.stopUpdate();\n</code></pre></li> <li>Read data stored in client     <pre><code>var data = table.getData(key0);\n// var data = table.getData(key0, key1);\n// var data = table.getData(key0, key1, key2);\n</code></pre><ul> <li><code>data</code> : Number, string, or JSON data.</li> </ul> </li> <li>Read all data stored in client     <pre><code>var data = table.getData();\n</code></pre><ul> <li><code>data</code> : JSON data.</li> </ul> </li> <li>Clone data stored in client     <pre><code>var data = table.cloneData(key0);\n// var data = table.cloneData(key0, key1);\n// var data = table.cloneData(key0, key1, key2);    \n</code></pre></li> <li>Clone all data stored in client     <pre><code>var data = table.cloneData();\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#events","title":"Events","text":"<ul> <li>Initialize, read all data back after start updating     <pre><code>table.on('init', function(data) { })\n</code></pre><ul> <li><code>data</code> : Table data.</li> <li><code>table.initialFlag</code> will be set to <code>true</code>.</li> </ul> </li> <li>Any value updated     <pre><code>table.on('update', function(data) { })\n</code></pre><ul> <li><code>data</code> : Table data.</li> </ul> </li> </ul>"},{"location":"firebase-itemtable/#1d-table","title":"1d table","text":"<p>1d table, indexing by (key0)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On change key0     <pre><code>table.on('changekey0', function(key0, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#2d-table","title":"2d table","text":"<p>2d table, indexing by (key0, key1)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On add key1     <pre><code>table.on('addkey1', function(key0, key1, value) {  });\n</code></pre></li> <li>On remove key1     <pre><code>table.on('removekey1', function(key0, key1) {  });\n</code></pre></li> <li>On change key1     <pre><code>table.on('changekey1', function(key0, key1, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-itemtable/#3d-table","title":"3d table","text":"<p>3d table, indexing by (key0, key1, key2)</p> <ul> <li>On add key0     <pre><code>table.on('addkey0', function(key0, value) {  });\n</code></pre></li> <li>On remove key0     <pre><code>table.on('removekey0', function(key0) {  });\n</code></pre></li> <li>On add key1     <pre><code>table.on('addkey1', function(key0, key1, value) {  });\n</code></pre></li> <li>On remove key1     <pre><code>table.on('removekey1', function(key0, key1) {  });\n</code></pre></li> <li>On add key2     <pre><code>table.on('addkey2', function(key0, key1, key2, value) {  });\n</code></pre></li> <li>On remove key2     <pre><code>table.on('removekey2', function(key0, key1, key2) {  });\n</code></pre></li> <li>On change key2     <pre><code>table.on('changekey2', function(key0, key1, key2, value) {  });\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/","title":"Leaderboard","text":""},{"location":"firebase-leaderboard/#introduction","title":"Introduction","text":"<p>Descending sort scores, using firebase-firestore.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-leaderboard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-leaderboard/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-leaderboard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = scene.plugins.get('rexfirebaseplugin').add.leaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { LeaderBoard } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add leader-board object     <pre><code>var leaderBoard = new LeaderBoard(config);\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#create-instance","title":"Create instance","text":"<pre><code>var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard({\nroot: '',\n// timeFilters: false,\n// timeFilterType: 'year',\n// pageItemCount: 100,\n// userID: '',\n// userName: '',\n// boardID: undefined,\n// tag: undefined\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this leaderboard.</li> <li><code>timeFilters</code> : Time filter of day/week/month/year.<ul> <li><code>false</code> : Don't use any time filter.</li> <li><code>true</code> : Enable all time filters.</li> <li>JSON object, enable some time filters.     <pre><code>{\nday: true,\nweek: true,\nmonth: true,\nyear: true,\nall: true\n}\n</code></pre></li> </ul> </li> <li><code>timeFilterType</code> : Type of time filter.<ul> <li><code>'day'</code>, or <code>'d'</code> : Filter scores by current day.</li> <li><code>'week'</code>, or <code>'w'</code> : Filter scores by current week. </li> <li><code>'month'</code>, <code>'m'</code> : Filter scores by current month.</li> <li><code>'year'</code>, <code>'y'</code> : Filter scores by current year. Default value.</li> <li><code>'all'</code>, <code>'a'</code> : No time filter to track all scores.</li> </ul> </li> <li><code>pageItemCount</code> : Item count of a page, default value is <code>100</code></li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> <li><code>boardID</code> : Board ID, optional.</li> <li><code>tag</code> : Custom tag, optional.</li> </ul> <p>Time filter enabled</p> <p>Add indexes if time filter is enabled. - <code>tagD</code>(ascending), <code>scoreD</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagW</code>(ascending), <code>scoreW</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagM</code>(ascending), <code>scoreM</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagY</code>(ascending), <code>scoreY</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending) - <code>tagA</code>(ascending), <code>scoreA</code>(descending), <code>boardID</code>(ascending), <code>tag</code>(ascending)  </p>"},{"location":"firebase-leaderboard/#post-score","title":"Post score","text":"<ol> <li>Set user.     <pre><code>leaderBoard.setUser(userID, userName);\n</code></pre>     or     <pre><code>leaderBoard.setUser({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name of user, optional.</li> </ul> </li> <li>Set board property, optional.<ul> <li>Board ID     <pre><code>leaderBoard.setBoardID(boardID);\n</code></pre></li> <li>Custom tag     <pre><code>leaderBoard.setTag(tag);\n</code></pre></li> </ul> </li> <li>Post score     <pre><code>leaderBoard.post(score)\n// leaderBoard.post(score, extraData)\n// leaderBoard.post(score, extraData, timestamp)\n.then(function(record) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>score</code> : A number, scores will be sorted descend.</li> <li><code>extraData</code> : Extra data in JSON format.</li> <li><code>timestamp</code> : Timestamp of posting.<ul> <li><code>undefined</code> : Current time.</li> <li>A number : For debug usage.</li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-leaderboard/#get-my-score","title":"Get my score","text":"<pre><code>leaderBoard.getScore()\n// leaderBoard.getScore(userID)\n.then(function(score) { })\n.catch(function(error) { })\n</code></pre> <ul> <li><code>userID</code> : User ID, optional.<ul> <li><code>undefined</code> : Current user ID.</li> </ul> </li> <li><code>score</code> : Score object.<ul> <li>Time filter enabled :  <code>{userID, scoreD, scoreW, scoreM, scoreY, tagD, tagW, tagM, tagY, tagA}</code><ul> <li><code>scoreD</code>, <code>scoreW</code>, <code>scoreM</code>, <code>scoreY</code>, <code>scoreA</code> : Score of day/week/month/year/all-time.</li> <li><code>tagD</code>, <code>tagW</code>, <code>tagM</code>, <code>tagY</code>, <code>tagA</code> : Time tag of day/week/month/year/all-time.</li> </ul> </li> <li>Time filter disabled : <code>{userID, score}</code></li> </ul> </li> </ul>"},{"location":"firebase-leaderboard/#get-my-rank","title":"Get my rank","text":"<pre><code>leaderBoard.getRank()\n// leaderBoard.getRank(userID)\n.then(function(rank) { })\n.catch(function(error) { })\n</code></pre> <ul> <li><code>userID</code> : User ID, optional.<ul> <li><code>undefined</code> : Current user ID.</li> </ul> </li> <li><code>rank</code> : Rank object. <code>{userID, rank}</code></li> </ul>"},{"location":"firebase-leaderboard/#get-scores","title":"Get scores","text":"<ol> <li>Set board property, optional.<ul> <li>Board ID     <pre><code>leaderBoard.setBoardID(boardID);\n</code></pre></li> <li>Custom tag     <pre><code>leaderBoard.setTag(tag);\n</code></pre></li> </ul> </li> <li>Set time filter, optional.     <pre><code>leaderBoard.setTimeFilterType(type);\n</code></pre><ul> <li><code>type</code> : <ul> <li><code>'day'</code>, or <code>'d'</code> : Filter scores by current day.</li> <li><code>'week'</code>, or <code>'w'</code> : Filter scores by current week.</li> <li><code>'month'</code>, <code>'m'</code> : Filter scores by current month.</li> <li><code>'year'</code>, <code>'y'</code> : Filter scores by current year.</li> <li><code>'all'</code>, <code>'a'</code> : No time filter to track all scores.</li> </ul> </li> </ul> </li> <li>Load scores page by page.<ul> <li>Load first page.     <pre><code>leaderBoard.loadFirstPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Load next page.     <pre><code>leaderBoard.loadNextPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Load previous page.     <pre><code>leaderBoard.loadPreviousPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> <li>Reload current page.     <pre><code>leaderBoard.loadCurrentPage()\n.then(function(scores) { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>scores</code> : An array of score object. Each score object is <code>{userID, userName, socre}</code></li> </ul> </li> </ul> </li> </ol>"},{"location":"firebase-leaderboard/#page-index","title":"Page index","text":"<ul> <li>Current page index     <pre><code>var pageIndex = leaderBoard.pageIndex;\n</code></pre></li> <li>Is first page     <pre><code>var isFirstPage = leaderBoard.isFirstPage;\n</code></pre></li> <li>Is last page     <pre><code>var isLastPage = leaderBoard.isLastPage;\n</code></pre></li> </ul>"},{"location":"firebase-leaderboard/#delete","title":"Delete","text":"<ul> <li>Delete user     <pre><code>leaderBoard.deleteUserScore(userID)\n.then(function(){ })\n.catch(function(){ })\n</code></pre></li> <li>Delete board     <pre><code>leaderBoard.deleteBoard(boardID, tag)\n.then(function(){ })\n.catch(function(){ })\n</code></pre></li> </ul>"},{"location":"firebase-messages/","title":"Messages","text":""},{"location":"firebase-messages/#introduction","title":"Introduction","text":"<p>Store messages in firebase-firestore.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-messages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-messages/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-messages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = scene.plugins.get('rexfirebaseplugin').add.messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = scene.plugins.get('rexFirebase').add.messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { Messages } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add leader-board object     <pre><code>var messages = new Messages(config);\n</code></pre></li> </ul>"},{"location":"firebase-messages/#create-instance","title":"Create instance","text":"<pre><code>var messages = scene.plugins.get('rexFirebase').add.messages({\nroot: '',\n// pageItemCount: 100,\n\n// senderID: '',\n// senderName: '',\n// receiverID: undefined,\n});\n</code></pre> <ul> <li><code>root</code> : Collection name of this messages.</li> <li><code>pageItemCount</code> : Item count of a page, default value is <code>100</code></li> <li><code>senderID</code> : ID of sender.</li> <li><code>senderName</code> : Name of sender, optional.</li> <li><code>receiverID</code> : ID of receiver, optional.</li> </ul>"},{"location":"firebase-messages/#send-message","title":"Send message","text":"<ol> <li>Set sender.     <pre><code>messages.setSender(userID, userName);\n</code></pre>     or     <pre><code>messages.setSender({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name of user, optional.</li> </ul> </li> <li>Set receiver, optional.     <pre><code>messages.setReceiver(userID);\n</code></pre><ul> <li><code>userID</code> : User ID.</li> </ul> </li> <li>Send message     <pre><code>messages.send(message)    .then(function() { })\n.catch(function(error) { })\n</code></pre><ul> <li><code>message</code> : String, number, or JSON object.</li> </ul> </li> </ol>"},{"location":"firebase-messages/#receive-messages","title":"Receive messages","text":"<ol> <li>Set receiverID, optional.     <pre><code>messages.setReceiver(userID)\n</code></pre><ul> <li><code>userID</code> : User ID.</li> </ul> </li> <li>Load previous messages, optional.     <pre><code>messages.loadPreviousMessages()\n.then(function(messageObjs) { })\n.catch(function(error) { })    </code></pre><ul> <li><code>messageObjs</code> : Array of Received message objects<ul> <li><code>messageObj.senderID</code>, <code>messageObj.senderName</code> : Sernder ID and name.</li> <li><code>messageObj.receiverID</code> : Receiver ID, optional.</li> <li><code>messageObj.message</code> : Sent message, a string, number, or JSON object.</li> <li><code>messageObj.timestamp</code> : Server-timestamp.</li> </ul> </li> </ul> </li> <li>Add <code>'receiver'</code> event.     <pre><code>messages.on('receive', function(messageObj) {\n// var senderID = messageObj.senderID;\n// var senderName = messageObj.senderName;\n// var receiverID = messageObj.receiverID;\n// var message = messageObj.message;\n// var timestamp = messageObj.timestamp;\n})\n</code></pre><ul> <li><code>messageObj</code> : Received message object.</li> </ul> </li> <li>Start receiving     <pre><code>messages.startReceiving();\n</code></pre></li> <li>Stop receiving     <pre><code>messages.stopReceiving();\n</code></pre></li> </ol> <p>Received messages will be stored in <code>messages.cacheMessages</code></p>"},{"location":"firebase-onlineuserlist/","title":"Online user list","text":""},{"location":"firebase-onlineuserlist/#introduction","title":"Introduction","text":"<p>Online user list, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-onlineuserlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-onlineuserlist/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-onlineuserlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = scene.plugins.get('rexfirebaseplugin').add.onlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = scene.plugins.get('rexFirebase').add.onlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { OnlineUserList } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add online-user-list object     <pre><code>var userList = new OnlineUserList(config);\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#create-instance","title":"Create instance","text":"<pre><code>var userList = scene.plugins.get('rexFirebase').add.onlineUserList({\nroot: '',\n// maxUsers: 0,\n\n// userID: '',\n// userName: '',\n});\n</code></pre> <ul> <li><code>root</code> : Path of this online user list.</li> <li><code>maxUsers</code>: Maximum users in this list. Set to <code>0</code> to have infinity users.</li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> </ul>"},{"location":"firebase-onlineuserlist/#join","title":"Join","text":"<ol> <li>Set userID and user name.     <pre><code>userList.setUser(userID, userName);\n</code></pre>     or     <pre><code>userList.setUser({\nuserID: userID,\nuserName: userName\n});\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name.</li> </ul> </li> <li>Join list.     <pre><code>userList.join()\n// .then(function() { })\n// .catch(function() { })\n</code></pre></li> </ol>"},{"location":"firebase-onlineuserlist/#leave","title":"Leave","text":"<pre><code>userList.leave()\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#kick-user","title":"Kick user","text":"<pre><code>userList.leave(userID)\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#change-user-name","title":"Change user name","text":"<pre><code>userList.changeUserName(newUserName)\n// .then(function() { })\n// .catch(function() { })\n</code></pre>"},{"location":"firebase-onlineuserlist/#user-list","title":"User list","text":"<ul> <li>Get users in user list     <pre><code>var users = userList.getUsers();\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>Is first user in user list?     <pre><code>var isFirstUser = userList.isFirstUser(userID);\n// var isFirstUser = userList.isFirstUser();  // Current user is first user\n</code></pre></li> <li>User list is full     <pre><code>var isFull = userList.isFull();\n</code></pre></li> <li>Maximun users setting value     <pre><code>var maxUsers = userList.maxUsers;\n</code></pre></li> <li>Current user is in list     <pre><code>var isInList = userList.isInList;\n</code></pre></li> </ul>"},{"location":"firebase-onlineuserlist/#events","title":"Events","text":"<ul> <li>Any user join     <pre><code>userList.on('join', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>Any user leave     <pre><code>userList.on('leave', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>User list updated, includes user join, user leave, and user name changed     <pre><code>userList.on('update', users);\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>User name is changed     <pre><code>userList.on('changename', userID, userName, prevUserName);\n</code></pre></li> </ul>"},{"location":"firebase-overview/","title":"Firebase overview","text":""},{"location":"firebase-overview/#introduction","title":"Introduction","text":"<ul> <li>Home page</li> <li>Available libraries</li> </ul>"},{"location":"firebase-overview/#usage","title":"Usage","text":""},{"location":"firebase-overview/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-firestore.js\"&gt;&lt;/script&gt;        \n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Get firebase plugin     <pre><code>var rexFireBase = scene.plugins.get('rexfirebaseplugin');\n</code></pre></li> </ul>"},{"location":"firebase-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Get firebase plugin     <pre><code>var rexFireBase = scene.plugins.get('rexFirebase');\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/","title":"Single room","text":""},{"location":"firebase-singleroom/#introduction","title":"Introduction","text":"<p>Chat room, using firebase-database.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"firebase-singleroom/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"firebase-singleroom/#install-plugin","title":"Install plugin","text":""},{"location":"firebase-singleroom/#load-minify-file","title":"Load minify file","text":"<ul> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add single-room object     <pre><code>var room = scene.plugins.get('rexfirebaseplugin').add.singleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFirebase',\nplugin: FirebasePlugin,\nstart: true\n}]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Add single-room object     <pre><code>var room = scene.plugins.get('rexFirebase').add.singleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add Firebase SDKs <pre><code>&lt;body&gt;\n    &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;\n    &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-app.js\"&gt;&lt;/script&gt;\n    &lt;!-- Add Firebase products that you want to use --&gt;\n    &lt;script src=\"/__/firebase/7.7.0/firebase-database.js\"&gt;&lt;/script&gt;\n&lt;/body&gt;    \n</code></pre></li> <li>Initialize firebase application.     <pre><code>firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n})\n</code></pre></li> <li>Import class     <pre><code>import { SingleRoom } from 'phaser3-rex-plugins/plugins/firebase-components.js';\n</code></pre></li> <li>Add single-room object     <pre><code>var room = new SingleRoom(config);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#create-instance","title":"Create instance","text":"<pre><code>var room = scene.plugins.get('rexFirebase').add.singleRoom({\nroot: '',\n// maxUsers: 0,\n// userID: '',\n// userName: '',\n// broadcast: true,\n// tables: undefined,\n\n});\n</code></pre> <ul> <li><code>root</code> : Path of this room.</li> <li><code>maxUsers</code>: Maximum users in this list. Set to <code>0</code> to have infinity users.</li> <li><code>userID</code> : ID of user.</li> <li><code>userName</code> : Name of user.</li> <li><code>broadcast</code> : Broadcast chat messages.<ul> <li><code>true</code> : Enable broadcasting, without storing received (history) messages. Default behavior.</li> <li><code>false</code> : Disable broadcasting.</li> <li>A JSON object :     <pre><code>{\nhistory: 0\n}\n</code></pre><ul> <li><code>history</code> : Stored received (history) messages in client side.<ul> <li><code>0</code>, or <code>false</code> : No history message stored.</li> <li><code>-1</code>, or <code>true</code> : Infinity history message stored. i.e. store all messages from starting updating.</li> <li>A number larger then <code>0</code> : Length of stored history message.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>tables</code> : Configuration of tables.<ul> <li><code>undefined</code> : No table.</li> <li>Array of table-config JSON object for each table.     <pre><code>[\n{\nkey: tableKey,\ntype: '1d'\n},\n{\n...\n}\n]\n</code></pre><ul> <li><code>key</code> : Unique name of this table.</li> <li><code>type</code> : Table type.<ul> <li><code>1</code>, or <code>'1d'</code> : 1d table, indexing by (key0)</li> <li><code>2</code>, or <code>'2d'</code> : 2d table, indexing by (key0, key1)</li> <li><code>3</code>, or <code>'3d'</code> : 3d table, indexing by (key0, key1, key2)</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"firebase-singleroom/#join-room","title":"Join room","text":"<ol> <li>Set userID and user name.     <pre><code>room.setUser(userID, userName);\n</code></pre><ul> <li><code>userID</code> : User ID.</li> <li><code>userName</code> : Display name.</li> </ul> </li> <li>Join room.     <pre><code>room.joinRoom();\n</code></pre></li> </ol>"},{"location":"firebase-singleroom/#leave-room","title":"Leave room","text":"<pre><code>room.leaveRoom();\n</code></pre>"},{"location":"firebase-singleroom/#kick-user","title":"Kick user","text":"<pre><code>room.kickUser(userID);\n</code></pre>"},{"location":"firebase-singleroom/#user-list","title":"User list","text":"<ul> <li>Get users in room(user list)     <pre><code>var users = room.getUsers();\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>Is first user in room(user list)?     <pre><code>var isFirstUser = room.isFirstUser(userID);\n// var isFirstUser = room.isFirstUser();  // Current user is first user\n</code></pre></li> <li>Room(user list) is full     <pre><code>var isFull = room.isFull();\n</code></pre></li> <li>Maximun users setting value     <pre><code>var maxUsers = room.maxUsers;\n</code></pre></li> <li>Current user is in room(user list)     <pre><code>var isInRoom = room.isInRoom();\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#send-message","title":"Send message","text":"<pre><code>room.broadcast.send(message);\n</code></pre> <ul> <li><code>message</code> : A string message, or a JSON data.</li> </ul>"},{"location":"firebase-singleroom/#receive-messages","title":"Receive messages","text":"<ol> <li>Register receive event     <pre><code>room.on('broadcast.receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> </ol> <p>Only receive messages after joined room. Previous messages won't be got anymore.</p>"},{"location":"firebase-singleroom/#received-messages","title":"Received messages","text":"<p>Received messages will be saved in client side.</p> <ul> <li>Get received (history) messages.     <pre><code>var messages = room.broadcast.getHistory();\n</code></pre></li> <li>Clear history messages.     <pre><code>room.broadcast.clearHistory();\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#change-user-name","title":"Change user name","text":"<pre><code>room.changeUserName(newUserName);\n</code></pre>"},{"location":"firebase-singleroom/#tables","title":"Tables","text":"<ul> <li>Get table     <pre><code>var table = room.getTable(key);\n</code></pre><ul> <li><code>key</code> : Unique name of this table.</li> </ul> </li> </ul>"},{"location":"firebase-singleroom/#write","title":"Write","text":"<p>See here</p>"},{"location":"firebase-singleroom/#read","title":"Read","text":"<p>See here</p>"},{"location":"firebase-singleroom/#events","title":"Events","text":""},{"location":"firebase-singleroom/#user-list-events","title":"User list events","text":"<ul> <li>Any user join     <pre><code>room.on('userlist.join', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>Any user leave     <pre><code>room.on('userlist.leave', user);\n</code></pre><ul> <li><code>user</code> : <code>{userID, userName}</code></li> </ul> </li> <li>User list updated, includes user join, user leave, and user name changed     <pre><code>room.on('userlist.update', users);\n</code></pre><ul> <li><code>users</code> : Array of user <code>{userID, userName}</code></li> </ul> </li> <li>User name is changed     <pre><code>room.on('userlist.changename', userID, userName, prevUserName);\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#broadcast-events","title":"Broadcast events","text":"<ul> <li>Receive message     <pre><code>room.on('broadcast.receive', function(data){\n// var senderID = data.senderID;\n// var senderName = data.senderName;\n// var message = data.message;\n})\n</code></pre></li> </ul>"},{"location":"firebase-singleroom/#table-events","title":"Table events","text":"<p>Event names of each table indexed by key</p> <ul> <li><code>init</code> : <code>tables.${key}.init</code></li> <li><code>update</code> : <code>tables.${key}.update</code></li> <li><code>addkey0</code> : <code>tables.${key}.addkey0</code></li> <li><code>removekey0</code> : <code>tables.${key}.removekey0</code></li> <li><code>changekey0</code> : <code>tables.${key}.changekey0</code></li> <li><code>addkey1</code> : <code>tables.${key}.addkey1</code></li> <li><code>removekey1</code> : <code>tables.${key}.removekey1</code></li> <li><code>changekey1</code> : <code>tables.${key}.changekey1</code></li> <li><code>addkey2</code> : <code>tables.${key}.addkey2</code></li> <li><code>removekey2</code> : <code>tables.${key}.removekey2</code></li> <li><code>changekey2</code> : <code>tables.${key}.changekey2</code></li> </ul>"},{"location":"firebase-storage/","title":"Storage","text":""},{"location":"firebase-storage/#introduction","title":"Introduction","text":"<p>It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.</p> <ul> <li>Author: Firebase</li> </ul>"},{"location":"firebase-storage/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p>"},{"location":"firebase-storage/#setup","title":"Setup","text":"<ol> <li>Import firestore     <pre><code>import firebase from 'firebase/app';\nimport 'firebase/storage';\n</code></pre>     Firebase has been included in package.json.</li> <li>Initialize     <pre><code>var firebaseApp = firebase.initializeApp({\napiKey: '...',\nauthDomain: '...',\ndatabaseURL: '...',\nprojectId: '...',\nstorageBucket: '...',\nmessagingSenderId: '...'\n});\nvar storageRef = firebaseApp.storage().ref();\n</code></pre></li> </ol>"},{"location":"firebase-storage/#upload-string","title":"Upload string","text":"<ul> <li>Upload string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content)\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload base64 formatted string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'base64')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload base64url formatted string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'base64url')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> <li>Upload data URL string     <pre><code>var fileRef = storageRef.child('path/to/filename');\nvar uploadTask = fileRef.putString(content, 'data_url')\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre></li> </ul>"},{"location":"firebase-storage/#upload-image","title":"Upload image","text":"<ol> <li>Get image from image texture <pre><code>var image = scene.textures.get(key).getSourceImage();\n</code></pre></li> <li>Copy image to canvas    <pre><code>var canvas = CanvasPool.create(scene, image.width, image.height);\nvar ctx = canvas.getContext('2d');\nctx.drawImage(image, 0, 0, image.width, image.height);\n</code></pre></li> <li>Get blob from canvas, then upload this blob.     <pre><code>var uploadTask;\ncanvasToBlob(canvas)\n.then(function(blob) {\nvar metadata = {\ncontentType: 'image/jpeg',\n};        var fileRef = storageRef.child('path/to/filename');\nuploadTask = fileRef.put(blob, metadata);\nreturn uploadTask;\n})\n.then(function (snapshot) {})\n.catch(function (error) {});\n</code></pre>     Reference: canvasToBlob</li> <li>Free canvas    <pre><code>CanvasPool.remove(canvas);\n</code></pre></li> </ol>"},{"location":"firebase-storage/#upload-task","title":"Upload task","text":"<ul> <li>Pause task     <pre><code>uploadTask.pause();\n</code></pre></li> <li>Resume task     <pre><code>uploadTask.resume();\n</code></pre></li> <li>Cancel task     <pre><code>uploadTask.cancel();\n</code></pre></li> <li>Monitor progress     <pre><code>uploadTask.on('state_changed', function(snapshot){\n// Observe state change events such as progress, pause, and resume\nvar progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;\nswitch (snapshot.state) {\ncase firebase.storage.TaskState.PAUSED: // or 'paused'\nconsole.log('Upload is paused');\nbreak;\ncase firebase.storage.TaskState.RUNNING: // or 'running'\nconsole.log('Upload is running');\nbreak;\n}\n},\nfunction(error) {\n// Handle unsuccessful uploads\n// https://firebase.google.com/docs/storage/web/handle-errors\nswitch (error.code) {\ncase 'storage/unauthorized':\n// User doesn't have permission to access the object\nbreak;\ncase 'storage/canceled':\n// User canceled the upload\nbreak;\ncase 'storage/unknown':\n// Unknown error occurred, inspect error.serverResponse\nbreak;\n}\n},\nfunction() {\n// Handle successful uploads on complete\n// Get download url\nuploadTask.snapshot.ref.getDownloadURL()\n.then(function(url) {\nconsole.log('File available at', url);\n})\n.catch(function (error) {});\n}\n);\n</code></pre></li> </ul>"},{"location":"firebase-storage/#download-file","title":"Download file","text":"<ol> <li>Get download url     <pre><code>var fileRef = storageRef.child('path/to/filename');\nfileRef.getDownloadURL()\n.then(function(url) {})\n.catch(function (error) {});\n</code></pre></li> <li>Download file by loader</li> </ol>"},{"location":"firebase-storage/#delete-file","title":"Delete file","text":"<pre><code>var fileRef = storageRef.child('path/to/filename');\nfileRef.delete()\n.then(function() {})\n.catch(function(error) {});\n</code></pre>"},{"location":"flash/","title":"Flash","text":""},{"location":"flash/#introduction","title":"Introduction","text":"<p>Flashing (set invisible then visible) game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"flash/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"flash/#install-plugin","title":"Install plugin","text":""},{"location":"flash/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexflashplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexflashplugin.min.js', true);\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = scene.plugins.get('rexflashplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FlashPlugin from 'phaser3-rex-plugins/plugins/flash-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFlash',\nplugin: FlashPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = scene.plugins.get('rexFlash').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Flash from 'phaser3-rex-plugins/plugins/flash.js';\n</code></pre></li> <li>Add flash behavior     <pre><code>var flash = new Flash(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flash/#create-instance","title":"Create instance","text":"<pre><code>var flash = scene.plugins.get('rexFlash').add(gameObject, {\n// duration: 500,\n// repeat: 2\n});\n</code></pre> <ul> <li><code>duration</code> : Duration of invisible(50%) and visible(50%), in millisecond.</li> <li><code>repeat</code> : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once)</li> </ul>"},{"location":"flash/#start-flashing","title":"Start flashing","text":"<pre><code>flash.flash();\n// flash.flash(duration, repeat);\n</code></pre> <p>or</p> <pre><code>flash.flash({\nduration: 500,\nrepeat: 2\n});\n</code></pre>"},{"location":"flash/#stop-flashing","title":"Stop flashing","text":"<pre><code>flash.stop();\n</code></pre>"},{"location":"flash/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>flash.setEnable();\n</code></pre>     or     <pre><code>flash.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>flash.setEnable(false);\n</code></pre>     or     <pre><code>flash.enable = false;\n</code></pre></li> </ul>"},{"location":"flash/#set-duration","title":"Set duration","text":"<pre><code>flash.setDuration(duration);\n// flash.duration = duration;\n</code></pre>"},{"location":"flash/#set-repeat","title":"Set repeat","text":"<pre><code>flash.setRepeat(repeat);\n// flash.repeat = repeat;\n</code></pre>"},{"location":"flash/#events","title":"Events","text":"<ul> <li>On reached target     <pre><code>flash.on('complete', function(flash, gameObject){});\n</code></pre></li> </ul>"},{"location":"flash/#status","title":"Status","text":"<ul> <li>Is flashing     <pre><code>var isRunning = flash.isRunning;\n</code></pre></li> </ul>"},{"location":"flip/","title":"Flip","text":""},{"location":"flip/#introduction","title":"Introduction","text":"<p>Flipping game object to another face by scaling width/height.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"flip/#live-demos","title":"Live demos","text":"<ul> <li>Flip image</li> <li>Flip ui</li> </ul>"},{"location":"flip/#usage","title":"Usage","text":"<p>Sample code, Sample code-2</p>"},{"location":"flip/#install-plugin","title":"Install plugin","text":""},{"location":"flip/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexflipplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexflipplugin.min.js', true);\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = scene.plugins.get('rexflipplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FlipPlugin from 'phaser3-rex-plugins/plugins/flip-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFlip',\nplugin: FlipPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = scene.plugins.get('rexFlip').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Flip from 'phaser3-rex-plugins/plugins/flip.js';\n</code></pre></li> <li>Add flip behavior     <pre><code>var flip = new Flip(gameObject, config);\n</code></pre></li> </ul>"},{"location":"flip/#create-instance","title":"Create instance","text":"<pre><code>var flip = scene.plugins.get('rexFlip').add(gameObject, {\nface: 'back',\nfront: { key, frame }, // key, or callback\nback: { key, frame },  // key, or callback\n\n// orientation: 0, // 0|'x'|1|'y'\n// duration: 500,\n// delay: 0,\n// ease: 'Sine',\n});\n</code></pre> <ul> <li><code>face</code> : Initial face.<ul> <li><code>0</code>, <code>'front'</code> : Front face.</li> <li><code>1</code>, <code>'back'</code> : Back face.</li> </ul> </li> <li><code>front</code>, <code>back</code> : Texture of front/back face.<ul> <li><code>undefined</code> : Use current texture key, or frame name</li> <li><code>key</code> : A string for texture key.</li> <li><code>{key, frame}</code>, or <code>{frame}</code> : A texture key and frame name</li> <li><code>callback</code> : Configure game object via callback.     <pre><code>function(gameObject) {\n}\n</code></pre></li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>0</code>, <code>'x'</code>, or <code>'horizontal'</code> : Horizontal flipping.</li> <li><code>1</code>, <code>'y'</code>, or <code>'vertical'</code> : Vertical flipping.</li> </ul> </li> <li><code>duration</code> : Duration of flipping, in millisecond.</li> <li><code>delay</code> : Initial delay</li> <li><code>ease</code> Ease function. Default value is <code>'Sine'</code>.</li> </ul>"},{"location":"flip/#start-flipping","title":"Start flipping","text":"<pre><code>flip.flip();\n// flip.flip(duration);\n</code></pre>"},{"location":"flip/#stop-flipping","title":"Stop flipping","text":"<pre><code>flip.stop();\n</code></pre>"},{"location":"flip/#set-duration","title":"Set duration","text":"<pre><code>flip.setDuration(duration);\n// flip.duration = duration;\n</code></pre>"},{"location":"flip/#set-ease","title":"Set ease","text":"<pre><code>flip.setEase(ease);\n// flip.ease = ease;\n</code></pre>"},{"location":"flip/#faces","title":"Faces","text":""},{"location":"flip/#current-face","title":"Current face","text":"<ul> <li>Get     <pre><code>var face = flip.face;\n</code></pre><ul> <li><code>0</code> : Front face</li> <li><code>1</code> : Back face</li> </ul> </li> <li>Set     <pre><code>flip.setFace(face);\n// flip.face = face;\n</code></pre><ul> <li><code>0</code>, <code>'front'</code> : Front face.</li> <li><code>1</code>, <code>'back'</code> : Back face.</li> </ul> </li> <li>Toggle face     <pre><code>flip.toggleFace();\n</code></pre></li> </ul>"},{"location":"flip/#set-texture-of-face","title":"Set texture of face","text":"<ul> <li>Front face     <pre><code>flip.setFrontFace(key, frame);\n</code></pre>     or     <pre><code>flip.setFrontFace(callback);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(gameObject) {\n// ...\n}\n</code></pre></li> </ul> </li> <li>Back face     <pre><code>flip.setBackFace(key, frame);\n</code></pre>     or     <pre><code>flip.setBackFace(callback);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(gameObject) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"flip/#events","title":"Events","text":"<ul> <li>On flipping complete     <pre><code>flip.on('complete', function(gameObject, flip){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"flip/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = flip.isRunning;\n</code></pre></li> </ul>"},{"location":"format/","title":"Format","text":""},{"location":"format/#introduction","title":"Introduction","text":"<p>Format string with variables, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"format/#usage","title":"Usage","text":"<p>Replace <code>%x</code> from an array. <code>x</code> starts from <code>1</code>.</p> <pre><code>// const Format = Phaser.Utils.String.Format;\nvar template = 'hello, %1';\nvar view = ['rex'];\nvar result = Format(template, view);\n</code></pre>"},{"location":"fsm/","title":"FSM","text":""},{"location":"fsm/#introduction","title":"Introduction","text":"<p>Finite state machine.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"fsm/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fsm/#install-plugin","title":"Install plugin","text":""},{"location":"fsm/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfsmplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfsmplugin.min.js', true);\n</code></pre></li> <li>Add FSM object     <pre><code>var states = scene.plugins.get('rexfsmplugin').add(config);\n</code></pre></li> </ul>"},{"location":"fsm/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FSMPlugin from 'phaser3-rex-plugins/plugins/fsm-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFSM',\nplugin: FSMPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add FSM object     <pre><code>var states = scene.plugins.get('rexFSM').add(config);\n</code></pre></li> </ul>"},{"location":"fsm/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import FSM from 'phaser3-rex-plugins/plugins/fsm.js';\n</code></pre></li> <li>Add FSM object     <pre><code>var states = new FSM(config);\n</code></pre></li> </ul>"},{"location":"fsm/#create-instance","title":"Create instance","text":""},{"location":"fsm/#create-by-config","title":"Create by config","text":"<pre><code>var states = scene.plugins.get('rexFSM').add({\nstart: 'A',   // default: undefined\nstates: {\nA: {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n},\ninit: function() {},\nextend: {\ni: 0,\nname: 'abc'\n// ...\n},\nenable: true,\nscene: undefined,\neventEmitter: undefined\n});\n</code></pre> <ul> <li><code>start</code>: Initial state.</li> <li><code>states</code>: Define states.<ul> <li>stateName<ul> <li><code>next</code>: String of next state, or a callback to get next state.</li> <li><code>enter</code>: Callback when enter state.</li> <li><code>exit</code>: Callback when exit state.</li> <li><code>update</code>, <code>preupdate</code>, <code>postupdate</code> : Callback invoked by scene's <code>'update'</code>, <code>'preupdate'</code>, <code>'postupdate'</code> events.</li> </ul> </li> </ul> </li> <li><code>init</code>: Initial callback when creating instance.</li> <li><code>extend</code>: Inject key-value pairs into instance.</li> <li><code>enable</code>: Set <code>false</code> to block any state changing.</li> <li><code>scene</code> : Scene object for startUpdate, startPreUpdate, startPostUpdate method. Optional.</li> <li><code>eventEmitter</code><ul> <li><code>undefined</code> : Create a private event emitter, default value.</li> <li><code>false</code> : Don't add any event emitter, i.e. no event will be fired.</li> <li>Event emitter object : Fire event through this event emitter.</li> </ul> </li> </ul>"},{"location":"fsm/#inheritance","title":"Inheritance","text":"<ol> <li>Create new class     <pre><code>class State extends FSM {\nconstructor() {\nsuper();\n}\n\nnext_A() { return 'B' }\n\nenter_A() { /* ... */ }\n\nexit_A() { /* ... */ }\n}\n</code></pre>     Members:         - <code>next_</code> + stateName: Callback to get next state.         - <code>enter_</code> + stateName: Callback when enter state.         - <code>exit_</code> + stateName: Callback when exit state.</li> <li>Create instance     <pre><code>var states = new State();\n</code></pre></li> </ol>"},{"location":"fsm/#read-state","title":"Read state","text":"<ul> <li>Current state     <pre><code>var curState = states.state;\n</code></pre></li> <li>Previous state     <pre><code>var preState = states.prevState;\n</code></pre></li> </ul>"},{"location":"fsm/#start-at-state","title":"Start at state","text":"<pre><code>states.start(newState);\n</code></pre> <p>Note</p> <p>Set new state without triggering any state-changing callbacks or events.</p>"},{"location":"fsm/#next-state","title":"Next state","text":"<pre><code>graph TB\n\nnext[\"states.next()\"] --&gt; next_A[\"states.next_A()&lt;br&gt;return 'B'\"]\n\nnext_A --&gt; eventStateChange[\"states.emit('statechange', states)&lt;br&gt;states.prevState -&gt; states.state\"]\n\nsubgraph State changing\n\neventStateChange --&gt; exit_A[\"states.exit_A()\"]\nexit_A --&gt; eventExitA[\"states.emit('exit_A', states)\"]\n\neventExitA --&gt; enter_B[\"states.enter_B()\"]\nenter_B --&gt; eventEnterB[\"states.emit('enter_B', states)\"]\n\nsubgraph Exit\nexit_A\neventExitA\nend\n\nsubgraph Enter\nenter_B\neventEnterB\nend\n\nend\n\ngoto[\"states.goto('B')\"] --&gt; eventStateChange\n\nsubgraph Request\n\nsubgraph Next\nnext\nnext_A\nend\n\nsubgraph Goto\ngoto\nend\n\nend</code></pre>"},{"location":"fsm/#request","title":"Request","text":"<ul> <li>Get next state by callback     <pre><code>states.next();    // nextState = states.next_A()    \n</code></pre></li> <li>Goto state     <pre><code>states.goto(nextState);\n// states.state = nextState;\n</code></pre></li> </ul>"},{"location":"fsm/#state-changing","title":"State-changing","text":"<p>These callbacks or events will be triggered if state is changing.</p> <p>For example, state is changing from 'A' to 'B'.</p> <ol> <li>event <code>statechange</code> <pre><code>states.on('statechange', function(states) {\nconsole.log( states.prevState + '-&gt;' + states.state );\n});\n</code></pre></li> <li>callback <code>states.exit_A</code></li> <li>event <code>exit_A</code> <pre><code>states.on('exit_A', function(states) {\n/*...*/\n});\n</code></pre></li> <li>callback <code>states.enter_B</code></li> <li>event <code>enter_B</code> <pre><code>states.on('enter_B', function(states) {\n/*...*/\n});\n</code></pre></li> </ol>"},{"location":"fsm/#enable","title":"Enable","text":"<pre><code>states.setEnable();\n// states.setEnable(false); // disable\n</code></pre> <p>or</p> <pre><code>states.toggleEnable();\n</code></pre> <p><code>states.next()</code> and <code>states.goto()</code> will be ignored if disabled.</p>"},{"location":"fsm/#update","title":"Update","text":"<ul> <li>Start     <pre><code>states.startUpdate();\nstates.startPreUpdate();\nstates.startPostUpdate();\n// Assume that `scene` is assigned in config of constructor\n</code></pre>     or     <pre><code>states.startUpdate(scene);\nstates.startPreUpdate(scene);\nstates.startPostUpdate(scene);\n</code></pre><ul> <li><code>scene</code> : Scene object</li> </ul> </li> <li>Stop     <pre><code>states.stopUpdate();\nstates.stopPreUpdate();\nstates.stopPostUpdate();\n</code></pre></li> </ul>"},{"location":"fsm/#add-new-state","title":"Add new state","text":"<p><pre><code>states.addState(name, {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n})\n</code></pre> <pre><code>states.addState({\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n})\n</code></pre></p> <p>or</p> <p><pre><code>states.addStates({\n'A' : {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n})\n</code></pre> <pre><code>states.addStates([\n{\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {},\nupdate: function(time, delta) {},\npreupdate: function(time, delta) {},\npostupdate: function(time, delta) {},\n},\n// ...\n]);\n</code></pre></p>"},{"location":"fullscreen/","title":"Full screen","text":""},{"location":"fullscreen/#introduction","title":"Introduction","text":"<p>Enable or disable full screen mode, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"fullscreen/#usage","title":"Usage","text":""},{"location":"fullscreen/#enabledisable","title":"Enable/disable","text":"<p>Under any input event (touch or keyboard)</p> <pre><code>gameObject.setInteractive().on('pointerdown', function() {\nif (scene.scale.isFullscreen) {\nscene.scale.stopFullscreen();\n// On stop fulll screen\n} else {\nscene.scale.startFullscreen();\n// On start fulll screen\n}\n});\n</code></pre> <p>Fire one of these events</p> <ul> <li><code>'fullscreenunsupported'</code> : Tried to enter fullscreen mode, but it is unsupported by the browser.</li> <li><code>'enterfullscreen'</code> : Entered fullscreen mode successfully.</li> <li><code>'fullscreenfailed'</code> : Tried to enter fullscreen mode but failed.</li> </ul>"},{"location":"fullscreen/#toggle","title":"Toggle","text":"<p>Under any input event (touch or keyboard)</p> <pre><code>gameObject.setInteractive().on('pointerdown', function() {\nscene.scale.toggleFullscreen();\nif (scene.scale.isFullscreen) {\n// On start fulll screen\n} else {\n// On stop fulll screen\n}\n});\n</code></pre> <ul> <li>Fire <code>'fullscreenunsupported'</code> or <code>'enterfullscreen'</code> event.</li> </ul>"},{"location":"fullscreen/#state","title":"State","text":"<ul> <li>Is in full screen mode     <pre><code>var isFullScreen = scene.scale.isFullscreen;\n</code></pre></li> <li>Support full screen     <pre><code>var supported = Phaser.Device.Fullscreen.available;\n</code></pre></li> </ul>"},{"location":"fullscreen/#events","title":"Events","text":"<ul> <li>Full screen mode unsupported     <pre><code>scene.scale.on('fullscreenunsupported', function() {});\n</code></pre></li> <li>Enter full screen mode     <pre><code>scene.scale.on('enterfullscreen', function() {});\n</code></pre></li> </ul>"},{"location":"fullscreen/#with-dom-game-object","title":"With DOM game object","text":"<p>Set <code>gameConfig.fullscreenTarget</code> to parent id.</p> <pre><code>var config = {\nparent: parentDivID,\nfullscreenTarget: parentDivID\n};\n\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"fuzzy/","title":"Fuzzy","text":""},{"location":"fuzzy/#introduction","title":"Introduction","text":"<p>A wrap of fuzzy logic (MIT license).</p> <ul> <li>Author of wrap : Rex , Core API : Michael Herzog</li> <li>Member of scene, or game object</li> </ul>"},{"location":"fuzzy/#live-demos","title":"Live demos","text":"<ul> <li>Fuzzy</li> </ul>"},{"location":"fuzzy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"fuzzy/#install-plugin","title":"Install plugin","text":""},{"location":"fuzzy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfuzzyplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfuzzyplugin.min.js', true);\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = scene.plugins.get('rexfuzzyplugin').add(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GashaponPlugin from 'phaser3-rex-plugins/plugins/fuzzy-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGashapon',\nplugin: GashaponPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = scene.plugins.get('rexFuzzy').add(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import BuildFuzzyModule from 'phaser3-rex-plugins/plugins/fuzzy.js';\n</code></pre></li> <li>Add fuzzy module object     <pre><code>var fuzzyModule = BuildFuzzyModule(config);\n</code></pre></li> </ul>"},{"location":"fuzzy/#create-instance","title":"Create instance","text":"<pre><code>var fuzzyModule = scene.plugins.get('rexFuzzy').add(`\n// Declare fuzzy sets\nFuzzySetName : left, middle, right, setType\nFuzzySetName : left, middle, right\nFuzzySetName : left, right\n\n// Declare rules\nFuzzySetNameA =&gt; FuzzySetNameT\nFuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT\nFuzzySetNameA or FuzzySetNameB =&gt; FuzzySetNameT\nFuzzySetNameA or (FuzzySetNameA and FuzzySetNameB) =&gt; FuzzySetNameT\n\n// More comment lines...\n`);\n</code></pre> <ul> <li><code>config</code> can be a multiple lines string, or a plain object<ul> <li>A multiple lines string contains<ul> <li><code>FuzzySetName : left, middle, right, setType</code> : A line with ':', declare a fuzzy set.<ul> <li><code>FuzzySetName</code> : Fuzzy set name in one of these format<ul> <li>Variable name with postfix <code>'+'</code>, or <code>'-'</code>. For example, <code>HP-</code>, <code>HP</code>, <code>HP+</code>, <code>HP--</code>, <code>HP++</code>, the variable name is <code>HP</code>.</li> <li><code>variableName.setName</code>. For example, <code>DIST.near</code>, <code>DIST.middle</code>, <code>DIST.far</code>, the variable name is <code>DIST</code>.<ul> <li>Variable name and set name are composed of number(0-9) or English characters (A-Za-z).</li> </ul> </li> </ul> </li> <li><code>left</code>, <code>middle</code>, <code>right</code> : Left, middle, right point of fuzzy set, in numbers.<ul> <li><code>left</code>, <code>right</code> : Two numbers for left and right point, middle point is the average of (left + right).</li> </ul> </li> <li><code>setType</code> : <ul> <li>Can be one of these string, or none.<ul> <li>Left part : <code>leftShoulder</code>, <code>leftSCurve</code>.<ul> <li>Default value is <code>leftShoulder</code> for first fuzzy set of a variable.</li> </ul> </li> <li>Right part : <code>rightShoulder</code>, <code>rightSCurve</code>.<ul> <li>Default value is <code>rightShoulder</code> for last fuzzy set of a variable.</li> </ul> </li> <li>Middle parts : <code>triangular</code>, <code>singleton</code>, <code>normal</code>.<ul> <li>Default value is <code>triangular</code> for other fuzzy sets of a variable.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>FuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT</code> : A line with '=&gt;', declare a fuzzy rule.</li> <li><code>// ...</code> : Comment lines</li> </ul> </li> <li>A plain object     <pre><code>{\nvariables: {\nVariableName: [\n{\nname: leftSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n{\nname: middleSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n{\nname: rightSetName, setType: undefined,\nparameters: [left, middle, right]\n},\n],\n// ....\n},\n\nrules: [\n'FuzzySetNameA =&gt; FuzzySetNameT',\n'FuzzySetNameA and FuzzySetNameB =&gt; FuzzySetNameT',\n'FuzzySetNameA or FuzzySetNameB =&gt; FuzzySetNameT',\n// ...\n]\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"fuzzy/#set-input","title":"Set input","text":"<pre><code>fuzzyModule.fuzzify(variableName, value);\n</code></pre> <ul> <li><code>variableName</code> : An antecedent variable name string.</li> <li><code>value</code> : A number.</li> </ul> <p>or</p> <pre><code>fuzzyModule.fuzzify({\nvarName: value,\n});\n</code></pre>"},{"location":"fuzzy/#get-result","title":"Get result","text":"<pre><code>var result = fuzzyModule.defuzzify(variableName);\n</code></pre> <ul> <li><code>variableName</code> : A consequence variable name string.</li> </ul> <p>or</p> <pre><code>var result = fuzzyModule.defuzzify([varName0, varName1, ...]);\n</code></pre> <ul> <li><code>result</code> : <code>{varName0: value0, varName1, value1, ...}</code></li> </ul> <p>or</p> <pre><code>var result = fuzzyModule.defuzzify();\n</code></pre> <ul> <li><code>result</code> : <code>{varName0: value0, varName1, value1, ...}</code><ul> <li>Grab variable names from all consequence of rules.</li> </ul> </li> </ul>"},{"location":"game/","title":"Game","text":""},{"location":"game/#boot","title":"Boot","text":"<pre><code>var config = {\ntype: Phaser.AUTO,\nparent: null,\nwidth: 1024,\nheight: 768,\nscale: {\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH\n},\n\nscene: null\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"game/#configuration","title":"Configuration","text":"<p>Reference</p> <pre><code>{\ntype: Phaser.AUTO,\nparent: 'phaser-example',\nwidth: 800,\nheight: 600,\nscale: {\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH\n},\ndom: {\ncreateContainer: false,\n},\nscene: null,\nbackgroundColor: 0x333333\n}\n</code></pre> <p>or</p> <pre><code>{\ntype: Phaser.AUTO,\nparent: null,\nwidth: 800,\nheight: 600,\nscale: {\nmode: Phaser.Scale.NONE,\nautoCenter: Phaser.Scale.NO_CENTER\n},\nautoRound: false,\ncanvas: null,\ncanvasStyle: null,\n\nscene: null,\n\ncallbacks: {\npreBoot: NOOP,\npostBoot: NOOP\n},\n\nseed: [ (Date.now() * Math.random()).toString() ],\n\ntitle: '',\nurl: 'https://phaser.io',\nversion: '',\n\ninput: {\nkeyboard: {\ntarget: window\n},\nmouse: {\ntarget: null,\ncapture: true\n},\nactivePointers: 1,\ntouch: {\ntarget: null,\ncapture: true\n},\nsmoothFactor: 0,\ngamepad: false,\nwindowEvents: true,\n},\ndisableContextMenu: false,\n\nbackgroundColor: 0,\n\nrender: {\nantialias: true,\nantialiasGL: true,\ndesynchronized: false,\npixelArt: false,\nroundPixels: false,\ntransparent: false,\nclearBeforeRender: true,\npreserveDrawingBuffer: false,\npremultipliedAlpha: true,\nfailIfMajorPerformanceCaveat: false,\npowerPreference: 'default', // 'high-performance', 'low-power' or 'default'\nbatchSize: 4096,\nmaxLights: 10,\nmaxTextures: -1,\nmipmapFilter: 'LINEAR', // 'NEAREST', 'LINEAR', 'NEAREST_MIPMAP_NEAREST', 'LINEAR_MIPMAP_NEAREST', 'NEAREST_MIPMAP_LINEAR', 'LINEAR_MIPMAP_LINEAR'\nautoMobilePipeline: true,\ndefaultPipeline: 'MultiPipeline',\npipeline:[]\n},\n\nphysics: {\ndefault: false  // no physics system enabled\n},\n\nloader:{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nwithCredentials: false,\nimageLoadType: 'XHR',    // 'HTMLImageElement' \nlocalScheme: [ 'file://', 'capacitor://' ]\n},\n\nimages: {\ndefault: 'data:image/png;base64....',\nmissing: 'data:image/png;base64....'\n},\n\ndom: {\ncreateContainer: false,\nbehindCanvas: false,\n},\n\nplugins: {\nglobal: [\n//{key, plugin, start}\n],\nscene: [\n// ...\n]\n},\n\npipeline: { key:PipelineClass },\n\nfps: {\nmin: 10,\ntarget: 60,\nforceSetTimeOut: false,\ndeltaHistory: 10\n},\n\ndisableContextMenu: false,\nbanner: {\nhidePhaser: false,\ntext: '#ffffff',\nbackground: [\n'#ff0000',\n'#ffff00',\n'#00ff00',\n'#00ffff',\n'#000000'\n]\n},\n\nstableSort: -1\n}\n</code></pre>"},{"location":"game/#destroy","title":"Destroy","text":"<pre><code>game.destroy();\n// game.destroy(removeCanvas, noReturn);\n</code></pre> <ul> <li><code>removeCanvas</code> : Set to <code>true</code> if you would like the parent canvas element removed from the DOM, or <code>false</code> to leave it in place.</li> <li><code>noReturn</code> : If <code>true</code> all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this.</li> </ul>"},{"location":"game/#global-members","title":"Global members","text":""},{"location":"game/#scene-manager","title":"Scene manager","text":"<p>Global scene manager in <code>game.scene</code>, or <code>scene.scene</code> in each scene.</p>"},{"location":"game/#global-data","title":"Global data","text":"<p>Instance of data manager in <code>game.registry</code>, or <code>scene.registry</code> in each scene.</p> <ul> <li>Get     <pre><code>var value = scene.registry.get(key);\n// var value = game.registry.get(key);\n</code></pre></li> <li>Set     <pre><code>scene.registry.set(key, value);\n// game.registry.set(key, value);\n</code></pre></li> <li>Event<ul> <li>Set data event     <pre><code>scene.registry.events.on('setdata', function(parent, key, value){ /* ... */ });\n// game.registry.events.on('setdata', function(parent, key, value){ /* ... */ })\n</code></pre></li> <li>Change data event     <pre><code>scene.registry.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ });\n// game.registry.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ })\n</code></pre> <pre><code>scene.registry.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n// game.registry.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul>"},{"location":"game/#game-time","title":"Game time","text":"<ul> <li>The time that the current game step started at.     <pre><code>var time = game.getTime();\n// var time = scene.game.getTime();\n</code></pre></li> <li>The current game frame.     <pre><code>var frameCount = game.getFrame();\n// var frameCount = scene.game.getFrame();\n</code></pre></li> <li>The delta time, since the last game step. This is a clamped and smoothed average value.     <pre><code>var delta = game.loop.delta;\n// var delta = scene.game.loop.delta;\n</code></pre></li> </ul>"},{"location":"game/#game-config","title":"Game config","text":"<pre><code>var config = game.config;\n// var config = scene.game.config;\n</code></pre>"},{"location":"game/#window-size","title":"Window size","text":"<ul> <li>Width     <pre><code>var width = game.config.width;\n// var width = scene.game.config.width;\n</code></pre></li> <li>Height     <pre><code>var height = game.config.height;\n// var height = scene.game.config.height;\n</code></pre></li> </ul>"},{"location":"game/#pause-resume","title":"Pause / Resume","text":"<ul> <li>Pause the entire game and emit a <code>PAUSE</code> event.     <pre><code>game.pause();\n</code></pre></li> <li>Resume the entire game and emit a <code>RESUME</code> event.     <pre><code>game.resume();\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = game.isPaused;\n</code></pre></li> </ul>"},{"location":"game/#events","title":"Events","text":"<ul> <li>Pause(window is invisible)/Resume(window is visible)     <pre><code>game.events.on('pause', function() {});\n</code></pre> <pre><code>game.events.on('resume', function() {});\n</code></pre></li> <li>Destroy event, triggered by <code>game.destroy()</code> <pre><code>game.events.on('destroy', function() {})\n</code></pre></li> <li>On window focused/blurred     <pre><code>game.events.on('focus', function() {})\n</code></pre> <pre><code>game.events.on('blur', function(){ })\n</code></pre></li> </ul>"},{"location":"gameobject/","title":"Game object","text":""},{"location":"gameobject/#introduction","title":"Introduction","text":"<p>Base class of all game object in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"gameobject/#usage","title":"Usage","text":""},{"location":"gameobject/#destroy","title":"Destroy","text":"<ul> <li>Destroy game object     <pre><code>gameObject.destroy();\n</code></pre></li> <li>Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list.</li> <li>Event     <pre><code>gameObject.once('destroy', function(gameObject, fromScene) {\n\n}, scope);\n</code></pre><ul> <li><code>fromScene</code> : <code>true</code> if game object is destroyed during scene is shutdown. When scene is shutdown, all game objects will be destroyed.</li> </ul> </li> </ul>"},{"location":"gameobject/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var x = gameObject.x;\nvar y = gameObject.y;\n</code></pre></li> <li>Set     <pre><code>gameObject.x = 0;\ngameObject.y = 0;\ngameObject.setPosition(x,y);\ngameObject.setX(x);\ngameObject.setY(y);\n</code></pre><ul> <li>Set random     <pre><code>gameObject.setRandomPosition(x, y, width, height);\n// gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#local-point","title":"Local point","text":"<p>Transfer world point to local point</p> <p><pre><code>var point = gameObject.getLocalPoint(x, y);  // point : {x, y}\n// var out = gameObject.getLocalPoint(x, y, out);\n</code></pre> or <pre><code>var out = gameObject.getLocalPoint(x, y, out, camera);\n</code></pre></p>"},{"location":"gameobject/#angle","title":"Angle","text":"<ul> <li>Get     <pre><code>var angle = gameObject.angle;\nvar radians = gameObject.rotation;  // angle in radians\n</code></pre></li> <li>Set     <pre><code>gameObject.angle = degrees;\ngameObject.rotation = radians;\ngameObject.setAngle(degrees);\ngameObject.setRotation(radians);\n</code></pre></li> </ul>"},{"location":"gameobject/#visible","title":"Visible","text":"<ul> <li>Get     <pre><code>var visible = gameObject.visible; // visible: true/false\n</code></pre></li> <li>Set     <pre><code>gameObject.visible = visible;\ngameObject.setVisible(visible);\n</code></pre></li> </ul>"},{"location":"gameobject/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = gameObject.alpha;  // 0~1\n</code></pre></li> <li>Set     <pre><code>gameObject.setAlpha(alpha);\n// gameObject.alpha = alpha;\n</code></pre>     or     <pre><code>gameObject.setAlpha(topLeft, topRight, bottomLeft, bottomRight);\n// gameObject.alphaTopLeft = alpha;\n// gameObject.alphaTopRight = alpha;\n// gameObject.alphaBottomLeft = alpha;\n// gameObject.alphaBottomRight = alpha;\n</code></pre></li> <li>Clear (set to <code>1</code>)     <pre><code>gameObject.clearAlpha();\n</code></pre></li> </ul>"},{"location":"gameobject/#flipx-flipy","title":"FlipX, FlipY","text":"<ul> <li>Get     <pre><code>var flip = gameObject.flipX;  // flip: true/false\nvar flip = gameObject.flipY;  // flip: true/false\n</code></pre></li> <li>Set     <pre><code>gameObject.flipX = flip;\ngameObject.flipY = flip;\ngameObject.setFlipX(flip);\ngameObject.setFlipY(flip);\ngameObject.setFlip(flipX, flipY);\ngameObject.toggleFlipX();\ngameObject.toggleFlipY();\ngameObject.resetFlip();  // equal to gameObject.setFlip(false, false);\n</code></pre></li> </ul>"},{"location":"gameobject/#order-of-rendering","title":"Order of rendering","text":""},{"location":"gameobject/#depth-z-index","title":"Depth (z-index)","text":"<p>The depth starts from zero (the default value) and increases from that point. A game object with a higher depth value will always render in front of one with a lower value.</p> <ul> <li>Get     <pre><code>var depth = gameObject.depth;\n</code></pre></li> <li>Set     <pre><code>gameObject.depth = value;\ngameObject.setDepth(value);\n</code></pre></li> </ul>"},{"location":"gameobject/#display-list","title":"Display list","text":"<pre><code>scene.children.bringToTop(child);\nscene.children.sendToBack(child);\nscene.children.moveUp(child);\nscene.children.moveDown(child);\nscene.children.moveAbove(child1, child2);  // Move child1 above child2\nscene.children.moveBelow(child1, child2);  // Move child1 below child2\nscene.children.moveTo(child, index);\nscene.children.swap(child1, child2);\n</code></pre>"},{"location":"gameobject/#layer-game-object","title":"Layer game object","text":"<p>Place game object into Layer game object</p>"},{"location":"gameobject/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Get     <pre><code>var scrollFactorX = gameObject.scrollFactorX;\nvar scrollFactorY = gameObject.scrollFactorY;\n</code></pre></li> <li>Set     <pre><code>gameObject.setScrollFactor(scrollFactor);\ngameObject.setScrollFactor(scrollFactorX, scrollFactorY);\n</code></pre></li> </ul> <p>Scroll factor: 0~1</p> <ul> <li>0= fixed to camera</li> <li>0.25= quarter the speed of the camera</li> <li>0.5= half the speed of the camera</li> </ul>"},{"location":"gameobject/#bounds","title":"Bounds","text":"<pre><code>var output = gameObject.getTopLeft(output);     // output: {x, y}\nvar output = gameObject.getTopCenter(output);     // output: {x, y}\nvar output = gameObject.getTopRight(output);    // output: {x, y}\nvar output = gameObject.getLeftCenter(output);    // output: {x, y}\nvar output = gameObject.getRightCenter(output);    // output: {x, y}\nvar output = gameObject.getBottomLeft(output);  // output: {x, y}\nvar output = gameObject.getBottomCenter(output);     // output: {x, y}\nvar output = gameObject.getBottomRight(output); // output: {x, y}\nvar output = gameObject.getCenter(output);      // output: {x, y}\nvar output = gameObject.getBounds(output);      // output: {x, y, width, height}\n</code></pre>"},{"location":"gameobject/#origin","title":"Origin","text":"<ul> <li>Get     <pre><code>var originX = gameObject.originX;\nvar originY = gameObject.originY;\n</code></pre></li> <li>Set     <pre><code>gameObject.setOrigin(x, y);\n// gameObject.setOrigin(x); // y = x\n</code></pre><ul> <li>Set to top-left     <pre><code>gameObject.setOrigin(0);\n</code></pre></li> <li>Set to center     <pre><code>gameObject.setOrigin(0.5);\n</code></pre></li> <li>Set to bottom-right     <pre><code>gameObject.setOrigin(1);\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#tint","title":"Tint","text":"<ul> <li>Get     <pre><code>var color = gameObject.tintTopLeft;     // color: 0xRRGGBB\nvar color = gameObject.tintTopRight;\nvar color = gameObject.tintBottomLeft;\nvar color = gameObject.tintBottomRight;\nvar isTinted = gameObject.isTinted;\n</code></pre></li> <li>Set     <pre><code>gameObject.tint = color;\ngameObject.setTint(color);  // multiply color value\ngameObject.setTint(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);\ngameObject.setTintFill(color);  // replace color value\ngameObject.setTintFill(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);    gameObject.clearTint();     // equal to `gameObject.setTint(0xffffff)`\n</code></pre></li> </ul>"},{"location":"gameobject/#blend-mode","title":"Blend mode","text":"<ul> <li>Get     <pre><code>var blendMode = gameObject.blendMode;\n</code></pre></li> <li>Set     <pre><code>gameObject.blendMode = blendMode;\ngameObject.setBlendMode(blendMode);\n</code></pre><ul> <li><code>blendMode</code> : Blend mode</li> </ul> </li> </ul>"},{"location":"gameobject/#mask","title":"Mask","text":"<p>See Mask.</p>"},{"location":"gameobject/#built-in-shader-effects","title":"Built-in shader effects","text":"<p>See built-in shader effects</p>"},{"location":"gameobject/#post-fx-pipeline","title":"Post-fx pipeline","text":""},{"location":"gameobject/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import PostFxClass from 'path';\nvar config = {\n// ...\npipeline: [PostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ul> <p>Some post-fx pipelines:</p> <ul> <li>Barrel: Barrel post processing filter.</li> <li>Color replace: Replace color post processing filter.</li> <li>Cross-stitching: Cross-stitching post processing filter.</li> <li>Dissolve: Dissolve transition post processing filter.</li> <li>Fish eye: Fish-eye post processing filter.</li> <li>Glow-filter: Glow post processing filter.</li> <li>Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Gray-scale: Gray scale post processing filter.</li> <li>Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Horri-fi: 6-in-1 post processing filter.</li> <li>Inverse: Inverse color post processing filter.</li> <li>Kawase-blur: Kawase-blur post processing filter.</li> <li>Pixelation: Pixelation post processing filter.</li> <li>Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shockwave: Shockwave post processing filter.</li> <li>Split: Split image into 4 parts.</li> <li>Swirl: Swirl post processing filter.</li> <li>Warp: Warp post processing filter. </li> </ul>"},{"location":"gameobject/#add-post-fx-pipeline","title":"Add post-fx pipeline","text":"<pre><code>gameObject.setPostPipeline(PostFxClass);\n</code></pre> <ul> <li><code>PostFxClass</code> : Class of post-fx pipeline.</li> </ul>"},{"location":"gameobject/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<ul> <li>Remove a post-fx pipeline     <pre><code>gameObject.removePostPipeline(PostFxClass);\n</code></pre></li> <li>Remove all post-fx pipelines     <pre><code>gameObject.resetPipeline(true);\n</code></pre>     or     <pre><code>gameObject.postPipelines = [];\ngameObject.hasPostPipeline = false;\n</code></pre></li> </ul>"},{"location":"gameobject/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<pre><code>var pipelineInstance = gameObject.getPostPipeline(PostFxClass);\n</code></pre>"},{"location":"gameobject/#size","title":"Size","text":"<ul> <li>Native (un-scaled) size<ul> <li>Get     <pre><code>var width = gameObject.width;\nvar height = gameObject.height;\n</code></pre></li> <li>Set     <pre><code>gameObject.setSize(width, height);\n</code></pre>     or     <pre><code>gameObject.width = width;\ngameObject.height = height;\n</code></pre></li> </ul> </li> <li>Display size<ul> <li>Get     <pre><code>var displayWidth = gameObject.displayWidth;\nvar displayHeight = gameObject.displayHeight;\n</code></pre></li> <li>Set     <pre><code>gameObject.setDisplaySize(displayWidth, displayHeight);\n</code></pre>     or     <pre><code>gameObject.displayWidth = displayWidth;\ngameObject.displayHeight = displayHeight;\n</code></pre></li> </ul> </li> <li>Scale<ul> <li>Get     <pre><code>var scaleX = gameObject.scaleX;\nvar scaleY = gameObject.scaleY;\n</code></pre>     or     <pre><code>var scale = gameObject.scale;  // Return (scaleX + scaleY)/2\n</code></pre></li> <li>Set     <pre><code>gameObject.setScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>gameObject.scaleX = scaleX;\ngameObject.scaleY = scaleY;\n</code></pre>     or     <pre><code>gameObject.scale = scale;  // Set scaleX, scaleY to scale\n</code></pre></li> </ul> </li> </ul>"},{"location":"gameobject/#click","title":"Click","text":"<pre><code>gameObject.setInteractive().on('pointerdown', function(pointer, localX, localY, event){\n// ...\n});\n</code></pre> <p>See touch event</p>"},{"location":"gameobject/#state","title":"State","text":"<ul> <li>Get     <pre><code>var state = gameObject.state;\n</code></pre></li> <li>Set     <pre><code>gameObject.setState(state);\n</code></pre></li> </ul>"},{"location":"gameobject/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = gameObject.getData(key);\nvar values = gameObject.getData(keys); // keys: an array of keys\nvar value = gameObject.data.values[key];\n</code></pre></li> <li>Set     <pre><code>gameObject.setData(key, value);\ngameObject.incData(key, value);    gameObject.setData(obj); // obj: {key0:value0, key1:value1, ...}\ngameObject.data.values[key] = value;\ngameObject.data.values[key] += inc;\n</code></pre>     or     <pre><code>gameObject.toggleData(key);\n</code></pre></li> <li>Enable     <pre><code>gameObject.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>gameObject.on('setdata', function(gameObject, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>gameObject.on('changedata', function(gameObject, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>gameObject.on('changedata-' + key, function(gameObject, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"gameobject/#texture","title":"Texture","text":"<ul> <li>Set texture via key string     <pre><code>gameObject.setTexture(key);\n// gameObject.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>gameObject.setTexture(texture);\n// gameObject.setTexture(texture, frame);\n</code></pre><ul> <li><code>texture</code> : Texture object, or canvas texture object</li> </ul> </li> <li>Set frame     <pre><code>gameObject.setFrame(frame);\ngameObject.setFrame(frame, updateSize, updateOrigin);\n</code></pre><ul> <li><code>frame</code> :\u3000The name or index of the frame within the Texture.</li> <li><code>updateSize</code> : Should this call adjust the size of the Game Object?</li> <li><code>updateOrigin</code> : Should this call adjust the origin of the Game Object?</li> </ul> </li> <li>Set frame by frame object     <pre><code>gameObject.setFrame(frameObject);\ngameObject.setFrame(frameObject, updateSize, updateOrigin);\n</code></pre></li> <li>Applies a crop to a texture     <pre><code>gameObject.setCrop(x, y, width, height);\n</code></pre>     The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left.<ul> <li>Reset crop     <pre><code>gameObject.setCrop();\n// gameObject.isCropped = false;\n</code></pre></li> </ul> </li> <li>Get texture, frame.     <pre><code>var texture = gameObject.texture;\nvar frame = gameObject.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = gameObject.texture.key;\nvar frameName = gameObject.frame.name;\n</code></pre></li> </ul>"},{"location":"gameobject/#name","title":"Name","text":"<ul> <li>Get     <pre><code>var name = gameObject.name;\n</code></pre></li> <li>Set     <pre><code>gameObject.setName(name);\ngameObject.name = name;\n</code></pre></li> </ul>"},{"location":"gameobject/#will-render","title":"Will render","text":"<ul> <li>Test render flag and camera filter.     <pre><code>var willRennder = gameObject.willRender(camera);\n</code></pre></li> <li>Test render flag only     <pre><code>var willRender = (gameObject.renderFlags === Phaser.GameObjects.GameObject.RENDER_MASK);\n</code></pre><ul> <li><code>Phaser.GameObjects.GameObject.RENDER_MASK</code> : 15 (Visible, Alpha, Transform and Texture)</li> </ul> </li> </ul>"},{"location":"gameobject/#add-to-scenecontainer","title":"Add to scene/container","text":""},{"location":"gameobject/#add","title":"Add","text":"<p>Trigger <code>'addedtoscene'</code> event, which invoke <code>gameObject.addedToScene()</code></p> <ul> <li>Register <code>'addedtoscene'</code> event     <pre><code>gameObject.on('addedtoscene', function(gameObject, scene){});\n</code></pre></li> <li>Or, override <code>addedToScene</code> method     <pre><code>class MyClass extends BaseClass {\n// ...\naddedtoscene() {\nsuper.addedtoscene();\n// ...\n}\n}\n</code></pre></li> </ul>"},{"location":"gameobject/#remove","title":"Remove","text":"<p>Trigger <code>'removedfromscene'</code> event, which invoke <code>gameObject.removedFromScene()</code></p> <ul> <li>Register <code>'removedfromscene'</code> event     <pre><code>gameObject.on('removedfromscene', function(gameObject, scene){});\n</code></pre></li> <li>Or, override <code>removedFromScene</code> method     <pre><code>class MyClass extends BaseClass {\n// ...\nremovedFromScene() {\nsuper.removedFromScene();\n// ...\n}\n}\n</code></pre></li> </ul>"},{"location":"gameobject/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyClass extends BaseClass {\nconstructor(scene, x, y) {\nsuper(scene, x, y);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     if (super.preUpdate) {\n//         super.preUpdate(time, delta);\n//     }\n// }\n\n// destroy(fromScene) {\n//     //  This Game Object has already been destroyed\n//     if (!this.scene) {\n//         return;\n//     }\n//     super.destroy(fromScene);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.<ul> <li>Some kinds of game object like Sprite, Dom-element has <code>preUpdate</code> method already.</li> </ul> </li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyClass(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"gamepad/","title":"Gamepad","text":""},{"location":"gamepad/#introduction","title":"Introduction","text":"<p>Gamepad's state of buttons, or axis.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"gamepad/#usage","title":"Usage","text":""},{"location":"gamepad/#get-gamepad","title":"Get gamepad","text":"<ul> <li>Get all currently connected Gamepads.     <pre><code>var gamepads = scene.input.gamepad.getAll();\n</code></pre></li> <li>Get gamepad by index     <pre><code>var gamepad = scene.input.gamepad.getPad(0);\n// var gamepad = scene.input.gamepad.getPad(index);\n</code></pre></li> <li>Get gamepad when button-down.     <pre><code>scene.input.gamepad.once('down', function (gamepad, button, value) {\n}\n</code></pre><ul> <li><code>gamepad</code> : A reference to the Gamepad on which the button was released. See Properties of gamepad</li> <li><code>button</code> : A reference to the Button which was released.</li> <li><code>value</code> : The value of the button at the time it was released. Between 0 and 1. Some Gamepads have pressure-sensitive buttons.</li> </ul> </li> </ul>"},{"location":"gamepad/#events","title":"Events","text":"<ul> <li>Button down     <pre><code>scene.input.gamepad.on('down', function (gamepad, button, value) {\n}\n</code></pre>     or     <pre><code>gamepad.on('down', function(buttonIndex, value, button) {\n})\n</code></pre></li> <li>Button up     <pre><code>scene.input.gamepad.on('up', function (gamepad, button, value) {\n}\n</code></pre>     or     <pre><code>gamepad.on('up', function(buttonIndex, value, button) {\n})\n</code></pre></li> <li>Gamepad connected     <pre><code>scene.input.gamepad.on('connected', function (gamepad, event) {\n}\n</code></pre></li> <li>Gamepad disconnected     <pre><code>scene.input.gamepad.on('disconnected', function (gamepad, event) {\n}\n</code></pre></li> </ul>"},{"location":"gamepad/#gamepad","title":"Gamepad","text":""},{"location":"gamepad/#buttons","title":"Buttons","text":"<ul> <li>Cursor buttons     <pre><code>var isLeftDown = gamepad.left;\nvar isRightftDown = gamepad.right;\nvar isUpDown = gamepad.up;\nvar isDownDown = gamepad.down;\n</code></pre></li> <li>Right buttons cluster     <pre><code>var isADown = gamepad.A;  // Dual Shock controller: X button\nvar isYDown = gamepad.Y;  // Dual Shock controller: Triangle button\nvar isXDown = gamepad.X;  // Dual Shock controller: Square button.\nvar isBDown = gamepad.B;  // Dual Shock controller: Circle button\n</code></pre></li> <li>Shoulder buttons     <pre><code>var isL1Down = gamepad.L1; // XBox controller: LB button\nvar isL2Down = gamepad.L2; // XBox controller: LT button\nvar isR1Down = gamepad.R1; // XBox controller: RB button\nvar isR2Down = gamepad.R2; // XBox controller: RT button\n</code></pre></li> </ul>"},{"location":"gamepad/#axis-sticks","title":"Axis sticks","text":"<ul> <li>Left sticks, right sticks     <pre><code>var leftStick = gamepad.leftStick;\nvar rightStick = gamepad.rightStick;\n</code></pre><ul> <li><code>leftStick</code>, <code>rightStick</code> : Read only vector2.<ul> <li>Angle : <code>leftStick.angle()</code></li> <li>Length : <code>leftStick.length()</code></li> <li>x, y : <code>leftStick.x</code> , <code>leftStick.y</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"gamepad/#properties","title":"Properties","text":"<ul> <li><code>gamepad.index</code> : An integer that is unique for each Gamepad currently connected to the system.     This can be used to distinguish multiple controllers.      Note that disconnecting a device and then connecting a new device may reuse the previous index.</li> <li><code>gamepad.id</code> : A string containing some information about the controller.</li> <li><code>gamepad.buttons</code> : An array of Gamepad Button objects, corresponding to the different buttons available on the Gamepad.</li> <li><code>gamepad.axes</code> : An array of Gamepad Axis objects, corresponding to the different axes available on the Gamepad, if any.</li> </ul>"},{"location":"gashapon/","title":"Gashapon","text":""},{"location":"gashapon/#introduction","title":"Introduction","text":"<p>Pick random item from box.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"gashapon/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gashapon/#install-plugin","title":"Install plugin","text":""},{"location":"gashapon/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgashaponplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgashaponplugin.min.js', true);\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = scene.plugins.get('rexgashaponplugin').add(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GashaponPlugin from 'phaser3-rex-plugins/plugins/gashapon-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGashapon',\nplugin: GashaponPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = scene.plugins.get('rexGashapon').add(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Gashapon from 'phaser3-rex-plugins/plugins/gashapon.js';\n</code></pre></li> <li>Add gashapon object     <pre><code>var gashapon = new Gashapon(config);\n</code></pre></li> </ul>"},{"location":"gashapon/#create-instance","title":"Create instance","text":"<pre><code>var gashapon = scene.plugins.get('rexGashapon').add({\nmode: 'shuffle',  // 0|'shuffle'|1|'random\nitems: {  // name:count\na:1, b:2, c:3 },\nreload: true,     // true|false\nrnd: undefined,\n});\n</code></pre> <ul> <li><code>mode</code> : <ul> <li><code>'shuffle'</code>, or <code>0</code> : pick item from box without put it back.</li> <li><code>'random'</code>, or <code>1</code> : pick item from box then put it back.</li> </ul> </li> <li><code>reload</code> : set <code>true</code> to reload items when box is empty for <code>shuffle</code> mode.</li> <li><code>items</code> : initial items <code>{ name:count }</code> in box.</li> <li><code>rnd</code> : Use random data generator to generate result.<ul> <li><code>undefined</code> : Use <code>Math.random()</code> to generate result.</li> <li><code>Phaser.Math.RND</code> : Use pre-defined random data generator.</li> </ul> </li> </ul>"},{"location":"gashapon/#pick-item","title":"Pick item","text":"<ul> <li>Pick a random item     <pre><code>var item = gashapon.next();\n</code></pre><ul> <li>return <code>null</code> if pick nothing</li> </ul> </li> <li>Pick specific item     <pre><code>var item = gashapon.next(name);\n</code></pre><ul> <li>return <code>null</code> if pick nothing</li> </ul> </li> <li>Last picked item     <pre><code>var item = gashapon.result;\n</code></pre></li> </ul>"},{"location":"gashapon/#set-item","title":"Set item","text":"<ul> <li>Set item     <pre><code>gashapon.setItem(name, count);\n</code></pre></li> <li>Add item     <pre><code>gashapon.addItem(name, count);\n</code></pre></li> <li>Put item back     <pre><code>gashapon.putItemBack(name, count);\n</code></pre></li> </ul>"},{"location":"gashapon/#remove-item","title":"Remove item","text":"<ul> <li>Remove item     <pre><code>gashapon.removeItem(name);\n</code></pre></li> <li>Remove all items     <pre><code>gashapon.removeAllItems();\n</code></pre></li> </ul>"},{"location":"gashapon/#current-status","title":"Current status","text":"<ul> <li>Get current status     <pre><code>var status = gashapon.toJSON();\n</code></pre></li> <li>Clone object     <pre><code>var state = gashapon.toJSON();\nvar gashapon2 = new Gashapon(state);\n</code></pre></li> <li>Overwrite current status     <pre><code>var status = gashapon.toJSON();\n// gashapon.next()...\ngashapon.resetFromJSON(status);\n</code></pre></li> </ul>"},{"location":"gashapon/#get-items","title":"Get items","text":"<ul> <li>Get initial items     <pre><code>var items = gashapon.getItems();\n</code></pre></li> <li>Get remainder items     <pre><code>var items = gashapon.getRemain();\n</code></pre></li> <li>Get initial item count     <pre><code>var count = gashapon.getItemCount(name);\n</code></pre></li> <li>Get remainder item count     <pre><code>var count = gashapon.getRemainCount(name);\n</code></pre></li> <li>For each initial item     <pre><code>gashapon.forEachItem(function(name, count) {\n\n}, scope);\n</code></pre></li> <li>For each remainder item     <pre><code>gashapon.forEachRemain(function(name, count) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gashapon/#set-random-generator","title":"Set random generator","text":"<pre><code>gashapon.setRND(rnd);\n</code></pre> <ul> <li><code>rnd</code> : Use random data generator to generate result.<ul> <li><code>undefined</code>, or <code>null</code> : Use <code>Math.random()</code> to generate result.</li> <li><code>Phaser.Math.RND</code> : Use pre-defined random data generator.</li> </ul> </li> </ul>"},{"location":"geom-circle/","title":"Circle","text":""},{"location":"geom-circle/#introduction","title":"Introduction","text":"<p>Circle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-circle/#usage","title":"Usage","text":""},{"location":"geom-circle/#create-shape","title":"Create shape","text":"<pre><code>var circle = new Phaser.Geom.Circle(x, y, radius);\n</code></pre>"},{"location":"geom-circle/#clone-shape","title":"Clone shape","text":"<pre><code>var circle1 = Phaser.Geom.Circle.Clone(circle0);\n</code></pre>"},{"location":"geom-circle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillCircleShape(circle);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeCircleShape(circle);\n</code></pre></li> </ul> <p>Note</p> <p>Negative radius will be treated as positive radius. i.e. <code>Math.abs(radius)</code></p>"},{"location":"geom-circle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>circle.setTo(x, y, radius);\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>circle.setPosition(x, y);\n</code></pre>     or     <pre><code>circle.x = 0;\ncircle.y = 0;\n</code></pre>     or     <pre><code>circle.left = 0;       // circle.x\ncircle.top = 0;        // circle.y\n// circle.right = 0;   // circle.x\n// circle.bottom = 0;  // circle.y\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.Offset(circle, dx, dy); // circle.x += dx, circle.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Circle.OffsetPoint(circle, point); // circle.x += point.x, circle.y += point.y\n</code></pre></li> <li>Radius     <pre><code>circle.radius = radius;\n</code></pre>     or     <pre><code>circle.diameter = diameter;  // diameter = 2 * radius\n</code></pre></li> </ul>"},{"location":"geom-circle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = circle.x;\nvar y = circle.y;\nvar top = circle.top;\nvar left = circle.left;\nvar right = circle.right;\nvar bottom = circle.bottom;\n</code></pre></li> <li>Radius     <pre><code>var radius = circle.radius;\n// var diameter = circle.diameter;\n</code></pre></li> <li>Bound     <pre><code>var bound = Phaser.Geom.Circle.GetBounds(circle);\n// var bound = Phaser.Geom.Circle.GetBounds(circle, bound);  // push bound\n</code></pre><ul> <li><code>bound</code> : A Rectangle shape object</li> </ul> </li> <li>Area     <pre><code>var area = Phaser.Geom.Circle.Area(circle);\n</code></pre></li> <li>Circumference     <pre><code>var circumference = Phaser.Geom.Circle.Circumference(circle);\n</code></pre></li> <li>Type:     <pre><code>var type = circle.type; // 0\n</code></pre></li> </ul>"},{"location":"geom-circle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = circle.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = circle.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle);  // angle in degrees\n// var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = circle.getRandomPoint();\n// var point = circle.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = circle.getPoints(quantity);\n// var points = circle.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = circle.getPoints(false, step);\n// var points = circle.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = circle.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Circle.ContainsPoint(circle, point);\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Circle.ContainsRect(circle, rect);  // rect : 4 points\n</code></pre></li> </ul>"},{"location":"geom-circle/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>circle.setEmpty();     // circle.radius = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = circle.isEmpty();   // circle.radius &lt;= 0\n</code></pre></li> </ul>"},{"location":"geom-circle/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Circle.Equals(circle0, circle1);\n</code></pre> <p>Position and radius are equal.</p>"},{"location":"geom-circle/#intersection","title":"Intersection","text":""},{"location":"geom-circle/#circle-to-circle","title":"Circle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToCircle(circleA, circleB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB);\n// var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-rectangle","title":"Circle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToRectangle(circle, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect);\n// var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-triangle","title":"Circle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToCircle(triangle, circle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle);\n// var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-circle/#circle-to-line","title":"Circle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToCircle(line, circle);\n// var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest);\n</code></pre><ul> <li><code>nearest</code> : Nearest point on line.</li> </ul> </li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToCircle(line, circle);\n// var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-ellipse/","title":"Ellipse","text":""},{"location":"geom-ellipse/#introduction","title":"Introduction","text":"<p>Ellipse shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-ellipse/#usage","title":"Usage","text":""},{"location":"geom-ellipse/#create-shape","title":"Create shape","text":"<pre><code>var ellipse = new Phaser.Geom.Ellipse(x, y, width, height);\n</code></pre>"},{"location":"geom-ellipse/#clone-shape","title":"Clone shape","text":"<pre><code>var ellipse1 = Phaser.Geom.Ellipse.Clone(ellipse0);\n</code></pre>"},{"location":"geom-ellipse/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillEllipseShape(ellipse);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeEllipseShape(ellipse);\n</code></pre></li> </ul> <p>Note</p> <p>Negative width, height will be treated as positive width, height. i.e. <code>Math.abs(width)</code>, <code>Math.abs(height)</code></p>"},{"location":"geom-ellipse/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>ellipse.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>ellipse.setPosition(x, y);\n</code></pre>     or     <pre><code>ellipse.x = 0;\nellipse.y = 0;\n</code></pre>     or     <pre><code>ellipse.left = 0;       // ellipse.x\nellipse.top = 0;        // ellipse.y\n// ellipse.right = 0;   // ellipse.x\n// ellipse.bottom = 0;  // ellipse.y\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.Offset(ellipse, dx, dy); // ellipse.x += dx, ellipse.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Ellipse.OffsetPoint(ellipse, point); // ellipse.x += point.x, ellipse.y += point.y\n</code></pre></li> <li>Width, height     <pre><code>ellipse.width = width;\nellipse.height = height;\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = ellipse.x;\nvar y = ellipse.y;\nvar top = ellipse.top;\nvar left = ellipse.left;\nvar right = ellipse.right;\nvar bottom = ellipse.bottom;\n</code></pre></li> <li>Width, height     <pre><code>var width = ellipse.width;\nvar height = ellipse.height;\n</code></pre></li> <li>Bound     <pre><code>var bound = Phaser.Geom.Ellipse.GetBounds(ellipse);\n// var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound);  // push bound\n</code></pre><ul> <li><code>bound</code> : A Rectangle shape object</li> </ul> </li> <li>Area     <pre><code>var area = Phaser.Geom.Ellipse.Area(ellipse);\n</code></pre></li> <li>Circumference     <pre><code>var circumference = Phaser.Geom.Ellipse.Circumference(ellipse);\n</code></pre></li> <li>Type:     <pre><code>var type = ellipse.type; // 1\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = ellipse.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = ellipse.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle);  // angle in degrees\n// var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = ellipse.getRandomPoint();\n// var point = ellipse.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = ellipse.getPoints(quantity);\n// var points = ellipse.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = ellipse.getPoints(false, step);\n// var points = ellipse.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = ellipse.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Ellipse.ContainsPoint(ellipse, point);\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Ellipse.ContainsRect(ellipse, rect);  // rect : 4 points\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>ellipse.setEmpty();     // ellipse.width = 0, ellipse.height = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = ellipse.isEmpty();   // ellipse.width &lt;= 0 || ellipse.height &lt;= 0\n</code></pre></li> </ul>"},{"location":"geom-ellipse/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Ellipse.Equals(ellipse0, ellipse1);\n</code></pre> <p>Position and width, height are equal.</p>"},{"location":"geom-hexagon/","title":"Hexagon","text":""},{"location":"geom-hexagon/#introduction","title":"Introduction","text":"<p>Hexagon shape and methods, extends from Polygon geometry object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"geom-hexagon/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"geom-hexagon/#install-plugin","title":"Install plugin","text":""},{"location":"geom-hexagon/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhexagonplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhexagonplugin.min.js', true);\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = scene.plugins.get('rexhexagonplugin').add(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HexagonPlugin from 'phaser3-rex-plugins/plugins/hexagon-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHexagon',\nplugin: HexagonPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Hexagon from 'phaser3-rex-plugins/plugins/hexagon.js';\n</code></pre></li> <li>Add hexagon geometry object     <pre><code>var hexagon = new Hexagon(x, y, size, orientationType);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#create-shape","title":"Create shape","text":"<p><pre><code>var hexagon = scene.plugins.get('rexHexagon').add(x, y, size, orientationType);\n</code></pre> or <pre><code>var hexagon = scene.plugins.get('rexHexagon').add({\nx: 0,\ny: 0,\nsize: 20,\norientationType: 0     // 0|'flat'|'vertical'|1|'pointy'|'horizontal'\n});\n</code></pre> or <pre><code>var hexagon = new Phaser.Geom.rexHexagon(x, y, size, orientationType);\n</code></pre></p> <ul> <li><code>x</code> : Center X.</li> <li><code>y</code> : Center Y.</li> <li><code>size</code> : Distance between center to each corner.</li> <li><code>orientationType</code> : See here<ul> <li><code>0</code>, <code>'flat'</code>, or <code>'y'</code></li> <li><code>1</code>, <code>'pointy'</code> or ,<code>'x'</code></li> </ul> </li> </ul>"},{"location":"geom-hexagon/#draw-on-graphics","title":"Draw on graphics","text":"<p>See Polygon shape.</p>"},{"location":"geom-hexagon/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>hexagon.setTo(x, y, size, orientationType);\n</code></pre></li> <li>Position     <pre><code>hexagon.setPosition(x, y);\n</code></pre>     or     <pre><code>hexagon.x = 0;\nhexagon.y = 0;\n</code></pre>     or     <pre><code>hexagon.centerX = 0;  // equal to hexagon.x\nhexagon.centerY = 0;  // equal to hexagon.y\n</code></pre>     or     <pre><code>hexagon.left = 0;       // hexagon.x\nhexagon.top = 0;        // hexagon.y\nhexagon.right = 0;      // hexagon.x\nhexagon.bottom = 0;     // hexagon.y\n</code></pre></li> <li>Size     <pre><code>hexagon.setSize(size);\n</code></pre>     or     <pre><code>hexagon.size = size;\n</code></pre></li> <li>Orientation type     <pre><code>hexagon.setType(orientationType);\n</code></pre>     or     <pre><code>hexagon.orientationType = orientationType;\n</code></pre><ul> <li><code>orientationType</code> : See here<ul> <li><code>0</code>, <code>'flat'</code>, or <code>'y'</code></li> <li><code>1</code>, <code>'pointy'</code> or ,<code>'x'</code> </li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-hexagon/#get-properties","title":"Get properties","text":"<p>See Polygon shape.</p> <ul> <li>Position<ul> <li>Center     <pre><code>var centerX = hexagon.centerX;\nvar centerY = hexagon.centerY;\n</code></pre>     or     <pre><code>var centerX = hexagon.x;\nvar centerY = hexagon.y;\n</code></pre></li> <li>Bound     <pre><code>var top = hexagon.top;\nvar left = hexagon.left;\nvar right = hexagon.right;\nvar bottom = hexagon.bottom;\n</code></pre></li> </ul> </li> <li>Width     <pre><code>var width = hexagon.width;\n</code></pre></li> <li>Height     <pre><code>var width = hexagon.height;\n</code></pre></li> <li>Lines around hexagon     <pre><code>var edge01 = hexagon.getLineA();\nvar edge12 = hexagon.getLineB();\nvar edge23 = hexagon.getLineC();\nvar edge34 = hexagon.getLineD();\nvar edge45 = hexagon.getLineE();\nvar edge50 = hexagon.getLineF();\n// var out = hexagon.getLineF(out);\n</code></pre>     or     <pre><code>var edge = hexagon.getEdge(edgeIdx);\n// var out = hexagon.getEdge(edgeIdx, out);\n</code></pre></li> </ul>"},{"location":"geom-hexagon/#points-shape","title":"Point(s) &amp; shape","text":"<p>See Polygon shape.</p>"},{"location":"geom-line/","title":"Line","text":""},{"location":"geom-line/#introduction","title":"Introduction","text":"<p>Line shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-line/#usage","title":"Usage","text":""},{"location":"geom-line/#create-shape","title":"Create shape","text":"<pre><code>var line = new Phaser.Geom.Line(x1, y1, x2, y2);\n</code></pre>"},{"location":"geom-line/#clone-shape","title":"Clone shape","text":"<pre><code>var line1 = Phaser.Geom.Line.Clone(line0);\n</code></pre>"},{"location":"geom-line/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeLineShape(line);\n</code></pre>"},{"location":"geom-line/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>line.setTo(x1, y1, x2, y2);\n</code></pre>     or     <pre><code>Phaser.Geom.Line.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>line.x1 = 0;\nline.y1 = 0;\nline.x2 = 0;\nline.y2 = 0;\n</code></pre>     or     <pre><code>line.left = 0;    // min(x1, x2)\nline.top = 0;     // min(y1, y2)\nline.right = 0;   // max(x1, x2)\nline.bottom = 0;  // max(y1, y2)\n</code></pre><ul> <li>Offset start, end     <pre><code>var line = Phaser.Geom.Line.Offset(line, dx, dy); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy\n</code></pre></li> <li>Set center position     <pre><code>var line = Phaser.Geom.Line.CenterOn(line, x, y);\n</code></pre></li> </ul> </li> <li>Start point, angle, length     <pre><code>var line = Phaser.Geom.Line.SetToAngle(line, x, y, angle, length);\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>x</code> , <code>y</code> : start point</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> <li><code>length</code> :\u3000The length of the line</li> </ul> </li> <li>Rotate<ul> <li>Rotate around midpoint <pre><code>var line = Phaser.Geom.Line.Rotate(line, angle)\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> </ul> </li> <li>Rotate around point     <pre><code>var line = Phaser.Geom.Line.RotateAroundPoint(line, point, angle);\n</code></pre>     or     <pre><code>var line = Phaser.Geom.Line.RotateAroundXY(line, x, y, angle);\n</code></pre><ul> <li><code>line</code> : The line to set</li> <li><code>angle</code> : The angle of the line in radians <pre><code>var rad = Phaser.Math.DegToRad(deg);\n</code></pre></li> </ul> </li> </ul> </li> <li>Extend     <pre><code>var line = Phaser.Geom.Line.Extend(line, left, right);\n</code></pre></li> </ul>"},{"location":"geom-line/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x1 = line.x1;\nvar y1 = line.y1;\nvar x2 = line.x2;\nvar y2 = line.y2;\nvar top = line.top;       // min(x1, x2)\nvar left = line.left;     // min(y1, y2)\nvar right = line.right;   // max(x1, x2)\nvar bottom = line.bottom; // max(y1, y2)\n</code></pre><ul> <li>Start point    <pre><code>var start = line.getPointA();  // start: {x, y}\nvar start = line.getPointA(start);  // push start\n</code></pre></li> <li>End point    <pre><code>var end = line.getPointB();  // end: {x, y}\nvar end = line.getPointB(end);  // push end\n</code></pre></li> <li>Middle point     <pre><code>var middle = Phaser.Geom.Line.GetMidPoint(line);  // middle: {x, y}\n// var middle = Phaser.Geom.Line.GetMidPoint(line, middle);\n</code></pre></li> </ul> </li> <li>Length     <pre><code>var length = Phaser.Geom.Line.Length(line);\n</code></pre><ul> <li>Width : Abs(x1 - x2)     <pre><code>var width = Phaser.Geom.Line.Width(line);\n</code></pre></li> <li>Height : Abs(y1 - y2)     <pre><code>var width = Phaser.Geom.Line.Height(line);\n</code></pre></li> </ul> </li> <li>Slope<ul> <li>Slope : (y2 - y1) / (x2 - x1)     <pre><code>var slope = Phaser.Geom.Line.Slope(line);\n</code></pre></li> <li>Perpendicular slope : -((x2 - x1) / (y2 - y1))     <pre><code>var perpSlope = Phaser.Geom.Line.PerpSlope(line);\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Angle     <pre><code>var angle = Phaser.Geom.Line.Angle(line);\n</code></pre><ul> <li><code>angle</code> : The angle of the line in radians <pre><code>var deg = Phaser.Math.RadToDeg(rad);  // deg : -180 ~ 180\n</code></pre></li> </ul> </li> <li>Normal angle (angle - 90 degrees)<ul> <li>Normal angle     <pre><code>var normalAngle = Phaser.Geom.Line.NormalAngle(line);\n</code></pre></li> <li>Normal vector     <pre><code>var normal = Phaser.Geom.Line.GetNormal(line);  // normal: {x, y}\n// var normal = Phaser.Geom.Line.GetNormal(line, normal);  // push normal\n</code></pre>     or     <pre><code>var normalX = Phaser.Geom.Line.NormalX(line);\nvar normalY = Phaser.Geom.Line.NormalY(line);\n</code></pre></li> </ul> </li> <li>Reflect angle     <pre><code>var reflectAngle = Phaser.Geom.Line.ReflectAngle(aimLine, reflectingLine);\n</code></pre></li> </ul> </li> <li>Type:     <pre><code>var type = line.type; // 2\n</code></pre></li> </ul>"},{"location":"geom-line/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = line.getPoint(t);  // t : 0 ~ 1. 0=start, 0.5=middle, 1=end\n// var point = line.getPoint(t, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = line.getRandomPoint();\n// var point = line.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = line.getPoints(quantity);\n// var points = line.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = line.getPoints(false, step);\n// var points = line.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Get points using Bresenham's line algorithm     <pre><code>var points = Phaser.Geom.Line.BresenhamPoints(line, step);\n// var points = Phaser.Geom.Line.BresenhamPoints(line, step, points);  // push points\n</code></pre></li> <li>Get points using easing function     <pre><code>var points = Phaser.Geom.Line.GetEasedPoints(line, ease, quantity);\n// var points = Phaser.Geom.Line.GetEasedPoints(line, ease, quantity, collinearThreshold, easeParams);\n</code></pre><ul> <li><code>ease</code> : String of ease function, or a custom function (<code>function (t) { return value}</code>).</li> <li><code>quantity</code> : The number of points to return.</li> <li><code>collinearThreshold</code> : Each point is spaced out at least this distance apart. This helps reduce clustering in noisey eases.</li> <li><code>easeParams</code> : Array of ease parameters to go with the ease.</li> </ul> </li> <li>Get the nearest point on a line perpendicular to the given point.     <pre><code>var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn);\n// var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point);\n</code></pre></li> <li>Get the shortest distance from a Line to the given Point.     <pre><code>var distance = Phaser.Geom.Line.GetShortestDistance(line, point);\n</code></pre></li> </ul>"},{"location":"geom-line/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Line.Equals(line0, line1);\n</code></pre> <p>x1, y2, x2, y2 are equal.</p>"},{"location":"geom-line/#intersection","title":"Intersection","text":""},{"location":"geom-line/#line-to-circle","title":"Line to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToCircle(line, circle);\n// var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest);\n</code></pre><ul> <li><code>nearest</code> : Nearest point on line.</li> </ul> </li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToCircle(line, circle);\n// var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-rectangle","title":"Line to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToRectangle(line, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToRectangle(line, rect);\n// var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-triangle","title":"Line to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToLine(triangle, line);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line);\n// var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);\n</code></pre></li> </ul>"},{"location":"geom-line/#line-to-line","title":"Line to line","text":"<ul> <li>Is intersection     <pre><code>var isIntersection = Phaser.Geom.Intersects.LineToLine(line1, line2);\n</code></pre><ul> <li><code>isIntersection</code> : Return <code>true</code> if line1 and line2 are intersectioned</li> </ul> </li> <li>Get intersection point     <pre><code>var isIntersection = Phaser.Geom.Intersects.LineToLine(line1, line2, out);\n</code></pre><ul> <li><code>isIntersection</code> : Return <code>true</code> if line1 and line2 are intersectioned</li> <li><code>out</code> : intersected point</li> </ul> </li> </ul>"},{"location":"geom-point/","title":"Point","text":""},{"location":"geom-point/#introduction","title":"Introduction","text":"<p>Point shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-point/#usage","title":"Usage","text":""},{"location":"geom-point/#create-shape","title":"Create shape","text":"<pre><code>var point = new Phaser.Geom.Point(x, y);\n</code></pre>"},{"location":"geom-point/#clone-shape","title":"Clone shape","text":"<pre><code>var point1 = Phaser.Geom.Point.Clone(point0);\n</code></pre>"},{"location":"geom-point/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillPointShape(point, size);\n</code></pre>"},{"location":"geom-point/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>point.setTo(x, y);\n</code></pre>     or     <pre><code>Phaser.Geom.Point.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>point.x = 0;\npoint.y = 0;\n</code></pre></li> <li>Round<ul> <li>Ceil : Apply <code>Math.ceil()</code> to each coordinate of the given Point     <pre><code>var point = Phaser.Geom.Point.Ceil(point)\n</code></pre></li> <li>Floor : Apply <code>Math.floor()</code> to each coordinate of the given Point.     <pre><code>var point = Phaser.Geom.Point.Floor(point)\n</code></pre></li> </ul> </li> </ul>"},{"location":"geom-point/#symmetry","title":"Symmetry","text":"<ul> <li>Invert : x = y, y = x     <pre><code>var point = Phaser.Geom.Point.Invert(point);\n</code></pre></li> <li>Negative : x = -x, y = -y     <pre><code>var out = Phaser.Geom.Point.Negative(point);\n// var out = Phaser.Geom.Point.Negative(point, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-point/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = point.x;\nvar y = point.y;\n</code></pre></li> <li>Type:     <pre><code>var type = point.type; // 3\n</code></pre></li> </ul>"},{"location":"geom-point/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Point.Equals(point0, point1);\n</code></pre> <p>x, y are equal.</p>"},{"location":"geom-point/#points","title":"Points","text":"<ul> <li>Centroid : center-point over some points     <pre><code>var out = Phaser.Geom.Point.GetCentroid(points);\n// var out = Phaser.Geom.Point.GetCentroid(points, out);  // modify out\n</code></pre></li> <li>Calculates the Axis Aligned Bounding Box (or aabb) from an array of points (rectangle)     <pre><code>var rect = Phaser.Geom.Point.GetRectangleFromPoints(points);\n// var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect);  // modify rect\n</code></pre></li> <li>Interpolate     <pre><code>var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t);  // out : point\n// var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-point/#intersection","title":"Intersection","text":"<ul> <li>Point to line <pre><code>var result = Phaser.Geom.Intersects.PointToLine(point, line);\n// var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness);\n</code></pre> <pre><code>var result = Phaser.Geom.Intersects.PointToLineSegment(point, line);\n</code></pre></li> </ul>"},{"location":"geom-point/#point-as-vector","title":"Point as Vector","text":"<p>Vector starting at (0,0)</p> <ul> <li>Magnitude : sqrt( (x * x) + (y * y) )     <pre><code>var magnitude = Phaser.Geom.Point.GetMagnitude(point);\n</code></pre>     or     <pre><code>var magnitudeSq = Phaser.Geom.Point.GetMagnitudeSq(point);\n</code></pre></li> <li>Project     <pre><code>var out = Phaser.Geom.Point.Project(from, to);\n// var out = Phaser.Geom.Point.Project(from, to, out);  // modify out\n</code></pre>     or     <pre><code>var out = Phaser.Geom.Point.ProjectUnit(from, to);  // vector `from` and `to` are unit vector (length = 1)\n// var out = Phaser.Geom.Point.ProjectUnit(from, to, out);  // modify out\n</code></pre></li> </ul>"},{"location":"geom-polygon/","title":"Polygon","text":""},{"location":"geom-polygon/#introduction","title":"Introduction","text":"<p>Polygon shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-polygon/#usage","title":"Usage","text":""},{"location":"geom-polygon/#create-shape","title":"Create shape","text":"<pre><code>var polygon = new Phaser.Geom.Polygon(points);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>An array of number : <code>[x0, y0, x1, y1, ...]</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> </ul> </li> </ul>"},{"location":"geom-polygon/#clone-shape","title":"Clone shape","text":"<pre><code>var polygon1 = Phaser.Geom.Polygon.Clone(polygon0);\n</code></pre>"},{"location":"geom-polygon/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillPoints(polygon.points, true);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokePoints(polygon.points, true);\n</code></pre></li> </ul>"},{"location":"geom-polygon/#set-properties","title":"Set properties","text":"<pre><code>polygon.setTo(points);\n// points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...]\n</code></pre>"},{"location":"geom-polygon/#get-properties","title":"Get properties","text":"<ul> <li>Points     <pre><code>var points = polygon.points;    // array of points {x,y}\n</code></pre></li> <li>Area     <pre><code>var area = polygon.area;\n</code></pre></li> <li>Number array     <pre><code>var out = Phaser.Geom.Polygon.GetNumberArray(polygon);\n// var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out);  // modify out\n</code></pre><ul> <li><code>arr</code> : [x0, y0, x1, y1, x2, y2, ...]</li> </ul> </li> <li>AABB (A minimum rectangle to cover this polygon)     <pre><code>var out = Phaser.Geom.Polygon.GetAABB(polygon);\n// var out = Phaser.Geom.Polygon.GetAABB(polygon, out);\n</code></pre><ul> <li><code>out</code> : A rectangle object</li> </ul> </li> <li>Type:     <pre><code>var type = polygon.type; // 4\n</code></pre></li> </ul>"},{"location":"geom-polygon/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Point is inside shape     <pre><code>var isInside = polygon.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Polygon.ContainsPoint(polygon, point);\n</code></pre></li> <li>Translate : Shift points.     <pre><code>Phaser.Geom.Polygon.Translate(polygon, x, y);\n</code></pre></li> <li>Reverse the order of points.     <pre><code>var polygon = Phaser.Geom.Polygon.Reverse(polygon);\n</code></pre></li> <li>Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points.     <pre><code>Phaser.Geom.Polygon.Smooth(polygon)\n</code></pre></li> <li>Simplify : Simplifies the points by running them through a combination of    Douglas-Peucker and Radial Distance algorithms. Simplification dramatically    reduces the number of points in a polygon while retaining its shape, giving    a huge performance boost when processing it and also reducing visual noise.     <pre><code>var polygon = Phaser.Geom.Polygon.Simplify(polygon);\n// var polygon = Phaser.Geom.Polygon.Simplify(polygon, tolerance, highestQuality);\n</code></pre></li> </ul>"},{"location":"geom-polygon/#vector-to-polygon","title":"Vector to polygon","text":"<ul> <li>Get closest point of intersection between a vector and an array of polygons     <pre><code>var result = Phaser.Geom.Intersects.GetLineToPolygon(line, polygons);\n// var out = Phaser.Geom.Intersects.GetLineToPolygon(line, polygons, isRay, out);\n</code></pre><ul> <li><code>line</code> : Vector of line object</li> <li><code>polygons</code> : A single polygon, or array of polygons</li> <li><code>isRay</code> : Is <code>line</code> a ray or a line segment?</li> <li><code>out</code> :<ul> <li><code>out.x</code>, <code>out.y</code> : Intersection point</li> <li><code>out.z</code> : Closest intersection distance</li> <li><code>out.w</code> : Index of the polygon</li> </ul> </li> </ul> </li> <li>Projects rays out from the given point to each line segment of the polygons.     <pre><code>var out = Phaser.Geom.Intersects.GetRaysFromPointToPolygon(x, y, polygons);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The point to project the rays from.</li> <li><code>polygons</code> : A single polygon, or array of polygons</li> <li><code>out</code> : An array containing all intersections<ul> <li><code>out[i].x</code>, <code>out[i].y</code> : Intersection point</li> <li><code>out[i].z</code> : Angle of intersection</li> <li><code>out[i].w</code> : Index of the polygon</li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-rectangle/","title":"Rectangle","text":""},{"location":"geom-rectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-rectangle/#usage","title":"Usage","text":""},{"location":"geom-rectangle/#create-shape","title":"Create shape","text":"<pre><code>var rect = new Phaser.Geom.Rectangle(x, y, width, height);\n</code></pre>"},{"location":"geom-rectangle/#create-from-points","title":"Create from points","text":"<p>All of the given points are on or within its bounds.</p> <pre><code>var rect = Phaser.Geom.Rectangle.FromPoints(points);\n// var rect = Phaser.Geom.Rectangle.FromPoints(points, rect);  // push rect\n</code></pre> <ul> <li><code>points</code> : an array with 4 points. <code>[x, y]</code>, or <code>{x:0, y:0}</code></li> </ul> <p>or</p> <pre><code>var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2);\n// var rect = Phaser.Geom.Rectangle.FromXY(x1, y1, x2, y2, rect);  // push rect\n</code></pre>"},{"location":"geom-rectangle/#clone-shape","title":"Clone shape","text":"<pre><code>var rect1 = Phaser.Geom.Rectangle.Clone(rect0);\n</code></pre>"},{"location":"geom-rectangle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillRectShape(rect);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeRectShape(rect);\n</code></pre></li> </ul> <p>Note</p> <p><code>x</code> with positive/negative width is left/right bound <code>y</code> with positive/negative height is top/bottom bound</p>"},{"location":"geom-rectangle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>rect.setTo(x, y, width, height);\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>rect.setPosition(x, y);\n</code></pre>     or     <pre><code>rect.x = 0;\nrect.y = 0;\n</code></pre>     or     <pre><code>rect.left = 0;       // rect.x, rect.width\nrect.top = 0;        // rect.y, rect.height\n// rect.right = 0;   // rect.x, rect.width\n// rect.bottom = 0;  // rect.y, rect.height\nrect.centerX = 0;    // rect.x\nrect.centerY = 0;    // rect.y\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.Offset(rect, dx, dy); // rect.x += dx, rect.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.OffsetPoint(rect, point); // rect.x += point.x, rect.y += point.y\n</code></pre>     or     <pre><code>Phaser.Geom.Rectangle.CenterOn(rect, x, y);  // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2)\n</code></pre></li> <li>Size     <pre><code>rect.setSize(width, height);\n// rect.setSize(width);   // height = width\n</code></pre>     or     <pre><code>rect.width = 0;\nrect.height = 0;\n</code></pre><ul> <li>Scale     <pre><code>Phaser.Geom.Rectangle.Scale(rect, x, y); // rect.width *= x, rect.height *= y;\n// Phaser.Geom.Rectangle.Scale(rect, x);   // y = x\n</code></pre></li> <li>Extend size to include points     <pre><code>Phaser.Geom.Rectangle.MergePoints(rect, points);\n</code></pre><ul> <li><code>points</code> : an array of points. <code>[x, y]</code>, or <code>{x:0, y:0}</code></li> </ul> </li> <li>Extend size to include another rectangle     <pre><code>Phaser.Geom.Rectangle.MergeRect(target, source);\n</code></pre></li> </ul> </li> <li>Inflate     <pre><code>Phaser.Geom.Rectangle.Inflate(rect, x, y);\n</code></pre><ol> <li>change size to <code>width += x*2, height += y*2</code></li> <li>center on previous position</li> </ol> </li> <li>Fits the target rectangle into the source rectangle     <pre><code>Phaser.Geom.Rectangle.FitInside(target, source);\n</code></pre>     Preserves aspect ratio, scales and centers the target rectangle to the source rectangle</li> <li>Fits the target rectangle around the source rectangle     <pre><code>Phaser.Geom.Rectangle.FitOutside(target, source);\n</code></pre>     Preserves aspect ratio, scales and centers the target rectangle to the source rectangle</li> <li>Ceil     <pre><code>Phaser.Geom.Rectangle.Ceil(rect);  // ceil x, y\n</code></pre> <pre><code>Phaser.Geom.Rectangle.CeilAll(rect);  // ceil x, y, width, height\n</code></pre></li> <li>Floor     <pre><code>Phaser.Geom.Rectangle.Floor(rect);  // floor x, y\n</code></pre> <pre><code>Phaser.Geom.Rectangle.FloorAll(rect);  // floor x, y, width, height\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x = rect.x;\nvar y = rect.y;\n</code></pre><ul> <li>Bound     <pre><code>var top = rect.top;\nvar left = rect.left;\nvar right = rect.right;\nvar bottom = rect.bottom;\n</code></pre>     or     <pre><code>var points = Phaser.Geom.Rectangle.Decompose(rect);\n// var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points\n</code></pre><ul> <li><code>points</code> : top-left, top-right, bottom-right, bottom-left</li> </ul> </li> <li>Center     <pre><code>var centerX = rect.centerX;\nvar centerY = rect.centerY;\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.GetCenter(rect);\n// var point = Phaser.Geom.Rectangle.GetCenter(rect, point);\n</code></pre></li> </ul> </li> <li>Size     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.GetSize(rect); // {x: rect.width, y: rect.height}\n</code></pre></li> <li>Area     <pre><code>var area = Phaser.Geom.Rectangle.Area(rect);\n</code></pre></li> <li>Perimeter     <pre><code>var perimeter = Phaser.Geom.Rectangle.Perimeter(rect);  // 2 * (rect.width + rect.height)\n</code></pre></li> <li>Aspect ratio     <pre><code>var aspectRatio = Phaser.Geom.Rectangle.GetAspectRatio(rect);  // rect.width / rect.height\n</code></pre></li> <li>Lines around rectangle     <pre><code>var topLine = rect.getLineA();  // top line of this rectangle\nvar rightLine = rect.getLineB();  // right line of this rectangle\nvar bottomLine = rect.getLineC();  // bottom line of this rectangle\nvar leftLine = rect.getLineD();  // left line of this rectangle\n// var out = rect.getLineA(out);  // top line of this rectangle\n</code></pre></li> <li>Type:     <pre><code>var type = rect.type; // 5\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = rect.getPoint(t);  // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left)\n// var point = rect.getPoint(t, point);  // modify point\n</code></pre>     or     <pre><code>var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle);  // angle in degrees\n// var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point);  // push point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = rect.getPoints(quantity);\n// var points = rect.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = rect.getPoints(false, step);\n// var points = rect.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>step</code> : width of each step, in pixels. <code>quantity = Perimeter(rectangle) / step;</code></li> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = rect.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Rectangle.ContainsPoint(rect, point);\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = rect.getRandomPoint();\n// var point = rect.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get a random point outside shape     <pre><code>var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner);\n// var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point\n</code></pre></li> <li>Rectangle is inside shape     <pre><code>var isInside = Phaser.Geom.Rectangle.ContainsRect(rectA, rectB);  // rectB is inside rectA\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangles","title":"Rectangles","text":"<ul> <li>Is overlapping     <pre><code>var isOverlapping = Phaser.Geom.Rectangle.Overlaps(rectA, rectB);\n</code></pre></li> <li>Get intersection rectangle     <pre><code>var rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB);\nvar rect = Phaser.Geom.Rectangle.Intersection(rectA, rectB, rect);  // push rect\n</code></pre></li> <li>Get union rectangle     <pre><code>var rect = Phaser.Geom.Rectangle.Union(rectA, rectB);\nvar rect = Phaser.Geom.Rectangle.Union(rectA, rectB, rect);  // push rect\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#empty","title":"Empty","text":"<ul> <li>Set empty     <pre><code>rect.setEmpty();     // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0\n</code></pre></li> <li>Is empty     <pre><code>var isEmpty = rect.isEmpty();   // rect.radius &lt;= 0;\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#equal","title":"Equal","text":"<ul> <li>Position, width, and height are the same     <pre><code>var isEqual = Phaser.Geom.Rectangle.Equals(rect0, rect1);\n</code></pre></li> <li>Width and height are the same     <pre><code>var isEqual = Phaser.Geom.Rectangle.SameDimensions(rect0, rect1);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#intersection","title":"Intersection","text":""},{"location":"geom-rectangle/#rectangle-to-circle","title":"Rectangle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.CircleToRectangle(circle, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect);\n// var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-rectangle","title":"Rectangle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToRectangle(rectA, rectB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB);\n// var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-triangle","title":"Rectangle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToTriangle(rect, triangle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle);\n// var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);\n</code></pre></li> </ul>"},{"location":"geom-rectangle/#rectangle-to-line","title":"Rectangle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.LineToRectangle(line, rect);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetLineToRectangle(line, rect);\n// var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/","title":"Rhombus","text":""},{"location":"geom-rhombus/#introduction","title":"Introduction","text":"<p>Rhombus shape and methods, extends from Polygon geometry object.</p> <ul> <li>Author: Rex</li> <li>Geometry object</li> </ul>"},{"location":"geom-rhombus/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"geom-rhombus/#install-plugin","title":"Install plugin","text":""},{"location":"geom-rhombus/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrhombusplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrhombusplugin.min.js', true);\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = scene.plugins.get('rexrhombusplugin').add(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RhombusPlugin from 'phaser3-rex-plugins/plugins/rhombus-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRhombus',\nplugin: RhombusPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = scene.plugins.get('rexRhombus').add(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Rhombus from 'phaser3-rex-plugins/plugins/rhombus.js';\n</code></pre></li> <li>Add rhombus geometry object     <pre><code>var rhombus = new Rhombus(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#create-shape","title":"Create shape","text":"<p><pre><code>var rhombus = scene.plugins.get('rexRhombus').add(x, y, width, height);\n</code></pre> or <pre><code>var rhombus = scene.plugins.get('rexRhombus').add({\nx: 0,\ny: 0,\nwidth: 40,\nheight: 20\n});\n</code></pre> or <pre><code>var rhombus = new rexRhombus(x, y, width, height);\n// var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height);\n</code></pre></p> <ul> <li><code>x</code> : Top X.</li> <li><code>y</code> : Left Y.</li> </ul>"},{"location":"geom-rhombus/#draw-on-graphics","title":"Draw on graphics","text":"<p>See Polygon shape.</p>"},{"location":"geom-rhombus/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>rhombus.setTo(x, y, width, height);\n</code></pre></li> <li>Position     <pre><code>rhombus.setPosition(x, y);\n</code></pre>     or     <pre><code>rhombus.x = 0;\nrhombus.y = 0;\n</code></pre>     or     <pre><code>rhombus.left = 0;       // rhombus.x\nrhombus.top = 0;        // rhombus.y\nrhombus.right = 0;      // rhombus.x\nrhombus.bottom = 0;     // rhombus.y\n</code></pre></li> <li>Size     <pre><code>rhombus.setSize(width, height);\n</code></pre>     or     <pre><code>rhombus.width = width;\nrhombus.height = height;\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#get-properties","title":"Get properties","text":"<p>See Polygon shape.</p> <ul> <li>Position<ul> <li>Center     <pre><code>var centerX = rhombus.centerX;\nvar centerY = rhombus.centerY;\n</code></pre></li> <li>Bound     <pre><code>var top = rhombus.top;\nvar left = rhombus.left;\nvar right = rhombus.right;\nvar bottom = rhombus.bottom;\n</code></pre></li> </ul> </li> <li>Width     <pre><code>var width = rhombus.width;\n</code></pre></li> <li>Height     <pre><code>var width = rhombus.height;\n</code></pre></li> <li>Lines around rhombus     <pre><code>var edge01 = rhombus.getLineA();\nvar edge12 = rhombus.getLineB();\nvar edge23 = rhombus.getLineC();\nvar edge34 = rhombus.getLineD();\n</code></pre>     or     <pre><code>var edge = rhombus.getEdge(edgeIdx);\n// var out = rhombus.getEdge(edgeIdx, out);\n</code></pre></li> </ul>"},{"location":"geom-rhombus/#points-shape","title":"Point(s) &amp; shape","text":"<p>See Polygon shape.</p>"},{"location":"geom-triangle/","title":"Triangle","text":""},{"location":"geom-triangle/#introduction","title":"Introduction","text":"<p>Triangle shape and methods, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"geom-triangle/#usage","title":"Usage","text":""},{"location":"geom-triangle/#create-shape","title":"Create shape","text":"<pre><code>var triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"geom-triangle/#clone-shape","title":"Clone shape","text":"<pre><code>var triangle1 = Phaser.Geom.Triangle.Clone(triangle0);\n</code></pre>"},{"location":"geom-triangle/#equilateral-triangle","title":"Equilateral triangle","text":"<pre><code>var triangle = Phaser.Geom.Triangle.BuildEquilateral(x1, y1, length);\n</code></pre>"},{"location":"geom-triangle/#right-triangle","title":"Right triangle","text":"<pre><code>var triangle = Phaser.Geom.Triangle.BuildRight(x1, y1, width, height);\n</code></pre>"},{"location":"geom-triangle/#polygon-to-triangles","title":"Polygon to triangles","text":"<pre><code>var out = Phaser.Geom.Triangle.BuildFromPolygon(data);\n// var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY);\n// out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out);\n</code></pre> <ul> <li><code>data</code> : A flat array of vertice coordinates like <code>[x0,y0, x1,y1, x2,y2, ...]</code></li> <li><code>out</code> : Array of triangles</li> </ul>"},{"location":"geom-triangle/#draw-on-graphics","title":"Draw on graphics","text":"<ul> <li>Fill shape     <pre><code>// graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\ngraphics.fillTriangleShape(triangle);\n</code></pre></li> <li>Stroke shape     <pre><code>// graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\ngraphics.strokeTriangleShape(triangle);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#set-properties","title":"Set properties","text":"<ul> <li>All properties     <pre><code>triangle.setTo(x1, y1, x2, y2, x3, y3);\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.CopyFrom(source, dest);\n</code></pre></li> <li>Position     <pre><code>triangle.x1 = 0;\ntriangle.y1 = 0;\ntriangle.x2 = 0;\ntriangle.y2 = 0;\ntriangle.x3 = 0;\ntriangle.y3 = 0;\n</code></pre>     or     <pre><code>triangle.left = 0;       // triangle.x1, triangle.x2, triangle.x3\ntriangle.top = 0;        // triangle.y1, triangle.y2, triangle.y3\n// triangle.right = 0;   // triangle.x1, triangle.x2, triangle.x3\n// triangle.bottom = 0;  // triangle.y1, triangle.y2, triangle.y3\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.Offset(triangle, dx, dy); // triangle.x += dx, triangle.y += dy\n</code></pre>     or     <pre><code>Phaser.Geom.Triangle.CenterOn(triangle, x, y);\n</code></pre></li> <li>Rotate<ul> <li>Rotate around center (incenter)     <pre><code>var triangle = Phaser.Geom.Triangle.Rotate(triangle, angle);\n</code></pre><ul> <li><code>angle</code> : Radian</li> </ul> </li> <li>Rotate around point     <pre><code>var triangle = Phaser.Geom.Triangle.RotateAroundPoint(triangle, point, angle);\n</code></pre><ul> <li><code>point</code> : <code>{x, y}</code></li> <li><code>angle</code> : Radian</li> </ul> </li> <li>Rotate around (x,y)     <pre><code>var triangle = Phaser.Geom.Triangle.RotateAroundXY(triangle, x, y, angle);\n</code></pre><ul> <li><code>angle</code> : Radian    </li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-triangle/#get-properties","title":"Get properties","text":"<ul> <li>Position     <pre><code>var x1 = triangle.x1;\nvar y1 = triangle.y1;\nvar x2 = triangle.x2;\nvar y2 = triangle.y2;\nvar x3 = triangle.x3;\nvar y3 = triangle.y3;\nvar top = triangle.top;\nvar left = triangle.left;\nvar right = triangle.right;\nvar bottom = triangle.bottom;\n</code></pre>     or     <pre><code>var out = Phaser.Geom.Triangle.Decompose(triangle);  // out: [{x1,y1}, {x2,y2}, {x3,y3}]\n// var out = Phaser.Geom.Triangle.Decompose(triangle, out);\n</code></pre></li> <li>Perimeter     <pre><code>var perimeter = Phaser.Geom.Triangle.Perimeter(triangle);\n</code></pre></li> <li>Area     <pre><code>var area = Phaser.Geom.Triangle.Area(triangle);\n</code></pre></li> <li>Lines around triangle     <pre><code>var line12 = rect.getLineA();     // line from (x1, y1) to (x2, y2)\nvar line23 = rect.getLineB();     // line from (x2, y2) to (x3, y3)\nvar line31 = rect.getLineC();     // line from (x3, y3) to (x1, y1)\n</code></pre></li> <li>Centroid     <pre><code>var out = Phaser.Geom.Triangle.Centroid(triangle);  // out: {x,y}\n</code></pre></li> <li>Incenter     <pre><code>var out = Phaser.Geom.Triangle.InCenter(triangle);  // out: {x,y}\n// var out = Phaser.Geom.Triangle.InCenter(triangle, out);\n</code></pre></li> <li>Circumcenter     <pre><code>var out = Phaser.Geom.Triangle.CircumCenter(triangle);  // out: {x,y}\n// var out = Phaser.Geom.Triangle.CircumCenter(triangle, out);\n</code></pre></li> <li>Circumcircle     <pre><code>var out = Phaser.Geom.Triangle.CircumCircle(triangle);  // out: a circle object\n// var out = Phaser.Geom.Triangle.CircumCircle(triangle, out);\n</code></pre></li> <li>Type:     <pre><code>var type = triangle.type; // 6\n</code></pre></li> </ul>"},{"location":"geom-triangle/#points-shape","title":"Point(s) &amp; shape","text":"<ul> <li>Get point at shape's edge     <pre><code>var point = triangle.getPoint(t);  // t : 0 ~ 1 (angle/360)\n// var point = triangle.getPoint(t, point);  // modify point\n</code></pre></li> <li>Get a random point inside shape     <pre><code>var point = triangle.getRandomPoint();\n// var point = triangle.getRandomPoint(point);  // modify point\n</code></pre></li> <li>Get points around shape's edge     <pre><code>var points = triangle.getPoints(quantity);\n// var points = triangle.getPoints(quantity, null, points);  // push points\n</code></pre>     or calculate quantity from steps     <pre><code>var points = triangle.getPoints(false, step);\n// var points = triangle.getPoints(false, step, points);  // push points\n</code></pre><ul> <li><code>points</code> : an array of point</li> </ul> </li> <li>Point is inside shape     <pre><code>var isInside = triangle.contains(x, y);\n</code></pre>     or     <pre><code>var isInside = Phaser.Geom.Triangle.ContainsPoint(triangle, point);\n</code></pre><ul> <li>Points inside shape     <pre><code>var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst);\n// var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out);\n</code></pre><ul> <li><code>out</code> : Points inside triangle</li> <li><code>returnFirst</code> : True to get fist matched point</li> </ul> </li> </ul> </li> </ul>"},{"location":"geom-triangle/#equal","title":"Equal","text":"<pre><code>var isEqual = Phaser.Geom.Triangle.Equals(triangle0, triangle1);\n</code></pre> <p>Position and radius are equal.</p>"},{"location":"geom-triangle/#intersection","title":"Intersection","text":""},{"location":"geom-triangle/#triangle-to-circle","title":"Triangle to circle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToCircle(triangle, circle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle);\n// var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-rectangle","title":"Triangle to rectangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.RectangleToTriangle(rect, triangle);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle);\n// var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-triangle","title":"Triangle to triangle","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToTriangle(triangleA, triangleB);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB);\n// var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out);\n</code></pre></li> </ul>"},{"location":"geom-triangle/#triangle-to-line","title":"Triangle to line","text":"<ul> <li>Is intersection     <pre><code>var result = Phaser.Geom.Intersects.TriangleToLine(triangle, line);\n</code></pre></li> <li>Get intersection points     <pre><code>var result = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line);\n// var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);\n</code></pre></li> </ul>"},{"location":"gesture-overview/","title":"Overview","text":""},{"location":"gesture-overview/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-overview/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Object factories : <code>scene.rexGestures.add.xxx(config)</code></li> </ul>"},{"location":"gesture-overview/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Object factories : <code>scene.rexGestures.add.xxx(config)</code></li> </ul>"},{"location":"gesture-overview/#list-of-gesture-plugins","title":"List of gesture plugins","text":""},{"location":"gesture-overview/#one-pointer-gesture","title":"One pointer gesture","text":"<ul> <li>Tap</li> <li>Press</li> <li>Swipe</li> <li>Pan</li> </ul>"},{"location":"gesture-overview/#two-pointers-gesture","title":"Two pointers gesture","text":"<ul> <li>Pinch</li> <li>Rotate</li> </ul>"},{"location":"gesture-pan/","title":"Pan","text":""},{"location":"gesture-pan/#introduction","title":"Introduction","text":"<p>Get pan events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-pan/#live-demos","title":"Live demos","text":"<ul> <li>Pan &amp; rotate</li> </ul>"},{"location":"gesture-pan/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-pan/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-pan/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add pan input     <pre><code>var pan = scene.rexGestures.add.pan(config);\n// var pan = scene.rexGestures.add.pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pan input     <pre><code>var pan = scene.rexGestures.add.pan(config);\n// var pan = scene.rexGestures.add.pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pan } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add pan input     <pre><code>var pan = new Pan(scene, config);\n// var pan = new Pan(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-pan/#create-instance","title":"Create instance","text":"<ul> <li>Pan input     <pre><code>var pan = scene.rexGestures.add.pan({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 10,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> </ul> </li> <li>Pan behavior of game object     <pre><code>var pan = scene.rexGestures.add.pan(gameObject, {\n// enable: true,\n\n// threshold: 10,\n});\n</code></pre></li> </ul>"},{"location":"gesture-pan/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = pan.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>pan.setEnable(enable);  // enable: true, or false\n// pan.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>pan.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-pan/#events","title":"Events","text":""},{"location":"gesture-pan/#pan","title":"Pan","text":"<pre><code>pan.on('pan', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.dx</code>, <code>pan.dy</code> : Vector from previous pointer to current pointer.</li> <li><code>pan.worldX</code>, <code>pan.worldY</code> : World position of current pointer.</li> <li><code>pan.x</code>, <code>pan.y</code> : Scene position of current pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#pan-start","title":"Pan start","text":"<pre><code>pan.on('panstart', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.startWorldX</code>, <code>pan.startWorldY</code> : World position of pan-start pointer.</li> <li><code>pan.startX</code>, <code>pan.startY</code> : Scene position of pan-start pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#pan-end","title":"Pan end","text":"<pre><code>pan.on('panend', function(pan, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>pan.endWorldX</code>, <code>pan.endWorldY</code> : World position of pan-end pointer.</li> <li><code>pan.endX</code>, <code>pan.endY</code> : Scene position of pan-end pointer.</li> <li><code>gameObject</code>, <code>pan.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-pan/#is-panned","title":"Is panned","text":"<pre><code>var isPanned = pan.isPanned;\n</code></pre> <p>Return <code>true</code> if panned.</p>"},{"location":"gesture-pan/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = pan.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>pan.setDragThreshold(dragThreshold);\n// pan.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = pan.bounds;\n</code></pre></li> <li>Set     <pre><code>pan.setDetectBounds(bounds);\n// pan.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-pinch/","title":"Pinch","text":""},{"location":"gesture-pinch/#introduction","title":"Introduction","text":"<p>Get scale factor from 2 dragging touch pointers.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"gesture-pinch/#live-demos","title":"Live demos","text":"<p>Pinch-zoom</p>"},{"location":"gesture-pinch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-pinch/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-pinch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = scene.rexGestures.add.pinch(config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = scene.rexGestures.add.pinch(config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pinch } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add pinch input     <pre><code>var pinch = new Pinch(scene, config);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#create-instance","title":"Create instance","text":"<pre><code>var pinch = scene.rexGestures.add.pinch({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 0,\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : A rectangle object or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>threshold</code> : Fire pinch events after dragging distances of catched pointers are larger than this threshold.</li> </ul>"},{"location":"gesture-pinch/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = pinch.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>pinch.setEnable(enable);  // enable: true, or false\n// pinch.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>pinch.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#events","title":"Events","text":""},{"location":"gesture-pinch/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging 1st touch pointer, fired when 1st touch pointer is moving     <pre><code>pinch.on('drag1', function(pinch) {\n// var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y}\n}, scope);\n</code></pre><ul> <li><code>pinch.drag1Vector</code> : Drag vector from prevoius touch position to current touch position of 1st catched touch pointer.</li> </ul> </li> <li>On dragging 2 touch pointers, fired when any catched touch pointer moved.     <pre><code>pinch.on('pinch', function(pinch) {\n// var scaleFactor = pinch.scaleFactor;\n// gameObject.scaleX *= scaleFactor;\n// gameObject.scaleY *= scaleFactor;\n}, scope);\n</code></pre><ul> <li><code>pinch.scaleFactor</code> : Rate of distance change between 2 catched touch pointers.</li> </ul> </li> </ul>"},{"location":"gesture-pinch/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag 1 touch pointer start, fired when catching 1st touch pointer.     <pre><code>pinch.on('drag1start', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 1 touch pointer end, fired when releasing the last one catched touch pointer.     <pre><code>pinch.on('drag1end', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers start, fired when catching 2 touch pointers.     <pre><code>pinch.on('pinchstart', function(pinch) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers end, fired when releasing any catched touch pointer.     <pre><code>pinch.on('pinchend', function(pinch) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#scale-factor","title":"Scale factor","text":"<pre><code>var scaleFactor = pinch.scaleFactor;\n</code></pre> <p>Rate of distance change between 2 catched touch pointers.  (i.e current distance between 2 catched touch pointers / previous distance ).</p>"},{"location":"gesture-pinch/#drag-vector-of-1st-touch-pointer","title":"Drag vector of 1st touch pointer","text":"<pre><code>var drag1Vector = pinch.drag1Vector; // {x, y}\n</code></pre>"},{"location":"gesture-pinch/#catched-touch-pointers","title":"Catched touch pointers","text":"<ul> <li>Pointer 0, available when state is <code>1</code> <pre><code>var pointer0 = pinch.pointers[0];\n</code></pre><ul> <li>Position of pointer     <pre><code>var x = pointer0.x;\nvar y = pointer0.y;\nvar worldX = pointer0.worldX;\nvar worldY = pointer0.worldY;\n</code></pre></li> </ul> </li> <li>Pointer 1, available when state is <code>2</code> <pre><code>var pointer0 = pinch.pointers[1];\n</code></pre></li> </ul>"},{"location":"gesture-pinch/#is-pinched","title":"Is pinched","text":"<pre><code>var isPinched = pinch.isPinched;\n</code></pre> <p>Return <code>true</code> if pinched.</p>"},{"location":"gesture-pinch/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = pinch.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>pinch.setDragThreshold(dragThreshold);\n// pinch.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = pinch.bounds;\n</code></pre></li> <li>Set     <pre><code>pinch.setDetectBounds(bounds);\n// pinch.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-press/","title":"Press","text":""},{"location":"gesture-press/#introduction","title":"Introduction","text":"<p>Get press events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-press/#live-demos","title":"Live demos","text":"<ul> <li>Press object</li> </ul>"},{"location":"gesture-press/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-press/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-press/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add press input     <pre><code>var press = scene.rexGestures.add.press(config);\n// var press = scene.rexGestures.add.press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add press input     <pre><code>var press = scene.rexGestures.add.press(config);\n// var press = scene.rexGestures.add.press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Press } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add press input     <pre><code>var press = new Press(scene, config);\n// var press = new Press(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-press/#create-instance","title":"Create instance","text":"<ul> <li>Press input     <pre><code>var press = scene.rexGestures.add.press({\n// enable: true,\n// bounds: undefined,\n\n// time: 251,\n// threshold: 9,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Minimal time of the pointer to be pressed.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> </ul> </li> <li>Press behavior of game object     <pre><code>var press = scene.rexGestures.add.press(gameObject, {\n// enable: true,\n\n// time: 251,\n// threshold: 9,\n});\n</code></pre></li> </ul>"},{"location":"gesture-press/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = press.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>press.setEnable(enable);  // enable: true, or false\n// press.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>press.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-press/#events","title":"Events","text":""},{"location":"gesture-press/#pressing-start","title":"Pressing start","text":"<pre><code>press.on('pressstart', function(press, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>press.gameObject</code> : Parent gameobject of this press behavior.</li> <li><code>press.worldX</code>, <code>press.worldY</code> : World position of pressing start.</li> <li><code>press.x</code>, <code>press.y</code> : Scene position of pressing start.</li> <li><code>gameObject</code>, <code>press.gameObject</code> : Parent gameobject of this press behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-press/#pressing-end","title":"Pressing end","text":"<pre><code>press.on('pressend', function(press, gameObject, lastPointer){\n}, scope);\n</code></pre>"},{"location":"gesture-press/#is-pressed","title":"Is pressed","text":"<pre><code>var isPressed = press.isPressed;\n</code></pre> <p>Return <code>true</code> if pressed.</p>"},{"location":"gesture-press/#other-properties","title":"Other properties","text":"<ul> <li>Hold time<ul> <li>Get     <pre><code>var holdTime = press.holdTime;\n</code></pre></li> <li>Set     <pre><code>press.setHoldTime(holdTime);\n// press.holdTime = holdTime;\n</code></pre></li> </ul> </li> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = press.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>press.setDragThreshold(dragThreshold);\n// press.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = press.bounds;\n</code></pre></li> <li>Set     <pre><code>press.setDetectBounds(bounds);\n// press.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-rotate/","title":"Rotate","text":""},{"location":"gesture-rotate/#introduction","title":"Introduction","text":"<p>Get spin angle from 2 dragging touch pointers.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"gesture-rotate/#live-demos","title":"Live demos","text":"<ul> <li>Rotate &amp; rotate</li> </ul>"},{"location":"gesture-rotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-rotate/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-rotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = scene.rexGestures.add.rotate(config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = scene.rexGestures.add.rotate(config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Rotate } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add rotate input     <pre><code>var rotate = new Rotate(scene, config);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#create-instance","title":"Create instance","text":"<pre><code>var rotate = scene.rexGestures.add.rotate({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 0,\n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : A rectangle object or <code>undefined</code> (to use game window as rectangle object), for detecting the position of cursor.</li> <li><code>threshold</code> : Fire rotate events after dragging distances of catched pointers are larger than this threshold.</li> </ul>"},{"location":"gesture-rotate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = rotate.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>rotate.setEnable(enable);  // enable: true, or false\n// rotate.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>rotate.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#events","title":"Events","text":""},{"location":"gesture-rotate/#on-dragging","title":"On dragging","text":"<ul> <li>On dragging 1st touch pointer, fired when 1st touch pointer is moving     <pre><code>rotate.on('drag1', function(rotate) {\n// var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y}\n}, scope);\n</code></pre><ul> <li><code>rotate.drag1Vector</code> : Drag vector from prevoius touch position to current touch position of 1st catched touch pointer.</li> </ul> </li> <li>On dragging 2 touch pointers, fired when any catched touch pointer moved.     <pre><code>rotate.on('rotate', function(rotate) {\n// rotate.spinObject(gameObejects);\n// var angle = rotate.rotation;\n}, scope);\n</code></pre><ul> <li><code>rotate.spinObject(gameObejects)</code> : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers.</li> <li><code>rotate.rotation</code> : Return spin angle of 2 dragging pointers, in radius.</li> </ul> </li> </ul>"},{"location":"gesture-rotate/#on-drag-start-on-drag-end","title":"On drag start, on drag end","text":"<ul> <li>On drag 1 touch pointer start, fired when catching 1st touch pointer.     <pre><code>rotate.on('drag1start', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 1 touch pointer end, fired when releasing the last one catched touch pointer.     <pre><code>rotate.on('drag1end', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers start, fired when catching 2 touch pointers.     <pre><code>rotate.on('rotatestart', function(rotate) {\n\n}, scope);\n</code></pre></li> <li>On drag 2 touch pointers end, fired when releasing any catched touch pointer.     <pre><code>rotate.on('rotateend', function(rotate) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#spin-game-object","title":"Spin game object","text":"<pre><code>rotate.spinObject(gameObejects);\n</code></pre> <p>Drag and spin game objects around current center of 2 dragging pointers. Uses this function under <code>'rotate'</code> event.</p> <ul> <li><code>gameObejects</code> : An array of game object, or a game object.</li> </ul>"},{"location":"gesture-rotate/#spin-angle","title":"Spin angle","text":"<pre><code>var angle = rotate.rotation;\n</code></pre> <p>Spin angle of 2 dragging pointers, in radius.</p>"},{"location":"gesture-rotate/#drag-vector-of-1st-touch-pointer","title":"Drag vector of 1st touch pointer","text":"<pre><code>var drag1Vector = rotate.drag1Vector; // {x, y}\n</code></pre>"},{"location":"gesture-rotate/#catched-touch-pointers","title":"Catched touch pointers","text":"<ul> <li>Pointer 0, available when state is <code>1</code> <pre><code>var pointer0 = rotate.pointers[0];\n</code></pre><ul> <li>Position of pointer     <pre><code>var x = pointer0.x;\nvar y = pointer0.y;\nvar worldX = pointer0.worldX;\nvar worldY = pointer0.worldY;\n</code></pre></li> </ul> </li> <li>Pointer 1, available when state is <code>2</code> <pre><code>var pointer0 = rotate.pointers[1];\n</code></pre></li> </ul>"},{"location":"gesture-rotate/#is-rotated","title":"Is rotated","text":"<pre><code>var isRotated = rotate.isRotated;\n</code></pre> <p>Return <code>true</code> if pinched.</p>"},{"location":"gesture-rotate/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = rotate.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>rotate.setDragThreshold(dragThreshold);\n// rotate.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = rotate.bounds;\n</code></pre></li> <li>Set     <pre><code>rotate.setDetectBounds(bounds);\n// rotate.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-swipe/","title":"Swipe","text":""},{"location":"gesture-swipe/#introduction","title":"Introduction","text":"<p>Get swipe events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-swipe/#live-demos","title":"Live demos","text":"<ul> <li>Swipe</li> </ul>"},{"location":"gesture-swipe/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-swipe/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-swipe/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe(config);\n// var swipe = scene.rexGestures.add.swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe(config);\n// var swipe = scene.rexGestures.add.swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Swipe } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add swipe input     <pre><code>var swipe = new Swipe(scene, config);\n// var swipe = new Swipe(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#create-instance","title":"Create instance","text":"<ul> <li>Swipe input     <pre><code>var swipe = scene.rexGestures.add.swipe({\n// enable: true,\n// bounds: undefined,\n\n// threshold: 10,\n// velocityThreshold: 1000,\n// dir: '8dir',\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Max time of the pointer to be down.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> <li><code>velocityThreshold</code> : Minimal dragging speed.</li> <li><code>dir</code> : <ul> <li><code>'up&amp;down'</code>, or <code>0</code> : Get <code>up</code> or <code>down</code> state only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Get <code>left</code> or <code>right</code> state only.</li> <li><code>'4dir'</code>, or <code>2</code> : Get <code>up</code>, <code>down</code>, <code>left</code> or <code>right</code> state.</li> <li><code>'8dir'</code>, or <code>3</code> : Get <code>up</code>, <code>up</code>/<code>left</code>, <code>up</code>/<code>right</code>, <code>down</code>, <code>down</code>/<code>left</code>, <code>down</code>/<code>right</code>, <code>left</code>, or <code>right</code> state.</li> </ul> </li> </ul> </li> <li>Swipe behavior of game object     <pre><code>var swipe = scene.rexGestures.add.swipe(gameObject, {\n// enable: true,\n\n// threshold: 10,\n// velocityThreshold: 1000,\n// direction: '8dir',\n});\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = swipe.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>swipe.setEnable(enable);  // enable: true, or false\n// swipe.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>swipe.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-swipe/#events","title":"Events","text":""},{"location":"gesture-swipe/#swipe","title":"Swipe","text":"<pre><code>swipe.on('swipe', function(swipe, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>swipe.left</code>, <code>swipe.right</code>, <code>swipe.up</code>, <code>swipe.down</code> : Swipe direction states.</li> <li><code>swipe.worldX</code>, <code>swipe.worldY</code> : World position of swiping start.</li> <li><code>swipe.x</code>, <code>swipe.y</code> : Scene position of swiping start.</li> <li><code>swipe.dragVelocity</code> : Velocity of dragging.</li> <li><code>gameObject</code>, <code>swipe.gameObject</code> : Parent gameobject of this pan behavior.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul>"},{"location":"gesture-swipe/#is-swiped","title":"Is swiped","text":"<pre><code>var isSwiped = swipe.isSwiped;\n</code></pre> <p>Return <code>true</code> if panning.</p>"},{"location":"gesture-swipe/#other-properties","title":"Other properties","text":"<ul> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = swipe.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>swipe.setDragThreshold(dragThreshold);\n// swipe.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Velocity threshold<ul> <li>Get     <pre><code>var velocityThreshold = swipe.velocityThreshold;\n</code></pre></li> <li>Set     <pre><code>swipe.setVelocityThreshold(velocityThreshold);\n// swipe.velocityThreshold = velocityThreshold;\n</code></pre></li> </ul> </li> <li>Direction mode<ul> <li>Get     <pre><code>var dirMode = swipe.dirMode;  // 0,1,2,3\n</code></pre></li> <li>Set     <pre><code>swipe.setDirectionMode(dirMode);  // 0,1,2,3,'up&amp;down','left&amp;right','4dir','8dir'\n// swipe.dirMode = dirMode;  // 0,1,2,3\n</code></pre></li> </ul> </li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = swipe.bounds;\n</code></pre></li> <li>Set     <pre><code>swipe.setDetectBounds(bounds);\n// swipe.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"gesture-tap/","title":"Tap","text":""},{"location":"gesture-tap/#introduction","title":"Introduction","text":"<p>Get tap/multi-taps events of a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"gesture-tap/#live-demos","title":"Live demos","text":"<ul> <li>Tap object</li> </ul>"},{"location":"gesture-tap/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gesture-tap/#install-plugin","title":"Install plugin","text":""},{"location":"gesture-tap/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');\n</code></pre></li> <li>Add tap input     <pre><code>var tap = scene.rexGestures.add.tap(config);\n// var tap = scene.rexGestures.add.tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexGestures',\nplugin: GesturesPlugin,\nmapping: 'rexGestures'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tap input     <pre><code>var tap = scene.rexGestures.add.tap(config);\n// var tap = scene.rexGestures.add.tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tap } from 'phaser3-rex-plugins/plugins/gestures.js';\n</code></pre></li> <li>Add tap input     <pre><code>var tap = new Tap(scene, config);\n// var tap = new Tap(gameObject, config);\n</code></pre></li> </ul>"},{"location":"gesture-tap/#create-instance","title":"Create instance","text":"<ul> <li>Tap input     <pre><code>var tap = scene.rexGestures.add.tap({\n// enable: true,\n// bounds: undefined,\n\n// time: 250,\n// tapInterval: 200,\n// threshold: 9,\n// tapOffset: 10,\n\n// taps: undefined,\n// minTaps: undefined,\n// maxTaps: undefined,\n});\n</code></pre><ul> <li><code>enable</code> : Set <code>false</code> to disable input events.</li> <li><code>bounds</code> : Touch detecting area rectangle, if game obect is not given.<ul> <li><code>undefined</code> : Ignore this feature, default behavior.</li> </ul> </li> <li><code>time</code> : Max time of the pointer to be down.</li> <li><code>tapInterval</code> : Max time between the multi-tap taps.</li> <li><code>threshold</code> : Minimal movement when pointer is down.</li> <li><code>tapOffset</code> : A multi-tap can be a bit off the initial position.</li> <li><code>taps</code> : Fire <code>tap</code> event only when taps count reaches this value.<ul> <li><code>undefined</code> : Fire <code>tap</code> event only when tapped end. i.e pointer-up time exceeds <code>tapInterval</code>.</li> </ul> </li> <li><code>minTaps</code> : Fire <code>tap</code> event only when taps count is larger than this value.<ul> <li><code>undefined</code> : Don't check taps count.</li> </ul> </li> <li><code>maxTaps</code> : Fire <code>tap</code> event only when taps count is less than this value.<ul> <li><code>undefined</code> : Don't check taps count.</li> </ul> </li> </ul> </li> <li>Tap behavior of game object     <pre><code>var tap = scene.rexGestures.add.tap(gameObject, {\n// enable: true,\n\n// time: 250,\n// tapInterval: 200,\n// threshold: 9,\n// tapOffset: 10,\n\n// taps: undefined,\n// minTaps: undefined,\n// maxTaps: undefined,\n});\n</code></pre></li> </ul>"},{"location":"gesture-tap/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = tap.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>tap.setEnable(enable);  // enable: true, or false\n// tap.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>tap.toggleEnable();\n</code></pre></li> </ul>"},{"location":"gesture-tap/#events","title":"Events","text":""},{"location":"gesture-tap/#tap","title":"Tap","text":"<pre><code>tap.on('tap', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>tap.tapsCount</code> : Taps count.</li> <li><code>gameObject</code>, <code>tap.gameObject</code> : Parent gameobject of this tap behavior.</li> <li><code>tap.worldX</code>, <code>tap.worldY</code> : World position of first tapping.</li> <li><code>tap.x</code>, <code>tap.y</code> : Scene position of first tapping.</li> <li><code>lastPointer</code> : Last touch pointer.</li> </ul> <pre><code>tap.on(tapsCount + 'tap', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre> <ul> <li><code>tapsCount + 'tap'</code> : <code>1tap</code>, <code>2tap</code>, <code>3tap</code>, etc ...</li> </ul>"},{"location":"gesture-tap/#tapping-start","title":"Tapping start","text":"<p>Each pointer-down will increase taps count and fire <code>tappingstart</code> event.</p> <pre><code>tap.on('tappingstart', function(tap, gameObject, lastPointer){\n}, scope);\n</code></pre>"},{"location":"gesture-tap/#is-tapped","title":"Is tapped","text":"<pre><code>var isTapped = tap.isTapped;\n</code></pre> <p>Return <code>true</code> if tapped end.</p>"},{"location":"gesture-tap/#other-properties","title":"Other properties","text":"<ul> <li>Hold time<ul> <li>Get     <pre><code>var holdTime = tap.holdTime;\n</code></pre></li> <li>Set     <pre><code>tap.setHoldTime(holdTime);\n// tap.holdTime = holdTime;\n</code></pre></li> </ul> </li> <li>Tap interval<ul> <li>Get     <pre><code>var tapInterval = tap.tapInterval;\n</code></pre></li> <li>Set     <pre><code>tap.setTapInterval(tapInterval);\n// tap.tapInterval = tapInterval;\n</code></pre></li> </ul> </li> <li>Drag threshold<ul> <li>Get     <pre><code>var dragThreshold = tap.dragThreshold;\n</code></pre></li> <li>Set     <pre><code>tap.setDragThreshold(dragThreshold);\n// tap.dragThreshold = dragThreshold;\n</code></pre></li> </ul> </li> <li>Tap offset<ul> <li>Get     <pre><code>var tapOffset = tap.tapOffset;\n</code></pre></li> <li>Set     <pre><code>tap.setTapOffset(tapOffset);\n// tap.tapOffset = tapOffset;\n</code></pre></li> </ul> </li> <li>Max taps<ul> <li>Get     <pre><code>var maxTaps = tap.maxTaps;\n</code></pre></li> <li>Set     <pre><code>tap.setMaxTaps(maxTaps);\n// tap.maxTaps = maxTaps;\n</code></pre></li> </ul> </li> <li>Min taps<ul> <li>Get     <pre><code>var minTaps = tap.minTaps;\n</code></pre></li> <li>Set     <pre><code>tap.setMinTaps(minTaps);\n// tap.minTaps = minTaps;\n</code></pre></li> </ul> </li> <li>Taps     <pre><code>taps.setTaps(taps);\n// taps.setTaps(minTaps, maxTaps);\n</code></pre></li> <li>Detect bounds<ul> <li>Get     <pre><code>var bounds = taps.bounds;\n</code></pre></li> <li>Set     <pre><code>taps.setDetectBounds(bounds);\n// taps.bounds = bounds;\n</code></pre></li> </ul> </li> </ul>"},{"location":"graphics/","title":"Graphics","text":""},{"location":"graphics/#introduction","title":"Introduction","text":"<p>Drawing on webgl or canvas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"graphics/#usage","title":"Usage","text":""},{"location":"graphics/#add-graphics-object","title":"Add graphics object","text":"<pre><code>var graphics = scene.add.graphics();\n</code></pre> <p>or</p> <pre><code>var graphics = scene.add.graphics({\nx: 0,\ny: 0,\n\n// lineStyle: {\n//     width: 1,\n//     color: 0xffffff,\n//     alpha: 1\n// },\n// fillStyle: {\n//     color: 0xffffff,\n//     alpha: 1\n// },\n\nadd: true\n});\n</code></pre>"},{"location":"graphics/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGraphics extends Phaser.GameObjects.Graphics {\nconstructor(scene, options) {\nsuper(scene, options);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var graphics = new MyGraphics(scene, options);\n</code></pre></li> </ul>"},{"location":"graphics/#drawing-commands","title":"Drawing commands","text":""},{"location":"graphics/#set-style","title":"Set style","text":"<ul> <li>Set default line style and fill style     <pre><code>graphics.setDefaultStyles({\nlineStyle: {\nwidth: 1,\ncolor: 0xffffff,\nalpha: 1\n},\nfillStyle: {\ncolor: 0xffffff,\nalpha: 1\n}\n});\n</code></pre></li> <li>Set line style     <pre><code>graphics.lineStyle(lineWidth, color, alpha);   // color: 0xRRGGBB\n</code></pre></li> <li>Set fill style<ul> <li>Fill color     <pre><code>graphics.fillStyle(color, alpha);   // color: 0xRRGGBB\n</code></pre></li> <li>Fill gradient color (WebGL only)     <pre><code>graphics.fillGradientStyle(topLeft, topRight, bottomLeft, bottomRight, alpha);  // alpha= 1\n// graphics.fillGradientStyle(topLeft, topRight, bottomLeft, bottomRight, alphaTopLeft, alphaTopRight, alphaBottomLeft, alphaBottomRight);\n</code></pre><ul> <li><code>topLeft</code> : The tint being applied to the top-left of the Game Object.</li> <li><code>topRight</code> : The tint being applied to the top-right of the Game Object.</li> <li><code>bottomLeft</code> : The tint being applied to the bottom-left of the Game Object.</li> <li><code>bottomRight</code> : The tint being applied to the bottom-right of the Game Object.</li> <li><code>alphaTopLeft</code> : The top left alpha value.</li> <li><code>alphaTopRight</code> : The top right alpha value.</li> <li><code>alphaBottomLeft</code> : The bottom left alpha value.</li> <li><code>alphaBottomRight</code> : The bottom right alpha value.</li> </ul> </li> </ul> </li> </ul>"},{"location":"graphics/#clear","title":"Clear","text":"<pre><code>graphics.clear();\n</code></pre>"},{"location":"graphics/#path","title":"Path","text":"<pre><code>graphics.beginPath();\ngraphics.closePath();\ngraphics.fillPath(); // = graphics.fill()\ngraphics.strokePath(); // = graphics.stroke()\n</code></pre>"},{"location":"graphics/#rectangle","title":"Rectangle","text":"<pre><code>graphics.fillRectShape(rect); // rect: {x, y, width, height}\ngraphics.fillRect(x, y, width, height);\ngraphics.strokeRectShape(rect);  // rect: {x, y, width, height}\ngraphics.strokeRect(x, y, width, height);\n</code></pre>"},{"location":"graphics/#rounded-rectangle","title":"Rounded rectangle","text":"<pre><code>graphics.fillRoundedRect(x, y, width, height, radius);\ngraphics.strokeRoundedRect(x, y, width, height, radius);\n</code></pre> <ul> <li><code>radius</code> : number or an object <code>{tl, tr, bl, br}</code>, <ul> <li>Positive value : Convex corner.</li> <li>Negative value : Concave corner.</li> </ul> </li> </ul>"},{"location":"graphics/#triangle","title":"Triangle","text":"<pre><code>graphics.fillTriangleShape(triangle); // triangle: {x1, y1, x2, y2, x3, y3}\ngraphics.fillTriangle(x1, y1, x2, y2, x3, y3);\ngraphics.strokeTriangleShape(triangle); // triangle: {x1, y1, x2, y2, x3, y3}\ngraphics.strokeTriangle(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"graphics/#point","title":"Point","text":"<pre><code>graphics.fillPointShape(point, size); // point: {x, y}\ngraphics.fillPoint(x, y, size);\n</code></pre>"},{"location":"graphics/#line","title":"Line","text":"<pre><code>graphics.strokeLineShape(line); // line: {x1, y1, x2, y2}\ngraphics.lineBetween(x1, y1, x2, y2);\ngraphics.lineTo(x, y);\ngraphics.moveTo(x, y);\n</code></pre>"},{"location":"graphics/#lines","title":"Lines","text":"<pre><code>graphics.strokePoints(points, closeShape, closePath, endIndex);  // points: [{x, y}, ...]\ngraphics.fillPoints(points, closeShape, closePath, endIndex);  // points: [{x, y}, ...]\n</code></pre> <ul> <li><code>points</code> : Array of <code>{x, y}</code></li> <li><code>closeShape</code> : When <code>true</code>, the shape is closed by joining the last point to the first point.</li> <li><code>closePath</code> : When <code>true</code>, the path is closed before being stroked.</li> <li><code>endIndex</code> : The index of <code>points</code> to stop drawing at. Defaults to <code>points.length</code>.</li> </ul>"},{"location":"graphics/#circle","title":"Circle","text":"<pre><code>graphics.fillCircleShape(circle); // circle: {x, y, radius}\ngraphics.fillCircle(x, y, radius);\ngraphics.strokeCircleShape(circle);  // circle: {x, y, radius}\ngraphics.strokeCircle(x, y, radius);\n</code></pre> <p>Draw or fill circle shape by points.</p>"},{"location":"graphics/#ellipse","title":"Ellipse","text":"<pre><code>graphics.strokeEllipseShape(ellipse, smoothness);   // ellipse: Phaser.Geom.Ellipse\ngraphics.strokeEllipse(x, y, width, height, smoothness);\ngraphics.fillEllipseShape(ellipse, smoothness);    // ellipse: Phaser.Geom.Ellipse\ngraphics.fillEllipse(x, y, width, height, smoothness);\n</code></pre> <p>Draw or fill ellipse shape by points.</p>"},{"location":"graphics/#arc","title":"Arc","text":"<pre><code>graphics.arc(x, y, radius, startAngle, endAngle, anticlockwise);\ngraphics.arc(x, y, radius, startAngle, endAngle, anticlockwise, overshoot);\n</code></pre> <p>Draw arc curve by points.</p>"},{"location":"graphics/#pie-chart-slice","title":"Pie-chart slice","text":"<pre><code>graphics.slice(x, y, radius, startAngle, endAngle, anticlockwise);\ngraphics.slice(x, y, radius, startAngle, endAngle, anticlockwise, overshoot);\n</code></pre> <p>Draw pie-chart slice shape by points.</p> <p>Fill this shape</p> <pre><code>graphics.fillPath();\n</code></pre>"},{"location":"graphics/#clear-pattern","title":"Clear pattern","text":"<pre><code>graphics.setTexture();\n</code></pre>"},{"location":"graphics/#transfer","title":"Transfer","text":"<pre><code>graphics.save();\ngraphics.restore();\ngraphics.translateCanvas(x, y);\ngraphics.scaleCanvas(x, y);\ngraphics.rotateCanvas(radians);\n</code></pre>"},{"location":"graphics/#generate-texture","title":"Generate texture","text":"<pre><code>graphics.generateTexture(key, width, height);  // key: texture key\n</code></pre>"},{"location":"graphics/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"graphics/#create-mask","title":"Create mask","text":"<pre><code>var mask = graphics.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"graphics/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"gridalign/","title":"Quad/Hexagon grid align","text":""},{"location":"gridalign/#introduction","title":"Introduction","text":"<p>Align objects on quadrilateral or hexagon grid. </p> <p>See also built-in grid-align.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"gridalign/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridalign/#install-plugin","title":"Install plugin","text":""},{"location":"gridalign/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridalignplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridalignplugin.min.js', true);\n</code></pre></li> <li>Grid-align objects     <pre><code>scene.plugins.get('rexgridalignplugin').quad(gameObjects, config);\nscene.plugins.get('rexgridalignplugin').hexagon(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridAlignPlugin from 'phaser3-rex-plugins/plugins/gridalign-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridAlign',\nplugin: GridAlignPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Grid-align objects     <pre><code>scene.plugins.get('rexGridAlign').quad(gameObjects, config);\nscene.plugins.get('rexGridAlign').hexagon(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadGridAlign, HexagonGridAlign } from 'phaser3-rex-plugins/plugins/gridalign.js';\n</code></pre></li> <li>Grid-align objects     <pre><code>QuadGridAlign(gameObjects, config);\nHexagonGridAlign(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"gridalign/#quadrilateral-grid","title":"Quadrilateral grid","text":"<pre><code>scene.plugins.get('rexGridAlign').quad(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\ntype: 0,\nposition: Phaser.Display.Align.CENTER,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>type</code><ul> <li><code>0</code>, or <code>orthogonal</code></li> <li><code>1</code>, or <code>isometric</code></li> </ul> </li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code></li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"gridalign/#hexagon-grid","title":"Hexagon grid","text":"<pre><code>scene.plugins.get('rexGridAlign').hexagon(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\nstaggeraxis: 'x',\nstaggerindex: 'odd',\nposition: Phaser.Display.Align.CENTER,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>staggeraxis</code><ul> <li><code>0</code>, or <code>y</code></li> <li><code>1</code>, or <code>x</code></li> </ul> </li> <li><code>staggerindex</code><ul> <li><code>0</code>, or <code>even</code></li> <li><code>1</code>, or <code>odd</code></li> </ul> </li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code></li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"gridalign/#types-of-hexagon-grid","title":"Types of hexagon grid","text":"<p>Reference</p> <ul> <li><code>odd-r</code> : staggeraxis = <code>x</code>, staggerindex = <code>odd</code></li> <li><code>even-r</code> : staggeraxis = <code>x</code>, staggerindex = <code>even</code></li> <li><code>odd-q</code> : staggeraxis = <code>y</code>, staggerindex = <code>odd</code></li> <li><code>even-q</code> :staggeraxis = <code>y</code>, staggerindex = <code>even</code></li> </ul>"},{"location":"gridcutimage/","title":"Grid cut image","text":""},{"location":"gridcutimage/#introduction","title":"Introduction","text":"<p>Create image game objects in grids, to assemble target texture.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"gridcutimage/#live-demos","title":"Live demos","text":"<ul> <li>Cut image</li> <li>Cut rendertexture</li> </ul>"},{"location":"gridcutimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridcutimage/#install-plugin","title":"Install plugin","text":""},{"location":"gridcutimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridcutimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridcutimageplugin.min.js', true);\n</code></pre></li> <li>Create images     <pre><code>var images = scene.plugins.get('rexgridcutimageplugin').gridCut(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridCutImagePlugin from 'phaser3-rex-plugins/plugins/gridcutimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridCutImage',\nplugin: GridCutImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create images     <pre><code>var images = scene.plugins.get('rexGridCutImage').gridCut(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import GridCutImage from 'phaser3-rex-plugins/plugins/gridcutimage.js';\n</code></pre></li> <li>Create images     <pre><code>var images = GridCutImage(gameObjects, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"gridcutimage/#grid-cut","title":"Grid cut","text":"<pre><code>scene.plugins.get('rexGridCutImage').gridCut(gameObjects, columns, rows, {\n// onCreateImage: undefined,\n// ImageClass: Phaser.GameObjects.Image,\n\n// originX: 0.5,\n// originY: 0.5,\n// add: true,\n// align: true,\n// objectPool: undefined\n})\n</code></pre> <ul> <li><code>gameObjects</code> : Target game object which has a texture, ex Image, RenderTexture.</li> <li><code>columns</code>, <code>rows</code> : Cut texture in <code>columns</code> x <code>rows</code> grids</li> <li><code>onCreateImage</code> : Custom callback to return an image game object, optional.     <pre><code>function(scene, texture, frame) {\nreturn gameObject;\n}\n</code></pre><ul> <li><code>texture</code> : A texture object.</li> <li><code>frame</code> : Frame name.</li> </ul> </li> <li><code>ImageClass</code> : Create image game object from this class. Default value is built-in Image class. Used when <code>onCreateImage</code> is <code>undefined</code>.</li> <li><code>originX</code>, <code>originY</code> : Origin of created image game objects</li> <li><code>add</code> : <ul> <li><code>true</code> : Add these created image game objects to scene. Default value.</li> <li><code>false</code> : Don't add created image game objects to scene.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>true</code> : Align position of created image game objects to target game object (<code>gameObjects</code>). Default value when <code>add</code> is set to <code>true</code>.</li> <li><code>false</code> : Don't set position of created image game objects. Default value when <code>add</code> is set to <code>false</code>.</li> </ul> </li> <li><code>objectPool</code> : An array of image game objects, will reuse image game objects from this pool. Optional.</li> </ul>"},{"location":"gridtable/","title":"Grid table","text":""},{"location":"gridtable/#introduction","title":"Introduction","text":"<p>Viewer of grid table, to manipulate game object of each visible cell.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"gridtable/#live-demos","title":"Live demos","text":"<ul> <li>Grid table</li> <li>Grid table &amp; slider</li> <li>Grid table &amp; scroller</li> <li>Grid table &amp; slider &amp; scroller</li> <li>Horizontal scrolling</li> <li>Varying cell height</li> </ul>"},{"location":"gridtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"gridtable/#install-plugin","title":"Install plugin","text":""},{"location":"gridtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgridtableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridtableplugin.min.js', true);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.add.rexGridTable(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GridTablePlugin from 'phaser3-rex-plugins/plugins/gridtable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGridTablePlugin',\nplugin: GridTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.add.rexGridTable(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import GridTable from 'phaser3-rex-plugins/plugins/gridtable.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new GridTable(scene, x, y, width, height, config);\nscene.add.existing(table);\n</code></pre></li> </ul>"},{"location":"gridtable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.add.rexGridTable(x, y, width, height, {\nscrollMode: 0,        // 0|'v'|'vertical'|1|'h'|'horizontal'\ncellsCount: 0,\ncolumns: 1,\n// rows: 1,\ncellHeight: 30,\ncellWidth: 30,\n\ncellVisibleCallback: null,\n// cellVisibleCallback: function (cell, cellContainer, table) {},\ncellVisibleCallbackScope: undefined,\nreuseCellContainer: false,\n\ncellInvisibleCallback: null,\n// cellInvisibleCallback: function(cell) {},\ncellInvisibleCallbackScope: undefined,\nclamplTableOXY: true,\n\nmask: {\npadding: 0,\n// updateMode: 0,\n// layer: undefined,\n},\n// enableLayer: false\n});\n</code></pre> <ul> <li><code>scrollMode</code> :<ul> <li><code>0</code>, or <code>'v'</code>, or <code>'vertical'</code> : Scroll table vertically.</li> <li><code>1</code>, or <code>'h'</code>, or <code>'horizontal'</code> : Scroll table horizontally.</li> </ul> </li> <li><code>cellsCount</code> : Total cells count.</li> <li><code>columns</code> : Columns count of each row. Can be used in vertical or horizontal scroll mode.</li> <li><code>rows</code> : Rows count of each column. Can be used in horizontal scroll mode.</li> <li><code>cellHeight</code> : Default height of each cell.<ul> <li>Expand cell height to fit table height : set <code>cellHeight</code> to <code>undefined</code>, and <code>scrollMode</code> is <code>'horizontal'</code>.</li> </ul> </li> <li><code>cellWidth</code> : Width of each cell.<ul> <li>Expand cell width to fit table width : set <code>cellWidth</code> to <code>undefined</code>, and <code>scrollMode</code> is <code>'vertical'</code>.</li> </ul> </li> <li><code>cellVisibleCallback</code> , <code>cellVisibleCallbackScope</code> : Callback when cell begins visible.     <pre><code>function (cell, cellContainer, table) {\nif (cellContainer === null) { // No reusable cell container, create a new one\nvar scene = cell.scene;\n// cellContainer = scene.add.container();\n}\n// Set child properties of cell container ...\ncell.setContainer(cellContainer); // Assign cell container\n}\n</code></pre></li> <li><code>reuseCellContainer</code> : Set <code>true</code> to reuse cell container when cell is visible.</li> <li><code>cellInvisibleCallback</code>, <code>cellInvisibleCallbackScope</code>: Callback when cell begins invisible <pre><code>function (cell) {\n// var container = cell.popContainer();\n}\n</code></pre></li> <li><code>clamplTableOXY</code> : Set <code>true</code> to clamp <code>tableOX</code>, <code>tableOY</code> when out-of-bound,<ul> <li>Set <code>false</code> when dragging by scroller</li> </ul> </li> <li><code>mask</code> : A rectangle mask of cells<ul> <li><code>mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>mask.updateMode</code> : When to update cells mask<ul> <li><code>0</code>, or <code>update</code> : Apply mask to cell container only when <code>table.updateTable()</code> is invoked. Default behavior.</li> <li><code>1</code>, or <code>everyTick</code> : Apply mask to cell container every tick. Use this mode if game objects of cell are moved after <code>table.updateTable()</code> and still been masked.</li> </ul> </li> <li><code>mask.layer</code> :<ul> <li><code>undefined</code>, <code>false</code>, <code>null</code> : Disable this feature, default behavior</li> <li>Layer game object : Draw children game object of panel on this layer game object, then apply mask on this layer game object.     </li> </ul> </li> <li><code>false</code> : No mask.</li> </ul> </li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add cell game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add cell game objects into an internal layer game object. See also.</li> </ul> </li> </ul> <p>Add grid table from JSON</p> <pre><code>var table = scene.make.rexGridTable({\nx: 0,\ny: 0,\nwidth: 256,\nheight: 256,\n\n// cellsCount: 0,   // total cells count\n// ...\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"gridtable/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridTable extends GridTable {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var table = new MyGridTable(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"gridtable/#cell-begins-visible","title":"Cell begins visible","text":"<p>Add container of cell when it begins visible in event <code>cellvisible</code>. </p> <pre><code>table.on('cellvisible', function(cell, cellContainer, table){\nif (cellContainer === null) { // No reusable cell container, create a new one\nvar scene = cell.scene;\n// cellContainer = scene.add.container();\n}\n// Set child properties of cell container ...\ncell.setContainer(cellContainer); // Assign cell container\n})\n</code></pre> <p>It is equal to <code>cellVisibleCallback</code> in configuration.</p> <pre><code>{\n// ...\ncellVisibleCallback: function(cell, cellContainer, table) {\ncell.setContainer(cellContainer); // Assign cell container\n},\n// ...\n}\n</code></pre> <ul> <li><code>cell</code><ul> <li>Scene object of grid table.     <pre><code>var scene = cell.scene;\n</code></pre></li> <li>Index of cell.     <pre><code>var index = cell.index;\n</code></pre></li> <li>Size of cell.     <pre><code>var cellWidth = cell.width;\nvar cellHeight = cell.height;\n</code></pre><ul> <li>Change size of cell : <ul> <li>Change cell height in scoll-vertical mode.     <pre><code>cell.setHeight(newHeight);\n// cell.height = newHeight;\n</code></pre>     or     <pre><code>cell.setDeltaHeight(deltaHeight);\n// cell.deltaHeight = deltaHeight;\n</code></pre></li> <li>Reset cell height in scoll-vertical mode.     <pre><code>cell.setDeltaHeight(0);\n// cell.deltaHeight = 0;\n</code></pre></li> <li>Change cell width in scroll-horizontal mode.     <pre><code>cell.setWidth(newWidth);\n// cell.width = newWidth;\n</code></pre>     or     <pre><code>cell.setDeltaWidth(deltaWidth);\n// cell.deltaWidth = deltaWidth;\n</code></pre></li> <li>Reset cell height in scroll-horizontal mode.     <pre><code>cell.setDeltaWidth(0);\n// cell.deltaWidth = 0;\n</code></pre></li> </ul> </li> </ul> </li> <li>Assign cell container. Set origin point of this cell container to (0,0).     <pre><code>cell.setContainer(cellContainer);\n</code></pre></li> <li>Alignment of cellContainer :      <pre><code>cell.setCellContainerAlign(align);\n</code></pre><ul> <li><code>align</code> :<ul> <li><code>undefined</code> : Set position of cellContainer to left-top of cell space. Default behavior.</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center of cell space.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center of cell space.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center of cell space.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center of cell space.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center of cell space.         </li> </ul> </li> </ul> </li> </ul> </li> <li><code>cellContainer</code> : Cell container picked from object pool for reusing. Set <code>reuseCellContainer</code> to <code>true</code> to enable this feature.<ul> <li><code>null</code> : No cell container available.</li> <li>Game object : Reusable cell container.</li> </ul> </li> <li><code>table</code> : Grid table.</li> </ul> <p>Each cell only has one container gameObject, old container will be destroyed when assigning a new container.</p>"},{"location":"gridtable/#cell-begins-invisible","title":"Cell begins invisible","text":"<p>Container of an invisible cell will be destroyed automatically.</p> <p>To resue container gameObject</p> <ul> <li>Set <code>reuseCellContainer</code> to <code>true</code> to put invisible cell container into object pool.</li> <li>Or, pop that container by <code>cell.popContainer()</code> in event <code>cellinvisible</code>.</li> </ul> <pre><code>table.on('cellinvisible', function(cell){\n// var container = cell.popContainer();\n})\n</code></pre> <p>It is equal to <code>cellInvisibleCallback</code> in configuration.</p> <pre><code>{\n// ...\ncellInvisibleCallback: function(cell) {\n// var container = cell.popContainer();\n},\n// ...\n}\n</code></pre>"},{"location":"gridtable/#scroll-table-content","title":"Scroll table content","text":"<ul> <li>Set     <pre><code>table.setTableOY(oy).updateTable();\ntable.addTableOY(dy).updateTable();\n</code></pre> <pre><code>table.setTableOX(ox).updateTable();\ntable.addTableOX(dx).updateTable();\n</code></pre> <pre><code>table.setTableOXY(ox, oy).updateTable();\ntable.addTableOXY(dx, dy).updateTable();\n</code></pre>     or     <pre><code>table.tableOY = oy;  // include table.updateTable()\ntable.tableOX = ox;\n</code></pre><ul> <li>These will trigger <code>cellvisible</code>, or <code>cellinvisible</code> events.</li> </ul> </li> <li>Get     <pre><code>var tableOY = table.tableOY;\nvar tableOX = table.tableOX;\n</code></pre></li> </ul> <p>Use case</p> <p>Scroll table by scroller behavior.</p>"},{"location":"gridtable/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>table.setTableOYByPercentage(t).updateTable();  // t: 0~1\n</code></pre>     or     <pre><code>table.t = t;  // include table.updateTable()\n</code></pre></li> <li>Get     <pre><code>var t = table.getTableOYPercentage();\n//var t = table.t;\n</code></pre></li> </ul> <p>Use case</p> <p>Scroll table by slider behavior.</p>"},{"location":"gridtable/#scroll-to-bottom","title":"Scroll to bottom","text":"<pre><code>table.scrollToBottom();\n</code></pre>"},{"location":"gridtable/#scroll-to-row","title":"Scroll to row","text":"<ul> <li>Scroll to next row     <pre><code>table.scrollToNextRow();\n</code></pre></li> <li>Scroll to next n row     <pre><code>table.scrollToNextRow(n);\n</code></pre></li> <li>Scroll to row     <pre><code>table.scrollToRow(rowIndex);\n</code></pre></li> <li>Get current row index     <pre><code>var rowIndex = table.startRowIndex;\n</code></pre></li> </ul>"},{"location":"gridtable/#refresh-table-content","title":"Refresh table content","text":"<ul> <li>Refresh all visible cells.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Update a visible cell     <pre><code>table.updateVisibleCell(cellIndex);\n</code></pre></li> </ul>"},{"location":"gridtable/#table-size-in-cells","title":"Table size in cells","text":"<ul> <li>Set table size     <pre><code>table.setGridSize(colCount, rowCount).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#total-cells-count","title":"Total cells count","text":"<ul> <li>Get     <pre><code>var count = table.cellsCount;\n</code></pre></li> <li>Set     <pre><code>table.setCellsCount(count).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#columns-count","title":"Columns count","text":"<ul> <li>Get     <pre><code>var columnCount = table.columnCount;\n</code></pre></li> <li>Set     <pre><code>table.setColumnCount(count).updateTable();\n</code></pre></li> </ul>"},{"location":"gridtable/#table-size-in-pixels","title":"Table size in pixels","text":"<ul> <li>Table height in pixels     <pre><code>var tableHeight = table.tableHeight;\n</code></pre></li> <li>Table width in pixels     <pre><code>var tableWidth = table.tableWidth;\n</code></pre></li> </ul>"},{"location":"gridtable/#bounds-of-tableox-tableoy","title":"Bounds of tableOX, tableOY","text":"<ul> <li>Top bound of tableOY     <pre><code>var topTableOY = table.topTableOY;  // 0\n</code></pre></li> <li>Bottom bound of tableOY     <pre><code>var bottomTableOY = table.bottomTableOY; // A negative number\n</code></pre></li> <li>Left bound of tableOX     <pre><code>var leftTableOX = table.leftTableOX;  // 0\n</code></pre></li> <li>Right bound of tableOX     <pre><code>var rightTableOX = table.rightTableOX; // A negative number\n</code></pre></li> </ul> <p>Use case</p> <p>Set bounds of scroller</p>"},{"location":"gridtable/#resize-table","title":"Resize table","text":"<pre><code>table.resize(width, height);\n</code></pre>"},{"location":"gridtable/#cell","title":"Cell","text":""},{"location":"gridtable/#get-cell","title":"Get cell","text":"<pre><code>var cell = table.getCell(cellIndex);\n</code></pre>"},{"location":"gridtable/#get-cell-from-position","title":"Get cell from position","text":"<pre><code>var cellIndex = table.pointToCellIndex(x, y);\nvar cell = table.getCell(cellIndex);\n</code></pre>"},{"location":"gridtable/#cell-height","title":"Cell height","text":"<ul> <li>Get     <pre><code>var height = cell.height;\n</code></pre></li> <li>Set cell height, only worked in scoll-vertical mode.     <pre><code>cell.height = height;\n// cell.setHeight(height);\n</code></pre>     or     <pre><code>table.setCellHeight(cellIndex, cellHeight);\n</code></pre><ul> <li>Refresh table after the cell size is changed.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Emit <code>'cellheightchange'</code> event.     <pre><code>table.on('cellheightchange', function (cell, cellContainer, table) {\n});\n</code></pre></li> </ul> </li> </ul>"},{"location":"gridtable/#cell-width","title":"Cell width","text":"<ul> <li>Get     <pre><code>var width = cell.width;\n</code></pre></li> <li>Set cell width, only worked in scoll-horizontal mode.     <pre><code>cell.width = width;\n// cell.setWidth(width);\n</code></pre>     or     <pre><code>table.setCellWidth(cellIndex, cellWidth);\n</code></pre><ul> <li>Refresh table after the cell size is changed.     <pre><code>table.updateTable(true);\n</code></pre></li> <li>Emit <code>'cellwidthchange'</code> event.     <pre><code>table.on('cellwidthchange', function (cell, cellContainer, table) {\n});\n</code></pre></li> </ul> </li> </ul>"},{"location":"gridtable/#fore-each-visible-cell","title":"Fore each visible cell","text":"<ul> <li>For when you absolutely know this Set won't be modified during the iteration     <pre><code>table.iterateVisibleCell(function(cell){\n// ...\n});\n</code></pre></li> <li>For when you know this Set will be modified during the iteration.     <pre><code>table.eachVisibleCell(function(cell){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"gridtable/#container","title":"Container","text":"<ul> <li>Get     <pre><code>var container = cell.getContainer();\n</code></pre></li> <li>Pop (get and remove)     <pre><code>var container = cell.popContainer();\n</code></pre></li> <li>Set     <pre><code>cell.setContainer(container);\n</code></pre></li> <li>Remove     <pre><code>cell.destroyContainer();\n</code></pre></li> </ul>"},{"location":"gridtable/#properties","title":"Properties","text":"<pre><code>var cellIndex = cell.index;\n</code></pre>"},{"location":"gridtable/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"group/","title":"Group","text":""},{"location":"group/#introduction","title":"Introduction","text":"<p>Objects pool, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"group/#usage","title":"Usage","text":""},{"location":"group/#add-group-object","title":"Add group object","text":"<pre><code>var group = scene.add.group(config);\n// var group = scene.add.group(gameObjects, config);  // Add game objects into group\n</code></pre> <ul> <li><code>config</code> <pre><code>{\nclassType: Phaser.GameObjects.Sprite,\ndefaultKey: null,\ndefaultFrame: null,\nactive: true,\nmaxSize: -1,\nrunChildUpdate: false,\ncreateCallback: null,\nremoveCallback: null,\ncreateMultipleCallback: null\n}\n</code></pre><ul> <li><code>classType</code> :<ul> <li>Sprite : <code>Phaser.GameObjects.Sprite</code></li> <li>Image : <code>Phaser.GameObjects.Image</code></li> </ul> </li> <li><code>runChildUpdate</code> : Set <code>true</code> to run <code>gameObject.update()</code> every tick.</li> <li><code>createCallback</code> : A function to be called when adding or creating group members.     <pre><code>var callback = function(gameObject) {\n}\n</code></pre></li> <li><code>removeCallback</code> : A function to be called when removing group members.     <pre><code>var callback = function(gameObject) {\n}\n</code></pre></li> <li><code>createMultipleCallback</code> : A function to be called when creating several group members at once.     <pre><code>var callback = function(gameObjects) {\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"group/#add-game-object","title":"Add game object","text":"<pre><code>group.add(gameObject);\n// group.add(gameObject, true);  // add this game object to display and update list of scene\n</code></pre> <pre><code>group.addMultiple(gameObjects);   // array of game objects\n// group.addMultiple(gameObjects, true);\n</code></pre> <ul> <li>Game object will only be added once.</li> <li>Game object will be removed automatically when destroyed.</li> </ul>"},{"location":"group/#remove-game-object","title":"Remove game object","text":"<pre><code>group.remove(gameObject);\n// group.remove(gameObject, true);  // also remove this game object from display and update list of scene\n</code></pre> <p>Remove all game objects</p> <pre><code>group.clear();\n// group.clear(removeFromScene, destroyChild);\n</code></pre>"},{"location":"group/#get-game-objects","title":"Get game objects","text":"<ul> <li>Get all game objects.     <pre><code>var gameObjects = group.getChildren();  // array of game objects\n</code></pre></li> <li>Get all matching game objects     <pre><code>var gameObjects = group.getMatching(property, value);\n// var gameObjects = group.getMatching(property, value, startIndex, endIndex);\n</code></pre></li> <li>Amount of game objects.     <pre><code>var len = group.getLength();\n</code></pre></li> <li>Group is full. Maximun size is set in <code>maxSize</code>.     <pre><code>var isFull = group.isFull();\n</code></pre></li> <li>Game object is in group.     <pre><code>var isInGroup = group.contains(child);\n</code></pre></li> </ul>"},{"location":"group/#group-actions","title":"Group actions","text":""},{"location":"group/#property","title":"Property","text":"<ul> <li>Set property     <pre><code>group.propertyValueSet(key, value);\n// group.propertyValueSet(key, value, step, index, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>1</code> : From beginning to end </li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> <li>Increase property     <pre><code>group.propertyValueInc(key, value);\n// group.propertyValueInc(key, value, step, index, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>1</code> : From beginning to end </li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#position","title":"Position","text":"<ul> <li>Set Position     <pre><code>group.setX(value);\n// group.setX(value, step);\ngroup.setX(value);\n// group.setY(value, step);\ngroup.setXY(x, y);\n// group.setXY(x, y, stepX, stepY);\n</code></pre></li> <li>Increase Position     <pre><code>group.incX(value);\n// group.incX(value, step);\ngroup.incY(value);\n// group.incY(value, step);\ngroup.incXY(x, y);\n// group.incXY(x, y, stepX, stepY);\n</code></pre></li> <li>Shift position     <pre><code>group.shiftPosition(x, y);\n// group.shiftPosition(x, y, direction);\n</code></pre><ul> <li><code>direction</code> : <ul> <li><code>0</code> : First to last</li> <li><code>1</code> : Last to first</li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#angle","title":"Angle","text":"<ul> <li>Set angle     <pre><code>group.angle(value);\n// group.angle(value, step);\n</code></pre> <pre><code>group.rotate(value);\n// group.rotate(value, step);\n</code></pre></li> <li>Rotate around     <pre><code>group.rotateAround(point, angle);\n</code></pre> <pre><code>group.rotateAroundDistance(point, angle, distance);\n</code></pre></li> </ul>"},{"location":"group/#visible","title":"Visible","text":"<ul> <li>Set visible     <pre><code>group.setVisible(value);\n// group.setVisible(value, index, direction);\n</code></pre><ul> <li><code>index</code> : An optional offset to start searching from within the items array.</li> <li><code>direction</code> : The direction to iterate through the array.<ul> <li><code>1</code> : From beginning to end</li> <li><code>-1</code> : From end to beginning</li> </ul> </li> </ul> </li> <li>Toggle visible     <pre><code>group.toggleVisible();\n</code></pre></li> </ul>"},{"location":"group/#alpha","title":"Alpha","text":"<ul> <li>Set alpha     <pre><code>group.setAlpha(value);\n// group.setAlpha(value, step);\n</code></pre></li> </ul>"},{"location":"group/#tint","title":"Tint","text":"<ul> <li>Set tint     <pre><code>group.setTint(value);\n// group.setTint(topLeft, topRight, bottomLeft, bottomRight);\n</code></pre></li> </ul>"},{"location":"group/#blend-mode","title":"Blend mode","text":"<ul> <li>Set blend mode <pre><code>group.setBlendMode(value);\n</code></pre></li> </ul>"},{"location":"group/#scale","title":"Scale","text":"<ul> <li>Set scale     <pre><code>group.scaleX(value);\n// group.scaleX(value, step);\ngroup.scaleY(value);\n// group.scaleY(value, step);\ngroup.scaleXY(scaleX, scaleY);\n// group.scaleXY(scaleX, scaleY, stepX, stepY);\n</code></pre></li> </ul>"},{"location":"group/#origin","title":"Origin","text":"<ul> <li>Set origin     <pre><code>group.setOrigin(originX, originY);\n// group.setOrigin(originX, originY, stepX, stepY);\n</code></pre></li> </ul>"},{"location":"group/#depth","title":"Depth","text":"<ul> <li>Set depth     <pre><code>group.setDepth(value, step);\n</code></pre></li> </ul>"},{"location":"group/#animation","title":"Animation","text":"<ul> <li>Play animation     <pre><code>group.playAnimation(key, startFrame);\n</code></pre></li> </ul>"},{"location":"group/#hit-area","title":"Hit area","text":"<ul> <li>Set hit-area     <pre><code>group.setHitArea();\n// group.setHitArea(hitArea, hitAreaCallback);\n</code></pre></li> </ul>"},{"location":"group/#shuffle","title":"Shuffle","text":"<ul> <li>Shuffle array     <pre><code>group.shuffle();\n</code></pre></li> </ul>"},{"location":"group/#activeinactive-game-objects","title":"Active/inactive game objects","text":"<ul> <li>Set inactive     <pre><code>group.kill(gameObject);         // gameObject.setActive(false)\ngroup.killAndHide(gameObject);  // gameObject.setActive(false).setVisible(false)\n</code></pre></li> <li>Amount of active game objects     <pre><code>var activeCount = group.countActive();\n</code></pre>     or     <pre><code>var activeCount = group.getTotalUsed();\n</code></pre></li> <li>Amount of active game objects     <pre><code>var inactiveCount = group.countActive(false);\n</code></pre></li> <li>Amount of free (maxSize - activeCount) game objects     <pre><code>var freeCount = group.getTotalFree();  // group.maxSize - group.getTotalUsed()\n</code></pre></li> <li>Get first active/inactive game object,<ul> <li>Return <code>null</code> if no game object picked.     <pre><code>var gameObject = group.getFirst(active);  // active = true/false\nvar gameObject = group.getFirstAlive(); // Equal to group.getFirst(true, ...)\nvar gameObject = group.getFirstDead(); // Equal to group.getFirst(false, ...)\n</code></pre></li> <li>Create one if no game object picked.     <pre><code>var gameObject = group.getFirst(active, true, x, y, key, frame, visible);  // active = true/false\nvar gameObject = group.getFirstAlive(true, x, y, key, frame, visible); // Equal to group.getFirst(true, ...)\nvar gameObject = group.getFirstDead(true, x, y, key, frame, visible); // Equal to group.getFirst(false, ...)\nvar gameObject = group.get(x, y, key, frame, visible); // Equal to group.getFirst(false, true, ...)\n</code></pre><ul> <li>Use (<code>x</code>, <code>y</code>, <code>key</code>, <code>frame</code>) to create Image/Sprite game object.     <pre><code>var newGameObject = new GameObjectClass(x, y, key, frame);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#create-game-objects","title":"Create game objects","text":"<pre><code>var gameObjects = group.createFromConfig(config);\nvar gameObjects = group.createMultiple(config);    // config in array\n</code></pre> <ul> <li><code>config</code> <pre><code>{\nclassType: this.classType,\nkey: undefined,             // Required\nframe: null,\nvisible: true,\nactive: true,\nrepeat: 0,                  // Create (1 + repeat) game objects\ncreateCallback: undefined,  // Override this.createCallback if not undefined\n\n// Position\nsetXY: {\nx:0,\ny:0,\nstepX:0,\nstepY:0\n},\n// Actions.SetXY(gameObjects, x, y, stepX, stepY)\ngridAlign: false,\n// {\n//     width: -1,\n//     height: -1,\n//     cellWidth: 1,\n//     cellHeight: 1,\n//     position: Phaser.Display.Align.TOP_LEFT,\n//     x: 0,\n//     y: 0\n// }\n// Actions.GridAlign(gameObjects, gridAlign)\n\n// Angle\nsetRotation: {\nvalue: 0,\nstep:\n},\n// Actions.SetRotation(gameObjects, value, step)\n\n// Scale\nsetScale: {\nx:0,\ny:0,\nstepX:0,\nstepY:0\n},\n// Actions.SetScale(gameObjects, x, y, stepX, stepY)\n\n// Alpha\nsetAlpha: {\nvalue: 0,\nstep:\n},\n// Actions.SetAlpha(gameObjects, value, step)\n\nsetOrigin: {\nx:0,\ny:0,\nstepX:0, stepY:0\n},\n\n// Input\nhitArea: null,\nhitAreaCallback: null,\n// Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback)\n}\n</code></pre><ul> <li><code>classType</code> :<ul> <li>Sprite: <code>Phaser.GameObjects.Sprite</code></li> <li>Image: <code>Phaser.GameObjects.Image</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"group/#destroy","title":"Destroy","text":"<ul> <li>Destroy group only     <pre><code>group.destroy();\n</code></pre></li> <li>Destroy group and children     <pre><code>group.destroy(true);\n</code></pre></li> </ul>"},{"location":"groupactions/","title":"Group actions","text":""},{"location":"groupactions/#introduction","title":"Introduction","text":"<p>Set properties of game objects, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"groupactions/#usage","title":"Usage","text":""},{"location":"groupactions/#call-function","title":"Call function","text":"<pre><code>Phaser.Actions.Call(gameObjects, function(gameObject) {\n\n}, scope);\n</code></pre>"},{"location":"groupactions/#set-any-property","title":"Set any property","text":"<pre><code>Phaser.Actions.PropertyValueSet(gameObjects, key, value, step, index, direction);\n</code></pre> <ul> <li><code>gameObjects</code> : An array of game objects.</li> <li><code>key</code> : The property to be updated.</li> <li><code>value</code> : The amount to be added to the property.</li> <li><code>step</code> : This is added to the <code>value</code> amount, multiplied by the iteration counter.</li> <li><code>index</code> : An optional offset to start searching from within the items array.</li> <li><code>direction</code> :<ul> <li><code>1</code> : from beginning to end.</li> <li><code>-1</code>: from end to beginning.</li> </ul> </li> </ul> <pre><code>Phaser.Actions.PropertyValueInc(gameObjects, key, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SmootherStep(gameObjects, key, min, max, inc));\n</code></pre> <pre><code>Phaser.Actions.SmoothStep(gameObjects, key, min, max, inc));\n</code></pre> <pre><code>Phaser.Actions.Spread(gameObjects, key, min, max, inc));\n</code></pre>"},{"location":"groupactions/#position","title":"Position","text":"<pre><code>Phaser.Actions.SetX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre> <pre><code>Phaser.Actions.IncXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#shift-position","title":"Shift position","text":"<p>Set the position of first game object to (x, y), others to the position of previous game object.</p> <pre><code>Phaser.Actions.ShiftPosition(gameObjects, x, y, direction, output);\n</code></pre>"},{"location":"groupactions/#position-on-shape","title":"Position on shape","text":""},{"location":"groupactions/#grid-align","title":"Grid align","text":"<pre><code>Phaser.Actions.GridAlign(gameObjects, {\nwidth: -1,\nheight: -1,\ncellWidth: 1,\ncellHeight: 1,\nposition: Phaser.Display.Align.TOP_LEFT,\nx: 0,\ny: 0\n});\n</code></pre> <ul> <li><code>width</code> : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.</li> <li><code>height</code> : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.</li> <li><code>cellWidth</code> : The width of the cell, in pixels.</li> <li><code>cellHeight</code> : The height of the cell, in pixels.</li> <li><code>position</code> : The alignment position.<ul> <li><code>0</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> </li> <li><code>1</code>, or <code>Phaser.Display.Align.TOP_CENTER</code></li> <li><code>2</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code></li> <li><code>3</code>, or <code>Phaser.Display.Align.LEFT_TOP</code></li> <li><code>4</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code></li> <li><code>5</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code></li> <li><code>6</code>, or <code>Phaser.Display.Align.CENTER</code></li> <li><code>7</code>, or <code>Phaser.Display.Align.RIGHT_TOP</code></li> <li><code>8</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code></li> <li><code>9</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code></li> <li><code>10</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code></li> <li><code>11</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code></li> <li><code>12</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code></li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of first item.</li> </ul>"},{"location":"groupactions/#line","title":"Line","text":"<p>Line :</p> <pre><code>var line = new Phaser.Geom.Line(x1, y1, x2, y2);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnLine(gameObjects, line);\n</code></pre> <pre><code>Phaser.Actions.RandomLine(gameObjects, line);\n</code></pre>"},{"location":"groupactions/#circle","title":"Circle","text":"<p>Circle :</p> <pre><code>var circle = new Phaser.Geom.Circle(x, y, radius);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnCircle(gameObjects, circle, startAngle, endAngle);\n</code></pre> <pre><code>Phaser.Actions.RandomCircle(gameObjects, circle);\n</code></pre>"},{"location":"groupactions/#ellipse","title":"Ellipse","text":"<p>Ellipse :</p> <pre><code>var ellipse = new Phaser.Geom.Ellipse(x, y, width, height);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnEllipse(gameObjects, ellipse, startAngle, endAngle);\n</code></pre>"},{"location":"groupactions/#triangle","title":"Triangle","text":"<p>Triangle :</p> <pre><code>var triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnTriangle(gameObjects, triangle, stepRate);\n</code></pre> <pre><code>Phaser.Actions.RandomTriangle(gameObjects, triangle);\n</code></pre>"},{"location":"groupactions/#rectangle","title":"Rectangle","text":"<p>Rectangle :</p> <pre><code>var rect = new Phaser.Geom.Rectangle(x, y, width, height);\n</code></pre> <pre><code>Phaser.Actions.PlaceOnRectangle(gameObjects, rect, shift;\n</code></pre> <pre><code>Phaser.Actions.RandomRectangle(gameObjects, rect);\n</code></pre> <pre><code>Phaser.Actions.WrapInRectangle(gameObjects, rect, padding);\n</code></pre>"},{"location":"groupactions/#angle","title":"Angle","text":"<pre><code>Phaser.Actions.Angle(gameObjects, value, step, index, direction);\n// value: angle in radians\n</code></pre> <pre><code>Phaser.Actions.Rotate(gameObjects, value, step, index, direction);\n// value: angle in degree\n</code></pre> <pre><code>Phaser.Actions.RotateAround(gameObjects, point, angle);\n// point: {x, y}, angle: angle in radians\n</code></pre> <pre><code>Phaser.Actions.RotateAroundDistance(gameObjects, point, angle, distance);\n// point: {x, y}, angle: angle in radians\n</code></pre>"},{"location":"groupactions/#visible","title":"Visible","text":"<pre><code>Phaser.Actions.SetVisible(gameObjects, value, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ToggleVisible(gameObjects);\n</code></pre>"},{"location":"groupactions/#alpha","title":"Alpha","text":"<pre><code>Phaser.Actions.SetAlpha(gameObjects, value, step, index, direction);\n</code></pre>"},{"location":"groupactions/#tint","title":"Tint","text":"<pre><code>Phaser.Actions.setTint(gameObjects, value);\n//Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight);\n</code></pre>"},{"location":"groupactions/#origin","title":"Origin","text":"<pre><code>Phaser.Actions.SetOrigin(gameObjects, originX, originY, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#scale","title":"Scale","text":"<pre><code>Phaser.Actions.ScaleX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ScaleY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.ScaleXY(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#scroll-factor","title":"Scroll factor","text":"<pre><code>Phaser.Actions.SetScrollFactorX(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetScrollFactorY(gameObjects, value, step, index, direction);\n</code></pre> <pre><code>Phaser.Actions.SetScrollFactor(gameObjects, x, y, stepX, stepY, index, direction);\n</code></pre>"},{"location":"groupactions/#depth","title":"Depth","text":"<pre><code>Phaser.Actions.SetDepth(gameObjects, value, step, index, direction);\n</code></pre>"},{"location":"groupactions/#hit-area","title":"Hit area","text":"<pre><code>Phaser.Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback);\n</code></pre>"},{"location":"groupactions/#blend-mode","title":"Blend mode","text":"<pre><code>Phaser.Actions.SetBlendMode(gameObjects, blendMode, index, direction);\n</code></pre> <ul> <li><code>blendMode</code> : Blend mode</li> </ul>"},{"location":"groupactions/#play-animation","title":"Play animation","text":"<pre><code>Phaser.Actions.PlayAnimation(gameObjects, key, ignoreIfPlaying);\n</code></pre>"},{"location":"groupactions/#shuffle","title":"Shuffle","text":"<pre><code>Phaser.Actions.Shuffle(gameObjects);\n</code></pre>"},{"location":"handlebars/","title":"Handlebars","text":""},{"location":"handlebars/#introduction","title":"Introduction","text":"<p>Format string with variables, largely compatible with Mustache templates. Reference</p>"},{"location":"handlebars/#usage","title":"Usage","text":"<pre><code>var template = 'hello, {{name}}';\nvar view = {\nname: 'rex'\n};\nvar result = Mustache.render(template, view);\n</code></pre>"},{"location":"handlebars/#pre-compile","title":"Pre-compile","text":"<pre><code>const template = Handlebars.compile(\"{{foo}}\");\ntemplate({}, {\n// allowProtoPropertiesByDefault: false,\n// allowProtoMethodsByDefault: false\n});\n</code></pre>"},{"location":"hiddeninputtext/","title":"Hidden edit","text":""},{"location":"hiddeninputtext/#introduction","title":"Introduction","text":"<p>An invisible Input DOM element to  receive character input and display on text, bbocodetext, or tagtext.</p> <p>Inspirited from CanvasInput.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"hiddeninputtext/#live-demos","title":"Live demos","text":"<ul> <li>With Text</li> <li>With BBCodeText</li> <li>With rexui-Label</li> <li>With bitmaptext</li> <li>Number input</li> </ul>"},{"location":"hiddeninputtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"hiddeninputtext/#install-plugin","title":"Install plugin","text":""},{"location":"hiddeninputtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhiddeninputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhiddeninputtextplugin.min.js', true);\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = scene.plugins.get('rexhiddeninputtextplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HiddenInputTextPlugin from 'phaser3-rex-plugins/plugins/hiddeninputtext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHiddenInputTextPlugin',\nplugin: HiddenInputTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import HiddenInputText from 'phaser3-rex-plugins/plugins/hiddeninputtext.js';\n</code></pre></li> <li>Add text-edit behavior     <pre><code>var hiddenInputText = new HiddenInputText(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#add-input-text-object","title":"Add input text object","text":"<pre><code>var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, {\n// inputType: 'text',    // 'text'|'password'|'textarea'|...\n// type: 'text',    // 'text'|'password'|'textarea'|...\n\ncursor: '|',\ncursorFlashDuration: 1000,\n\n// enterClose: true,\n\n// onOpen: function (textObject, hiddenInputText) {   // Or onFocus:\n// },\n// onClose: function (textObject, hiddenInputText) {  // Or onBlur:\n// },\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },\n});\n</code></pre> <ul> <li><code>textGameObject</code> : </li> <li><code>inputType</code>, or <code>type</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, ...</li> </ul> </li> <li><code>cursor</code> : Cursor character used in default update text callback.<ul> <li><code>null</code>, or <code>''</code> : Don't insert cursor character.</li> </ul> </li> <li><code>cursorFlashDuration</code> : Display cursor character or a space string to create a flash cursor.</li> <li><code>enterClose</code> : <ul> <li><code>true</code> : Close input text when enter-key was pressed. Default value is <code>true</code> if <code>inputType</code> is not <code>'textarea'</code>.</li> <li><code>false</code> : If <code>inputType</code> is set to <code>'textarea'</code>, default value will be <code>false</code>.</li> </ul> </li> <li><code>onOpen</code>, or <code>onFocuse</code> : Callback invoked when focus on this hidden input text.     <pre><code>function (textObject, hiddenInputText) {\n}\n</code></pre></li> <li><code>onClose</code>, or <code>onBlur</code> : Callback invoked when blur.     <pre><code>function (textObject, hiddenInputText) {\n}\n</code></pre></li> <li><code>onUpdate</code> : <ul> <li>A callback invoked in each tick of editing.     <pre><code>function (text, textObject, hiddenInputText) {\n// return text;\n}\n</code></pre><ul> <li>Can return a new string for text game object displaying.</li> </ul> </li> <li><code>'number'</code> : Only output number string.</li> </ul> </li> </ul> <p>Note</p> <p>This hiddenInputText will be destroyed when <code>textGameObject</code> is destroyed.</p>"},{"location":"hiddeninputtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyHiddenText extends HiddenInputText {\nconstructor(textGameObject, config) {\nsuper(textGameObject, config) {\n// ...            \n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var hiddenInputText = new MyHiddenText(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#cursor","title":"Cursor","text":"<ul> <li>Set     <pre><code>hiddenInputText.setCursor(s);\n</code></pre></li> <li>Get     <pre><code>var cursor = hiddenInputText.cursor;\n</code></pre></li> </ul>"},{"location":"hiddeninputtext/#open-editor","title":"Open editor","text":"<pre><code>hiddenInputText.open();\n</code></pre>"},{"location":"hiddeninputtext/#close-editor","title":"Close editor","text":"<pre><code>hiddenInputText.close();\n</code></pre>"},{"location":"hiddeninputtext/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = hiddenInputText.isOpened;\n</code></pre>"},{"location":"hiddeninputtext/#select-text","title":"Select text","text":"<p>This feature does not support.</p>"},{"location":"hiddeninputtext/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"hiddeninputtext/#event","title":"Event","text":"<ul> <li>On text change     <pre><code>hiddenInputText.on('textchange', function(text, textGameObject){\n})\n</code></pre></li> <li>Not a number input     <pre><code>hiddenInputText.on('nan', function(text){\n\n})\n</code></pre></li> </ul>"},{"location":"i18next/","title":"i18next","text":""},{"location":"i18next/#introduction","title":"Introduction","text":"<p>i18next is a very popular internationalization framework for browser or any other javascript environment.</p> <ul> <li>Author: i18next</li> </ul>"},{"location":"i18next/#usage","title":"Usage","text":""},{"location":"i18next/#import-class","title":"Import class","text":"<ul> <li>Install i18next, i18next-http-backend from npm     <pre><code>npm i i18next\nnpm i i18next-http-backend\n</code></pre></li> <li>Import i18next     <pre><code>import i18next from 'i18next';\nimport Backend from 'i18next-http-backend';\n</code></pre></li> <li>Initialize     <pre><code>i18next.use(Backend).init(config);\n</code></pre></li> <li>Translation     <pre><code>var result = i18next.t(key);\n</code></pre></li> </ul>"},{"location":"i18next/#initialize","title":"Initialize","text":"<pre><code>i18next\n.use(Backend)\n.init({\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n})\n</code></pre> <ul> <li><code>lng</code> : Language to use. Will fallback to <code>'dev'</code>.</li> <li><code>ns</code> : String or array of namespaces to load. Default value is <code>'translation'</code>.</li> <li><code>debug</code> : Logs info level to console output. Helps finding issues with loading not working. Default value is <code>false</code>.</li> <li><code>resources</code> : Resources to initialize with.</li> <li><code>backend.loadPath</code> : Path where resources get loaded from, or a function returning a path.     <pre><code>function(lngs, namespaces) { return customPath; }\n</code></pre></li> <li><code>backend.parse</code> : Parse data after it has been fetched. Optional.     <pre><code>function(data) { return JSON.parse(data); }\n</code></pre></li> </ul> <p>See also Configuration Options, and Backend Options</p>"},{"location":"i18next/#change-language","title":"Change language","text":"<pre><code>i18next.changeLanguage(\"en\");\n</code></pre> <p>Fire event <code>'languageChanged'</code>.</p>"},{"location":"i18next/#set-default-namespace","title":"Set default namespace","text":"<pre><code>i18next.setDefaultNamespace(namespace);\n</code></pre>"},{"location":"i18next/#translate","title":"Translate","text":"<pre><code>var result = i18next.t(key);\n// var result = i18next.t(key, interpolation);\n</code></pre>"},{"location":"i18next/#events","title":"Events","text":"<ul> <li>On language changed, triggered by <code>i18next.changeLanguage(lng)</code>.     <pre><code>i18next.on('languageChanged', function (lng) {\n});\n</code></pre></li> </ul>"},{"location":"image/","title":"Image","text":""},{"location":"image/#introduction","title":"Introduction","text":"<p>Display of static images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"image/#usage","title":"Usage","text":""},{"location":"image/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"image/#add-image-object","title":"Add image object","text":"<pre><code>var image = scene.add.image(x, y, key);\n// var image = scene.add.image(x, y, key, frame);\n</code></pre> <p>Add image from JSON</p> <pre><code>var image = scene.make.image({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// angle: 0,\n// alpha: 1,\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> : <ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImage extends Phaser.GameObjects.Image {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImage(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"image/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"image/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"image/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"imagebox/","title":"Image box","text":""},{"location":"imagebox/#introduction","title":"Introduction","text":"<p>Keep aspect ratio of image game object when scale-down resizing.  A containerLite game object  with 1 image game object.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"imagebox/#live-demos","title":"Live demos","text":"<ul> <li>Resize</li> </ul>"},{"location":"imagebox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"imagebox/#install-plugin","title":"Install plugin","text":""},{"location":"imagebox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('reximageboxplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageboxplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ImageBoxPlugin from 'phaser3-rex-plugins/plugins/imagebox-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexImageBoxPlugin',\nplugin: ImageBoxPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ImageBox from 'phaser3-rex-plugins/plugins/imagebox.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new ImageBox(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"imagebox/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexImageBox(x, y, texture, frame, {\n// width: undefined,\n// height: undefined,\n\n// image: undefined\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Resize this game object.<ul> <li><code>undefined</code> : Use original size. Default behavior.</li> </ul> </li> <li><code>image</code> : Custom image game object instance.<ul> <li><code>undefined</code> : Use built-in image game object. Default behavior.</li> </ul> </li> </ul> <p>Add imagebox from JSON</p> <pre><code>var image = scene.make.rexImageBox({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// width: undefined,\n// height: undefined,\n\n// image: undefined\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"imagebox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyImageBox extends ImageBox {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyImageBox(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"imagebox/#resize","title":"Resize","text":"<pre><code>image.resize(width, height);\n</code></pre> <p>Note</p> <ul> <li>If new size is bigger than original size, uses original size. (i.e won't scale up)  </li> <li>If new size is smaller than original size, scales down and keeps aspect ratio.</li> </ul>"},{"location":"imagebox/#set-texture","title":"Set texture","text":"<pre><code>image.setTexture(key, frame);\n</code></pre>"},{"location":"imagebox/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"imagebox/#clear-texture","title":"Clear texture","text":"<pre><code>image.setTexture();\n</code></pre> <p>Will set internal image game object to invisible.</p>"},{"location":"imagebox/#scale-image","title":"Scale image","text":"<pre><code>image.scaleImage();\n</code></pre> <p><code>image.resize(width, height)</code>, or <code>image.setTexture(key, frame)</code> will invoke this method internally.</p>"},{"location":"imagebox/#internal-image-game-object","title":"Internal image game object","text":"<pre><code>var internalImageGO = image.image;\n</code></pre>"},{"location":"imagebox/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"imagebox/#create-mask","title":"Create mask","text":"<p>Create mask from internal image game object (<code>image.image</code>).</p> <pre><code>var mask = image.image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"imagebox/#shader-effects","title":"Shader effects","text":"<p>Internal image game object (<code>image.image</code>) support preFX and postFX effects</p>"},{"location":"imageuriloader/","title":"Image URI loader","text":""},{"location":"imageuriloader/#introduction","title":"Introduction","text":"<p>Load image by uri (base64 string) in preload stage.</p> <p>Built-in image loader dosen't support loading local image uri.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"imageuriloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"imageuriloader/#install-plugin","title":"Install plugin","text":""},{"location":"imageuriloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'reximageuriloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageuriloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// reximageuriloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('reximageuriloaderplugin').addToScene(this);\n\nthis.load.rexImageURI(key, uri);\n}\n}\n</code></pre></li> </ul>"},{"location":"imageuriloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ImageURILoaderPlugin from 'phaser3-rex-plugins/plugins/imageuriloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexImageURILoader',\nplugin: ImageURILoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexImageURI(key, uri);\n</code></pre></li> </ul>"},{"location":"imageuriloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ImageURILoader from 'phaser3-rex-plugins/plugins/imageuriloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>ImageURILoader.call(scene.load, key, uri);\n</code></pre></li> </ul>"},{"location":"imageuriloader/#load-image","title":"Load image","text":"<p>In preload stage:</p> <pre><code>this.load.rexImageURI(key, uri);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>uri</code> : URI, a base64 string.</li> </ul>"},{"location":"imageuriloader/#load-sprite-sheet","title":"Load sprite sheet","text":"<p>In preload stage:</p> <pre><code>this.load.rexImageURI(key, uri, frameConfig);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>uri</code> : URI, a base64 string.</li> <li><code>frameConfig</code> : <ul> <li><code>frameWidth</code> : The width of the frame in pixels.</li> <li><code>frameHeight</code> : The height of the frame in pixels. Uses the <code>frameWidth</code> value if not provided.</li> <li><code>startFrame</code> : The first frame to start parsing from.</li> <li><code>endFrame</code> : The frame to stop parsing at. If not provided it will calculate the value based on the image and frame dimensions.</li> <li><code>margin</code> : The margin in the image. This is the space around the edge of the frames. </li> <li><code>spacing</code> : The spacing between each frame in the image.</li> </ul> </li> </ul>"},{"location":"input/","title":"Input","text":""},{"location":"input/#introduction","title":"Introduction","text":"<p>Input system of each scene, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"input/#usage","title":"Usage","text":""},{"location":"input/#enabledisable","title":"Enable/disable","text":"<pre><code>scene.input.enabled = enabled; // enabled: true/false\n</code></pre>"},{"location":"inputtext/","title":"Input text","text":""},{"location":"inputtext/#introduction","title":"Introduction","text":"<p>Input DOM element.</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"inputtext/#live-demos","title":"Live demos","text":"<ul> <li>Input text</li> <li>Number input</li> <li>In fullscreen</li> </ul>"},{"location":"inputtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"inputtext/#install-plugin","title":"Install plugin","text":""},{"location":"inputtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinputtextplugin.min.js', true);\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InputTextPlugin from 'phaser3-rex-plugins/plugins/inputtext-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInputTextPlugin',\nplugin: InputTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import InputText from 'phaser3-rex-plugins/plugins/inputtext.js';\n</code></pre></li> <li>Add input-text object     <pre><code>var inputText = new InputText(scene, x, y, width, height, config);\nscene.add.existing(inputText);\n</code></pre></li> </ul>"},{"location":"inputtext/#add-input-text-object","title":"Add input text object","text":"<pre><code>var inputText = scene.add.rexInputText(x, y, width, height, config);\n// var inputText = scene.add.rexInputText(x, y, config);\n// var inputText = scene.add.rexInputText(config);\n</code></pre> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ntype: 'text',    // 'text'|'password'|'textarea'|'number'|'color'|...\n\n// Element properties\nid: undefined,\ntext: undefined,\nmaxLength: undefined,\nminLength: undefined,    placeholder: undefined,\ntooltip: undefined,\nreadOnly: false,\nspellCheck: false,\nautoComplete: 'off',\n\n// Style properties\nalign: undefined,\npaddingLeft: undefined,\npaddingRight: undefined,\npaddingTop: undefined,\npaddingBottom: undefined,\nfontFamily: undefined,\nfontSize: undefined,\ncolor: '#ffffff',\nborder: 0,\nbackgroundColor: 'transparent',\nborderColor: 'transparent',\noutline: 'none',\ndirection: 'ltr',\n\nselectAll: false\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li><code>type</code> : Type of element<ul> <li><code>'text'</code>, <code>'password'</code>, <code>'textarea'</code>, <code>'number'</code>, <code>'color'</code>, ...</li> </ul> </li> <li>Element properties<ul> <li><code>id</code> : <code>id</code> element property.</li> <li><code>text</code> : <code>value</code> element property.</li> <li><code>maxLength</code> : <code>maxLength</code> element property.</li> <li><code>minLength</code> : <code>minLength</code> element property.</li> <li><code>placeholder</code> : <code>placeholder</code> element property.</li> <li><code>tooltip</code> : <code>title</code> element property.</li> <li><code>readOnly</code> : <code>readonly</code> element property.</li> <li><code>spellCheck</code> : <code>spellcheck</code> element property.</li> <li><code>autoComplete</code> : <code>autocomplete</code> element property.</li> </ul> </li> <li>Element style properties<ul> <li><code>align</code> : <code>text-align</code> style property.</li> <li><code>paddingLeft</code>, <code>paddingRight</code>, <code>paddingTop</code>, <code>paddingBottom</code> : <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code>, <code>padding-bottom</code> style property.</li> <li><code>fontFamily</code> : <code>font-family</code> style property.</li> <li><code>fontSize</code> : <code>font-size</code> style property.</li> <li><code>color</code> : <code>color</code> style property.</li> <li><code>backgroundColor</code> : <code>backgroundColor</code> style property.</li> <li><code>border</code>, <code>borderColor</code> : <code>border</code>, <code>borderColor</code> style property.</li> <li><code>outline</code> : <code>outline</code> style property.</li> <li><code>direction</code> : <code>direction</code> style property.</li> </ul> </li> <li><code>selectAll</code> : Set <code>true</code> to select all text.</li> </ul>"},{"location":"inputtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends InputText {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var inputText = new MyText(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"inputtext/#text","title":"Text","text":"<ul> <li>Get     <pre><code>var text = inputText.text;\n</code></pre></li> <li>Set     <pre><code>inputText.setText(text);\n// inputText.text = text;\n</code></pre></li> <li>Scroll to bottom     <pre><code>inputText.scrollToBottom();\n</code></pre></li> </ul>"},{"location":"inputtext/#style","title":"Style","text":"<ul> <li>Get     <pre><code>var value = inputText.getStyle(key);\n</code></pre></li> <li>Set     <pre><code>inputText.setStyle(key, value)\n</code></pre></li> </ul>"},{"location":"inputtext/#focus","title":"Focus","text":"<ul> <li>Focus     <pre><code>inputText.setFocus();\n</code></pre></li> <li>Blur     <pre><code>inputText.setBlur();\n</code></pre></li> <li>Is focused     <pre><code>var isFocused = inputText.isFocused;\n</code></pre></li> </ul>"},{"location":"inputtext/#font-color","title":"Font color","text":"<ul> <li>Get     <pre><code>var color = inputText.fontColor;\n// var color = inputText.node.style.color;\n</code></pre></li> <li>Set     <pre><code>inputText.fontColor = color;  // CSS color string\n// inputText.node.style.color = color;\n</code></pre>     or     <pre><code>inputText.setFontColor(color);  // CSS color string\n</code></pre></li> </ul>"},{"location":"inputtext/#max-length","title":"Max length","text":"<ul> <li>Get     <pre><code>var value = inputText.maxLength;\n</code></pre></li> <li>Set     <pre><code>inputText.maxLength = value;\n</code></pre>     or     <pre><code>inputText.setMaxLength(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#min-length","title":"Min length","text":"<ul> <li>Get     <pre><code>var value = inputText.minLength;\n</code></pre></li> <li>Set     <pre><code>inputText.minLength = value;\n</code></pre>     or     <pre><code>inputText.setMinLength(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#placeholder","title":"Placeholder","text":"<ul> <li>Get     <pre><code>var value = inputText.placeholder;\n</code></pre></li> <li>Set     <pre><code>inputText.placeholder = value;\n</code></pre>     or     <pre><code>inputText.setPlaceholder(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#tooltip","title":"Tooltip","text":"<ul> <li>Get     <pre><code>var value = inputText.tooltip;\n</code></pre></li> <li>Set     <pre><code>inputText.tooltip = value;\n</code></pre>     or     <pre><code>inputText.setTooltip(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#readonly","title":"Readonly","text":"<ul> <li>Get     <pre><code>var readOnly = inputText.readOnly;\n</code></pre></li> <li>Set     <pre><code>inputText.readOnly = value;\n</code></pre> <pre><code>inputText.setReadOnly();\n// inputText.setReadOnly(value);\n</code></pre></li> </ul>"},{"location":"inputtext/#resize","title":"Resize","text":"<pre><code>inputText.resize(width, height);\n</code></pre>"},{"location":"inputtext/#select-text","title":"Select text","text":"<ul> <li>Select all text     <pre><code>inputText.selectText();\n// inputText.selectAll();\n</code></pre></li> <li>Select sub-string     <pre><code>inputText.selectText(selectionStart, selectionEnd);\n</code></pre></li> </ul>"},{"location":"inputtext/#cursor-position","title":"Cursor position","text":"<ul> <li>Get     <pre><code>var cursorPosition = inputText.cursorPosition;\n</code></pre><ul> <li>Equal to <code>inputText.selectionStart</code>.</li> </ul> </li> <li>Set     <pre><code>inputText.setCursorPosition(cursorPosition);\ninputText.cursorPosition = cursorPosition;\n</code></pre><ul> <li>Equal to <code>inputText.setSelectionRange(cursorPosition, cursorPosition)</code></li> </ul> </li> </ul>"},{"location":"inputtext/#events","title":"Events","text":"<ul> <li>On text changed     <pre><code>inputText.on('textchange', function(inputText, e){ }, scope);\n</code></pre></li> <li>On focus     <pre><code>inputText.on('focus', function(inputText, e){ }, scope);\n</code></pre></li> <li>On blur     <pre><code>inputText.on('blur', function(inputText, e){ }, scope);\n</code></pre></li> <li>On click, double click     <pre><code>inputText.on('click', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('dblclick', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Touch/mouse events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On keydown, keyup     <pre><code>inputText.on('keydown', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('keyup', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Keyboard events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On pointerdown, pointermove, pointerup     <pre><code>inputText.on('pointerdown', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('pointermove', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('pointerup', function(inputText, e){ }, scope);\n</code></pre><ul> <li>Mouse/touch events on input text object won't be propagated to game canvas.</li> </ul> </li> <li>On select     <pre><code>inputText.on('select', function(inputText, e){ var selectedString = inputText.selectedText;\nvar selectionStart = inputText.selectionStart;\nvar selectionEnd = inputText.selectionEnd;\n}, scope);\n</code></pre></li> <li>On composition inpit     <pre><code>inputText.on('compositionStart', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('compositionEnd', function(inputText, e){ }, scope);\n</code></pre> <pre><code>inputText.on('compositionUpdate', function(inputText, e){ }, scope);\n</code></pre></li> </ul>"},{"location":"inputtext/#bypass-key-input","title":"Bypass key input","text":"<p>Registered keyboard events might capture key input. </p> <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre> <p>Set <code>enableCapture</code> to <code>false</code> to bypass key input to this input-text game objecct.</p>"},{"location":"inputtext/#other-properties","title":"Other properties","text":"<p>See dom game object, game object</p>"},{"location":"inputtext/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"inputtext/#close-editing","title":"Close editing","text":"<ul> <li>Close editing (set blur) when pointerdown outside     <pre><code>scene.input.on('pointerdown', function () {\ninputText.setBlur();\n})\n</code></pre></li> <li>Close editing (set blur) when ENTER key press     <pre><code>inputText.on('keydown', function (inputText, e) {\nif ((inputText.inputType !== 'textarea') &amp;&amp; (e.key === 'Enter')) {\ninputText.setBlur();\n}\n})\n</code></pre><ul> <li><code>inputType</code> : <code>'text'</code>, <code>'textarea'</code>, ...</li> </ul> </li> </ul>"},{"location":"interception/","title":"Interception","text":""},{"location":"interception/#introduction","title":"Introduction","text":"<p>Predict the intersection position of two game objects with constant moving speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"interception/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"interception/#install-plugin","title":"Install plugin","text":""},{"location":"interception/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinterceptionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinterceptionplugin.min.js', true);\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = scene.plugins.get('rexinterceptionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InterceptionPlugin from 'phaser3-rex-plugins/plugins/interception-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInterception',\nplugin: InterceptionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = scene.plugins.get('rexInterception').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Interception from 'phaser3-rex-plugins/plugins/interception.js';\n</code></pre></li> <li>Add interception behavior     <pre><code>var interception = new Interception(gameObject, config);\n</code></pre></li> </ul>"},{"location":"interception/#create-instance","title":"Create instance","text":"<pre><code>var interception = scene.plugins.get('rexInterception').add(gameObject, {\n// target: undefined,\n// enable: true\n});\n</code></pre> <ul> <li><code>target</code> : Game object.</li> <li><code>enable</code> : Set <code>true</code> to enable predicting.</li> </ul>"},{"location":"interception/#target","title":"Target","text":"<ul> <li>Set     <pre><code>interception.setTarget(gameObject);\n</code></pre>     or     <pre><code>interception.target = gameObject;\n</code></pre></li> <li>Disalbe     <pre><code>interception.setTarget(undefined);\n</code></pre>     or     <pre><code>interception.target = undefined;\n</code></pre></li> <li>Get     <pre><code>var target = interception.target;\n</code></pre></li> </ul>"},{"location":"interception/#enable-predicting","title":"Enable predicting","text":"<ul> <li>Enable     <pre><code>interception.setEnable();\n</code></pre></li> <li>Disable, uses target position as predicted position     <pre><code>interception.setEnable(false);\n</code></pre></li> </ul>"},{"location":"interception/#predicted-result","title":"Predicted result","text":"<ul> <li>Predicted position     <pre><code>var position = interception.predictedPosition; // {x, y}\n</code></pre></li> <li>Angle to predicted position     <pre><code>var rotation = interception.predictedAngle; // Angle in radian\n</code></pre></li> </ul>"},{"location":"interpolation/","title":"Interpolation","text":""},{"location":"interpolation/#introduction","title":"Introduction","text":"<p>Calculates interpolation value over t (0~1), built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"interpolation/#usage","title":"Usage","text":"<ul> <li>Linear interpolation (lerp) two values     <pre><code>var result = Phaser.Math.Linear(p0, p1, t);\n</code></pre></li> <li>Linear interpolation (lerp) two Vectors     <pre><code>var result = Phaser.Math.LinearXY(vector0, vector1, t);\n</code></pre><ul> <li><code>vector0</code>, <code>vector1</code> : Phaser.Math.Vector2</li> </ul> </li> <li>Smooth interpolation     <pre><code>var result = Phaser.Math.Interpolation.SmoothStep(t, min, max);\n</code></pre><ul> <li><code>t</code> : 0~1</li> </ul> </li> <li>Smoother interpolation     <pre><code>var result = Phaser.Math.Interpolation.SmootherStep(t, min, max);\n</code></pre><ul> <li><code>t</code> : 0~1</li> </ul> </li> <li>Quadratic bezier interpolation     <pre><code>var result = Phaser.Math.Interpolation.QuadraticBezier(t, p0, p1, p2);\n</code></pre><ul> <li><code>t</code> : 0~1</li> <li><code>p0</code> : The start point.</li> <li><code>p1</code> : The control point.</li> <li><code>p2</code> : The end point.</li> </ul> </li> <li>Cubic bezier interpolation     <pre><code>var result = Phaser.Math.Interpolation.CubicBezier(t, p0, p1, p2, p3);\n</code></pre><ul> <li><code>t</code> : 0~1</li> <li><code>p0</code> : The start point.</li> <li><code>p1</code> : The first control point.</li> <li><code>p2</code> : The second control point.</li> <li><code>p3</code> : The end point.</li> </ul> </li> </ul>"},{"location":"intouching/","title":"In touching","text":""},{"location":"intouching/#introduction","title":"Introduction","text":"<p>Fires 'intouch' event every tick when pressing on a game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"intouching/#live-demos","title":"Live demos","text":"<ul> <li>Cooldown</li> <li>Is in touching</li> </ul>"},{"location":"intouching/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"intouching/#install-plugin","title":"Install plugin","text":""},{"location":"intouching/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexintouchingplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexintouchingplugin.min.js', true);\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = scene.plugins.get('rexintouchingplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InTouchingPlugin from 'phaser3-rex-plugins/plugins/intouching-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInTouchingn',\nplugin: InTouchingPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = scene.plugins.get('rexInTouchingn').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import InTouching from 'phaser3-rex-plugins/plugins/intouching.js';\n</code></pre></li> <li>Add intouching behavior     <pre><code>var intouching = new InTouching(gameObject, config);\n</code></pre></li> </ul>"},{"location":"intouching/#create-instance","title":"Create instance","text":"<pre><code>var intouching = scene.plugins.get('rexInTouching').add(gameObject, {\n// enable: true,\n// cooldown: undefined\n});\n</code></pre> <ul> <li><code>enable</code> : Can touch.</li> <li><code>cooldown</code> : Fire 'intouch' event every tick, or periodically.<ul> <li><code>undefined</code> : Fire 'intouch' event every tick.</li> </ul> </li> </ul>"},{"location":"intouching/#events","title":"Events","text":"<ul> <li>In-touching     <pre><code>intouching.on('intouch', function (intouching, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Touching-start     <pre><code>intouching.on('touchstart', function (intouching, gameObject) {\n// ...\n}, scope);\n</code></pre></li> <li>Touching-end     <pre><code>intouching.on('touchend', function (intouching, gameObject) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"intouching/#in-touching","title":"In touching","text":"<pre><code>var isInTouching = intouching.isInTouching;\n</code></pre>"},{"location":"intouching/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = intouching.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>intouching.setEnable(enabled);  // enabled: true, or false\n// intouching.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>intouching.toggleEnable();\n</code></pre></li> </ul>"},{"location":"intouching/#cooldown","title":"Cooldown","text":"<ul> <li>Get     <pre><code>var cooldownTime = intouching.cooldownTime;\n</code></pre></li> <li>Set     <pre><code>intouching.setCooldown(time);\n</code></pre>     or     <pre><code>intouching.cooldownTime = cooldownTime;\n</code></pre></li> </ul>"},{"location":"keyboardcombo/","title":"Combo events","text":""},{"location":"keyboardcombo/#introduction","title":"Introduction","text":"<p>Combo-keys events.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"keyboardcombo/#usage","title":"Usage","text":"<ol> <li>Create combo     <pre><code>var keyCombo = scene.input.keyboard.createCombo(keys, {\n// resetOnWrongKey: true,\n// maxKeyDelay: 0,\n// resetOnMatch: false,\n// deleteOnMatch: false,\n});\n</code></pre><ul> <li><code>keys</code> : Array of keyCodes<ul> <li>In strings. ex: <code>['up', 'up', 'down', 'down']</code>, or <code>['UP', 'UP', 'DOWN', 'DOWN']</code></li> <li>In key map. ex: <code>[Phaser.Input.Keyboard.KeyCodes.UP, ... ]</code></li> <li>In numbers. ex: <code>[38, 38, 40, 40]</code></li> </ul> </li> <li><code>resetOnWrongKey</code> : Set <code>true</code> to reset the combo when press the wrong key.</li> <li><code>maxKeyDelay</code> : The max delay in ms between each key press. Set <code>0</code> to disable this feature.</li> <li><code>resetOnMatch</code> : Set <code>true</code> to reset the combo when previously matched.</li> <li><code>deleteOnMatch</code> : Set <code>true</code> to delete this combo when matched.</li> </ul> </li> <li>Listen combo matching event     <pre><code>scene.input.keyboard.on('keycombomatch', function (keyCombo, keyboardEvent) { /* ... */ });\n</code></pre></li> </ol>"},{"location":"keyboardevents/","title":"Keyboard events","text":""},{"location":"keyboardevents/#introduction","title":"Introduction","text":"<p>Built-in keyboard events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"keyboardevents/#usage","title":"Usage","text":""},{"location":"keyboardevents/#quick-start","title":"Quick start","text":"<ul> <li>Is key-down/is key-up     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nvar isDown = keyObj.isDown;\nvar isUp = keyObj.isUp;\n</code></pre></li> <li>Key is down after a duration     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nvar isDown = scene.input.keyboard.checkDown(keyObj, duration);\n</code></pre></li> <li>On key-down/on key-up     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nkeyObj.on('down', function(event) { /* ... */ });\nkeyObj.on('up', function(event) { /* ... */ });\n</code></pre>     or     <pre><code>scene.input.keyboard.on('keydown-' + 'W', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup-' + 'W', function (event) { /* ... */ });\n</code></pre></li> <li>Any key-down/any key-up     <pre><code>scene.input.keyboard.on('keydown', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event</code> : KeyboardEvent<ul> <li><code>event.code</code> : 'Key' + 'W'</li> </ul> </li> </ul> </li> </ul>"},{"location":"keyboardevents/#key-object","title":"Key object","text":"<ul> <li>Get key object     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // see `Key map` section\n// var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);\n</code></pre>     or     <pre><code>var keyObj = scene.input.keyboard.addKey('W', enableCapture, emitOnRepeat);\n</code></pre><ul> <li><code>enableCapture</code> : Automatically call <code>preventDefault</code> on the native DOM browser event for the key codes being added.</li> <li><code>emitOnRepeat</code> : Controls if the Key will continuously emit a 'down' event while being held down (true), or emit the event just once (false, the default).</li> </ul> </li> <li>Get key objects     <pre><code>var keys = scene.input.keyboard.addKeys('W,S,A,D');  // keys.W, keys.S, keys.A, keys.D\n// var keys = scene.input.keyboard.addKeys('W,S,A,D', enableCapture, emitOnRepeat);\n</code></pre>     or     <pre><code>var keys = scene.input.keyboard.addKeys({\nup: 'up',\ndown: 'down',\nleft: 'left',\nright: 'right'\n});  // keys.up, keys.down, keys.left, keys.right\n</code></pre></li> <li>Remove key object     <pre><code>scene.input.keyboard.removeKey('W');\n// scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W);\n// scene.input.keyboard.removeKey(key, destroy, removeCapture);\n</code></pre><ul> <li><code>destroy</code> : Call <code>Key.destroy</code> on each removed Key object</li> <li><code>removeCapture</code> : Remove all key captures for Key objects owened by this plugin?</li> </ul> </li> <li>Remove all key objects     <pre><code>scene.input.keyboard.removeAllKeys(true);\n// scene.input.keyboard.removeAllKeys(destroy, removeCapture);\n</code></pre><ul> <li><code>destroy</code> : Call <code>Key.destroy</code> on each removed Key object</li> <li><code>removeCapture</code> : Remove all key captures for Key objects owened by this plugin?</li> </ul> </li> <li>Key-down/key-up state     <pre><code>var isDown = keyObj.isDown;\nvar isUp = keyObj.isUp;\n</code></pre></li> <li>Duration of key-down     <pre><code>var duration = keyObj.getDuration(); // ms\n</code></pre></li> <li>Enable/disable     <pre><code>keyObj.enabled = enabled; // Set false to disable key event\n</code></pre></li> </ul>"},{"location":"keyboardevents/#key-object-of-cursorkeys","title":"Key object of cursorkeys","text":"<ol> <li>Get key state object     <pre><code>var cursorKeys = scene.input.keyboard.createCursorKeys();\n</code></pre></li> <li>Get key state     <pre><code>var isUpDown = cursorKeys.up.isDown;\nvar isDownDown = cursorKeys.down.isDown;\nvar isLeftDown = cursorKeys.left.isDown;\nvar isRightDown = cursorKeys.right.isDown;\nvar isSpaceDown = cursorKeys.space.isDown;\nvar isShiftDown = cursorKeys.shift.isDown;\n</code></pre></li> </ol>"},{"location":"keyboardevents/#order-of-key-downkey-up-events","title":"Order of key-down/key-up events","text":"<ol> <li>Key-down/key-up events of key object     <pre><code>var keyObj = scene.input.keyboard.addKey('W');  // Get key object\nkeyObj.on('down', function(event) { /* ... */ });\nkeyObj.on('up', function(event) { /* ... */ });\n</code></pre><ul> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.</li> </ul> </li> <li>On key-down/on key-up     <pre><code>scene.input.keyboard.on('keydown-' + 'W', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup-' + 'W', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.    </li> </ul> </li> <li>Any key-down/on key-up     <pre><code>scene.input.keyboard.on('keydown', function (event) { /* ... */ });\nscene.input.keyboard.on('keyup', function (event) { /* ... */ });\n</code></pre><ul> <li><code>event.key</code> : <code>'a'</code></li> <li><code>event.keyCode</code> : <code>65</code></li> <li><code>event.code</code> : <code>'KeyA'</code></li> <li><code>event.stopImmediatePropagation()</code> : Stop any further listeners from being invoked in the current Scene.</li> <li><code>event.stopPropagation()</code> : Stop it reaching any other Scene.</li> </ul> </li> </ol>"},{"location":"keyboardevents/#destroy-key-object","title":"Destroy key object","text":"<pre><code>keyObj.destroy();\n</code></pre>"},{"location":"keyboardevents/#key-map","title":"Key map","text":"<ul> <li><code>A</code> ~ <code>Z</code></li> <li><code>F1</code> ~ <code>F12</code></li> <li><code>BACKSPACE</code></li> <li><code>TAB</code></li> <li><code>ENTER</code></li> <li><code>SHIFT</code></li> <li><code>CTRL</code>. <code>ALT</code></li> <li><code>PAUSE</code></li> <li><code>CAPS_LOCK</code></li> <li><code>ESC</code></li> <li><code>SPACE</code></li> <li><code>PAGE_UP</code>, <code>PAGE_DOWN</code></li> <li><code>END</code>, <code>HOME</code></li> <li><code>LEFT</code>, <code>UP</code>, <code>RIGHT</code>,<code>DOWN</code></li> <li><code>PRINT_SCREEN</code></li> <li><code>INSERT</code>, <code>DELETE</code></li> <li><code>ZERO</code>, <code>ONE</code>, <code>TWO</code>, <code>THREE</code>, <code>FOUR</code>, <code>FIVE</code>, <code>SIX</code>, <code>SEVEN</code>, <code>EIGHT</code>, <code>NINE</code></li> <li><code>NUMPAD_ZERO</code>, <code>NUMPAD_ONE</code>, <code>NUMPAD_TWO</code>, <code>NUMPAD_THREE</code>, <code>NUMPAD_FOUR</code>, <code>NUMPAD_FIVE</code>, <code>NUMPAD_SIX</code>, <code>NUMPAD_SEVEN</code>, <code>NUMPAD_EIGHT</code>, <code>NUMPAD_NINE</code>, <code>NUMPAD_ADD</code>, <code>NUMPAD_SUBTRACT</code></li> <li><code>OPEN_BRACKET</code>, <code>CLOSED_BRACKET</code></li> <li><code>SEMICOLON_FIREFOX</code>, <code>COLON</code>, <code>COMMA_FIREFOX_WINDOWS</code>, <code>COMMA_FIREFOX</code>, <code>BRACKET_RIGHT_FIREFOX</code>, <code>BRACKET_LEFT_FIREFOX</code></li> </ul>"},{"location":"layer/","title":"Layer","text":""},{"location":"layer/#introduction","title":"Introduction","text":"<p>A local display list, built-in game object of phaser.</p> <p>Layers have no position or size</p> <p>Layers have no position or size within the Scene  </p> <ul> <li>Cannot enable a Layer for physics or input.</li> <li>Cannot change the position, rotation or scale of a Layer. </li> <li>No scroll factor, texture, tint, origin, crop or bounds.</li> </ul> <p>Layers cannot be added to Containers</p> <p>Containers can be added to Layers, but Layers cannot be added to Containers.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"layer/#usage","title":"Usage","text":""},{"location":"layer/#add-layer","title":"Add layer","text":"<pre><code>var layer = scene.add.layer();\n// var layer = scene.add.layer(children);\n</code></pre> <ul> <li><code>children</code> : Array of game objects added to this layer.</li> </ul>"},{"location":"layer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLayer extends Phaser.GameObjects.Layer {\nconstructor(scene, children) {\nsuper(scene, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var layer = new MyLayer(scene, children);\n</code></pre></li> </ul>"},{"location":"layer/#add-child","title":"Add child","text":"<ul> <li>Add child     <pre><code>layer.add(gameObject);\n// layer.add(gameObjects);\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add child at     <pre><code>layer.addAt(gameObject, index);\n</code></pre></li> <li>Replace child     <pre><code>layer.replace(oldGameObject, newGameObject);\n</code></pre></li> </ul>"},{"location":"layer/#remove-child","title":"Remove child","text":"<ul> <li>Remove child     <pre><code>var removed = layer.remove(gameObject);\n</code></pre></li> <li>Remove child at     <pre><code>var removed = layer.removeAt(index);\n</code></pre></li> <li>Remove children between indexes     <pre><code>var removed = layer.removeBetween(startIndex, endIndex);\n</code></pre></li> <li>Remove all children     <pre><code>layer.removeAll();\n</code></pre></li> </ul> <p>Removed game object won't be added to display list of scene, use</p> <pre><code>scene.add.existing(gameObject);\n</code></pre> <p>to add it back.</p>"},{"location":"layer/#get-child","title":"Get child","text":"<ul> <li>Get child at     <pre><code>var gameObject = layer.getAt(index);\n</code></pre></li> <li>Get first child by name     <pre><code>var gameObject = layer.getByName(name);\n</code></pre></li> <li>Get first child by property     <pre><code>var gameObject = layer.getFirst(property, value);\n// var gameObject = layer.getFirst(property, value, startIndex, endIndex);\n</code></pre></li> <li>Get random child     <pre><code>var gameObject = layer.getRandom();\n// var gameObject = layer.getRandom(startIndex, length);\n</code></pre></li> <li>Get all children     <pre><code>var gameObjects = layer.getAll();\n</code></pre></li> <li>Get index of child     <pre><code>var index = layer.getIndex(gameObject);\n</code></pre></li> <li>Get child count     <pre><code>var count = layer.count(property, value);\n</code></pre></li> <li>Get total children count     <pre><code>var count = layer.length;\n</code></pre></li> <li>Has child     <pre><code>var hasChild = layer.exists(gameObject);\n</code></pre></li> </ul>"},{"location":"layer/#iterate","title":"Iterate","text":"<ul> <li>Get first child (set iterator index to 0)     <pre><code>var gameObject = layer.first;\n</code></pre></li> <li>Get last child (set iterator index to last)     <pre><code>var gameObject = layer.last;\n</code></pre></li> <li>Get next child (increase iterator index, until last)     <pre><code>var gameObject = layer.next;\n</code></pre></li> <li>Get previous child (decrease iterator index, until 0)     <pre><code>var gameObject = layer.previous;\n</code></pre></li> </ul>"},{"location":"layer/#move-child","title":"Move child","text":"<ul> <li>Swap     <pre><code>layer.swap(gameObject1, gameObject2);\n</code></pre></li> <li>Move to     <pre><code>layer.moveTo(gameObject, index);\n</code></pre></li> <li>Bring to top     <pre><code>layer.bringToTop(gameObject);\n</code></pre></li> <li>Send to back     <pre><code>layer.sendToBack(gameObject);\n</code></pre></li> <li>Move up     <pre><code>layer.moveUp(gameObject);\n</code></pre></li> <li>Move down     <pre><code>layer.moveDown(gameObject);\n</code></pre></li> <li>Move child1 above child2     <pre><code>layer.moveAbove(child1, child2);\n</code></pre></li> <li>Move child1 below child2     <pre><code>layer.moveBelow(child1, child2);\n</code></pre></li> <li>Sort     <pre><code>layer.sort(property);\n</code></pre>     or     <pre><code>layer.sort('', function(gameObject1, gameObject2) { return 1; // 0, or -1\n});\n</code></pre></li> <li>Reverse     <pre><code>layer.reverse();\n</code></pre></li> <li>Shuffle     <pre><code>layer.shuffle();\n</code></pre></li> </ul> <p>Note</p> <p>Children game objects also sort by depth.</p>"},{"location":"layer/#for-each-child","title":"For each child","text":"<pre><code>layer.each(function(gameObject) {\n\n}, scope);\n</code></pre>"},{"location":"layer/#set-property","title":"Set property","text":"<pre><code>layer.setAll(property, value);\n// layer.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"layer/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"layer/#create-mask","title":"Create mask","text":"<pre><code>var mask = layer.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"layer/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"layermanager/","title":"Layer manager","text":""},{"location":"layermanager/#introduction","title":"Introduction","text":"<p>A dictionary to store Layer game objects.</p> <ul> <li>Author: Rex</li> <li>Container of game objects</li> </ul>"},{"location":"layermanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"layermanager/#install-plugin","title":"Install plugin","text":""},{"location":"layermanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlayermanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlayermanagerplugin.min.js', true);\n</code></pre></li> <li>Add layer manager     <pre><code>var layerManager = scene.plugins.get('rexlayermanagerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LayerManagerPlugin from 'phaser3-rex-plugins/plugins/layermanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLayerManager',\nplugin: LayerManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add layer manager     <pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LayerManager from 'phaser3-rex-plugins/plugins/layermanager.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var layerManager = new LayerManager(scene, config);\n</code></pre></li> </ul>"},{"location":"layermanager/#create-instance","title":"Create instance","text":"<pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, {\n// layerManager: ['layer0', 'layer1', ...]\n});\n</code></pre> <p>or</p> <pre><code>var layerManager = scene.plugins.get('rexLayerManager').add(scene, ['layer0', 'layer1', ...]\n);\n</code></pre> <ul> <li><code>layers</code> : Add layers by name string array.</li> </ul>"},{"location":"layermanager/#destroy","title":"Destroy","text":"<pre><code>layerManager.destroy()\n</code></pre> <p>Also destroy all layers in this layer manager.</p>"},{"location":"layermanager/#add-layer","title":"Add layer","text":"<pre><code>layerManager.add(name);\n// layerManager.add(name, depth);\n</code></pre>"},{"location":"layermanager/#add-game-object-to-layer","title":"Add game object to layer","text":"<pre><code>layerManager.addToLayer(name, gameObject);\n</code></pre> <ul> <li><code>name</code> : Name of layer</li> <li><code>gameObject</code> : Any kind of game object, include containerLite and related game objects.</li> </ul> <p>Note</p> <p>Print a warn message if specific layer is not existed.</p>"},{"location":"layermanager/#get-layer","title":"Get layer","text":"<ul> <li>Get layer by name     <pre><code>var layer = layerManager.getLayer(name);\n</code></pre></li> <li>Get all layers in this layer manager     <pre><code>var layers = layerManager.getLayers();\n// var out = layerManager.getLayers(out);\n</code></pre></li> </ul>"},{"location":"layermanager/#has-layer","title":"Has layer","text":"<pre><code>var hasLayer = layerManager.has(name);\n// var hasLayer = layerManager.exists(name);\n</code></pre>"},{"location":"lifetime/","title":"Life time","text":""},{"location":"lifetime/#introduction","title":"Introduction","text":"<p>Destroy game object when time-out.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"lifetime/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lifetime/#install-plugin","title":"Install plugin","text":""},{"location":"lifetime/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlifetimeplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlifetimeplugin.min.js', true);\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = scene.plugins.get('rexlifetimeplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LifeTimePlugin from 'phaser3-rex-plugins/plugins/lifetime-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLifeTime',\nplugin: LifeTimePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = scene.plugins.get('rexLifeTime').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LifeTime from 'phaser3-rex-plugins/plugins/lifetime.js';\n</code></pre></li> <li>Add life-time behavior     <pre><code>var lifeTime = new LifeTime(gameObject, config);\n</code></pre></li> </ul>"},{"location":"lifetime/#create-instance","title":"Create instance","text":"<pre><code>var lifeTime = scene.plugins.get('rexLifeTime').add(gameObject, {\nlifeTime: 1000,\n// destroy: true,\n// start: true\n});\n</code></pre> <ul> <li><code>lifeTime</code> : Life time in ms.</li> <li><code>destroy</code> : Set <code>true</code> to destroy game object when time-out.</li> <li><code>start</code>: Set <code>true</code> to starting counting now.</li> </ul>"},{"location":"lifetime/#events","title":"Events","text":"<ul> <li>On time-out     <pre><code>lifeTime.on('complete', function(gameObject, lifeTime){});\n// lifeTime.once('complete', function(gameObject, lifeTime){});\n</code></pre></li> </ul>"},{"location":"lifetime/#life-time","title":"Life-time","text":"<ul> <li>Set     <pre><code>lifeTime.setLifeTime(time);\n</code></pre></li> <li>Add to     <pre><code>lifeTime.addToLifeTime(time);\n</code></pre></li> <li>Get life-time     <pre><code>var time = lifeTime.lifeTime;\n</code></pre></li> <li>Get remainder time     <pre><code>var time = lifeTime.remainder;\n</code></pre></li> <li>Is alive     <pre><code>var isAlive = lifeTime.isAlive;\n</code></pre></li> </ul>"},{"location":"lifetime/#startstoppauseresume","title":"Start/Stop/Pause/Resume","text":"<ul> <li>Start     <pre><code>lifeTime.start();\n</code></pre></li> <li>Stop     <pre><code>lifeTime.stop();\n</code></pre></li> <li>Pause     <pre><code>lifeTime.pause();\n</code></pre></li> <li>Resume     <pre><code>lifeTime.resume();\n</code></pre></li> </ul>"},{"location":"light/","title":"Light","text":""},{"location":"light/#introduction","title":"Introduction","text":"<p>lighting system from normal map.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"light/#usage","title":"Usage","text":""},{"location":"light/#light-system","title":"Light system","text":""},{"location":"light/#enable","title":"Enable","text":"<ul> <li>Enable     <pre><code>scene.lights.enable();\n</code></pre></li> <li>Disable     <pre><code>scene.lights.disable();\n</code></pre>     or     <pre><code>scene.lights.active = false;\n</code></pre></li> </ul>"},{"location":"light/#ambient-color","title":"Ambient color","text":"<pre><code>scene.lights.setAmbientColor(color);\n</code></pre> <ul> <li><code>color</code> : Integer color value.</li> </ul>"},{"location":"light/#light","title":"Light","text":"<ul> <li>Add     <pre><code>var light = scene.lights.addLight(x, y, radius);\n// var light = scene.lights.addLight(x, y, radius, color, intensity);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of the Light.</li> <li><code>radius</code> : The radius of the Light.</li> <li><code>color</code> : The integer RGB color of the light. Default is <code>0xffffff</code>.</li> <li><code>intensity</code> : The intensity of the Light.</li> </ul> </li> <li>Remove     <pre><code>scene.lights.removeLight(light);\n</code></pre></li> </ul>"},{"location":"light/#position","title":"Position","text":"<ul> <li>Set     <pre><code>light.setPosition(x, y);\n</code></pre>     or     <pre><code>light.x = x;\nlight.y = y;\n</code></pre></li> <li>Get     <pre><code>var x = light.x;\nvar y = light.y;\n</code></pre></li> </ul>"},{"location":"light/#color","title":"Color","text":"<ul> <li>Set<ul> <li>Red, green, blue     <pre><code>light.color.set(red, green, blue);\n</code></pre>     or     <pre><code>light.color.r = red;\nlight.color.g = green;\nlight.color.b = blue;\n</code></pre></li> <li>Integer value     <pre><code>light.setColor(colorInteger);\n</code></pre></li> </ul> </li> <li>Get<ul> <li>Red, green, blue     <pre><code>var red = light.color.r;\nvar green = light.color.g;\nvar blue = light.color.b;\n</code></pre></li> </ul> </li> </ul>"},{"location":"light/#size","title":"Size","text":"<ul> <li>Set     <pre><code>light.setRadius(radius);\n// light.radius = radius;\n</code></pre>     or     <pre><code>light.diameter = diameter;\n// light.width = diameter;\n// light.height = diameter;\n// light.displayWidth = diameter;\n// light.displayHeight = diameter;\n</code></pre></li> <li>Get     <pre><code>var radius = light.radius;\n</code></pre>     or     <pre><code>var diameter = light.diameter;\n// var diameter = light.displayWidth;\n// var diameter = light.displayHeight;\n// var diameter = light.width;\n// var diameter = light.height;\n</code></pre></li> </ul>"},{"location":"light/#intensity","title":"Intensity","text":"<ul> <li>Set     <pre><code>light.setIntensity(intensity);\n</code></pre>     or     <pre><code>light.intensity = intensity;\n</code></pre></li> <li>Get     <pre><code>var intensity = light.intensity;\n</code></pre></li> </ul>"},{"location":"light/#game-object","title":"Game object","text":""},{"location":"light/#load-texture-with-normal-map","title":"Load texture with normal map","text":"<pre><code>scene.load.image(key, [url, normalMapUrl]);\n</code></pre> <ul> <li><code>url</code> : Url of texture.</li> <li><code>url</code> : Url of texture.</li> <li><code>normalMapUrl</code> : Url of normal map.</li> </ul>"},{"location":"light/#apply-light-pipeline","title":"Apply light pipeline","text":"<pre><code>gameObject.setPipeline('Light2D');\n</code></pre>"},{"location":"line/","title":"Line","text":""},{"location":"line/#introduction","title":"Introduction","text":"<p>Draw a line with start/end/body textures, extended from RenderTexture game object.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"line/#live-demos","title":"Live demos","text":"<ul> <li>Line</li> </ul>"},{"location":"line/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"line/#install-plugin","title":"Install plugin","text":""},{"location":"line/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineplugin.min.js', true);\n</code></pre></li> <li>Add line object     <pre><code>var line = scene.add.rexLine(config);\n</code></pre></li> </ul>"},{"location":"line/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LinePlugin from 'phaser3-rex-plugins/plugins/line-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLinePlugin',\nplugin: LinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line object     <pre><code>var line = scene.add.rexLine(config);\n</code></pre></li> </ul>"},{"location":"line/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Line from 'phaser3-rex-plugins/plugins/line.js';\n</code></pre></li> <li>Add line object     <pre><code>var line = new Line(scene, config);\nscene.add.existing(line);\n</code></pre></li> </ul>"},{"location":"line/#create-instance","title":"Create instance","text":"<pre><code>var line = scene.add.rexLine({\nstart: {\nx: 0, y: 0,\nkey: undefined, frame: undefined, origin: 0.5,\n},\n// start: key,\n// start: undefined,\n\nend: {\nx: 0, y: 0,\nkey: undefined, frame: undefined, origin: 1,\n},\n// end: key,\n// end: undefined,\n\nbody: {\nkey: undefined, frame: undefined, extendMode: 1,\nwidth: undefined,\n},\n// body: key,\n});\n</code></pre> <ul> <li><code>start</code> : Configuration of line-start. Or texture key of line-start.<ul> <li><code>start.x</code>, <code>start.y</code> : Position of line-start.</li> <li><code>start.key</code>, <code>start.frame</code> : Texrure of line-start.</li> <li><code>start.origin</code> : Origin of line-start. Default is <code>0.5</code>.</li> </ul> </li> <li><code>end</code> : Configuration of line-end. Or texture key of line-end.<ul> <li><code>end.x</code>, <code>end.y</code> : Position of line-end.</li> <li><code>end.key</code>, <code>end.frame</code> : Texrure of line-end.</li> <li><code>end.origin</code> : Origin of line-end. Default is <code>1</code>.</li> </ul> </li> <li><code>body</code> : Configuration of line-body. Or texture key of line-body.<ul> <li><code>body.key</code>, <code>body.frame</code> : Texrure of line-body. Line-body will be drawn repeatedly.</li> <li><code>body.extendMode</code> : Extend mode of line-body.<ul> <li><code>0</code>, or <code>'scale'</code> : Draw line-body with scaled image game object.</li> <li><code>1</code>, or <code>'repeat'</code> : Draw line-body with tile-sprute game object. (Default value)</li> </ul> </li> <li><code>body.width</code> : Line width.</li> </ul> </li> </ul>"},{"location":"line/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLine extends Line {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var line = new MyLine(scene, config);\n</code></pre></li> </ul>"},{"location":"line/#position-of-line-startline-end","title":"Position of line-start/line-end","text":"<ul> <li>Line start<ul> <li>Get     <pre><code>var x0 = line.x0;\nvar y0 = line.y0;\n</code></pre></li> <li>Set     <pre><code>line.setLineStartPosition(x, y);\n</code></pre>     or     <pre><code>line.x0 = x;\nline.y0 = y;\n</code></pre></li> </ul> </li> <li>Line end<ul> <li>Get     <pre><code>var x1 = line.x1;\nvar y1 = line.y1;\n</code></pre></li> <li>Set     <pre><code>line.setLineEndPosition(x, y);\n</code></pre>     or     <pre><code>line.x1 = x;\nline.y1 = y;\n</code></pre></li> </ul> </li> </ul>"},{"location":"line/#set-textures","title":"Set textures","text":"<ul> <li>Line-start<ul> <li>Set line-start texture     <pre><code>line.setLineStartTexture(key, frameName);\n</code></pre></li> <li>Set origin of line-start texture     <pre><code>line.setLineStartOrigin(origin);\n</code></pre><ul> <li><code>origin</code> : <code>0</code>~<code>1</code>. Default is <code>0</code>, to align the left side of line-start texture with start position.</li> </ul> </li> </ul> </li> <li>Line-end<ul> <li>Set line-end texture     <pre><code>line.setLineEndTexture(key, frameName);\n</code></pre></li> <li>Set origin of line-end texture     <pre><code>line.setLineEndOrigin(origin);\n</code></pre><ul> <li><code>origin</code> : <code>0</code>~<code>1</code>. Default is <code>1</code>, to align the right side of line-end texture with end position.</li> </ul> </li> </ul> </li> <li>Line-body<ul> <li>Set line-body texture     <pre><code>line.setLineBodyTexture(key, frameName);\n</code></pre></li> <li>Set line-body extend mode     <pre><code>line.setLineBodyExtendMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'scale'</code> : Draw line-body with scaled image game object.</li> <li><code>1</code>, or <code>'repeat'</code> : Draw line-body with tile-sprute game object.        </li> </ul> </li> </ul> </li> <li>Set line-body width     <pre><code>line.setLineBodyWidth(width);\n</code></pre></li> </ul> </li> </ul>"},{"location":"line/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"line/#create-mask","title":"Create mask","text":"<pre><code>var mask = line.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"line/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"list-inputtext/","title":"Input text","text":"<p>Solutions of single or multiple line(s) input text.</p> <ul> <li>Input text game object (Display: dom / Edit: dom) :    <ul> <li>Demo<ul> <li><code>type</code> or <code>inputType</code> :<ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game object with Text edit behavior (Display: text / Edit: dom) : <ul> <li>Demo<ul> <li><code>type</code> :<ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game object with Hidden text edit behavior (Display: text / Edit: text, invisible dom) : <ul> <li>Demo<ul> <li><code>type</code> or <code>inputType</code> : <ul> <li><code>'text'</code> : Single line input.</li> <li><code>'textarea'</code> : Multiple line input.</li> </ul> </li> </ul> </li> </ul> </li> <li>Canvas input game object (Display: canvas-input / Edit: canvas-input) : <ul> <li>Single line input</li> <li>Multiple line input<ul> <li><code>textArea</code> : Set <code>true</code> for multiple line input.</li> </ul> </li> </ul> </li> </ul>"},{"location":"live2d/","title":"Live2d","text":""},{"location":"live2d/#introduction","title":"Introduction","text":"<p>Display live2d model.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"live2d/#live-demos","title":"Live demos","text":"<ul> <li>Transform and hit area</li> <li>Change model</li> </ul> <p>The example Live2D models, Haru and Hiyori, are redistributed under Live2D's Free Material License.</p>"},{"location":"live2d/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"live2d/#install-plugin","title":"Install plugin","text":""},{"location":"live2d/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlive2dplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlive2dplugin.min.js', true);\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>scene.load.rexLive2dCoreScript(coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>scene.load.rexLive2d(key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import Live2dPlugin from 'phaser3-rex-plugins/plugins/live2d-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLive2dPlugin',\nplugin: Live2dPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>scene.load.rexLive2dCoreScript(coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>scene.load.rexLive2d(key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import {\nLive2dCoreScriptFileCallback,\nLive2dFileCallback,\nLive2dGameObject\n} from 'phaser3-rex-plugins/plugins/live2d.js';\n</code></pre></li> <li>Load live2d core script, in preload stage     <pre><code>Live2dCoreScriptFileCallback.call(scene.load, coreScriptURL);\n</code></pre></li> <li>Load model assets, in preload stage     <pre><code>Live2dFileCallback.call(scene.load, key, modelSettingURL);\n</code></pre></li> <li>Add live2d object     <pre><code>var live2dGameObject = new Live2dGameObject(scene, x, y, key, config);\nscene.add.existing(live2dGameObject);\n</code></pre></li> </ul>"},{"location":"live2d/#create-instance","title":"Create instance","text":"<pre><code>var live2dGameObject = scene.add.rexLive2d(x, y, key, {\n// autoPlayIdleMotion: motionGroupName\n});\n</code></pre> <ul> <li><code>autoPlayIdleMotion</code> : Start motion when idle (i.e. all motions are finished).</li> </ul> <p>Add live2d from JSON</p> <pre><code>var live2d = scene.make.rexLive2d({\nx: 0,\ny: 0,\nkey: 256,\n// autoPlayIdleMotion: motionGroupName,\n\nadd: true\n});\n</code></pre>"},{"location":"live2d/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLive2d extends Live2d {\nconstructor(scene, x, y, key, config) {\nsuper(scene, x, y, key, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var live2dGameObject = new MyLive2d(scene, x, y, key, config);\n</code></pre></li> </ul>"},{"location":"live2d/#change-model","title":"Change model","text":"<pre><code>live2dGameObject.setModel(key);\n</code></pre> <p>or</p> <pre><code>live2dGameObject.setModel(key, {\n// autoPlayIdleMotion: motionGroupName\n})\n</code></pre>"},{"location":"live2d/#expression","title":"Expression","text":"<ul> <li>Set expression     <pre><code>live2dGameObject.setExpression(name);\n</code></pre></li> <li>Get expression names     <pre><code>var names = live2dGameObject.getExpressionNames();\n</code></pre><ul> <li><code>names</code> : Array of expression names</li> </ul> </li> </ul>"},{"location":"live2d/#motion","title":"Motion","text":"<ul> <li>Start motion     <pre><code>live2dGameObject.startMotion(group, no);\n// live2dGameObject.startMotion(group, no, priority);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> <li><code>no</code> : Number of motion in <code>group</code></li> <li><code>priority</code> : Priority of this motion<ul> <li><code>'idle'</code>, or <code>1</code></li> <li><code>'normal'</code>, or <code>2</code>, default value</li> <li><code>'force'</code> or <code>3</code></li> </ul> </li> </ul> </li> <li>Start random motion     <pre><code>live2dGameObject.startMotion(group);\n// live2dGameObject.startMotion(group, undefined, priority);\n</code></pre></li> <li>Stop all motions     <pre><code>live2dGameObject.stopAllMotions();\n</code></pre></li> <li>Get motion names     <pre><code>var names = live2dGameObject.getMotionNames();\n</code></pre></li> <li>Get motion names of a group     <pre><code>var names = live2dGameObject.getMotionNames(group);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> </ul> </li> <li>Get motion group names     <pre><code>var names = live2dGameObject.getMotionGroupNames();\n</code></pre></li> <li>Get current playing motion names     <pre><code>var names = live2dGameObject.getPlayinigMotionNames();\n</code></pre></li> <li>Is any motion playing?     <pre><code>var isPlaying = live2dGameObject.isAnyMotionPlaying();\n</code></pre></li> <li>Start motion when idle (i.e. all motions are finished)     <pre><code>live2dGameObject.autoPlayIdleMotion(group);\n</code></pre><ul> <li><code>group</code> : Group name of motion</li> </ul> </li> <li>Set time-scale     <pre><code>live2dGameObject.setTimeScale(timeScale);\n</code></pre>     or     <pre><code>live2dGameObject.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"live2d/#look-at","title":"Look at","text":"<ul> <li>Look at     <pre><code>live2dGameObject.lookAt(x, y, {\n// camera: scene.cameras.main,\n\n// eyeBallX: 1, eyeBallY: 1,\n// angleX: 30, angleY: 30, angleZ: 30,\n// bodyAngleX: 10\n})\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Look at position.</li> <li><code>camera</code> : Default value is <code>scene.cameras.main</code>.</li> <li><code>eyeBallX</code>, <code>eyeBallY</code> : Weight of parameter <code>ParamEyeBallX</code>, <code>ParamEyeBallY</code>.</li> <li><code>angleX</code>, <code>angleY</code>, <code>angleZ</code> : Weight of parameter <code>ParamAngleX</code>, <code>ParamAngleY</code>, <code>ParamAngleZ</code>.</li> <li><code>bodyAngleX</code> : Weight of parameter <code>ParamBodyAngleX</code>.</li> </ul> </li> <li>Look forward     <pre><code>live2dGameObject.lookForward();\n</code></pre></li> </ul>"},{"location":"live2d/#lip-sync","title":"Lip sync","text":"<ul> <li>Set lip sync value     <pre><code>live2dGameObject.setLipSyncValue(value);\n</code></pre>     or     <pre><code>live2dGameObject.lipSyncValue = value;\n</code></pre></li> <li>Get lip sync value     <pre><code>var value = live2dGameObject.lipSyncValue;\n</code></pre></li> </ul>"},{"location":"live2d/#hit-test","title":"Hit test","text":""},{"location":"live2d/#touch-events","title":"Touch events","text":"<ol> <li>Set interactive     <pre><code>live2dGameObject.setInteractive();\n</code></pre></li> <li>Register touch events of hit area<ul> <li>On pointer down     <pre><code>live2dGameObject.on('pointerdown-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointerdown', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> <li>On pointer up     <pre><code>live2dGameObject.on('pointerup-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointerup', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> <li>On pointer move     <pre><code>live2dGameObject.on('pointermove-' + hitAreaName, function(pointer, localX, localY, event){\n\n}, scope);\n</code></pre>     or     <pre><code>live2dGameObject.on('pointermove', function(pointer, localX, localY, event){\nvar hitTestResult = live2dGameObject.getHitTestResult(); // {hitAreaName: isHit}\n}, scope);\n</code></pre></li> </ul> </li> </ol>"},{"location":"live2d/#is-hit","title":"Is hit","text":"<pre><code>var isHit = live2dGameObject.hitTest(hitAreaName, x, y);\n// var isHit = live2dGameObject.hitTest(hitAreaName, x, y, camera);\n</code></pre>"},{"location":"live2d/#parameter","title":"Parameter","text":"<ol> <li>Register parameter     <pre><code>live2dGameObject.registerParameter(name);\n</code></pre><ul> <li><code>name</code> : Register parameter id = <code>Param</code> + capitalize(<code>name</code>)</li> </ul> </li> <li>Reset and add value     <pre><code>live2dGameObject\n.resetParameterValue(name)\n.addParameterValue(name, value);\n</code></pre>     or     <pre><code>var parameters = live2dGameObject.getParameters();  // {name: value}\nparameters[name] = value;\n</code></pre></li> </ol>"},{"location":"loader/","title":"Loader","text":""},{"location":"loader/#introduction","title":"Introduction","text":"<p>Load assets, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"loader/#usage","title":"Usage","text":""},{"location":"loader/#loading-in-preload-stage","title":"Loading in preload stage","text":"<pre><code>scene.load.image(key, url);\n// scene.load.image(config); // config: {key, url}\n</code></pre> <p>Loader in preload stage will start loading automatically by scene.</p>"},{"location":"loader/#loading-after-preload-stage","title":"Loading after preload stage","text":"<pre><code>scene.load.image(key, url);   // add task\n// scene.load.image(config); // config: {key, url}\nscene.load.once('complete', callback, scope);  // add callback of 'complete' event\nscene.load.start();                     // start loading\n</code></pre>"},{"location":"loader/#set-path","title":"Set path","text":"<pre><code>scene.load.setPath(path)\n</code></pre>"},{"location":"loader/#more-configurations","title":"More configurations","text":"<p>More configurations in game config</p> <pre><code>loader:{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nwithCredentials: false,\nimageLoadType: 'XHR',    // 'HTMLImageElement' \nlocalScheme: [ 'file://', 'capacitor://' ]\n},\n</code></pre>"},{"location":"loader/#events","title":"Events","text":"<ul> <li>Load file complete event     <pre><code>scene.load.on('filecomplete', function(key, type, data) {}, scope);\n</code></pre> <pre><code>scene.load.on('filecomplete-' + type + '-' + key, function(key, type, data) {}, scope);\n</code></pre></li> <li>Add loading file event     <pre><code>scene.load.on('addfile', function(key, type, file) {}, scope);\n</code></pre></li> <li>Start loading     <pre><code>scene.load.once('start', function(){}, scope);\n</code></pre></li> <li>Loading progressing     <pre><code>scene.load.on('progress', function(progress){}, scope);\n</code></pre><ul> <li><code>progress</code> value will increase when a file is loaded, and decrease when a new file loading request is added.     <pre><code>var loader = scene.load;\nvar total = loader.totalToLoad;\nvar remainder = loader.list.size + loader.inflight.size;\nvar progress = 1 - (remainder / total);\n</code></pre></li> </ul> </li> <li>Loading file progressing     <pre><code>scene.load.on('fileprogress', function(file, progress){\n// var key = file.key;\n}, scope);\n</code></pre></li> <li>Loading a file object successful     <pre><code>scene.load.once('load', function(fileObj){}, scope);\n</code></pre></li> <li>Loading a file object failed     <pre><code>scene.load.once('loaderror', function(fileObj){}, scope);\n</code></pre></li> <li>All loading completed<ul> <li>Before releasing resources     <pre><code>scene.load.once('postprocess', function(loader){}, scope);\n</code></pre></li> <li>After releasing resources     <pre><code>scene.load.once('complete', function(loader){}, scope);\n</code></pre></li> </ul> </li> <li>Scene's <code>'preupdate'</code>, <code>'update'</code>, <code>'postupdate'</code>, <code>'render'</code> events will be triggered during preload stage.</li> </ul>"},{"location":"loader/#status-of-loader","title":"Status of loader","text":"<ul> <li>Ready to start loading     <pre><code>var isReady = scene.load.isReady();\n</code></pre></li> <li>Is loading     <pre><code>var isLoading = scene.load.isLoading();\n</code></pre></li> </ul>"},{"location":"loader/#file-types","title":"File types","text":""},{"location":"loader/#image","title":"Image","text":"<ul> <li>Image     <pre><code>scene.load.image(key, url);\n// scene.load.image(key, url, xhrSettings);\n</code></pre><ul> <li><code>url</code> : Url of texture.</li> </ul> </li> <li>Image and normal map     <pre><code>scene.load.image(key, [url, normalMapUrl]);\n// scene.load.image(key, [url, normalMapUrl], xhrSettings);\n</code></pre><ul> <li><code>url</code> : Url of texture.</li> <li><code>normalMapUrl</code> : Url of normal map.</li> </ul> </li> <li>SVG     <pre><code>scene.load.svg(key, url);\n// scene.load.svg(key, url, svgConfig);\n// scene.load.svg(key, url, svgConfig, xhrSettings);\n</code></pre><ul> <li><code>svgConfig</code> : <code>{width, height}</code>, or <code>{scale}</code></li> </ul> </li> <li>Html texture     <pre><code>scene.load.htmlTexture(key, url, width, height);\n// scene.load.htmlTexture(key, url, width, height, xhrSettings);\n</code></pre></li> </ul> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#sprite-sheet","title":"Sprite sheet","text":"<pre><code>scene.load.spritesheet(key, url, {\n// frameWidth: frameWidth,\n// frameHeight: frameHeight,\n// startFrame: startFrame,\n// endFrame: endFrame,\n// margin: margin,\n// spacing: spacing\n});\n// scene.load.spritesheet(key, url, frameConfig, xhrSettings);\n</code></pre> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#texture-atlas","title":"Texture atlas","text":"<pre><code>scene.load.atlas(key, textureURL, atlasURL);\n// scene.load.atlas(key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings);\n</code></pre> <p>Get data from texture cache</p> <pre><code>var cache = scene.textures;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#multi-file-texture-atlas","title":"Multi file texture atlas","text":"<pre><code>scene.load.multiatlas(key, atlasURL);\n// scene.load.multiatlas(key, atlasURL, path, baseURL, atlasXhrSettings);\n</code></pre> <ul> <li><code>atlasURL</code> : The absolute or relative URL to load the texture atlas json data file from.</li> <li><code>path</code> : Optional path to use when loading the textures defined in the atlas data.</li> <li><code>baseURL</code> : Optional Base URL to use when loading the textures defined in the atlas data.</li> </ul>"},{"location":"loader/#unity-texture-atlas","title":"Unity texture atlas","text":"<pre><code>scene.load.unityAtlas(key, textureURL, atlasURL);\n// scene.load.unityAtlas(key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings);\n</code></pre>"},{"location":"loader/#animation","title":"Animation","text":"<pre><code>scene.load.animation(key, url);\n// scene.load.animation(key, url, dataKey, xhrSettings);\n</code></pre> <p>Get data from json cache</p> <pre><code>var cache = scene.json;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#audio","title":"Audio","text":"<pre><code>scene.load.audio(key, urls);\n// scene.load.audio(key, urls, {instances: 1}, xhrSettings);\n</code></pre> <ul> <li><code>urls</code> : The absolute or relative URL to load the audio files from, or a blob.</li> <li><code>config.instances</code> : Number of audio instances for HTML5Audio. Defaults to <code>1</code>.</li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.audio;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#audio-sprite","title":"Audio sprite","text":"<pre><code>scene.load.audioSprite(key, jsonURL, audioURL, audioConfig);\n// scene.load.audioSprite(key, jsonURL, audioURL, audioConfig, audioXhrSettings, jsonXhrSettings);\n</code></pre> <ul> <li><code>jsonURL</code> : The absolute or relative URL to load the json file from.</li> <li><code>audioURL</code> : The absolute or relative URL to load the audio file from.</li> <li><code>audioConfig</code> : An object containing an <code>instances</code> property for HTML5Audio. Defaults to <code>1</code>.</li> </ul>"},{"location":"loader/#video","title":"Video","text":"<pre><code>scene.load.video(key, url, noAudio);\n// scene.load.video(key, url, noAudio, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : The absolute or relative URL to load the video files from, or a blob.</li> <li><code>loadEvent</code> : The load event to listen for when not loading as a blob.<ul> <li><code>'loadeddata'</code> : Data for the current frame is available. Default value.</li> <li><code>'canplay'</code> : The video is ready to start playing.</li> <li><code>'canplaythrough'</code> : The video can be played all the way through, without stopping.</li> </ul> </li> <li><code>asBlob</code> : Load the video as a data blob, or via the Video element? Default value is <code>false</code>.</li> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.</li> <li><code>false</code> : Has audio track, default behavior.</li> </ul> <p>Get data from video cache</p> <pre><code>var cache = scene.video;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#bitmap-font","title":"Bitmap font","text":"<pre><code>scene.load.bitmapFont(key, textureURL, fontDataURL);\n// scene.load.bitmapFont(key, textureURL, fontDataURL, textureXhrSettings, fontDataXhrSettings);\n</code></pre> <ul> <li><code>textureURL</code> : The absolute or relative URL to load the font image file from.</li> <li><code>fontDataURL</code> : The absolute or relative URL to load the font xml data file from, which created by software such as <ul> <li>Angelcode Bitmap Font Generator</li> <li>Littera </li> <li>Glyph Designer</li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.bitmapFont;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#tile-map","title":"Tile map","text":"<ul> <li>JSON : Created using the Tiled Map Editor and selecting JSON as the export format     <pre><code>scene.load.tilemapTiledJSON(key, url);\n// scene.load.tilemapTiledJSON(key, url, xhrSettings);\n</code></pre></li> <li>CSV : Created in a text editor, or a 3rd party app that exports as CSV.     <pre><code>scene.load.tilemapCSV(key, url);\n// scene.load.tilemapCSV(key, url, xhrSettings);\n</code></pre></li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.tilemap;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#text","title":"Text","text":"<pre><code>scene.load.text(key, url);\n// scene.load.text(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.text;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#json","title":"JSON","text":"<pre><code>scene.load.json(key, url);\n// scene.load.json(key, url, dataKey, xhrSettings);\n</code></pre> <ul> <li><code>dataKey</code> : When the JSON file loads only this property will be stored in the Cache.</li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.json;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#xml","title":"XML","text":"<pre><code>scene.load.xml(key, url);\n// scene.load.xml(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.xml;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#html","title":"HTML","text":"<pre><code>scene.load.html(key, url);\n// scene.load.html(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.html;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#css","title":"CSS","text":"<pre><code>scene.load.css(key, url);\n// scene.load.css(key, url, xhrSettings);\n</code></pre> <p>Get data from cache</p> <pre><code>var cache = scene.cache.css;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#scene","title":"Scene","text":"<pre><code>scene.load.sceneFile(key, url);\n// scene.load.sceneFile(key, url, xhrSettings);\n</code></pre> <p>The <code>key</code> matches the class name in the JavaScript file.</p>"},{"location":"loader/#script","title":"Script","text":"<pre><code>scene.load.script(key, url);\n// scene.load.script(key, url, type, xhrSettings);\n</code></pre> <ul> <li><code>type</code> :\u3000<code>'script'</code>, or <code>'module'</code>.</li> </ul>"},{"location":"loader/#scripts","title":"Scripts","text":"<pre><code>scene.load.scripts(key, urlArray);\n// scene.load.scripts(key, urlArray, xhrSettings);\n</code></pre> <p>Add scripts in the exact order of <code>urlArray</code>.</p>"},{"location":"loader/#glsl","title":"GLSL","text":"<pre><code>scene.load.glsl(key, url);\n// scene.load.glsl(key, url, shaderType, xhrSettings);\n</code></pre> <ul> <li><code>shaderType</code> : The type of shader.<ul> <li><code>'fragment'</code> : Fragment shader. Default value.</li> <li><code>'vertex'</code> : Vertex shader.</li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.shader;\nvar data = cache.get(key);\n</code></pre> <p>A glsl file can contain multiple shaders, all separated by a frontmatter block.</p> <pre><code>---\nname: type: ---\n\nvoid main(void)\n{\n}\n</code></pre>"},{"location":"loader/#binary","title":"Binary","text":"<pre><code>scene.load.binary(key, url, dataType);  // dataType: Uint8Array\n// scene.load.binary(key, url, dataType, xhrSettings);\n</code></pre> <ul> <li><code>dataType</code> : Optional type to cast the binary file to once loaded. <ul> <li><code>Uint8Array</code>, <code>Uint8ClampedArray</code>, <code>Uint16Array</code> <code>Uint32Array</code></li> <li><code>Int8Array</code>, <code>Int16Array</code>, <code>Int32Array</code></li> <li><code>Float32Array</code>, <code>Float64Array</code></li> <li><code>BigInt64Array</code>, <code>BigUint64Array</code></li> </ul> </li> </ul> <p>Get data from cache</p> <pre><code>var cache = scene.cache.binary;\nvar data = cache.get(key);\n</code></pre>"},{"location":"loader/#plugin","title":"Plugin","text":"<pre><code>scene.load.plugin(key, url, true); // start plugin when loaded\n// scene.load.plugin(key, url, true, undefined, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : File url or class instance.</li> </ul>"},{"location":"loader/#scene-plugin","title":"Scene plugin","text":"<pre><code>scene.load.scenePlugin(key, url, systemKey, sceneKey);\n// scene.load.scenePlugin(key, url, systemKey, sceneKey, xhrSettings);\n</code></pre> <ul> <li><code>url</code> : File url or class instance.</li> </ul>"},{"location":"loader/#file-pack","title":"File pack","text":"<p>Load files in JSON format.</p> <pre><code>scene.load.pack(key, url);\n// scene.load.pack(key, url, dataKey, xhrSettings);\n</code></pre> <p>or</p> <pre><code>scene.load.pack(key, json);\n// scene.load.pack(key, json, dataKey);\n</code></pre> <ul> <li><code>dataKey</code> : When the JSON file loads only this property will be stored in the Cache.</li> </ul> <p>JSON pack file:</p> <pre><code>{\n'dataKey': {\n// \"prefix\": \"...\",          // optional, extend key by prefix\n// \"path\": \"...\",            // optional, extend url by path\n// \"defaultType\": \"image\",   // optional, default file type\n'files': [\n{\n'type': 'image',\n'key': '...',\n'url': '...'\n},\n{\n'type': 'image',\n'key': '...',\n'url': '...'\n}\n// ...\n]\n},\n\n'node0': {\n'node1': {\n'node2': {\n'files': [\n// ....\n]\n}\n}\n}\n// dataKey: 'node0.node1.node2'\n}\n</code></pre> <p>File type:</p> <ul> <li><code>audio</code></li> <li><code>binary</code></li> <li><code>glsl</code></li> <li><code>html</code></li> <li><code>htmlTexture</code></li> <li><code>image</code></li> <li><code>json</code></li> <li><code>script</code></li> <li><code>spritesheet</code></li> <li><code>svg</code></li> <li><code>text</code></li> <li><code>tilemapCSV</code></li> <li><code>tilemapJSON</code></li> <li><code>xml</code></li> </ul> <p>Get pack json data from cache</p> <pre><code>var cache = scene.cache.json;  // pack json is stored in json cache\nvar data = cache.get(key);\n</code></pre> <p>Event name in <code>'filecomplete'</code> event : <code>'filecomplete-packfile-' + key</code></p>"},{"location":"loader/#release-data","title":"Release data","text":"<pre><code>var cache = scene.cache.text;\ncache.remove(key);\n</code></pre>"},{"location":"loader/#data-in-cache","title":"Data in cache","text":"<pre><code>var cache = scene.cache.text;\nvar hasData = cache.exists(key);\n// var hasData = cache.has(key);\n</code></pre>"},{"location":"loader/#cache-events","title":"Cache events","text":"<ul> <li>Add any item     <pre><code>cache.events.on('add', function(cache, key, item){\n\n})\n</code></pre></li> <li>Remove any item     <pre><code>cache.events.on('remove', function(cache, key, item){\n\n})\n</code></pre></li> </ul>"},{"location":"loader/#replace","title":"Replace","text":"<ol> <li>Remove key.</li> <li>Load file again.</li> </ol>"},{"location":"loader/#xhr-settings-object","title":"XHR Settings Object","text":"<p>Parameter <code>xhrSettings</code> </p> <pre><code>{\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0,\nheaders: undefined,\nheader: undefined,\nheaderValue: undefined,\nrequestedWith: undefined,\noverrideMimeType: undefined,\nwithCredentials: false\n}\n</code></pre> <ul> <li><code>user</code> : Optional username for the XHR request.</li> <li><code>password</code> : Optional password for the XHR request.</li> <li><code>timeout</code> : Optional XHR timeout value.</li> <li><code>headers</code>, <code>header</code>, <code>headerValue</code>, <code>requestedWith</code> : This value is used to populate the XHR <code>setRequestHeader</code></li> <li><code>overrideMimeType</code> : Provide a custom mime-type to use instead of the default.</li> <li><code>withCredentials</code> : Whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting <code>withCredentials</code> has no effect on same-site requests.</li> </ul>"},{"location":"loadingprogress/","title":"Loading progress","text":""},{"location":"loadingprogress/#introduction","title":"Introduction","text":"<p>Pop-up dialog for loading-progress, then scale-down this dialog.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"loadingprogress/#live-demos","title":"Live demos","text":"<ul> <li>Loading progress</li> <li>Custom transit</li> </ul>"},{"location":"loadingprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"loadingprogress/#install-plugin","title":"Install plugin","text":""},{"location":"loadingprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexloadingprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexloadingprogressplugin.min.js', true);\n</code></pre></li> <li>Add loading-progress behavior     <pre><code>var loadingProgress = scene.plugins.get('rexloadingprogressplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add loading-progress behavior     <pre><code>var loadingProgress = scene.plugins.get('rexLoadingProgress').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LoadingProgress from 'phaser3-rex-plugins/plugins/loadingprogress.js';\n</code></pre></li> <li>Add loadingprogress behavior     <pre><code>var loadingProgress = new LoadingProgressBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"loadingprogress/#create-instance","title":"Create instance","text":"<pre><code>var loadingProgress = scene.plugins.get('rexLoadingProgress').add(gameObject, {\n// duration: {\n//     in: 200,\n//     out: 200\n// }\n\n// progress: function(gameObject, progress) {},\n// transitIn: function(gameObject, duration) {},\n// transitOut: function(gameObject, duration) {},\n});\n</code></pre> <ul> <li><code>gameObject</code> : Game object for presenting loading-progress.</li> <li><code>duration</code> : Duration of transition-in, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.- </li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog). Game object will be destroyed after transiting out.<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> </ul> </li> <li><code>progress</code> : Callback of loading-progress     <pre><code>function(gameObject, progress) {\n\n}\n</code></pre><ul> <li><code>progress</code> : Number between 0 to 1.</li> </ul> </li> <li><code>transitIn</code> : Tween behavior of opening dialog.<ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog.<ul> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"loadingprogress/#events","title":"Events","text":"<ul> <li>On progress     <pre><code>loadingProgress.on('progress', function(progress) {\n})\n</code></pre></li> <li>On opened dialog     <pre><code>loadingProgress.on('open', function(gameObject, loadingProgress) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>loadingProgress.on('close', function() {\n})\n</code></pre></li> </ul>"},{"location":"localforage-files/","title":"Files","text":""},{"location":"localforage-files/#introduction","title":"Introduction","text":"<p>Save JSON data, using localforage.</p> <p>Each file contains header and content indexed by fileID.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"localforage-files/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"localforage-files/#install-plugin","title":"Install plugin","text":""},{"location":"localforage-files/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlocalforagefilesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlocalforagefilesplugin.min.js', true);\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = scene.plugins.get('rexlocalforagefilesplugin').add(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FilesPlugin from 'phaser3-rex-plugins/plugins/localforagefiles-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFiles',\nplugin: FilesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = scene.plugins.get('rexFiles').add(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Files from 'phaser3-rex-plugins/plugins/localforagefiles.js';\n</code></pre></li> <li>Add localforage-files object     <pre><code>var fileManager = new Files(config);\n</code></pre></li> </ul>"},{"location":"localforage-files/#create-instance","title":"Create instance","text":"<pre><code>var fileManager = scene.plugins.get('rexFiles').add.files({\n// name: 'files',\n// zip: true\n});\n</code></pre> <ul> <li><code>name</code> : Storage name.</li> <li><code>zip</code> :<ul> <li><code>true</code> : Save compressed stringify json data.</li> <li><code>false</code> : Save json data directly</li> </ul> </li> </ul>"},{"location":"localforage-files/#save-file","title":"Save file","text":"<ul> <li>Overwrite     <pre><code>fileManager.save(fileID, header, content);\n</code></pre><ul> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>header</code> : Header data for indexing, a JSON object.<ul> <li>Reserve keys : <code>fileID</code>.</li> </ul> </li> <li><code>content</code> : Content/body, a JSON object.<ul> <li>Reserve keys : <code>fileID</code>.</li> </ul> </li> </ul> </li> <li>Update     <pre><code>fileManager.save(fileID, header, content, true);\n</code></pre></li> </ul>"},{"location":"localforage-files/#load-headers","title":"Load headers","text":"<pre><code>fileManager.loadHeaders()\n.then(function(result) { // var headers = result.headers;\n})\n.catch(function(result) {\n// var error = result.error;\n})\n</code></pre> <ul> <li><code>headers</code> : Get header by <code>headers[fileID]</code>, each header contains<ul> <li><code>header.fileID</code> : Unique ID of this file.     </li> </ul> </li> </ul>"},{"location":"localforage-files/#load-file","title":"Load file","text":"<pre><code>fileManager.load(fileID)\n.then(function(result) { // var header = result.header;\n// var content = result.content;\n// var fileID = result.fileID;\n})\n.catch(function(result) {\n// var error = result.error;\n// var fileID = result.fileID;\n})\n</code></pre> <ul> <li><code>header</code>, <code>content</code> : Header/content of this file.</li> <li><code>fileID</code> : Unique ID of this file.</li> <li><code>userID</code> : User ID of file owner.</li> </ul>"},{"location":"localforage/","title":"LocalForage","text":""},{"location":"localforage/#introduction","title":"Introduction","text":"<p>Offline storage, improved.</p> <ul> <li>Author: Mozilla</li> </ul>"},{"location":"localforage/#usage","title":"Usage","text":"<p>Official document</p> <p>Sample code</p> <p>By default, LocalForage selects backend drivers for the datastore in this order:</p> <ol> <li>IndexedDB</li> <li>WebSQL</li> <li>localStorage</li> </ol>"},{"location":"localforage/#save-data","title":"Save data","text":"<ul> <li>Callback     <pre><code>localforage.setItem(key, value, function(){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.setItem(key, value)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localforage/#read-data","title":"Read data","text":"<ul> <li>Callback     <pre><code>localforage.getItem(key, function(err, value){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.getItem(key)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localforage/#remove-data","title":"Remove data","text":"<ul> <li>Callback     <pre><code>localforage.removeItem(key, function(){ /* ... */ });\n</code></pre></li> <li>Promise     <pre><code>localforage.removeItem(key)\n.then(function(value){ /* ... */ })\n.catch(function(err){ /* ... */ });\n</code></pre></li> </ul>"},{"location":"localstorage-data/","title":"Data manager","text":""},{"location":"localstorage-data/#introduction","title":"Introduction","text":"<p>Sync data from data manager to local-storage.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul> <p>Max Size</p> <p>5MB per app per browser.</p>"},{"location":"localstorage-data/#live-demos","title":"Live demos","text":"<ul> <li>Extend game registry</li> <li>New local storage data manager</li> </ul>"},{"location":"localstorage-data/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"localstorage-data/#install-plugin","title":"Install plugin","text":""},{"location":"localstorage-data/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlocalstoragedataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlocalstoragedataplugin.min.js', true);\n</code></pre></li> <li>Extend existed data object (<code>game.registry</code>, or <code>scene.data</code>)     <pre><code>var data = scene.plugins.get('rexlocalstoragedataplugin').extend(game.registry, config);\n// var data = scene.plugins.get('rexlocalstoragedataplugin').extend(scene.data, config);\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = scene.plugins.get('rexlocalstoragedataplugin').add(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LocalStorageDataPlugin from 'phaser3-rex-plugins/plugins/localstoragedata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLocalStorageData',\nplugin: LocalStorageDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Extend existed data object (<code>game.registry</code>, or <code>scene.data</code>)     <pre><code>var data = scene.plugins.get('rexLocalStorageData').extend(game.registry, config);\n// var data = scene.plugins.get('rexLocalStorageData').extend(scene.data, config);\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = scene.plugins.get('rexLocalStorageData').add(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LocalStorageData from 'phaser3-rex-plugins/plugins/localstoragedata.js';\n</code></pre></li> <li>New local storage data manager     <pre><code>var data = new LocalStorageData(parent, config);\n</code></pre></li> </ul>"},{"location":"localstorage-data/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexLocalStorageData').add({\n// name: '',\n// load: true,\n// default: undefined,\n// reset: false\n});\n// var data = scene.plugins.get('rexLocalStorageData').add(parent, config);\n// var data = scene.plugins.get('rexRData').add(parent, eventEmitter, config);\n</code></pre> <ul> <li><code>name</code> : Prefix of key in local storage.</li> <li><code>load</code> :<ul> <li><code>true</code> : Load data from local storage. Default behavior.</li> <li><code>false</code> : Don't load data now.</li> </ul> </li> <li><code>default</code> : Define valid keys and default values of loaded data.<ul> <li><code>undefined</code> : Load all keys from local storage.</li> </ul> </li> <li><code>reset</code> : <ul> <li><code>true</code> : Reset all data to default values (<code>default</code>), clear keys which are not in <code>defaultData</code>.</li> </ul> </li> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"localstorage-data/#load","title":"Load","text":"<pre><code>data.load(defaultData);\n// data.load(defaultData, reset);\n</code></pre> <ul> <li><code>defaultData</code> : Define valid keys and default values of loaded data.<ul> <li><code>undefined</code> : Load all keys from local storage. <code>reset</code> will be <code>false</code> in this case.</li> </ul> </li> <li><code>reset</code> : <ul> <li><code>true</code> : Reset all data to default values (<code>defaultData</code>), clear keys which are not in <code>defaultData</code>.</li> </ul> </li> </ul> <p>Note</p> <p>Data loaded from local storage already, if <code>load</code> is <code>true</code>.</p>"},{"location":"localstorage-data/#getsetremove-value","title":"Get/set/remove value","text":"<p>See built-in data manager.</p>"},{"location":"localstorage-data/#reserved-keys","title":"Reserved keys","text":"<p><code>'__keys__'</code> is used internally by this plugin.</p>"},{"location":"localstorage-data/#get-default-value","title":"Get default value","text":"<pre><code>var value = data.getDefaultValue(key);\n</code></pre>"},{"location":"localstorage/","title":"LocalStorage","text":""},{"location":"localstorage/#introduction","title":"Introduction","text":"<p>Store small data in key-value pairs locally within the user's browser.</p> <ul> <li>Author: Built-in javascript function</li> </ul> <p>Max Size</p> <p>5MB per app per browser.</p>"},{"location":"localstorage/#usage","title":"Usage","text":"<p>Reference</p> <p>Sample code</p>"},{"location":"localstorage/#save-data","title":"Save data","text":"<pre><code>localStorage.setItem(key, value);\n</code></pre>"},{"location":"localstorage/#read-data","title":"Read data","text":"<pre><code>var value = localStorage.getItem(key);\n</code></pre> <p>Note</p> <p>The keys and the values are always strings.  Objects, integer keys will be automatically converted to strings.</p>"},{"location":"localstorage/#remove-data","title":"Remove data","text":"<pre><code>localStorage.removeItem(key);\n</code></pre>"},{"location":"lokijs/","title":"LokiJs","text":""},{"location":"lokijs/#introduction","title":"Introduction","text":"<p>In-memory JavaScript Datastore with Persistence.</p> <ul> <li>Reference</li> <li>Document</li> </ul>"},{"location":"lokijs/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lokijs/#create-database","title":"Create database","text":"<pre><code>var db = new loki();\n// var db = new loki('loki.json', config);  // load database from file\n</code></pre>"},{"location":"lokijs/#create-collection","title":"Create collection","text":"<pre><code>var collection = db.addCollection(name);\n// var collection = db.addCollection(name, config);\n</code></pre>"},{"location":"lokijs/#get-collection","title":"Get collection","text":"<pre><code>var collection = db.getCollection(name);\n</code></pre>"},{"location":"lokijs/#insert-document","title":"Insert document","text":"<pre><code>var docInColl = collection.insert(doc);  // doc: an object\n</code></pre> <p>Get Id</p> <pre><code>var id = docInColl.$loki;\n</code></pre>"},{"location":"lokijs/#insert-documents","title":"Insert documents","text":"<pre><code>collection.insert(docArray);  // documents in array\n</code></pre>"},{"location":"lokijs/#query","title":"Query","text":""},{"location":"lokijs/#get-document-by-id","title":"Get document by id","text":"<pre><code>var doc = collection.get(id);  // id: `$loki`\n</code></pre>"},{"location":"lokijs/#get-doc-by-unique-index","title":"Get doc by unique index","text":"<pre><code>var doc = collection.by(key, value);\n</code></pre>"},{"location":"lokijs/#filter-documents","title":"Filter documents","text":"<ul> <li>$eq : filter for document(s) with property of (strict) equality     <pre><code>var docArray = collection.find({key: value});\n// var docArray = collection.find({key: {'$eq': value});\n</code></pre></li> <li>$aeq : filter for document(s) with property of abstract (loose) equality     <pre><code>var docArray = collection.find({key: {'$aeq': value});\n</code></pre>     For example     <pre><code>var results = coll.find({age: {'$aeq': 20}});  // age == '20' or age == 20\n</code></pre></li> <li>$ne : filter for document(s) with property not equal to provided value     <pre><code>var docArray = collection.find({key: {'$ne': value});\n</code></pre></li> <li>$gt : filter for document(s) with property greater than provided value     <pre><code>var docArray = collection.find({key: {'$gt': value});\n</code></pre></li> <li>$gte : filter for document(s) with property greater or equal to provided value     <pre><code>var docArray = collection.find({key: {'$gte': value});\n</code></pre></li> <li>$lt : filter for document(s) with property less than provided value     <pre><code>var docArray = collection.find({key: {'$lt': value});\n</code></pre></li> <li>$lte : filter for document(s) with property less than or equal to provided value     <pre><code>var docArray = collection.find({key: {'$lte': value});\n</code></pre></li> <li>$between : filter for documents(s) with property between provided values     <pre><code>var docArray = collection.find({key: {'$between': [value0, value1]});\n</code></pre></li> <li>$in : filter for document(s) with property matching any of the provided array values     <pre><code>var docArray = collection.find({key: {'$in': [value0, value1, ...]});\n</code></pre>     Your property should not be an array but your compare values should be.</li> <li>$nin : filter for document(s) with property not matching any of the provided array values     <pre><code>var docArray = collection.find({key: {'$nin': [value0, value1, ...]});\n</code></pre></li> <li>$contains : filter for document(s) with property containing the provided value     <pre><code>var docArray = collection.find({key: {'$contains': value});\n</code></pre>     Use this when your property contains an array but your compare value is not an array</li> <li>$containsAny : filter for document(s) with property containing any of the provided values     <pre><code>var docArray = collection.find({key: {'$containsAny': [value0, value1, ...]});\n</code></pre></li> <li>$containsNone : filter for documents(s) with property containing none of the provided values     <pre><code>var docArray = collection.find({key: {'$containsNone': [value0, value1, ...]});\n</code></pre></li> <li>$regex : filter for document(s) with property matching provided regular expression     <pre><code>var docArray = collection.find({key: {'$regex': pattern});\n// var docArray = collection.find({key: {'$regex': [pattern, options]});\n</code></pre>     For example     <pre><code>var docArray = collection.find({key: { '$regex': 'din' }});\nvar docArray = collection.find({key: { '$regex': ['din', 'i'] }});\n</code></pre></li> <li>$dteq: filter for document(s) with date property equal to provided date value     <pre><code>var docArray = collection.find({key: {'$dteq': new Date('1/1/2017')});\n</code></pre></li> <li>$type : filter for documents which have a property of a specified type     <pre><code>var docArray = collection.find({key: {'$type': value}); // 'string', or 'number', ...\n</code></pre></li> <li>$size : filter for documents which have array property of specified size     <pre><code>var docArray = collection.find({key: {'$size': value});\n</code></pre> (does not work for strings)</li> <li>$len : filter for documents which have string property of specified length     <pre><code>var docArray = collection.find({key: {'$len': value});\n</code></pre></li> <li>$or : filter for documents which meet any of the nested subexpressions     <pre><code>var docArray = collection.find({'$or': [\n{key0: {'$lt': value0},\n{key1: {'$gte': value1},\n// ...\n]});\n</code></pre></li> </ul>"},{"location":"lokijs/#find-one-document","title":"Find one document","text":"<pre><code>var doc = collection.findOne({});\n</code></pre>"},{"location":"lokijs/#filter-by-function","title":"Filter by function","text":"<pre><code>var docArray = collection.where(function(doc){\n// ...\nreturn isPicked;  // true to pick this document\n})\n</code></pre>"},{"location":"lokijs/#sort","title":"Sort","text":"<ul> <li>Sort with a key     <pre><code>var docArray = collection.chain().find({}).simplesort(key).data();  // ascending\n// var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data();  // descending\n</code></pre></li> <li>Sort with mutiple keys     <pre><code>var docArray = collection.chain().find({}).compoundsort([key0, key1]).data();  // key0, key1: ascending\n// var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending\n</code></pre></li> <li>Sort with function     <pre><code>var docArray = collection.chain().find({}).sort(\nfunction(doc1, doc2) {\nreturn result; // 0, 1, -1\n})\n.data();\n</code></pre>     result:<ul> <li><code>0</code>: equal</li> <li><code>1</code>: greater</li> <li><code>-1</code>: less</li> </ul> </li> </ul>"},{"location":"lokijs/#pagination","title":"Pagination","text":"<p>Get documents from <code>start</code> to <code>start+count-1</code>.</p> <pre><code>var docArray = collection.chain().find({}).offset(start).limit(count).data();\n</code></pre>"},{"location":"lokijs/#update","title":"Update","text":"<p>Update each filtered documents.</p> <pre><code>var docArray = collection.chain().find({}).update(\nfunction(doc) { //\nreturn doc;\n});\n</code></pre>"},{"location":"lokijs/#remove","title":"Remove","text":"<p>Remove filtered documents.</p> <pre><code>collection.chain().find({}).remove();\n</code></pre>"},{"location":"lokijs/#map","title":"Map","text":"<p>Map document into a new anonymous collection, won't affect original collection.</p> <pre><code>var docArray = collection.chain().find({}).map(\nfunction(doc) {\n// ...\nreturn doc\n})\n.data();\n</code></pre>"},{"location":"lokijs/#map-reduce","title":"Map-reduce","text":"<ol> <li>Map document into a new anonymous collection</li> <li>Run reduceFn to get final result value from result set of step 1.</li> </ol> <pre><code>var mapFn = function(doc) {\n// ...\nreturn doc\n};\nvar reduceFn = function(docArray) {\n// ...\nreturn result;\n}\nvar result = collection.chain().find({}).mapReduce(mapFn, reduceFn);\n</code></pre>"},{"location":"lokijs/#clone-result-set","title":"Clone result set","text":"<pre><code>var resultSet = collection.chain().find({});\nvar resultSetClone = resultSet.branch();\n\n// resultSetClone.find({}).data();\n</code></pre>"},{"location":"lokijs/#dynamic-view","title":"Dynamic view","text":"<ol> <li>Create dynamic view     <pre><code>var view = children.addDynamicView(name);\n</code></pre></li> <li>Add filters<ul> <li>find     <pre><code>view.applyFind({});\n</code></pre></li> <li>where     <pre><code>view.applyWhere(function(doc) { return true; });\n</code></pre></li> <li>simple sort     <pre><code>view.applySimpleSort(key);\n</code></pre></li> <li>sort by multiple keys     <pre><code>view.applySortCriteria([key0, key1]);\n// view.applySortCriteria([key0, [key1, true]]);\n</code></pre></li> <li>sort function     <pre><code>view.applySort(function(doc1, doc2) {\nreturn result; // 0, 1, -1\n});\n</code></pre>     result:<ul> <li><code>0</code>: equal</li> <li><code>1</code>: greater</li> <li><code>-1</code>: less</li> </ul> </li> </ul> </li> <li>Get result data     <pre><code>var docArray = view.data();\n</code></pre></li> </ol> <p>Add new filters <pre><code>var docArray = view.branchResultset().find({}).data();\n</code></pre></p>"},{"location":"lokijs/#speed-up-quering","title":"Speed-up quering","text":""},{"location":"lokijs/#custom-unique-index","title":"Custom unique index","text":"<ol> <li>Define custom unique index     <pre><code>var collection = db.addCollection(name, {\nunique: [key0]\n});\n</code></pre></li> <li>Get document by custom unique index     <pre><code>var doc = collection.by(key0, value);\n</code></pre></li> </ol>"},{"location":"lokijs/#binary-indices","title":"Binary indices","text":"<ol> <li>Define binary index     <pre><code>var collection = db.addCollection(name, {\nindices: [key0]\n});\n</code></pre>     Or     <pre><code>collection.ensureIndex(key);\n</code></pre></li> <li>Get documents by normal filters     <pre><code>var docArray = collection.find({key0: {'$gt': value}});\n</code></pre></li> </ol>"},{"location":"lokijs/#methods-of-collection","title":"Methods of collection","text":"<ul> <li>Average value of a property    <pre><code>var avgValue = collection.avg(key);\n</code></pre></li> <li>Maximum value of a property    <pre><code>var maxValue = collection.max(key);\n</code></pre></li> <li>Minimum value of a property    <pre><code>var minValue = collection.min(key);\n</code></pre></li> <li>Median value of a property    <pre><code>var medianValue = collection.median(key);\n</code></pre></li> <li>Amount of documents    <pre><code>var amount = collection.count(query);  // {key: {'$gt': value}}\n</code></pre></li> </ul>"},{"location":"lokijs/#serialize-deserialize","title":"Serialize &amp; Deserialize","text":"<ul> <li>Database as string     <pre><code>var s = db.serialize();\n</code></pre></li> <li>Load database from string     <pre><code>db.loadJSON(s);\n</code></pre></li> </ul>"},{"location":"luxon/","title":"Luxon","text":""},{"location":"luxon/#introduction","title":"Introduction","text":"<p>Parse, validate, manipulate, and display dates and times. Reference</p>"},{"location":"luxon/#usage","title":"Usage","text":"<ul> <li>Install</li> <li>Getting started<ul> <li>Demo</li> <li>A quick tour</li> <li>API</li> </ul> </li> </ul>"},{"location":"luxon/#creating-a-datetime","title":"Creating a DateTime","text":"<pre><code>const dt = DateTime.local(2017, 5, 15, 8, 30);\n</code></pre> <p>or</p> <pre><code>var dt = DateTime.fromISO('2017-05-15');\n// var dt = DateTime.fromISO('2017-05-15T17:36');\n// var dt = DateTime.fromISO('2017-W33-4');\n// var dt = DateTime.fromISO('2017-W33-4T04:45:32.343');\n</code></pre>"},{"location":"luxon/#current-date-and-time","title":"Current date and time","text":"<pre><code>const now = DateTime.now();\n// const now = DateTime.local();\n</code></pre>"},{"location":"luxon/#json","title":"JSON","text":"<ul> <li>To JSON     <pre><code>var json = dt.toObject();\n</code></pre></li> <li>From JSON     <pre><code>var dt = DateTime.fromObject(json);\n// var dt = DateTime.fromObject({year: 2017, month: 5, day: 15, hour: 17, minute: 36});\n</code></pre></li> </ul>"},{"location":"luxon/#math","title":"Math","text":"<pre><code>var dt1 = dt0.plus({ hours: 3, minutes: 2 });\nvar dt1 = dt0.minus({ days: 7 });\nvar dt1 = dt0.startOf('day');\nvar dt1 = dt0.endOf('hour');\n</code></pre>"},{"location":"luxon/#difference","title":"Difference","text":"<pre><code>var i1 = DateTime.fromISO('1982-05-25T09:45'),\ni2 = DateTime.fromISO('1983-10-14T10:30');\ni2.diff(i1).toObject() //=&gt; { milliseconds: 43807500000 }\ni2.diff(i1, 'hours').toObject() //=&gt; { hours: 12168.75 }\ni2.diff(i1, ['months', 'days']).toObject() //=&gt; { months: 16, days: 19.03125 }\ni2.diff(i1, ['months', 'days', 'hours']).toObject() //=&gt; { months: 16, days: 19, hours: 0.75 }\n</code></pre>"},{"location":"luxon/#durations","title":"Durations","text":"<pre><code>var dur = Duration.fromObject({ hours: 2, minutes: 7 });\n// dt.plus(dur);\n\ndur.as('seconds') //=&gt; 7620\ndur.toObject()    //=&gt; { hours: 2, minutes: 7 }\ndur.toISO()       //=&gt; 'PT2H7M'\n</code></pre>"},{"location":"luxon/#parseformat","title":"Parse/Format","text":"<ul> <li>Parse     <pre><code>var dt = DateTime.fromFormat('12-16-2017', 'MM-dd-yyyy');\n// var dt = DateTime.fromFormat('May 25, 1982', 'MMMM dd, yyyy');\n// var dt = DateTime.fromFormat('mai 25, 1982', 'MMMM dd, yyyy', { locale: 'fr' });\n</code></pre></li> <li>Format     <pre><code>var s = dt.toFormat('MM-dd-yyyy');\n// var s = dt.toFormat('MMMM dd, yyyy')\n// var s = dt.setLocale('fr').toFormat('MMMM dd, yyyy')\n</code></pre></li> </ul>"},{"location":"luxon/#relative-time","title":"Relative time","text":"<p>Returns a string representation of this date relative to today.</p> <pre><code>var s = dt.toRelativeCalendar();\n</code></pre> <pre><code>var s = dt.toRelativeCalendar({\nbase: dt0,\nlocale: string,\nunit: string\n});\n</code></pre> <ul> <li><code>base</code> : The DateTime to use as the basis to which this time is compared. Defaults to now.</li> <li><code>locale</code> : Override the locale of this DateTime.</li> <li><code>unit</code> : Use a specific unit; if omitted, the method will pick the unit. Use one of <code>'years'</code>, <code>'quarters'</code>, <code>'months'</code>, <code>'weeks'</code>, or <code>'days'</code></li> </ul>"},{"location":"lzstring/","title":"LZ string","text":""},{"location":"lzstring/#introduction","title":"Introduction","text":"<p>Compress string using LZ-based compression algorithm. Reference</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"lzstring/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"lzstring/#install-plugin","title":"Install plugin","text":""},{"location":"lzstring/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlzstringplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlzstringplugin.min.js', true);\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = scene.plugins.get('rexlzstringplugin').add(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LZStringPlugin from 'phaser3-rex-plugins/plugins/lzstring-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLZString',\nplugin: LZStringPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = scene.plugins.get('rexLZString').add(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LZString from 'phaser3-rex-plugins/plugins/lzstring.js';\n</code></pre></li> <li>Add lz-string object     <pre><code>var lzstring = new LZString(config);\n</code></pre></li> </ul>"},{"location":"lzstring/#create-instance","title":"Create instance","text":"<pre><code>var lzstring = scene.plugins.get('rexLZString').add({\n// encoding: 'none'     // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3\n});\n</code></pre> <ul> <li><code>encoding</code> : <ul> <li><code>'none'</code>, or <code>0</code> : no encoding.</li> <li><code>'base64'</code>, or <code>1</code> : base64 encoding.</li> <li><code>'utf16'</code>, or <code>2</code> : UTF16 encoding.</li> <li><code>'uri'</code>, or <code>3</code> : URI encoding.</li> </ul> </li> </ul>"},{"location":"lzstring/#compression","title":"Compression","text":"<pre><code>var compressionResult = lzstring.compress(src);\n</code></pre>"},{"location":"lzstring/#decompression","title":"Decompression","text":"<pre><code>var decompressionResult = lzstring.decompress(compressionResult);\n</code></pre>"},{"location":"lzstring/#set-encoding","title":"Set encoding","text":"<pre><code>lzstring.setEncoding(m);  // 0|'none'|1|'base64'|2|'utf16'|3|'uri'\n</code></pre>"},{"location":"mainloop/","title":"Main loop","text":"<ol> <li>game.events <code>prestep</code> event. Global Managers like Input and Sound update.<ol> <li>trigger <code>game.sound.update()</code></li> </ol> </li> <li>game.events <code>step</code> event. User-land code and plugins<ul> <li>Register event     <pre><code>scene.game.events.on('step', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>Update the Scene Manager and all active Scenes<ol> <li>scene.events <code>preupdate</code> event<ul> <li>Register event     <pre><code>scene.events.on('preupdate', function(time, delta){\n//\n}, scope);\n</code></pre></li> <li>InputPlugin.preUpdate()</li> <li>TweenManager.preUpdate() to arrange active targets</li> <li>UpdateList.preUpdate(), to arrange game objects in UpdateList</li> </ul> </li> <li>scene.events <code>update</code> event<ul> <li>Register event     <pre><code>scene.events.on('update', function(time, delta){\n//\n}, scope);\n</code></pre></li> <li>TweenManager.update(), to run active tweens</li> <li>UpdateList.update<ul> <li>gameObject.preUpdate</li> </ul> </li> <li>Update arcade world</li> </ul> </li> <li>scene.update()</li> <li>scene.events <code>postupdate</code> event<ul> <li>Register event     <pre><code>scene.events.on('postupdate', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> </li> <li>game.events <code>poststep</code> event. Final event before rendering starts.<ul> <li>Register event     <pre><code>scene.game.events.on('poststep', function(time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>game.renderer.preRender()</li> <li>game.events <code>prerender</code> event<ul> <li>Register event     <pre><code>scene.game.events.on('prerender', function(renderer, time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>SceneManager.render()<ol> <li>Sort display list</li> <li>scene.events <code>prerender</code> event<ul> <li>Register event     <pre><code>scene.events.on('prerender', function(renderer){\n//\n}, scope);\n</code></pre></li> </ul> </li> <li>Render cameras</li> <li>scene.events <code>render</code> event<ul> <li>Register event     <pre><code>scene.events.on('render', function(renderer){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> </li> <li>game.renderer.postRender()</li> <li>game.events <code>postrender</code> event. Final event before the step repeats.<ul> <li>Register event     <pre><code>scene.game.events.on('postrender', function(renderer, time, delta){\n//\n}, scope);\n</code></pre></li> </ul> </li> </ol> <p>Note</p> <p>Each scene is a standalone system.</p>"},{"location":"mainloop/#flow-chart","title":"Flow chart","text":""},{"location":"mainloop/#game-loop","title":"Game loop","text":"<pre><code>graph TB\n\nsubgraph Render\nGameRenderPreRender[\"game.renderer.preRender()\"]\nGameEventPreRender&gt;\"game.events: prerender\"]\nSceneManagerRender[\"SceneManager.render()&lt;br&gt;...See 'Scene steps'...\"]\nGameRenderPostRender[\"game.renderer.postRender()\"]\nGameEventPostRender&gt;\"game.events: postrender\"]\nend\n\nsubgraph Step\nGameEventPreStep&gt;\"game.events: prestep&lt;br&gt;&lt;br&gt;sound.update()\"]\nGameEventStep&gt;\"game.events: step\"]\nSceneManagerUpdate[\"SceneManager.update()&lt;br&gt;...See 'Scene steps'...\"]\nGameEventPostStep&gt;\"game.events: poststep\"]\nend\n\n\nGameEventPreStep --&gt; GameEventStep\nGameEventStep --&gt; SceneManagerUpdate\nSceneManagerUpdate --&gt; GameEventPostStep\nGameEventPostStep --&gt; GameRenderPreRender\nGameRenderPreRender --&gt; GameEventPreRender\nGameEventPreRender --&gt; SceneManagerRender\nSceneManagerRender --&gt; GameRenderPostRender\nGameRenderPostRender --&gt; GameEventPostRender\nGameEventPostRender --&gt; GameEventPreStep</code></pre>"},{"location":"mainloop/#scene-steps","title":"Scene steps","text":"<pre><code>graph TB\n\nsubgraph Render\nSceneEventPreRender&gt;\"scene.events: prerender\"]\nSceneCameraRender[\"scene.cameras.render()\"]\nSceneEventRender&gt;\"scene.events: render\"]\nend\n\nsubgraph Update\nSceneEventPreUpdate&gt;\"scene.events: preupdate&lt;br&gt;&lt;br&gt;InputPlugin.preUpdate()&lt;br&gt;TweenManager.preUpdate()&lt;br&gt;UpdateList.preUpdate()\"]\nSceneEventUpdate&gt;\"scene.events: update&lt;br&gt;&lt;br&gt;TweenManager.update()&lt;br&gt;UpdateList.update()&lt;br&gt;gameObject.preUpdate()\"]\nSceneUpdate[\"scene.update()\"]\nSceneEventPostUpdate&gt;\"scene.events: postupdate\"]\nend\n\n\nSceneEventPreUpdate --&gt; SceneEventUpdate\nSceneEventUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneEventPostUpdate\n\nSceneEventPostUpdate -.-&gt; SceneEventPreRender\nSceneEventPreRender --&gt; SceneCameraRender\nSceneCameraRender --&gt; SceneEventRender</code></pre>"},{"location":"markedeventsheet/","title":"Markdown event sheets","text":""},{"location":"markedeventsheet/#introduction","title":"Introduction","text":"<p>Event sheets contains main condition(s) and actions, in simple markdown format (headings, code block).</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"markedeventsheet/#live-demos","title":"Live demos","text":"<ul> <li>Command executor</li> </ul>"},{"location":"markedeventsheet/#usage","title":"Usage","text":"<ul> <li>Sample code</li> <li>Event sheets</li> </ul>"},{"location":"markedeventsheet/#install-plugin","title":"Install plugin","text":""},{"location":"markedeventsheet/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmarkedeventsheetsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmarkedeventsheetsplugin.min.js', true);\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = scene.plugins.get('rexmarkedeventsheetsplugin').add(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MarkedEventSheetsPlugin from 'phaser3-rex-plugins/plugins/markedeventsheets-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMarkedEventSheets',\nplugin: MarkedEventSheetsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MarkedEventSheets from 'phaser3-rex-plugins/plugins/markedeventsheets.js';\n</code></pre></li> <li>Add event-sheet-manager object     <pre><code>var eventSheetManager = new MarkedEventSheets(config);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#create-instance","title":"Create instance","text":"<pre><code>var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add({\ncommandExecutor: Object,\nparallel: false\n});\n</code></pre> <ul> <li><code>commandExecutor</code> : Command executor of actions.<ul> <li>This plugin provides a built-in command executor.</li> </ul> </li> <li><code>parallel</code> :<ul> <li><code>false</code> : Test condition then execute event sheet one by one. Default behavior.</li> <li><code>true</code> : Test all condition of event sheets then execute event sheets one by one.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#add-event-sheet","title":"Add event sheet","text":"<pre><code>eventSheetManager.addEventSheet(content, {\ncommentLineStart: '\\/\\/',\nlineBreak: '\\\\',\nparallel: undefined\n})\n</code></pre> <p>or</p> <pre><code>eventSheetManager.addEventSheet(content, groupName, {\ncommentLineStart: '\\/\\/',\nlineBreak: '\\\\',\nparallel: undefined\n})\n</code></pre> <ul> <li><code>content</code> : See structure of event sheet</li> <li><code>commentLineStart</code> : Content line start by this symobl (default value is <code>//</code>) will be ignored as a comment line.</li> <li><code>lineBreak</code> : Markdown will use <code>\\</code> as line break. So the last character <code>\\</code> will be discarded.</li> <li><code>parallel</code> : <ul> <li><code>undefined</code> : Use default <code>parallel</code> property.</li> </ul> </li> <li><code>groupName</code> : Each event sheet belong a group. Ignore this parameter to use default group.<ul> <li><code>'_'</code> : Default group name.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#remove-event-sheet","title":"Remove event sheet","text":"<ul> <li>Remove an event sheet in default group     <pre><code>eventSheetManager.removeEventSheet(title);\n</code></pre></li> <li>Remove an event sheet in a specific group     <pre><code>eventSheetManager.removeEventSheet(title, groupName);\n</code></pre></li> <li>Remove all event sheets in default group     <pre><code>eventSheetManager.removeAllEventSheets();\n</code></pre></li> <li>Remove all event sheets in a specific group     <pre><code>eventSheetManager.removeAllEventSheets(groupName);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#start-running","title":"Start running","text":"<ul> <li>Start running default group     <pre><code>eventSheetManager.start();\n</code></pre></li> <li>Start running a specific group of event sheets     <pre><code>eventSheetManager.start(groupName);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) without condition testing, in default group.     <pre><code>eventSheetManager.start(title);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) without condition testing, in a specific group.     <pre><code>eventSheetManager.start(title, groupName);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) with condition testing, in default group.     <pre><code>eventSheetManager.start(title, false);\n</code></pre></li> <li>Start running an event sheet (indexed by <code>title</code>) with condition testing, in a specific group.     <pre><code>eventSheetManager.start(title, groupName, false);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#stop-running","title":"Stop running","text":"<ul> <li>Stop running default group     <pre><code>eventSheetManager.stop();\n</code></pre></li> <li>Stop running a specific group of event sheets     <pre><code>eventSheetManager.stop(groupName);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#local-memory","title":"Local memory","text":"<p>Local memory is shared for all event sheets.</p> <ul> <li>Set value     <pre><code>eventSheetManager.setData(key, value);\n</code></pre></li> <li>Toggle value     <pre><code>eventSheetManager.toggleData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>eventSheetManager.incData(key, inc);\n</code></pre></li> <li>Get value     <pre><code>var value = eventSheetManager.getData(key);\n</code></pre></li> <li>Has key     <pre><code>var hasData = eventSheetManager.hasData(key);\n</code></pre></li> <li>Local memory as a dictionary     <pre><code>var data = eventSheetManager.memory;\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#states","title":"States","text":"<ul> <li>Dump state of event sheets of all groups     <pre><code>var states = eventSheetManager.dumpState();\n</code></pre></li> <li>Load state of event sheet of all groups     <pre><code>eventSheetManager.loadState(states);\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#events","title":"Events","text":"<ul> <li>A group of event sheets has been executed completed     <pre><code>eventSheetManager.on('complete', function(groupName, eventSheetManager){ });\n</code></pre></li> <li>Enter an event sheet     <pre><code>eventSheetManager.on('eventsheet.enter', function(title, groupName, eventSheetManager){ });\n</code></pre></li> <li>Exit an event sheet     <pre><code>eventSheetManager.on('eventsheet.exit', function(title, groupName, eventSheetManager){ });\n</code></pre></li> <li>Enter a label (any heading) an event sheet     <pre><code>eventSheetManager.on('label.enter', function(labelTitle, treeTitle, groupName, eventSheetManager){ });\n</code></pre></li> <li>Exit a label (any heading) of an event sheet     <pre><code>eventSheetManager.on('label.exit', function(labelTitle, treeTitle, groupName, eventSheetManager){ });\n</code></pre></li> <li>Test condition of an event sheet failed     <pre><code>eventSheetManager.on('eventsheet.catch', function(title, groupName, eventSheetManager){ });\n</code></pre></li> </ul>"},{"location":"markedeventsheet/#structure-of-event-sheet","title":"Structure of event sheet","text":"<p>Sample</p>"},{"location":"markedeventsheet/#main-headings","title":"Main headings","text":"<pre><code># Title\n\n## [Condition]\n\ncoin &gt; 5\n\n## Script\n\n## [Catch]\n</code></pre> <ul> <li>H1 heading: Title of this event sheet</li> <li>H2 heading with <code>[Condition]</code> : Main condition.    <ul> <li>Each line under <code>[Condition]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Can have many <code>[Condition]</code> heading, each <code>[Condition]</code> heading will be composed of <code>OR</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H2/H3/... headings between <code>[Condition]</code> and <code>[Catch]</code> : Actions when main condition is <code>true</code>.<ul> <li>Flow control instructions of headings</li> <li>Actions : Custom command</li> </ul> </li> <li>H2 heading with <code>[Catch]</code> : Actions when main condition is <code>false</code>.</li> </ul>"},{"location":"markedeventsheet/#flow-control-instructions","title":"Flow control instructions","text":""},{"location":"markedeventsheet/#simple-branch","title":"Simple branch","text":"<pre><code>## [If]\n\ncoin &gt; 5\n\n### Label\n</code></pre> <ul> <li>H2/H3/... heading with <code>[If]</code> : Internal branch<ul> <li>Each line under <code>[If]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H3/H4/... heading under <code>[If]</code> : Actions when condition is <code>true</code>.</li> </ul>"},{"location":"markedeventsheet/#complex-branch","title":"Complex branch","text":"<p>Does not support complex branch (if... else if ... else) inside an event sheet. User can build complex branch by mutiple event sheets with main condition (<code>[Condition]</code> H2 heading). Example</p>"},{"location":"markedeventsheet/#while-loop","title":"While loop","text":"<pre><code>## [While]\n\nloopCount &gt; 0\n\n### Label\n</code></pre> <ul> <li>H2/H3/... heading with <code>[While]</code> : While loop<ul> <li>Each line under <code>[While]</code> is a boolean equation, composed of <code>AND</code> logic.</li> <li>Read data from local memory</li> </ul> </li> <li>H3/H4/... heading under <code>[While]</code> : Actions running when condition is <code>true</code></li> </ul>"},{"location":"markedeventsheet/#break","title":"Break","text":"<pre><code>[break]\n</code></pre> <ul> <li>Action line with <code>[break]</code> : Ignore remainder actions in current label (heading).</li> </ul>"},{"location":"markedeventsheet/#exit","title":"Exit","text":"<pre><code>[exit]\n</code></pre> <ul> <li>Action line with <code>[exit]</code> : Skip remainder label (heading) and actions.</li> </ul>"},{"location":"markedeventsheet/#custom-command","title":"Custom command","text":"<pre><code>commandName\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Each command is divided by space line. i.e. add space lines above and below command.</li> <li>First line is the command name.<ol> <li>Invoke <code>commandExecutor.commandName</code> method if this <code>commandName</code> method is existed.     <pre><code>commandName(config, eventSheetManager) {\n// return eventEmitter;\n}\n</code></pre><ul> <li><code>config</code> : Parameter and value in a dictionary.</li> <li><code>eventSheetManager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul> </li> <li>Otherwise, invoke <code>commandExecutor.defaultHandler</code>.     <pre><code>defaultHandler(commandName, config, manager) {\n// return eventEmitter;\n}\n</code></pre><ul> <li><code>commandName</code> : Command name.</li> <li><code>config</code> : Parameter and value in a dictionary.</li> <li><code>manager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul> </li> </ol> </li> <li>Remainder lines are parameter composed of parameter name and value, with <code>=</code><ul> <li>Space characters at line start will be discarded.</li> <li>Value will be parsed to number, boolean, or string.<ul> <li>String value contains <code>{{</code>, and <code>}}</code> will be interpolation by mustache template syntax, return a string value.</li> <li>String value wrapped by <code>#(</code> <code>)</code> will be treated as expression, return a number value.</li> </ul> </li> </ul> </li> <li>Any line start with <code>//</code> will be ignored as comment line.</li> </ul> <p>For multiple lines parameter :</p> <pre><code>```commandName,param0=value,param1=value\nline0\nline1\nline2\n```\n</code></pre> <ul> <li>Lines in code block will be assigned to <code>text</code> parameter.</li> </ul> <p>So it will be equal to</p> <pre><code>commandName\n  text=...\n  param0=value\n  param1=value\n</code></pre>"},{"location":"markedeventsheet/#command-executor","title":"Command executor","text":"<p>A command executor for phaser3 engine.</p>"},{"location":"markedeventsheet/#create-command-executor-instance","title":"Create command executor instance","text":"<pre><code>var commandExecutor = scene.plugins.get('rexMarkedEventSheets').addCommandExecutor(scene, {\nlayers: []\n});\n\n// Add to event sheet manager\n// var eventSheetManager = scene.plugins.get('rexMarkedEventSheets').add({\n//     commandExecutor: commandExecutor\n// });\n</code></pre> <ul> <li><code>layers</code> : Pre-create layer game object indexed by array of string names.</li> </ul>"},{"location":"markedeventsheet/#game-object","title":"Game object","text":""},{"location":"markedeventsheet/#register-custom-game-object","title":"Register custom game object","text":"<pre><code>commandExecutor.addGameObjectManager({\nname: GOTYPE,\n\nviewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\nfade: 500,\n// fade: {mode: 'tint', time: 500},\n\ndefaultLayer: layerName,\n\ncommands: {\ncommandName(config, eventSheetManager) {\n// commandExecutor.waitEvent(eventEmitter, eventName);\n}\n}\n})\n</code></pre> <ul> <li><code>name</code> : A string name of game object's type. Will register command <code>GOTYPE</code> to this command executor.</li> <li><code>createGameObject</code> : A callback for creating game object     <pre><code>function(scene, config) {\nreturn gameObject;\n}\n</code></pre><ul> <li><code>config</code> : Parameters passed from event sheet.<ul> <li><code>id</code> : Parameter <code>id</code> is reserved.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>defaultLayer</code> : A layer name defined in <code>layers</code> parameter of <code>addCommandExecutor</code> method</li> <li><code>commands</code> : Custom commands, each command is a callback indexed by command name     <pre><code>commandName: function(gameObject, config, commandExecutor) {\n// commandExecutor.waitEvent(eventEmitter, eventName);\n}\n</code></pre><ul> <li><code>commandName</code> : Command name. These command names are reserved : <code>to</code>, <code>yoyo</code>, <code>destroy</code></li> <li><code>gameObject</code> : Game object instance.</li> <li><code>config</code> : Parameters passed from event sheet.</li> <li><code>commandExecutor</code> : This command executor instance.<ul> <li><code>commandExecutor.waitEvent(eventEmitter, eventName)</code> : Invoke this method to    Run next command after <code>eventEmitter</code> emitting event <code>eventName</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"markedeventsheet/#create-custom-game-object","title":"Create custom game object","text":"<pre><code>GOTYPE\n  id=NAME\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Create custom game object <code>GOTYPE</code> with config <code>{param0, param1}</code>, indexed by <code>id</code></li> </ul>"},{"location":"markedeventsheet/#set-properties-of-custom-game-object","title":"Set properties of custom game object","text":"<pre><code>NAME\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n</code></pre> <ul> <li><code>vpx</code>, <code>vpy</code> : viewportCoordinate properties injected if <code>viewportCoordinate</code> is <code>true</code>.</li> </ul>"},{"location":"markedeventsheet/#ease-properties-of-custom-game-object","title":"Ease properties of custom game object","text":"<pre><code>NAME.to\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n  duration=1000\n  ease=Linear\n  repeat=0\n  wait=\n</code></pre> <pre><code>NAME.yoyo\n  x=\n  vpx=\n  y=\n  vpy=\n  alpha=\n  duration=1000\n  ease=Linear\n  repeat=0\n  wait=\n</code></pre> <ul> <li>These properties are reserved : <code>id</code>, <code>duration</code>, <code>ease</code>, <code>repeat</code>, <code>yoyo</code>, <code>wait</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#invoke-custom-command","title":"Invoke custom command","text":"<pre><code>NAME.commandName\n  param0=value\n  param1=value\n</code></pre> <ul> <li>Invoke custom command <code>commandName</code> method with these parameters<ul> <li><code>gameObject</code> : Indexed by <code>NAME</code></li> <li><code>config</code> : <code>{param0, param1}</code></li> </ul> </li> </ul> <p>Do nothing if gameObject or commandName is not found.</p>"},{"location":"markedeventsheet/#destroy-custom-game-object","title":"Destroy custom game object","text":"<pre><code>NAME.destroy\n</code></pre>"},{"location":"markedeventsheet/#wait","title":"Wait","text":""},{"location":"markedeventsheet/#wait-click","title":"Wait click","text":"<pre><code>click\n</code></pre> <ul> <li>Run next command after clicking.</li> </ul>"},{"location":"markedeventsheet/#wait-any","title":"Wait any","text":"<pre><code>wait\n  click\n  key=keyName\n  time=\n</code></pre> <ul> <li><code>click</code> : Run next command after clicking.</li> <li><code>key</code> : Run next command after key down</li> <li><code>time</code> : Run next command after time-out.</li> </ul> <p>Emit these events from eventSheetManager</p> <ul> <li>Wait click or key down     <pre><code>eventSheetManager.on('pause.input', function(){ });\n</code></pre><ul> <li>Resume (run next command)      ```javascript         eventSheetManager.on('resume.input', function(){ <pre><code>});\n```\n</code></pre> <ul> <li>Wait click only     <code>javascript     eventSheetManager.on('pause.click', function(){       });</code></li> <li>Wait key down only     <code>javascript     eventSheetManager.on('pause.key', function(keyName){       });</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"markedeventsheet/#sound","title":"Sound","text":"<p>This command executor provides </p> <ul> <li>2 background music tracks : <code>bgm</code>, <code>bgm2</code></li> <li>2 sound effects : <code>se</code>, <code>se2</code>.</li> </ul>"},{"location":"markedeventsheet/#sound-properties","title":"Sound properties","text":"<pre><code>bgm\n  volume\n  mute\n  unmute\n</code></pre> <ul> <li>Command name : <code>bgm</code>, <code>bgm2</code>, <code>se</code>, <code>se2</code></li> </ul>"},{"location":"markedeventsheet/#play-sound","title":"Play sound","text":"<pre><code>bgm.play\n  key=\n  // volume\n  // detune\n  // rate\n  fadeIn=0\n  // loop\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.play</code>, <code>bgm2.play</code>, <code>se.play</code>, <code>se2.play</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#cross-fade-in-sound","title":"Cross fade in sound","text":"<pre><code>bgm.cross\n  key=\n  duration=500\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.cross</code>, <code>bgm2.cross</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#stop-sound","title":"Stop sound","text":"<pre><code>bgm.stop\n</code></pre> <ul> <li>Command name : <code>bgm.stop</code>, <code>bgm2.stop</code>, <code>se.stop</code>, <code>se2.stop</code></li> </ul>"},{"location":"markedeventsheet/#fade-out-sound","title":"Fade out sound","text":"<pre><code>bgm.fadeOut\n  duration=500\n  stop=true\n  wait=false\n</code></pre> <ul> <li>Command name : <code>bgm.fadeOut</code>, <code>bgm2.fadeOut</code>, <code>se.fadeOut</code>, <code>se2.fadeOut</code></li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after playing sound complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#fade-in-sound","title":"Fade in sound","text":"<pre><code>bgm.fadeIn\n  duration=500\n</code></pre> <ul> <li>Command name : <code>bgm.fadeIn</code>, <code>bgm2.fadeIn</code></li> </ul>"},{"location":"markedeventsheet/#pause-sound","title":"Pause sound","text":"<pre><code>bgm.pause\n</code></pre> <ul> <li>Command name : <code>bgm.pause</code>, <code>bgm2.pause</code></li> </ul>"},{"location":"markedeventsheet/#resume-sound","title":"Resume sound","text":"<pre><code>bgm.resume\n</code></pre> <ul> <li>Command name : <code>bgm.resume</code>, <code>bgm2.resume</code></li> </ul>"},{"location":"markedeventsheet/#mute-sound","title":"Mute sound","text":"<pre><code>bgm.mute\n</code></pre> <ul> <li>Command name : <code>bgm.mute</code>, <code>bgm2.mute</code>, <code>se.mute</code>, <code>se2.mute</code></li> </ul>"},{"location":"markedeventsheet/#unmute-sound","title":"Unmute sound","text":"<pre><code>bgm.unmute\n</code></pre> <ul> <li>Command name : <code>bgm.unmute</code>, <code>bgm2.unmute</code>, <code>se.unmute</code>, <code>se2.unmute</code></li> </ul>"},{"location":"markedeventsheet/#camera","title":"Camera","text":""},{"location":"markedeventsheet/#camera-properties","title":"Camera properties","text":"<pre><code>camera\n  x=\n  y=\n  rotate=\n  zoom=\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Scroll</li> <li><code>rotate</code> : Rotate in degree</li> <li><code>zoom</code> : Zoom</li> </ul> <p>Run next command immediately.</p>"},{"location":"markedeventsheet/#fade-in","title":"Fade in","text":"<pre><code>camera.fadeIn\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See fade effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#fade-out","title":"Fade out","text":"<pre><code>camera.fadeOut\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See fade effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#flash","title":"Flash","text":"<pre><code>camera.flash\n  duration=1000\n  red\n  green\n  blue\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>red</code>, <code>green</code>, <code>blue</code> : See flash effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#shake","title":"Shake","text":"<pre><code>camera.shake\n  duration=1000\n  intensity\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>intensity</code> : See shake effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#zoom","title":"Zoom","text":"<pre><code>camera.zoomTo\n  duration=1000\n  zoom\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>zoom</code> : See zoom effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#rotate-to","title":"Rotate to","text":"<pre><code>camera.rotateTo\n  duration=1000\n  rotate\n  ease\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>rotate</code>, <code>ease</code> : See rotateTo effect</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#scroll-to","title":"Scroll to","text":"<pre><code>camera.scrollTo\n  duration=1000\n  x\n  y\n  ease\n  wait=false\n</code></pre> <ul> <li><code>duration</code>, <code>x</code>, <code>y</code>, <code>ease</code> : Scroll to position.</li> <li><code>wait</code> :<ul> <li><code>false</code> : Run next command immediately. Default behavior.</li> <li><code>true</code> : Run next command after effect complete.</li> </ul> </li> </ul>"},{"location":"markedeventsheet/#add-custom-command","title":"Add custom command","text":"<pre><code>commandExecutor.addCommand(commandName, function(config, eventSheetManager){\n// return eventEmitter;\n}, scope);\n</code></pre> <ul> <li><code>config</code> : Parameters passed from event sheet.</li> <li><code>eventSheetManager</code> : This event mangager.</li> <li>Return value :<ul> <li><code>undefined</code>, <code>null</code> : Run next command immediately.</li> <li><code>eventEmitter</code> : Run next command after <code>eventEmitter</code> emitting <code>'complete'</code> event.</li> </ul> </li> </ul>"},{"location":"mask/","title":"Mask","text":""},{"location":"mask/#introduction","title":"Introduction","text":"<p>Apply mask on game object. Built-in render of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"mask/#usage","title":"Usage","text":""},{"location":"mask/#add-mask","title":"Add mask","text":""},{"location":"mask/#create-mask-object","title":"Create mask object","text":""},{"location":"mask/#bitmap-mask","title":"Bitmap mask","text":"<ol> <li>Create image (image, sprite, bitmap text, particles, text),or shader <pre><code>var shape = scene.add.image(x, y, key).setVisible(false);\n</code></pre></li> <li>Create mask     <pre><code>var mask = shape.createBitmapMask();\n</code></pre>     or     <pre><code>var mask = scene.add.bitmapMask(shape);\n</code></pre></li> </ol> <p>or</p> <pre><code>var mask =  scene.add.bitmapMask(undefined, x, y, key, frame);\n</code></pre>"},{"location":"mask/#geometry-mask","title":"Geometry mask","text":"<p>The mask is essentially a clipping path which can only make a masked pixel  fully visible or fully invisible without changing its alpha (opacity).</p> <ol> <li>Create graphics <pre><code>var shape = scene.make.graphics();\n</code></pre></li> <li>Create mask     <pre><code>var mask = shape.createGeometryMask();\n</code></pre></li> </ol>"},{"location":"mask/#apply-mask-object","title":"Apply mask object","text":"<pre><code>gameObject.setMask(mask); // image.mask = mask;\n</code></pre> <p>A mask object could be added to many game objects.</p> <p>Error</p> <p>Don't put game object and its mask into a container together. See this testing, enable line 22-24.</p> <p>Note</p> <p>Bitmap Mask is WebGL only.</p> <p>Note</p> <p>Can combine Geometry Masks and Blend Modes on the same Game Object,  but Bitmap Masks can't.</p>"},{"location":"mask/#clear-mask","title":"Clear mask","text":"<ul> <li>Clear mask     <pre><code>image.clearMask();\n</code></pre></li> <li>Clear mask and destroy mask object     <pre><code>image.clearMask(true);\n</code></pre></li> </ul>"},{"location":"mask/#invert-alpha","title":"Invert alpha","text":"<p>Only GeometryMask has <code>inverse alpha</code> feature.</p> <ul> <li>Inverse alpha     <pre><code>mask.setInvertAlpha();\n// mask.invertAlpha = true;\n</code></pre></li> <li>Disable     <pre><code>mask.setInvertAlpha(false);\n// mask.invertAlpha = false;\n</code></pre></li> </ul>"},{"location":"mask/#get-shape-game-object","title":"Get shape game object","text":"<ul> <li>Bitmap mask     <pre><code>var shape = mask.bitmapMask;\n</code></pre></li> <li>Geometry mask     <pre><code>var shape = mask.geometryMask;\n</code></pre></li> </ul>"},{"location":"matterjs-attractor/","title":"Attractor","text":""},{"location":"matterjs-attractor/#introduction","title":"Introduction","text":"<p>Apply continual forces on bodies.</p> <ul> <li>Reference</li> </ul>"},{"location":"matterjs-attractor/#usage","title":"Usage","text":""},{"location":"matterjs-attractor/#system-configuration","title":"System configuration","text":"<ul> <li>Game config     <pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nplugins: {\nattractors: true,\n// ...\n}\n// ...\n}\n}\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Runtime     <pre><code>scene.matter.system.enableAttractorPlugin();\n</code></pre></li> </ul>"},{"location":"matterjs-attractor/#matter-object-configuration","title":"Matter object configuration","text":"<pre><code>var options = {\n// ...\nplugin: {\nattractors: [\ncallback,\n// ...\n]\n},\n// ...\n}\n</code></pre> <ul> <li><code>callback</code> :<ul> <li>Retuen a force (<code>{x,y}</code>), which will be applied to bodyB <pre><code>function(bodyA, bodyB) {\nreturn {x, y}; // Force\n}\n</code></pre><ul> <li><code>bodyA</code> : Attractor matter object.</li> <li><code>bodyB</code> : Other matter object.</li> </ul> </li> <li>Apply forece to bodies directly.     <pre><code>function(bodyA, bodyB) {\nbodyA.gameObject.applyForce({x, y});\nbodyB.gameObject.applyForce({x, y});\n}\n</code></pre><ul> <li><code>bodyA</code> : Attractor matter object.<ul> <li><code>bodyA.gameObject</code> : Game object.</li> </ul> </li> <li><code>bodyB</code> : Other matter object.<ul> <li><code>bodyB.gameObject</code> : Game object.</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/","title":"Game object","text":""},{"location":"matterjs-gameobject/#introduction","title":"Introduction","text":"<p>Matterjs physics Image/Sprite/Group object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"matterjs-gameobject/#usage","title":"Usage","text":""},{"location":"matterjs-gameobject/#add-physics-object","title":"Add physics object","text":"<p>Enable physics world</p>"},{"location":"matterjs-gameobject/#image-object","title":"Image object","text":"<pre><code>var image = scene.matter.add.image(x, y, key, frame);\n// var image = scene.matter.add.image(x, y, key, frame, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#sprite-object","title":"Sprite object","text":"<pre><code>var image = scene.matter.add.sprite(x, y, key, frame);\n// var image = scene.matter.add.sprite(x, y, key, frame, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#any-game-object","title":"Any game object","text":"<pre><code>var gameObject = scene.matter.add.gameObject(gameObject);\n// var gameObject = scene.matter.add.gameObject(gameObject, config);\n</code></pre> <ul> <li><code>config</code> : Config object</li> </ul>"},{"location":"matterjs-gameobject/#image-composite","title":"Image composite","text":"<p>Create a new composite containing Matter Image objects created in a grid arrangement.</p> <pre><code>var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows);\n// var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options);\n</code></pre> <ul> <li><code>key</code>, <code>frame</code> : Texture key and frame name.</li> <li><code>x</code>, <code>y</code> : Top-left position of these game objects.</li> <li><code>columns</code>, <code>rows</code> : The number of columns/rows in the grid.</li> <li><code>columnGap</code>, <code>rowGap</code> : The distance between each column/row.</li> <li><code>config</code> : Config object</li> <li><code>composite</code> : Composite matter object.<ul> <li><code>composite.bodies</code> : An array of bodies.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#config","title":"Config","text":"<pre><code>{\nlabel: 'Body',\nshape: 'rectangle',\nchamfer: null,\n\nisStatic: false,\nisSensor: false,\nisSleeping: false,\nignoreGravity: false,\nignorePointer: false,\n\nsleepThreshold: 60,\ndensity: 0.001,\nrestitution: 0,\nfriction: 0.1,\nfrictionStatic: 0.5,\nfrictionAir: 0.01,\n\nforce: { x: 0, y: 0 },\nangle: 0,\ntorque: 0,\n\ncollisionFilter: {\ngroup: 0,\ncategory: 0x0001,\nmask: 0xFFFFFFFF,\n},\n\n// parts: [],\n\n// plugin: {\n//     attractors: [\n//         (function(bodyA, bodyB) { return {x, y}}),\n//     ]\n// },\n\nslop: 0.05,\n\ntimeScale: 1,\n}\n</code></pre> <ul> <li><code>label</code> : An arbitrary <code>String</code> name to help the user identify and manage bodies.</li> <li><code>shape</code> : <ul> <li>A string : <code>'rectangle'</code>, <code>'circle'</code>, <code>'trapezoid'</code>, <code>'polygon'</code>, <code>'fromVertices'</code>, <code>'fromPhysicsEditor'</code></li> <li>An object : <ul> <li>Rectangle shape     <pre><code>{\ntype: 'rectangle',\n// width: gameObject.width\n// height: gameObject.height\n}\n</code></pre></li> <li>Circle shape     <pre><code>{\ntype: 'circle',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// maxSides: 25\n}\n</code></pre></li> <li>Trapezoid shape     <pre><code>{\ntype: 'trapezoid',\n// slope: 0.5,\n}\n</code></pre></li> <li>Polygon shape     <pre><code>{\ntype: 'polygon',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// sides: 5,\n}\n</code></pre></li> <li>Vertices     <pre><code>{\ntype: 'fromVertices',\nverts: points,\n// flagInternal: false,\n// removeCollinear: 0.01,\n// minimumArea: 10,\n}\n</code></pre><ul> <li><code>points</code> :<ul> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>chamfer</code> : <ul> <li><code>null</code></li> <li>A number</li> <li><code>{radius: value}</code></li> <li><code>{radius: [topLeft, topRight, bottomRight, bottomLeft]}</code></li> </ul> </li> <li><code>isStatic</code> : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed.</li> <li><code>isSensor</code> : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically.</li> <li><code>isSleeping</code> : A flag that indicates whether the body is considered sleeping. A sleeping body acts similar to a static body, except it is only temporary and can be awoken.</li> <li><code>sleepThreshold</code> : The number of updates in which this body must have near-zero velocity before it is set as sleeping.</li> <li><code>density</code> : Density of the body, that is its mass per unit area.</li> <li><code>restitution</code> : The restitution/bounce/elasticity of the body. The value is always positive and is in the range <code>(0, 1)</code>.<ul> <li><code>0</code> : Collisions may be perfectly inelastic and no bouncing may occur.</li> <li><code>0.8</code> : The body may bounce back with approximately 80% of its kinetic energy.</li> </ul> </li> <li><code>friction</code> : Friction of the body. The value is always positive and is in the range <code>(0, 1)</code>.<ul> <li><code>0</code> : The body may slide indefinitely.</li> <li><code>1</code> : The body may come to a stop almost instantly after a force is applied.</li> </ul> </li> <li><code>frictionStatic</code> : The static friction of the body (in the Coulomb friction model). <ul> <li><code>0</code> : The body will never 'stick' when it is nearly stationary and only dynamic <code>friction</code> is used.</li> <li><code>10</code> :  The higher the value, the more force it will take to initially get the body moving when nearly stationary.</li> </ul> </li> <li><code>frictionAir</code> : The air friction of the body (air resistance). <ul> <li><code>0</code> : The body will never slow as it moves through space.</li> <li>The higher the value, the faster a body slows when moving through space.</li> </ul> </li> <li><code>force</code> : The force to apply in the current step.</li> <li><code>angle</code> : Angle of the body, in radians.</li> <li><code>torque</code> : the torque (turning force) to apply in the current step.</li> <li><code>collisionFilter</code> : An <code>Object</code> that specifies the collision filtering properties of this body.<ul> <li><code>collisionFilter.group</code></li> <li><code>collisionFilter.category</code> : A bit field that specifies the collision category this body belongs to.</li> <li><code>collisionFilter.mask</code> : A bit mask that specifies the collision categories this body may collide with.</li> </ul> </li> <li><code>slop</code> : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies.<ul> <li>The default should generally suffice, although very large bodies may require larger values for stable stacking.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#collision","title":"Collision","text":"<p>Collisions between two bodies will obey the following rules: </p> <ul> <li>(grpupA &gt; 0) &amp;&amp; (groupB &gt; 0) :<ul> <li>Collision = (groupA == groupB)</li> </ul> </li> <li>(grpupA == 0) || (groupB == 0) :<ul> <li>Collision = ((categoryA &amp; maskB) !== 0) &amp;&amp; ((categoryB &amp; maskA) !== 0)</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#movement","title":"Movement","text":""},{"location":"matterjs-gameobject/#velocity","title":"Velocity","text":"<pre><code>gameObject.setVelocity(x, y);\n</code></pre> <pre><code>gameObject.setVelocityX(x);\n</code></pre> <pre><code>gameObject.setVelocityY(x);\n</code></pre>"},{"location":"matterjs-gameobject/#acceleration","title":"Acceleration","text":""},{"location":"matterjs-gameobject/#force","title":"Force","text":"<ul> <li>Applies a force to a body.     <pre><code>gameObject.applyForce(force);\n</code></pre><ul> <li><code>force</code> : <code>{x, y}</code></li> </ul> </li> <li>Applies a force to a body from a given position.     <pre><code>gameObject.applyForceFrom(position, force); // position, force: {x, y}\n</code></pre><ul> <li><code>position</code> : <code>{x, y}</code></li> <li><code>force</code> : <code>{x, y}</code></li> </ul> </li> <li>Apply thrust to the forward position of the body.     <pre><code>gameObject.thrust(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the left position of the body.     <pre><code>gameObject.thrustLeft(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the right position of the body.     <pre><code>gameObject.thrustRight(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the back position of the body.     <pre><code>gameObject.thrustBack(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> <li>Apply thrust to the back position of the body.     <pre><code>gameObject.thrustBack(speed);\n</code></pre><ul> <li><code>speed</code> : A number.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#gravity","title":"Gravity","text":"<ul> <li>Ignore world gravity     <pre><code>gameObject.setIgnoreGravity(ignore);\n</code></pre><ul> <li><code>ignore</code> : Set to true to ignore the effect of world gravity</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#friction","title":"Friction","text":"<pre><code>gameObject.setFriction(value, air, fstatic);\n</code></pre> <pre><code>gameObject.setFrictionAir(v);\n</code></pre> <pre><code>gameObject.setFrictionStatic(v);\n</code></pre>"},{"location":"matterjs-gameobject/#rotation","title":"Rotation","text":""},{"location":"matterjs-gameobject/#fixed-rotation","title":"Fixed rotation","text":"<pre><code>gameObject.setFixedRotation();\n</code></pre>"},{"location":"matterjs-gameobject/#angular-velocity","title":"Angular velocity","text":"<pre><code>gameObject.setAngularVelocity(v);\n</code></pre>"},{"location":"matterjs-gameobject/#collision_1","title":"Collision","text":""},{"location":"matterjs-gameobject/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var isSensor = gameObject.isSensor();\n</code></pre></li> <li>Set     <pre><code>gameObject.setSensor(value);\n</code></pre><ul> <li><code>value</code> : Set <code>true</code> to enable sensor.</li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#collision-group","title":"Collision group","text":"<ul> <li>Collision grpup     <pre><code>gameObject.setCollisionGroup(value);\n</code></pre></li> <li>Collision category<ol> <li>Get new collision category     <pre><code>var category = scene.matter.world.nextCategory();\n</code></pre><ul> <li><code>category</code> : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1&lt;&lt;31))</li> </ul> </li> <li>Set collision category of game object     <pre><code>gameObject.setCollisionCategory(category);\n</code></pre></li> <li>Set category mask     <pre><code>gameObject.setCollidesWith([categoryA, categoryB, ...]);\n// gameObject.setCollidesWith(categoryA);\n</code></pre></li> </ol> </li> </ul>"},{"location":"matterjs-gameobject/#collision-event","title":"Collision event","text":"<pre><code>scene.matter.world.on('collisionstart', function (event, bodyA, bodyB) {\n// var pairs = event.pairs;\n});\n</code></pre> <ul> <li><code>event</code> : <ul> <li><code>event.pairs</code> : An array of collision pairs<ul> <li><code>event.pairs[i].bodyA</code>, <code>event.pairs[i].bodyB</code> : Matter body object.<ul> <li><code>body.gameObject</code> : Game object of matter body.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>bodyA</code>, <code>bodyB</code> : Equal to <code>event.pairs[0].bodyA</code>, <code>event.pairs[0].bodyB</code>.</li> </ul>"},{"location":"matterjs-gameobject/#collision-bound","title":"Collision bound","text":"<ul> <li>Rectangle     <pre><code>gameObject.setRectangle(width, height, options);\n</code></pre></li> <li>Circle     <pre><code>gameObject.setCircle(radius, options);\n</code></pre></li> <li>Polygon     <pre><code>gameObject.setPolygon(radius, sides, options);\n</code></pre></li> <li>Trapezoid     <pre><code>gameObject.setTrapezoid(width, height, slope, options);\n</code></pre></li> <li>Any     <pre><code>gameObject.setBody(config, options);\n</code></pre><ul> <li><code>config</code> : <ul> <li>Rectangle shape     <pre><code>{\ntype: 'rectangle',\n// width: gameObject.width\n// height: gameObject.height\n}\n</code></pre></li> <li>Circle shape     <pre><code>{\ntype: 'circle',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// maxSides: 25\n}\n</code></pre></li> <li>Trapezoid shape     <pre><code>{\ntype: 'trapezoid',\n// slope: 0.5,\n}\n</code></pre></li> <li>Polygon shape     <pre><code>{\ntype: 'polygon',\n// radius: (Math.max(gameObject.width, gameObject.height) / 2),\n// sides: 5,\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-gameobject/#bounce","title":"Bounce","text":"<pre><code>gameObject.setBounce(v);\n</code></pre> <ul> <li>restitution</li> </ul>"},{"location":"matterjs-gameobject/#mass","title":"Mass","text":"<pre><code>gameObject.setMass(v);\n</code></pre> <pre><code>gameObject.setDensity(v);\n</code></pre>"},{"location":"matterjs-gameobject/#sleep","title":"Sleep","text":""},{"location":"matterjs-gameobject/#enable_1","title":"Enable","text":"<pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nenableSleeping: true\n// ...\n}\n}\n\n}\n</code></pre>"},{"location":"matterjs-gameobject/#sleep-threshold","title":"Sleep threshold","text":"<pre><code>gameObject.setSleepThreshold(value);\n</code></pre>"},{"location":"matterjs-gameobject/#sleep-events","title":"Sleep events","text":"<ul> <li>Sleeping start     <pre><code>scene.matter.world.on('sleepstart', function (event, body) {\n});\n</code></pre></li> <li>Sleeping end     <pre><code>scene.matter.world.on('sleepend', function (event, body) {\n});\n</code></pre></li> </ul>"},{"location":"matterjs-world/","title":"World","text":""},{"location":"matterjs-world/#introduction","title":"Introduction","text":"<p>Matter physics engine in phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"matterjs-world/#usage","title":"Usage","text":""},{"location":"matterjs-world/#configuration","title":"Configuration","text":"<pre><code>var config = {\n// ...\nphysics: {\ndefault: 'matter',\nmatter: {\n//    enabled: true,\n//    positionIterations: 6,\n//    velocityIterations: 4,\n//    constraintIterations: 2,\n//    enableSleeping: false,\n//    plugins: {\n//        attractors: false,\n//        wrap: false,\n//    },\n//    gravity: {\n//        x: 0,\n//        y: 0,\n//    }\n//    setBounds: {\n//        x: 0,\n//        y: 0,\n//        width: scene.sys.scale.width,\n//        height: scene.sys.scale.height,\n//        thickness: 64,\n//        left: true,\n//        right: true,\n//        top: true,\n//        bottom: true,\n//    },\n//    timing: {\n//        timestamp: 0,\n//        timeScale: 1,\n//    },\n//    correction: 1,\n//    getDelta: (function() { return 1000 / 60; }),\n//    autoUpdate: true,\n//    debug: false,\n//    debug: {\n//        showAxes: false,\n//        showAngleIndicator: false,\n//        angleColor: 0xe81153,\n//        showBroadphase: false,\n//        broadphaseColor: 0xffb400,\n//        showBounds: false,\n//        boundsColor: 0xffffff,\n//        showVelocity: false,\n//        velocityColor: 0x00aeef,\n//        showCollisions: false,\n//        collisionColor: 0xf5950c,\n//        showSeparations: false,\n//        separationColor: 0xffa500,\n//        showBody: true,\n//        showStaticBody: true,\n//        showInternalEdges: false,\n//        renderFill: false,\n//        renderLine: true,\n//        fillColor: 0x106909,\n//        fillOpacity: 1,\n//        lineColor: 0x28de19,\n//        lineOpacity: 1,\n//        lineThickness: 1,\n//        staticFillColor: 0x0d177b,\n//        staticLineColor: 0x1327e4,\n//        showSleeping: false,\n//        staticBodySleepOpacity: 0.7,\n//        sleepFillColor: 0x464646,\n//        sleepLineColor: 0x999a99,\n//        showSensors: true,\n//        sensorFillColor: 0x0d177b,\n//        sensorLineColor: 0x1327e4,\n//        showPositions: true,\n//        positionSize: 4,\n//        positionColor: 0xe042da,\n//        showJoint: true,\n//        jointColor: 0xe0e042,\n//        jointLineOpacity: 1,\n//        jointLineThickness: 2,\n//        pinSize: 4,\n//        pinColor: 0x42e0e0,\n//        springColor: 0xe042e0,\n//        anchorColor: 0xefefef,\n//        anchorSize: 4,\n//        showConvexHulls: false,\n//        hullColor: 0xd703d0\n//    }\n}\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"matterjs-world/#control","title":"Control","text":""},{"location":"matterjs-world/#pause","title":"Pause","text":"<pre><code>scene.matter.world.pause();\n</code></pre>"},{"location":"matterjs-world/#resume","title":"Resume","text":"<pre><code>scene.matter.world.resume();\n</code></pre>"},{"location":"matterjs-world/#drag-object","title":"Drag object","text":"<pre><code>scene.matter.add.mouseSpring();\n// scene.matter.add.mouseSpring(options);\n</code></pre> <ul> <li><code>options</code> <pre><code>{\nlength: 0.01,\nstiffness: 0.1,\ndamping: 0,\nangularStiffness: 1,\ncollisionFilter: {\ncategory: 0x0001,\nmask: 0xFFFFFFFF,\ngroup: 0\n}\n}\n</code></pre><ul> <li><code>collisionFilter</code> : Drag filter, see collision.</li> </ul> </li> </ul>"},{"location":"matterjs-world/#world-bounds","title":"World bounds","text":""},{"location":"matterjs-world/#enable","title":"Enable","text":"<ul> <li>World :<ul> <li>Set bounds     <pre><code>scene.matter.world.setBounds(x, y, width, height);\n// scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom);\n</code></pre><ul> <li><code>thickness</code> : The thickness of each wall, in pixels.</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : If true will create the left/right/top/bottom bounds wall.</li> </ul> </li> </ul> </li> </ul>"},{"location":"matterjs-world/#gravity","title":"Gravity","text":"<ul> <li>Set     <pre><code>scene.matter.world.setGravity(x, y);\n// scene.matter.world.setGravity(x, y, scale);\n</code></pre></li> <li>Disable     <pre><code>scene.matter.world.disableGravity();\n</code></pre></li> </ul>"},{"location":"matterjs-world/#constraint","title":"Constraint","text":""},{"location":"matterjs-world/#constraint-of-2-game-objects","title":"Constraint of 2 game objects","text":"<pre><code>var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB);\n// var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options);\n</code></pre> <ul> <li><code>gameObjectA</code>, <code>gameObjectB</code> : Matter game object, or matter body object.</li> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> <li><code>options</code> :     <pre><code>{\npointA: {\nx: 0,\ny: 0,\n},\npointB: {\nx: 0,\ny: 0,\n},\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>pointA</code>, <code>pointB</code> : Offset position of <code>gameObjectA</code>, <code>gameObjectB</code>.</li> </ul> </li> </ul> <p>Alias:</p> <pre><code>var constraint = scene.matter.add.spring(gameObjectA, gameObjectB, length, stiffness, options);\nvar constraint = scene.matter.add.joint(gameObjectA, gameObjectB, length, stiffness, options);\n</code></pre>"},{"location":"matterjs-world/#constraint-to-world-position","title":"Constraint to world position","text":"<pre><code>var constraint = scene.matter.add.worldConstraint(gameObjectB, length, stiffness, options);\n</code></pre> <ul> <li><code>gameObjectB</code> : Matter game object, or matter body object.</li> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> <li><code>options</code> :     <pre><code>{\npointA: {\nx: 0,\ny: 0,\n},\npointB: {\nx: 0,\ny: 0,\n},\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>pointA</code> : World position.</li> <li><code>pointB</code> : Offset position of <code>gameObjectB</code>.</li> </ul> </li> </ul>"},{"location":"matterjs-world/#chain-game-objects","title":"Chain game objects","text":"<pre><code>var composite = scene.matter.add.chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options);\n</code></pre> <ul> <li><code>composite</code> : Image composite</li> <li><code>xOffsetA</code>, <code>yOffsetA</code> : Offset position of gameObjectA, in scale.<ul> <li>xOffset = (Offset distance / width)</li> <li>yOffset = (Offset distance / height)</li> </ul> </li> <li><code>xOffsetB</code>, <code>yOffsetB</code> : Offset position of gameObjectB, in scale.</li> <li><code>options</code> :      <pre><code>{\nlength: undefined,\nstiffness: 1,\ndamping: 0,\nangularStiffness: 0,\n// render: {\n//     visible: true\n// }\n}\n</code></pre><ul> <li><code>length</code> : The target resting length of the constraint.<ul> <li><code>undefined</code> : Current distance between gameObjectA and gameObjectB. (Default value)</li> </ul> </li> <li><code>stiffness</code> : The stiffness of the constraint.<ul> <li><code>1</code> : Very stiff. (Default value)</li> <li><code>0.2</code> : Acts as a soft spring.</li> </ul> </li> </ul> </li> <li><code>composite</code><ul> <li><code>composite.bodies</code> : An array of bodies.</li> <li><code>composite.constraints</code> : An array of constraints</li> </ul> </li> </ul>"},{"location":"matterjs-world/#remove-constraint","title":"Remove constraint","text":"<pre><code>scene.matter.world.removeConstraint(constraint);\n</code></pre>"},{"location":"matterjs-wrap/","title":"Wrap","text":""},{"location":"matterjs-wrap/#introduction","title":"Introduction","text":"<p>Automatically wrap the position of bodies and composites such that they always stay within the given bounds.</p> <ul> <li>Reference</li> </ul>"},{"location":"matterjs-wrap/#usage","title":"Usage","text":""},{"location":"matterjs-wrap/#system-configuration","title":"System configuration","text":"<ul> <li>Game config     <pre><code>var config = {\n// ...\nphysics: {\nmatter: {\n// ...\nplugins: {\nwrap: true,\n// ...\n}\n// ...\n}\n}\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Runtime     <pre><code>scene.matter.system.enableWrapPlugin();\n</code></pre></li> </ul>"},{"location":"matterjs-wrap/#matter-object-configuration","title":"Matter object configuration","text":"<pre><code>var options = {\n// ...\nplugin: {\nwrap: {\nmin: {\nx: 0,\ny: 0\n},\nmax: {\nx: 1024,\ny: 1024\n}\n}\n},\n// ...\n}\n</code></pre>"},{"location":"mesh/","title":"Mesh","text":""},{"location":"mesh/#introduction","title":"Introduction","text":"<p>Render a group of textured vertices and manipulate the view of those vertices, such as rotation, translation or scaling.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"mesh/#usage","title":"Usage","text":""},{"location":"mesh/#quad","title":"Quad","text":"<p>Note</p> <p>See also Plane</p> <ol> <li>Load texture     <pre><code>scene.load.image(key, url);\n</code></pre></li> <li>Add mesh object     <pre><code>var mesh = scene.add.mesh(x, y, texture, frame);\n</code></pre>     or     <pre><code>var mesh = scene.make.mesh({\nx: 0,\ny: 0,\nadd: true,\n\nkey: null,\nframe: null\n});\n</code></pre></li> <li>Set perspective or orthographic projection<ul> <li>Perspective projection     <pre><code>mesh.setPerspective(width, height, fov);\n// mesh.setPerspective(width, height, fov, near, far);\n</code></pre><ul> <li><code>width</code>, <code>height</code> : The width/height of the projection matrix. Typically the same as the Mesh and/or Renderer.</li> <li><code>fov</code> : The field of view, in degrees.</li> <li><code>near</code>, <code>far</code> : The near/far value of the view. Default value are <code>0.01</code>/<code>1000</code>.</li> </ul> </li> <li>Orthographic projection     <pre><code>mesh.setOrtho(mesh.width/mesh.height, 1);\n// mesh.setOrtho(scaleX, scaleY, near, far);\n</code></pre><ul> <li><code>scaleX</code>, <code>scaleY</code> : The default horizontal/vertical scale in relation to the Mesh / Renderer dimensions.</li> <li><code>near</code>, <code>far</code> : The near/far value of the view. Default value are <code>0.01</code>/<code>1000</code>.</li> </ul> </li> </ul> </li> <li>Creates a grid of vertices     <pre><code>Phaser.Geom.Mesh.GenerateGridVerts({\nmesh: mesh,\ntexture: textureKey,\nframe: frameName,\nwidth: 1,\nheight: 1,\nwidthSegments: 1,\nheightSegments: 1,\n\n// x: 0,\n// y: 0,\n// colors: 0xffffff,\n// alphas: 1,\n// tile: false,\n// isOrtho: false\n})\n</code></pre><ul> <li><code>mesh</code> : The vertices of the generated grid will be added to this Mesh Game Object.</li> <li><code>texture</code> : The texture to be used for this Grid.</li> <li><code>frame</code> : The name or index of the frame within the Texture.</li> <li><code>width</code> , <code>height</code> : The width/height of the grid in 3D units.     <pre><code>{\n// ...\nwidth: (frameWidth/frameHeight),\nheight: (frameHeight/frameHeight)\n// ...\n}\n</code></pre></li> <li><code>widthSegments</code>, <code>heightSegments</code> : The number of segments to split the grid horizontally/vertically in to.</li> <li><code>colors</code> : An array of colors, one per vertex, or a single color value applied to all vertices.</li> <li><code>alphas</code> An array of alpha values, one per vertex, or a single alpha value applied to all vertices.</li> <li><code>tile</code> :<ul> <li><code>false</code> : Display as a single texture. Default value.</li> <li><code>true</code> : Texture tile (repeat) across the grid segments.</li> </ul> </li> </ul> </li> </ol>"},{"location":"mesh/#model","title":"Model","text":"<ol> <li>Load model     <pre><code>scene.load.obj(key, url, objURL, matURL);\n</code></pre><ul> <li><code>objURL</code> : URL to load the obj file.</li> <li><code>matURL</code> : URL to load the material file.</li> </ul> </li> <li>Add mesh object     <pre><code>var mesh = scene.add.mesh(x, y);\n</code></pre>     or     <pre><code>var mesh = scene.make.mesh({\nx: 0,\ny: 0,\nadd: true\n});\n</code></pre></li> <li>Add model     <pre><code>mesh.addVerticesFromObj(key, scale, x, y, z, rotateX, rotateY, rotateZ, zIsUp);\n</code></pre><ul> <li><code>key</code> : The key of the model data in the OBJ Cache to add to this Mesh.</li> <li><code>scale</code> : An amount to scale the model data by. Default is <code>1</code>.</li> <li><code>x</code>, <code>y</code>, <code>z</code> : Translate the model x/y/z position by this amount.</li> <li><code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> : Rotate the model on the x/y/z axis by this amount, in radians.</li> <li><code>zIsUp</code> : <ul> <li><code>true</code> : Z axis is up.</li> <li><code>false</code> : Y axis is up.</li> </ul> </li> </ul> </li> </ol>"},{"location":"mesh/#custom-mesh-class","title":"Custom mesh class","text":"<ul> <li>Define class     <pre><code>class MyMesh extends Phaser.GameObjects.mesh {\nconstructor(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas) {\nsuper(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var mesh = new MyMesh(scene, x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"mesh/#control","title":"Control","text":""},{"location":"mesh/#view","title":"View","text":"<ul> <li>Translates the view position of this Mesh on the x/y/z axis by the given amount.     <pre><code>mesh.panX(x);\nmesh.panY(y);\nmesh.panZ(z);\n</code></pre></li> </ul>"},{"location":"mesh/#model_1","title":"Model","text":"<ul> <li>Position     <pre><code>mesh.modelPosition.x = x;\nmesh.modelPosition.y = y;\nmesh.modelPosition.z = z;\n</code></pre><ul> <li><code>x</code>, <code>y</code>, <code>z</code> : Offset position.<ul> <li><code>z+</code> : Near</li> <li><code>z-</code> : Far</li> <li><code>x-</code> : Left</li> <li><code>x+</code> : Right</li> <li><code>y+</code> : Up</li> <li><code>y-</code> : Down</li> </ul> </li> </ul> </li> <li>Rotation     <pre><code>mesh.modelRotation.x = rotationX;\nmesh.modelRotation.y = rotationY;\nmesh.modelRotation.z = rotationZ;\n</code></pre><ul> <li><code>rotationX</code>, <code>rotationY</code>, <code>rotationZ</code> : Rotation angle in radians.</li> </ul> </li> <li>Scale     <pre><code>mesh.modelScale.x = scaleX;\nmesh.modelScale.y = scaleY;\nmesh.modelScale.z = scaleZ;\n</code></pre><ul> <li><code>scaleX</code>, <code>scaleY</code>, <code>scaleZ</code> : Scale value, <code>1</code> is origin size.</li> </ul> </li> </ul>"},{"location":"mesh/#backward-facing-faces","title":"Backward facing Faces","text":"<ul> <li>Hide backward facing Faces. Default behavior.     <pre><code>mesh.hideCCW = true;\n</code></pre></li> <li>Show backward facing Faces     <pre><code>mesh.hideCCW = false;\n</code></pre></li> </ul>"},{"location":"mesh/#faces","title":"Faces","text":"<p>Mesh is composed of triangle faces.</p> <pre><code>var faces = mesh.faces;\n</code></pre>"},{"location":"mesh/#contains","title":"Contains","text":"<ul> <li>Has any face which contains point     <pre><code>var isHit = mesh.hasFaceAt(worldX, worldY);\n// var isHit = mesh.hasFaceAt(worldX, worldY, camera);\n</code></pre></li> <li>Get face contains point     <pre><code>var face = mesh.getFaceAt(worldX, worldY);\n// var face = mesh.getFaceAt(worldX, worldY, camera);\n</code></pre></li> </ul>"},{"location":"mesh/#properties","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = face.alpha;\n</code></pre></li> <li>Set     <pre><code>face.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Rotate     <pre><code>Phaser.Geom.Mesh.RotateFace(face, radians);\n</code></pre></li> </ul> </li> <li>Center position<ul> <li>Get     <pre><code>var x = face.x;\nvar y = face.y;\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> <li>Set     <pre><code>face.x = x;\nface.y = y;\n</code></pre>     or     <pre><code>face.translate(x, y);\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> </ul> </li> </ul>"},{"location":"mesh/#vertices","title":"Vertices","text":"<p>Each face has 3 vertices.</p> <pre><code>var vertices = mesh.vertices;\n</code></pre> <ul> <li><code>vertices</code> : Array of vertex.</li> </ul>"},{"location":"mesh/#properties_1","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = vertex.alpha;\n</code></pre></li> <li>Set     <pre><code>vertex.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Tint<ul> <li>Get     <pre><code>var color = vertex.color;\n</code></pre></li> <li>Set     <pre><code>vertex.color = color;\n</code></pre></li> </ul> </li> </ul>"},{"location":"mesh/#update-properties","title":"Update properties","text":"<ul> <li>Start updating     <pre><code>mesh.ignoreDirtyCache = true;\n</code></pre></li> <li>Stop updating     <pre><code>mesh.ignoreDirtyCache = false;\n</code></pre></li> </ul>"},{"location":"mesh/#interactive","title":"Interactive","text":"<p>To test if pointer is at any face of this mesh game object.</p> <pre><code>mesh.setInteractive();\n</code></pre>"},{"location":"mesh/#debug","title":"Debug","text":"<ol> <li>Set debug Graphics <pre><code>var debugGraphics = scene.add.graphics();\nmesh.setDebug(debugGraphics);\n</code></pre></li> <li>Update Graphics in <code>scene.update()</code> method.     <pre><code>debugGraphics.clear();\ndebugGraphics.lineStyle(1, 0x00ff00);\n</code></pre></li> </ol>"},{"location":"mesh/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"mesh/#create-mask","title":"Create mask","text":"<pre><code>var mask = mesh.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"mesh/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"modal-promise/","title":"Modal promise","text":""},{"location":"modal-promise/#introduction","title":"Introduction","text":"<p>Modal behavior wrapped into promise.</p> <ul> <li>Author: Rex</li> <li>Promise</li> </ul>"},{"location":"modal-promise/#live-demos","title":"Live demos","text":"<ul> <li>Manual</li> <li>Timeout</li> <li>Modal dialog</li> </ul>"},{"location":"modal-promise/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"modal-promise/#install-plugin","title":"Install plugin","text":""},{"location":"modal-promise/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmodalplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmodalplugin.min.js', true);\n</code></pre></li> <li>Add modal behavior     <pre><code>scene.plugins.get('rexmodalplugin').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add modal behavior     <pre><code>scene.plugins.get('rexModal').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ModalPromise } from 'phaser3-rex-plugins/plugins/modal.js';\n</code></pre></li> <li>Add modal behavior     <pre><code>ModalPromise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal-promise/#promise","title":"Promise","text":"<pre><code>scene.plugins.get('rexModal').promise(gameObject, config)\n.then(function(closeEventData) {\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior</li> </ul>"},{"location":"modal-promise/#close","title":"Close","text":"<p><pre><code>scene.plugins.get('rexModal').close(gameObject);\n// scene.plugins.get('rexModal').close(gameObject, closeEventData);\n</code></pre> or <pre><code>gameObject.emit('modal.requestClose');\n// gameObject.emit('modal.requestClose', closeEventData);\n</code></pre></p> <ul> <li>Fire <code>'modal.requestClose'</code> event on game object, which will invoke <code>modal.requestClose()</code> method. After closing dialog, <code>resolve</code> part of promise will be triggered.</li> </ul> <pre><code>graph TB\n\nPromise[\"promose('gameObject, config)\"]\nOnOpen[\"gameObject.on('modal.open')\"]\nRequestCloseEvent[\"gameObject.emit('modal.requestClose', closeEventData)\"]\nTimeOut[\"Timeout&lt;br&gt;Any touch\"]\nOnClose[\"gameObject.on('modal.close')\"]\nResolve[\"then(function(closeEventData) { })\"]\n\nPromise --&gt; |Transition-in| OnOpen\nOnOpen --&gt; |manualClose| RequestCloseEvent\nOnOpen --&gt; |Not manualClose| TimeOut\nRequestCloseEvent --&gt; |Transition-out| OnClose\nTimeOut --&gt; |Transition-out| OnClose\nOnClose --&gt; Resolve</code></pre>"},{"location":"modal-promise/#events","title":"Events","text":"<ul> <li>To invoke <code>modal.requestClose()</code> method     <pre><code>gameObject.emit('modal.requestClose', closeEventData);\n</code></pre></li> <li>On opened dialog     <pre><code>gameObject.on('modal.open', function(modalBehavior) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>gameObject.on('modal.close', function(closeEventData, modalBehavior) {\n})\n</code></pre></li> </ul>"},{"location":"modal/","title":"Modal behavior","text":""},{"location":"modal/#introduction","title":"Introduction","text":"<p>Pop-up modal dialog, then scale-down this dialog.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"modal/#live-demos","title":"Live demos","text":"<ul> <li>Manual</li> <li>Timeout</li> <li>Touch outside</li> <li>Custom transit</li> </ul>"},{"location":"modal/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"modal/#install-plugin","title":"Install plugin","text":""},{"location":"modal/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmodalplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmodalplugin.min.js', true);\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = scene.plugins.get('rexmodalplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = scene.plugins.get('rexModal').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ModalBehavoir } from 'phaser3-rex-plugins/plugins/modal.js';\n</code></pre></li> <li>Add modal behavior     <pre><code>var modal = new ModalBehavoir(gameObject, config);\n</code></pre></li> </ul>"},{"location":"modal/#create-instance","title":"Create instance","text":"<pre><code>var modal = scene.plugins.get('rexModal').add(gameObject, {\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true,\n// openOnStart: true\n});\n</code></pre> <ul> <li><code>cover</code> : Configuration of Cover -- A rectangle shape covered full window, and block all touch events.<ul> <li><code>false</code> : Don't create cover game object.</li> <li><code>cover.transitIn</code> : Custom callback. Default behavior is fade-in.     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> <li><code>cover.transitOut</code> : Custom callback. Default behavior is fade-out.     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>touchOutsideClose</code> : Set to <code>true</code> to close modal dialog when clicking out side of gameObject. <ul> <li>Default value is <code>false</code>.  Will be set to <code>false</code> if <code>anyTouchClose</code> is set to <code>true</code>.</li> </ul> </li> <li><code>anyTouchClose</code> : Set to <code>true</code> to close modal dialog when any clicking. <ul> <li>Default value is <code>false</code>.</li> </ul> </li> <li><code>timeOutClose</code> : Set to <code>true</code> to close modal dialog when holding time out (<code>duration.hold</code>).<ul> <li>If <code>duration.hold</code> is given, default value is <code>true</code>. Otherwise default value is <code>false</code>.</li> </ul> </li> <li><code>manualClose</code> : Set to <code>true</code> to close modal dialog via <code>modal.requestClose()</code> method.<ul> <li>Default value is <code>false</code>. When this parameter is <code>true</code>, other closing methods will be disabled.</li> <li>If <code>touchOutsideClose</code>,  <code>anyTouchClose</code>, and <code>timeOutClose</code> are <code>false</code>, it is equal to <code>manualClose</code>.</li> </ul> </li> <li><code>duration</code> : Duration of transition-in, hold, trantion-out.<ul> <li><code>duration.in</code> : Duration of transition-in (open dialog).<ul> <li><code>0</code> : No transition, open dialog immediately.</li> </ul> </li> <li><code>duration.out</code> : Duration of transition-out (close dialog).<ul> <li><code>0</code> : No transition, close dialog immediately.</li> </ul> </li> <li><code>duration.hold</code> : Duration of hold.<ul> <li><code>-1</code> : Disable <code>timeOutClose</code>.</li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Transition behavior of opening dialog.<ul> <li><code>0</code>, <code>'popUp'</code> : Pop up dialog from <code>0</code> to current scale.</li> <li><code>1</code>, <code>'fadeIn'</code> : Fade in dialog</li> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>transitOut</code> : Tween behavior of closing dialog.<ul> <li><code>0</code>, <code>'scaleDown'</code> : Scale down dialog</li> <li><code>1</code>, <code>'fadeOut'</code> : Fade out dialog</li> <li>Custom callback     <pre><code>function(gameObject, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>destroy</code><ul> <li><code>true</code> : Destroy dialog game object and this behavior when closing completed. Default behavior.</li> <li><code>fasle</code> : Keep dialog game object and this behavior when closing completed. Could reuse it later.</li> </ul> </li> <li><code>openOnStart</code>:<ul> <li><code>true</code> : Open dialog game object (<code>modal.requestOpen()</code>) at beginning. Default behavior.</li> <li><code>false</code> : Open dialog game object manually.</li> </ul> </li> </ul>"},{"location":"modal/#open","title":"Open","text":"<ul> <li>Will open modal dialog game object (run transition-in callback) when creating this behavior,    if <code>openOnStart</code> is set to <code>true</code>.</li> <li>Invoke <code>modal.requestOpen()</code> to open modal dialog game object again, after closing modal dialog.<ul> <li>Set <code>destroy</code> to <code>false</code> to reuse dialog game object and this behavior.</li> </ul> </li> </ul>"},{"location":"modal/#close","title":"Close","text":"<pre><code>modal.requestClose();\n// modal.requestClose(closeEventData);\n</code></pre> <ul> <li><code>closeEventData</code> : Emit <code>'close'</code> event when closed dialog complete, pass <code>closeEventData</code> to callback of this event.     <pre><code>modal.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"modal/#events","title":"Events","text":"<ul> <li>On opened dialog     <pre><code>modal.on('open', function(gameObject, modal) {\n})\n</code></pre></li> <li>On closed dialog     <pre><code>modal.on('close', function(closeEventData) {\n})\n</code></pre></li> </ul>"},{"location":"mousewheel/","title":"Mouse wheel","text":""},{"location":"mousewheel/#introduction","title":"Introduction","text":"<p>Mouse wheel events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"mousewheel/#usage","title":"Usage","text":""},{"location":"mousewheel/#mouse-wheel-events","title":"Mouse wheel events","text":"<ol> <li>Events on touched Game object     <pre><code>gameObject.on('wheel', function(pointer, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> <li>Event on input plugin for each touched Game object     <pre><code>scene.input.on('gameobjectwheel', function(pointer, gameObject, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> <li>Events to get all touched Game Objects     <pre><code>scene.input.on('wheel', function(pointer, currentlyOver, dx, dy, dz, event){ /* ... */ });\n</code></pre></li> </ol>"},{"location":"mousewheel/#mouse-wheel-properties","title":"Mouse wheel properties","text":"<ul> <li><code>pointer.deltaX</code> : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> <li><code>pointer.deltaY</code> : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> <li><code>pointer.deltaZ</code> : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.</li> </ul>"},{"location":"mousewheelscroller/","title":"Mouse wheel scroller","text":""},{"location":"mousewheelscroller/#introduction","title":"Introduction","text":"<p>Emit scroll event when mouse-wheeling.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"mousewheelscroller/#live-demos","title":"Live demos","text":"<ul> <li>Scroller</li> </ul>"},{"location":"mousewheelscroller/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"mousewheelscroller/#install-plugin","title":"Install plugin","text":""},{"location":"mousewheelscroller/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmousewheelscrollerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmousewheelscrollerplugin.min.js', true);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = scene.plugins.get('rexmousewheelscrollerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MouseWheelScrollerPlugin from 'phaser3-rex-plugins/plugins/mousewheelscroller-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMouseWheelScroller',\nplugin: MouseWheelScrollerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = scene.plugins.get('rexMouseWheelScroller').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MouseWheelScroller from 'phaser3-rex-plugins/plugins/mousewheelscroller.js';\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var scroller = new MouseWheelScroller(gameObject, config);\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#create-instance","title":"Create instance","text":"<pre><code>var scroller = scene.plugins.get('rexMouseWheelScroller').add(gameObject, {\n// focus: false,\n// speed: 0.1,\n// enable: true,\n});\n</code></pre> <ul> <li><code>focus</code> : Fire 'scroll' event when mouse-wheeling --<ul> <li><code>true</code> : Cursor is over game object.</li> <li><code>false</code> : Without checking if cursor is over game object or not. Default behavior.</li> </ul> </li> <li><code>speed</code> : Scrolling speed. Default value is <code>0.1</code>.</li> <li><code>enable</code> : Set <code>true</code> to enable 'scroll' event.</li> </ul>"},{"location":"mousewheelscroller/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>scroller.on('scroll', function(inc, gameObject, scroller) {\n\n}, scope)\n</code></pre><ul> <li><code>inc</code> : Scroll value, <ul> <li>Positive value : Mouse-wheeling down</li> <li>Negative value : Mouse-wheeling up</li> </ul> </li> </ul> </li> </ul>"},{"location":"mousewheelscroller/#speed","title":"Speed","text":"<ul> <li>Set    <pre><code>scroller.setSpeed(speed);\n// scroller.speed = speed;\n</code></pre></li> <li>Get     <pre><code>var speed = scroller.speed;\n</code></pre></li> </ul>"},{"location":"mousewheelscroller/#enable","title":"Enable","text":"<ul> <li>Set    <pre><code>scroller.setEnable(enable);\n// scroller.enable = enable;\n</code></pre></li> <li>Get     <pre><code>var enable = scroller.enable;\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/","title":"Mouse-wheel to up/down","text":""},{"location":"mousewheeltoupdown/#introduction","title":"Introduction","text":"<p>Map mouse-wheeling to (up/down) cursor key state.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"mousewheeltoupdown/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"mousewheeltoupdown/#install-plugin","title":"Install plugin","text":""},{"location":"mousewheeltoupdown/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmousewheeltoupdownplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmousewheeltoupdownplugin.min.js', true);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = scene.plugins.get('rexmousewheeltoupdownplugin').add(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MouseWheelToUpDownPlugin from 'phaser3-rex-plugins/plugins/mousewheeltoupdown-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMouseWheelToUpDown',\nplugin: MouseWheelToUpDownPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = scene.plugins.get('rexMouseWheelToUpDown').add(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';\n</code></pre></li> <li>Add mouse-wheeling-to-cursor-key object     <pre><code>var mouseWheelToUpDown = new MouseWheelToUpDown(scene);\n</code></pre></li> </ul>"},{"location":"mousewheeltoupdown/#create-instance","title":"Create instance","text":"<pre><code>var mouseWheelToUpDown = scene.plugins.get('rexMouseWheelToUpDown').add(scene);\n</code></pre>"},{"location":"mousewheeltoupdown/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = mouseWheelToUpDown.createCursorKeys();\n\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var upKeyDown = mouseWheelToUpDown.up;\nvar downKeyDown = mouseWheelToUpDown.down;\nvar noKeyDown = mouseWheelToUpDown.noKey;\n</code></pre>"},{"location":"mousewheeltoupdown/#destroy","title":"Destroy","text":"<pre><code>mouseWheelToUpDown.destroy();\n</code></pre>"},{"location":"moveto/","title":"Move to","text":""},{"location":"moveto/#introduction","title":"Introduction","text":"<p>Move game object towards target position with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"moveto/#live-demos","title":"Live demos","text":"<ul> <li>Move-to</li> </ul>"},{"location":"moveto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"moveto/#install-plugin","title":"Install plugin","text":""},{"location":"moveto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexmovetoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexmovetoplugin.min.js', true);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.plugins.get('rexmovetoplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import MoveToPlugin from 'phaser3-rex-plugins/plugins/moveto-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexMoveTo',\nplugin: MoveToPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = scene.plugins.get('rexMoveTo').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import MoveTo from 'phaser3-rex-plugins/plugins/moveto.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var moveTo = new MoveTo(gameObject, config);\n</code></pre></li> </ul>"},{"location":"moveto/#create-instance","title":"Create instance","text":"<pre><code>var moveTo = scene.plugins.get('rexMoveTo').add(gameObject, {\n// speed: 400,\n// rotateToTarget: false\n});\n</code></pre> <ul> <li><code>speed</code> : Moving speed, pixels in second.</li> <li><code>rotateToTarget</code> : Set true to change angle towards path.</li> </ul>"},{"location":"moveto/#start-moving","title":"Start moving","text":"<ul> <li>Move to target position     <pre><code>moveTo.moveTo(x, y);\n</code></pre>     or     <pre><code>moveTo.moveTo({\nx: 0,\ny: 0,\n// speed: 0\n});\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Target position    </li> </ul> </li> <li>Move from start position to current position     <pre><code>moveTo.moveFrom(x, y);\n</code></pre>     or     <pre><code>moveTo.moveFrom({\nx: 0,\ny: 0,\n// speed: 0\n});\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Start position</li> </ul> </li> <li>Move toward angle     <pre><code>moveTo.moveToward(angle, distance);\n</code></pre><ul> <li><code>angle</code> : Angle in radian.</li> </ul> </li> </ul>"},{"location":"moveto/#target-position","title":"Target position","text":"<pre><code>var targetX = moveTo.targetX;\nvar targetY = moveTo.targetY;\n</code></pre>"},{"location":"moveto/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>moveTo.setEnable();\n</code></pre>     or     <pre><code>moveTo.enable = true;\n</code></pre></li> <li>Disable     <pre><code>moveTo.setEnable(false);\n</code></pre>     or     <pre><code>moveTo.enable = false;\n</code></pre></li> </ul>"},{"location":"moveto/#pause-resume-stop-moving","title":"Pause, Resume, stop moving","text":"<pre><code>moveTo.pause();\nmoveTo.resume();\nmoveTo.stop();\n</code></pre>"},{"location":"moveto/#set-speed","title":"Set speed","text":"<pre><code>moveTo.setSpeed(speed);\n// moveTo.speed = speed;\n</code></pre>"},{"location":"moveto/#set-rotate-to-target","title":"Set rotate-to-target","text":"<pre><code>moveTo.setRotateToTarget(rotateToTarget);\n</code></pre> <ul> <li><code>rotateToTarget</code> : Set true to change angle towards target</li> </ul>"},{"location":"moveto/#events","title":"Events","text":"<ul> <li>On start moving     <pre><code>moveTo.on('start', function(gameObject, moveTo){});\n</code></pre></li> <li>On reached target     <pre><code>moveTo.on('complete', function(gameObject, moveTo){});\n// moveTo.once('complete', function(gameObject, moveTo){});\n</code></pre></li> </ul>"},{"location":"moveto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = moveTo.isRunning;\n</code></pre></li> </ul>"},{"location":"mustache/","title":"Mustache","text":""},{"location":"mustache/#introduction","title":"Introduction","text":"<p>Format string with variables. Reference</p>"},{"location":"mustache/#usage","title":"Usage","text":"<pre><code>var template = 'hello, {{name}}';\nvar view = {\nname: 'rex'\n};\nvar result = Mustache.render(template, view);\n</code></pre>"},{"location":"ninepatch/","title":"Nine patch","text":""},{"location":"ninepatch/#introduction","title":"Introduction","text":"<p>Stretchable image, extended from RenderTexture game object.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ninepatch/#live-demos","title":"Live demos","text":"<ul> <li>3x3, 3x3</li> <li>5x5</li> <li>Custom frame name</li> <li>Custom base frame name</li> <li>Preserve ratio</li> <li>Max-fixed-part-scale</li> </ul>"},{"location":"ninepatch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ninepatch/#install-plugin","title":"Install plugin","text":""},{"location":"ninepatch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexninepatchplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexninepatchplugin.min.js', true);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import NinePatchPlugin from 'phaser3-rex-plugins/plugins/ninepatch-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexNinePatchPlugin',\nplugin: NinePatchPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import NinePatch from 'phaser3-rex-plugins/plugins/ninepatch.js';\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = new NinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\nscene.add.existing(ninePatch);\n</code></pre></li> </ul>"},{"location":"ninepatch/#create-instance","title":"Create instance","text":"<pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, baseFrame, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, key, {\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, width, height, {\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch(x, y, {\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, right: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch({\nx: 0, y: 0,\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined, // leftWidth: undefined, rightWidth: undefined,\nrows: undefined,    // topHeight: undefined, bottomHeight: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Width of each column. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>leftWidth</code>, <code>rightWidth</code> : Set <code>columns</code> to <code>[leftWidth, undefined, rightWidth]</code>, if <code>columns</code> is <code>undefined</code>.</li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Height of each row. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>topHeight</code>, <code>bottomHeight</code> : Set <code>rows</code> to <code>[topHeight, undefined, bottomHeight]</code>, if <code>rows</code> is <code>undefined</code>.</li> <li><code>preserveRatio</code> : Preserve ratio of fixed parts (i.e. displaying in origin size). Default is <code>true</code>.</li> <li><code>maxFixedPartScale</code> : Max scale value of fixed-part.</li> <li><code>stretchMode</code> : Stretch mode of edges and internal cells.<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> <li><code>getFrameNameCallback</code> : Callback to get frame name of each cell.<ul> <li><code>undefined</code> : Use default callback.<ul> <li>If <code>baseFrame</code> is <code>'__BASE'</code> : return <code>${colIndex},${rowIndex}</code></li> <li>Else : return <code>${baseFrame}_${colIndex},${rowIndex}</code></li> </ul> </li> <li>Function object : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNinePatch extends NinePatch {\nconstructor(scene, x, y, width, height, key, baseFrame, columns, rows, config) {\nsuper(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ninePatch = new MyNinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch/#resize","title":"Resize","text":"<pre><code>ninePatch.resize(width, height);\n</code></pre> <p>Will update texture</p>"},{"location":"ninepatch/#set-base-texture-of-source-image","title":"Set base texture of source image","text":"<pre><code>ninePatch.setBaseTexture(key, baseFrame, columns, rows);\n</code></pre> <p>or</p> <pre><code>ninePatch.setBaseTexture(key, baseFrame, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre> <ul> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code>, or <code>null</code> : Use default base frame <code>'__BASE'</code>. Default value.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code> : Width of each column.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code> : Height of each row.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>leftWidth</code>, <code>rightWidth</code> : Set <code>columns</code> to <code>[leftWidth, undefined, rightWidth]</code>.</li> <li><code>topHeight</code>, <code>bottomHeight</code> : Set <code>rows</code> to <code>[topHeight, undefined, bottomHeight]</code>.</li> </ul> <p>Will update texture</p>"},{"location":"ninepatch/#set-stretch-mode","title":"Set stretch mode","text":"<pre><code>ninePatch.setStretchMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#set-get-frame-name-callback","title":"Set get-frame-name callback","text":"<pre><code>ninePatch.setGetFrameNameCallback(callback);\n</code></pre> <ul> <li><code>callback</code> : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`\n}\n</code></pre></li> </ul>"},{"location":"ninepatch/#fixed-part-scale","title":"Fixed-part scale","text":"<ul> <li>Fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.fixedPartScaleX;\nvar scaleY = ninePatch.fixedPartScaleY;\n</code></pre></li> </ul> </li> <li>Max fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.maxFixedPartScaleX;\nvar scaleY = ninePatch.maxFixedPartScaleY;\n</code></pre></li> <li>Set     <pre><code>ninePatch.setMaxFixedPartScale(scale);\n// ninePatch.setMaxFixedPartScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>ninePatch.maxFixedPartScaleX = scaleX;\nninePatch.maxFixedPartScaleY = scaleY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch/#update-texture","title":"Update texture","text":"<pre><code>ninePatch.updateTexture();\n</code></pre>"},{"location":"ninepatch/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"ninepatch/#create-mask","title":"Create mask","text":"<pre><code>var mask = ninePatch.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"ninepatch/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"ninepatch/#compare-with-nine-slice","title":"Compare with nine-slice","text":"<ul> <li>Nine-slice is a built-in game object.</li> <li>Nine-slice has better render performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> </ul> </li> <li>Nine-slice is webgl mode only.</li> <li>Nine-slice does not have <code>flip</code>, <code>crop</code> methods.</li> </ul>"},{"location":"ninepatch2/","title":"Nine patch2","text":""},{"location":"ninepatch2/#introduction","title":"Introduction","text":"<p>Stretchable image. Has better performance than nine-patch.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ninepatch2/#live-demos","title":"Live demos","text":"<ul> <li>3x3</li> <li>Performance test</li> </ul>"},{"location":"ninepatch2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ninepatch2/#install-plugin","title":"Install plugin","text":""},{"location":"ninepatch2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexninepatch2plugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexninepatch2plugin.min.js', true);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import NinePatch2Plugin from 'phaser3-rex-plugins/plugins/ninepatch2-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexNinePatch2Plugin',\nplugin: NinePatch2Plugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import NinePatch2 from 'phaser3-rex-plugins/plugins/ninepatch2.js';\n</code></pre></li> <li>Add nine-patch object     <pre><code>var ninePatch = new NinePatch2(scene, x, y, width, height, key, baseFrame, columns, rows, config);\nscene.add.existing(ninePatch);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#create-instance","title":"Create instance","text":"<pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, baseFrame, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, columns, rows, {\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, key, {\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, width, height, {\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2(x, y, {\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <p>or</p> <pre><code>var ninePatch = scene.add.rexNinePatch2({\nx: 0, y: 0,\nwidth: 1, height: 1,\nkey: undefined,\ncolumns: undefined,\nrows: undefined,\n\n// preserveRatio: true,\n// maxFixedPartScale: 1,\n// stretchMode: 0,\nbaseFrame: undefined,\ngetFrameNameCallback: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Width of each column. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code>, or <code>[20, undefined, 20]</code> : Height of each row. <code>undefined</code> value will be replaced by remainder value from texture width.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>preserveRatio</code> : Preserve ratio of fixed parts (i.e. displaying in origin size). Default is <code>true</code>.</li> <li><code>maxFixedPartScale</code> : Max scale value of fixed-part.</li> <li><code>stretchMode</code> : Stretch mode of edges and internal cells.<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> <li><code>getFrameNameCallback</code> : Callback to get frame name of each cell.<ul> <li><code>undefined</code> : Use default callback.<ul> <li>If <code>baseFrame</code> is <code>'__BASE'</code> : return <code>${colIndex},${rowIndex}</code></li> <li>Else : return <code>${baseFrame}_${colIndex},${rowIndex}</code></li> </ul> </li> <li>Function object : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNinePatch extends NinePatch2 {\nconstructor(scene, x, y, width, height, key, baseFrame, columns, rows, config) {\nsuper(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ninePatch = new MyNinePatch(scene, x, y, width, height, key, baseFrame, columns, rows, config);\n</code></pre></li> </ul>"},{"location":"ninepatch2/#resize","title":"Resize","text":"<pre><code>ninePatch.resize(width, height);\n</code></pre> <p>Will update texture</p>"},{"location":"ninepatch2/#tint","title":"Tint","text":"<ul> <li>Set tint     <pre><code>ninePatch.setTint(tint);\n</code></pre></li> <li>Clear tint     <pre><code>ninePatch.clearTint();\n</code></pre></li> <li>Set tint fill     <pre><code>ninePatch.setTintFill(tint);\n</code></pre></li> <li>Get tint     <pre><code>var tint = ninePatch.tint;\nvar tintFill = ninePatch.tintFill;\n</code></pre><ul> <li><code>tintFill</code> :<ul> <li><code>false</code> : Solid tint + texture alpha</li> <li><code>true</code> : Solid tint, no texture</li> </ul> </li> </ul> </li> </ul>"},{"location":"ninepatch2/#set-texture-of-source-image","title":"Set texture of source image","text":"<pre><code>ninePatch.setBaseTexture(key, baseFrame, columns, rows);\n// ninePatch.setBaseTexture(key, columns, rows);\n</code></pre> <ul> <li><code>key</code> : Texture key of source image.</li> <li><code>baseFrame</code> : Frame name of base texture.<ul> <li><code>undefined</code> : Use default base frame <code>'__BASE'</code>. Default value.</li> </ul> </li> <li><code>columns</code> : Configuration of columns.<ul> <li>A number array, like <code>[20, 20, 20]</code> : Width of each column.<ul> <li>Width of odd columns (column <code>0</code>, column <code>2</code>, ...) will be origin width.</li> <li>Width of even columns (column <code>1</code>, column <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> <li><code>rows</code> : Configuration of rows. <ul> <li>A number array, like <code>[20, 20, 20]</code> : Height of each row.<ul> <li>Height of odd rows (row <code>0</code>, row <code>2</code>, ...) will be origin height.</li> <li>Height of odd rows (row <code>1</code>, row <code>3</code>, ...) will be stretched.</li> </ul> </li> </ul> </li> </ul> <p>Will update texture</p>"},{"location":"ninepatch2/#set-stretch-mode","title":"Set stretch mode","text":"<pre><code>ninePatch.setStretchMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li>A number (<code>0</code>, or <code>1</code>), or a string (<code>'scale'</code>, or <code>'repeat'</code>): <ul> <li><code>0</code>, or <code>'scale'</code> : Stretch each edge and internal cell by scaled image. Default value.</li> <li><code>1</code>, or <code>'repeat'</code> : Stretch each edge and internal cell by repeated image (tile-sprite).</li> </ul> </li> <li>An object :      <pre><code>{\nedge: 0, // 'scale', or 1, 'repeat'\ninternal: 0, // 'scale', or 1, 'repeat'\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#set-get-frame-name-callback","title":"Set get-frame-name callback","text":"<pre><code>ninePatch.setGetFrameNameCallback(callback);\n</code></pre> <ul> <li><code>callback</code> : Return a string, or <code>undefined</code>.     <pre><code>function(colIndex, rowIndex, baseFrame) {\nreturn `${colIndex},${rowIndex}`\n}\n</code></pre></li> </ul>"},{"location":"ninepatch2/#fixed-part-scale","title":"Fixed-part scale","text":"<ul> <li>Fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.fixedPartScaleX;\nvar scaleY = ninePatch.fixedPartScaleY;\n</code></pre></li> </ul> </li> <li>Max fixed-part scale<ul> <li>Get     <pre><code>var scaleX = ninePatch.maxFixedPartScaleX;\nvar scaleY = ninePatch.maxFixedPartScaleY;\n</code></pre></li> <li>Set     <pre><code>ninePatch.setMaxFixedPartScale(scale);\n// ninePatch.setMaxFixedPartScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>ninePatch.maxFixedPartScaleX = scaleX;\nninePatch.maxFixedPartScaleY = scaleY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ninepatch2/#update-texture","title":"Update texture","text":"<pre><code>ninePatch.updateTexture();\n</code></pre>"},{"location":"ninepatch2/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"ninepatch2/#create-mask","title":"Create mask","text":"<pre><code>var mask = ninePatch.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"ninepatch2/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"ninepatch2/#compare-with-nine-patch","title":"Compare with nine-patch","text":"<ul> <li>Nine-patch2 has better performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> <li>Nine-patch2 draws frames directly.</li> </ul> </li> <li>Nine-patch2 does not have <code>flip</code>, <code>crop</code> methods.</li> <li>Nine-patch2 can't apply custom spriteFx pipeline.</li> </ul>"},{"location":"nineslice/","title":"Nine slice","text":""},{"location":"nineslice/#introduction","title":"Introduction","text":"<p>Display a texture-based object that can be stretched both horizontally and vertically,  but that retains fixed-sized corners, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"nineslice/#usage","title":"Usage","text":""},{"location":"nineslice/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"nineslice/#add-nine-slice-object","title":"Add nine slice object","text":"<pre><code>var nineSlice = scene.add.nineslice(x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre> <p>Add nine slice from JSON</p> <pre><code>var nineSlice = scene.make.nineslice({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// width: 256,\n// height: 256,\n// leftWidth: 10,\n// rightWidth: 10,\n// topHeight: 0,\n// bottomHeight: 0,\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"nineslice/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNineSlice extends Phaser.GameObjects.NineSlice {\nconstructor(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight) {\nsuper(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var nineSlice = new MyNineSlice(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre></li> </ul>"},{"location":"nineslice/#resize","title":"Resize","text":"<pre><code>nineSlice.setSize(width, height);\n</code></pre>"},{"location":"nineslice/#set-texture-of-source-image","title":"Set texture of source image","text":"<pre><code>nineSlice.setTexture(texture, frame);\nnineSlice.setSlices(width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre>"},{"location":"nineslice/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"nineslice/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"nineslice/#create-mask","title":"Create mask","text":"<pre><code>var mask = nineSlice.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"nineslice/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"nineslice/#compare-with-nine-patch","title":"Compare with nine-patch","text":"<ul> <li>Nine-slice is a built-in game object.</li> <li>Nine-slice has better render performance.<ul> <li>Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.</li> </ul> </li> <li>Nine-slice is webgl mode only.</li> <li>Nine-slice does not have <code>flip</code>, <code>crop</code> methods.</li> </ul>"},{"location":"orientation/","title":"Orientation","text":""},{"location":"orientation/#introduction","title":"Introduction","text":"<p>Get oriention, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"orientation/#usage","title":"Usage","text":""},{"location":"orientation/#orientation","title":"Orientation","text":"<pre><code>var orientation = scene.scale.orientation;\n</code></pre>"},{"location":"orientation/#events","title":"Events","text":"<ul> <li>On orientation change     <pre><code>scene.scale.on('orientationchange', function(orientation) {\nif (orientation === Phaser.Scale.PORTRAIT) {\n// ...\n} else if (orientation === Phaser.Scale.LANDSCAPE) {\n// ...\n}\n});\n</code></pre></li> </ul>"},{"location":"orientation/#lock-orientation","title":"Lock orientation","text":"<pre><code>scene.scale.lockOrientation(orientation)\n</code></pre> <ul> <li><code>orientation</code> :   <ul> <li><code>'portrait'</code></li> <li><code>'landscape'</code></li> <li><code>'portrait-primary'</code></li> <li><code>'portrait-secondary'</code></li> <li><code>'landscape-primary'</code></li> <li><code>'landscape-secondary'</code></li> <li><code>'default'</code></li> </ul> </li> </ul>"},{"location":"pad/","title":"Pad","text":""},{"location":"pad/#introduction","title":"Introduction","text":"<p>Takes the given string and pads it out, to the length required, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"pad/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.Pad(str, len, pad, dir);\n</code></pre> <ul> <li><code>str</code> : String, or number.</li> <li><code>len</code> : Length or result string.</li> <li><code>pad</code> : The string to pad it out.</li> <li><code>dir</code> : <ul> <li><code>1</code> : Left</li> <li><code>2</code> : Right</li> <li><code>3</code> : Both</li> </ul> </li> </ul>"},{"location":"particles-along-bounds/","title":"Particles along bounds","text":""},{"location":"particles-along-bounds/#introduction","title":"Introduction","text":"<p>Emit particles along bounds of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"particles-along-bounds/#live-demos","title":"Live demos","text":"<ul> <li>Particles-along-bounds</li> </ul>"},{"location":"particles-along-bounds/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"particles-along-bounds/#install-plugin","title":"Install plugin","text":""},{"location":"particles-along-bounds/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexparticlesalongboundsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexparticlesalongboundsplugin.min.js', true);\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = scene.plugins.get('rexparticlesalongboundsplugin').startEffect(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DragPlugin from 'phaser3-rex-plugins/plugins/particlesalongbounds-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexParticlesAlongBounds',\nplugin: ParticlesAlongBoundsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = scene.plugins.get('rexParticlesAlongBounds').startEffect(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ParticlesAlongBounds from 'phaser3-rex-plugins/plugins/particlesalongbounds.js';\n</code></pre></li> <li>Start emit particles along bounds of game object     <pre><code>var particles = ParticlesAlongBounds(gameObject, config);\n</code></pre></li> </ul>"},{"location":"particles-along-bounds/#create-instance","title":"Create instance","text":"<pre><code>var particles = scene.plugins.get('rexParticlesAlongBounds').startEffect(gameObject, {\ntextureKey: key,\n// textureFrames: undefined,\n// padding: 0,\n// blendMode: 'ADD',\n// lifespan: 1000,\n// stepRate: 10,\n// spread: 10,\n\n// scale: undefined,\n// alpha: undefined,\n// tint: undefined,\n\n// repeat: 0,\n// gravityX: 0,\n// gravityY: 0,\n// duration: undefined\n});\n</code></pre> <ul> <li><code>padding</code> : Extra padded space around bounds of game object. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>textureKey</code> : Texture key of particles.</li> <li><code>textureFrames</code> : : One or more texture frames, or a configuration object.<ul> <li>String or number value.</li> <li>Array of string or number value.</li> <li>Configuration object :     <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>blendMode</code> : Blend mode of particles. Default value is <code>ADD</code>.</li> <li><code>lifespan</code> : Lifespan of particle.</li> <li><code>stepRate</code> : Step length between each particle's initial position along bounds of game object.</li> <li><code>spread</code> : Moving speed of particle.</li> <li><code>scale</code> : Scale changing of particle.</li> <li><code>alpha</code> : Alpha changing of particle.</li> <li><code>tint</code> : Tint changing of particle.</li> <li><code>repeat</code> : Fire particles around bounds repeatly.<ul> <li><code>0</code> : Fire particles around bounds one time, default value.</li> </ul> </li> <li><code>gravityX</code>, <code>gravityY</code> : Gravity vector of world axis. This vector will rotate back if game object is rotated.</li> <li><code>duration</code> : Total duration from firing of 1st particle to destroy last particle.<ul> <li><code>undefined</code> : Use default behavior of particles</li> <li>Less or equal to <code>lifespan</code> : Fires all particles at begining.</li> </ul> </li> </ul> <p>Format of <code>spread</code>, <code>scale</code>, <code>alpha</code>, <code>tint</code> parameters :</p> <ul> <li><code>{min, max}</code> : Pick a random value between min and max</li> <li><code>{start, end}</code> : Pick values incremented continuously across a range. (<code>ease</code>=<code>'Linear'</code>)<ul> <li><code>{start, end, ease}</code></li> </ul> </li> <li><code>{start, end, steps}</code> : Pick values incremented by steps across a range.</li> <li><code>{start, end, random}</code><ul> <li><code>random</code>: <code>true</code> or <code>false</code></li> </ul> </li> <li><code>{min, max, steps}</code> : Pick values between min to max, with steps.</li> <li><code>{onEmit: function(particle, key, t, value) {return value}}</code> : Get return value from a function invoking.</li> </ul>"},{"location":"particles-along-bounds/#is-running","title":"Is running","text":"<pre><code>var isRunning = particles.isRunning;\n</code></pre>"},{"location":"particles-along-bounds/#events","title":"Events","text":"<ul> <li>On fire completed, i.e. last particle is dead     <pre><code>particles.on('complete', function(gameObject, particles){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"particles/","title":"Particles","text":""},{"location":"particles/#introduction","title":"Introduction","text":"<p>Particles uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>Note</p> <p>API is not compatible with 3.55.x</p>"},{"location":"particles/#usage","title":"Usage","text":""},{"location":"particles/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"particles/#add-particle","title":"Add particle","text":"<pre><code>var particles = scene.add.particles(x, y, texture, {\n\n// EmitterOp\naccelerationX: 0,\naccelerationY: 0,\nalpha: 1,\nangle: { min: 0, max: 360 },\nbounce: 0,\ncolor: undefined,\ndelay: 0,\nhold: 0,\nlifespan: 1000,\nmaxVelocityX: 10000,\nmaxVelocityY: 10000,\nmoveToX: 0,\nmoveToY: 0,\nquantity: 1,\nrotate: 0,\nscaleX: 1,\nscaleY: 1,\n// scale:\nspeedX: 0,\nspeedY: 0,\nspeed: tint: 0xffffff,\nx: 0,\ny: 0,\n\n// Emitter properties\nactive:\nadvance:\nblendMode:\ncolorEase:\ndeathCallback:\ndeathCallbackScope:\nduration:\nemitCallback:\nemitCallbackScope:\n// callbackScope    \nfrequency:\ngravityX:\ngravityY:\nmaxAliveParticles:\nmaxParticles:\nname:\nemitting:\nparticleBringToTop:\nparticleClass:\nradial:\nsortCallback:\nsortOrderAsc:\nsortProperty:\nstopAfter:\ntintFill:\ntimeScale:\ntrackVisible:\nvisible:\n\n// Position\n// emitZone : random-zone, edge-zone\n// random-zone\nemitZone: {\ntype: 'random',\nsource: geom,\n},\n\n// edge-zone\nemitZone:{\ntype: 'edge',\nsource: geom,\nquantity: 1,\nstepRate: 0,\ntotal: -1,\nyoyo: false,\nseamless: true\n},\n\ndeathZone: {\ntype: 'onEnter', // 'onEnter', or 'onLeave'\nsource: geom,\n},\n\nbounds:               // {x, y, w, h}, or {x, y, width, height}, or Phaser.Geom.Rectangle\ncollideLeft: true,\ncollideRight: true,\ncollideTop: true,\ncollideBottom: true,\n\nfollow:\nfollowOffset:{\nx: 0,\ny: 0\n},\n\n// Texture\ntexture:\nframe:\nanim: [],  // string, or array of string\n\nreserve: 0,\nadvance: 0\n});\n</code></pre> <ul> <li>Parameters of EmitterOp : Number, Random Array, Custom Callback, Stepped start/end, Eased start/end, min/max, Random object, Custom onEmit onUpdate, Interpolation<ul> <li>A number</li> <li><code>{min, max}</code> : Pick a random value between min and max</li> <li><code>{min, max, int}</code></li> <li><code>{start, end}</code> : Pick values incremented continuously across a range. (<code>ease</code>=<code>'Linear'</code>)<ul> <li><code>{start, end, ease}</code></li> <li><code>{start, end, ease, easeParams}</code></li> </ul> </li> <li><code>{start, end, steps}</code> : Pick values incremented by steps across a range.</li> <li><code>{start, end, steps, yoyo: true}</code></li> <li><code>{start, end, random}</code><ul> <li><code>random</code>: <code>true</code> or <code>false</code></li> </ul> </li> <li><code>{random: [start, end]}</code> : Pick a random number between start and and.</li> <li><code>[a, b, c, d]</code> : Pick a random number from an array.</li> <li><code>{min, max, steps}</code> : Pick values between min to max, with steps.</li> <li><code>{ values: [ a, b, c, d ], interpolation: 'catmull', ease: 'linear' }</code> : Interpolation (<code>linear</code>, <code>bezier</code>, <code>catmull</code>) in values array.</li> <li><code>function(particle, key, t, value) { return value; }</code></li> <li><code>{onEmit, onUpdate}</code> : Get return value from a function invoking.     <pre><code>function(particle, key, t, value) {\nreturn value;\n}\n</code></pre></li> </ul> </li> <li><code>active</code> : Whether this emitter updates itself and its particles.<ul> <li><code>false</code> : Equal to pause.</li> </ul> </li> <li><code>advance</code> : If you wish to fast forward the emitter in time, set this value to a number representing the amount of ms the emitter should advance.</li> <li><code>blendMode</code> : See blend mode</li> <li><code>colorEase</code> : The string-based name of the Easing function to use if you have enabled Particle color interpolation via the <code>color</code> property, otherwise has no effect.</li> <li><code>deathCallback</code>, <code>deathCallbackScope</code> <pre><code>function(particle) {\n\n}\n</code></pre></li> <li><code>emitCallback</code>, <code>emitCallbackScope</code> <pre><code>function(particle, emitter) {\n\n}\n</code></pre></li> <li><code>duration</code> : Limit the emitter to emit particles for a maximum of <code>duration</code> ms. <ul> <li><code>0</code> : Forever, default behavior.</li> </ul> </li> <li><code>follow</code> : A Game Object whose position is used as the particle origin.</li> <li><code>followOffset</code> : The offset of the particle origin from thefollow target.</li> <li><code>frequency</code><ul> <li><code>0</code> : One particle flow cycle for each logic update (the maximum flow frequency).</li> <li><code>&gt; 0</code> : The time interval between particle flow cycles in ms.</li> <li><code>-1</code> : Exploding emitter.</li> </ul> </li> <li><code>hold</code> : Frozen or 'held in place' after it has finished its lifespan for a set number of ms </li> <li><code>gravityX</code>, <code>gravityY</code></li> <li><code>maxAliveParticles</code></li> <li><code>maxParticles</code><ul> <li><code>0</code> : Unlimited.</li> <li><code>&gt; 0</code> : Hard limit the amount of particle objects.</li> </ul> </li> <li><code>frames</code> : One or more texture frames, or a configuration object.<ul> <li>String or number value</li> <li>Array of string or number value</li> <li>Configuration object :     <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>anim</code> : <ul> <li>String</li> <li>Array of string</li> <li>Configuration object :     <pre><code>{\nanim: [],  // Array of string\ncycle: false,\nquantity: 1\n}\n</code></pre></li> </ul> </li> <li><code>particleBringToTop</code> : <ul> <li><code>true</code> : Newly emitted particles are added to the top of the particle list, i.e. rendered above those already alive. Default behavior.</li> </ul> </li> <li><code>sortCallback</code> : The callback used to sort the particles.</li> <li><code>sortProperty</code> : Optionally sort the particles before they render based on this property. The property must exist on the <code>Particle</code> class, such as <code>y</code>, <code>lifeT</code>, <code>scaleX</code>, etc.</li> <li><code>sortOrderAsc</code> : When <code>sortProperty</code> is defined this controls the sorting order, either ascending or descending.</li> <li><code>stopAfter</code> : The Particle Emitter will stop emitting particles once this total has been reached. It will then enter a 'stopped' state, firing the <code>STOP</code> event.</li> <li><code>radial</code> : A radial emitter will emit particles in all directions between angle min and max,</li> <li><code>emitting</code> : Controls if the emitter is currently emitting a particle flow (when frequency &gt;= 0).    Already alive particles will continue to update until they expire.<ul> <li><code>false</code> : Equal to stop</li> </ul> </li> <li><code>tintFill</code> : </li> <li><code>timeScale</code> : The time rate applied to active particles, affecting lifespan, movement, and tweens. Values larger than 1 are faster than normal.</li> <li><code>trackVisible</code> : Whether the emitter's <code>visible</code> state will track the follow target's visibility state.</li> <li><code>emitZone</code> :<ul> <li>Emit zone <pre><code>{\ntype: 'random',\nsource: geom,\n}            </code></pre></li> <li>Emit edge <pre><code>{\ntype: 'edge',\nsource: curve,\n\nquantity: 1,\nstepRate: 0,\nyoyo: false,\nseamless: true\n}            </code></pre></li> </ul> </li> <li><code>deathZone</code> <pre><code>{\ntype: 'onEnter', // 'onEnter', or 'onLeave'\nsource: geom\n}\n</code></pre></li> <li><code>bounds</code> : <code>{x, y, w, h}</code>, or <code>{x, y, width, height}</code>, or Rectangle. </li> <li><code>collideLeft</code>, <code>collideRight</code>, <code>collideTop</code>, <code>collideBottom</code> : Whether particles interact with the left/right/top/bottom edge of the bounds.</li> <li><code>name</code></li> <li><code>particleClass</code></li> </ul>"},{"location":"particles/#control","title":"Control","text":"<ul> <li>Start     <pre><code>emitter.start();\n// emitter.start(advance, duration);\n</code></pre><ul> <li><code>advance</code> : Advance this number of ms in time through the emitter.</li> <li><code>duration</code> : Limit this emitter to only emit particles for the given number of ms. Setting this parameter will override any duration already set in the Emitter configuration object.</li> </ul> </li> <li>Stop     <pre><code>emitter.stop();\n// emitter.stop(kill);\n</code></pre><ul> <li><code>kill</code> : <ul> <li><code>true</code> : Kill all particles immediately</li> <li><code>false</code> : Leave them to die after their lifespan expires. Default behavior.</li> </ul> </li> </ul> </li> <li>Pause     <pre><code>emitter.pause();  // set `active` to false\n</code></pre></li> <li>Resume     <pre><code>emitter.resume();  // set `active` to true\n</code></pre></li> <li>Starts (or restarts) a particle flow.     <pre><code>emitter.flow(frequency, count, stopAfter);\n</code></pre><ul> <li><code>frequency</code> :<ul> <li><code>&gt;= 0</code> : The time interval of each flow cycle, in ms</li> <li><code>-1</code> : Explosion mode.</li> </ul> </li> <li><code>count</code> : The number of particles to emit at each flow cycle.</li> <li><code>stopAfter</code> : Stop this emitter from firing any more particles once this value is reached. <ul> <li>Setting this parameter will override any <code>stopAfter</code> value already set in the Emitter configuration object.</li> <li><code>0</code> : Unlimited</li> </ul> </li> </ul> </li> <li>Explode : Puts the emitter in explode mode (<code>frequency</code> = <code>-1</code>), stopping any current particle flow, and emits several particles all at once.     <pre><code>emitter.explode();\n// emitter.explode(count, x, y);\n</code></pre><ul> <li><code>count</code> : The number of Particles to emit.</li> <li><code>x</code>, <code>y</code> : The x, y coordinate to emit the Particles from.</li> </ul> </li> <li>Emit : Emits particles at the given position. If no position is given, it will emit from this Emitters current location.     <pre><code>emitter.emitParticleAt();\n// emitter.emitParticleAt(x, y, count);    \n</code></pre>     or     <pre><code>emitter.emitParticle(count, x, y);\n</code></pre><ul> <li><code>count</code> : The number of Particles to emit.</li> <li><code>x</code>, <code>y</code> : The x, y coordinate to emit the Particles from.</li> </ul> </li> <li>Fast forward     <pre><code>emitter.fastForward(time, delta);\n</code></pre><ul> <li><code>time</code> : The number of ms to advance the Particle Emitter by.</li> <li><code>delta</code> : The amount of delta to use for each step. Defaults to <code>1000 / 60</code>.</li> </ul> </li> <li>Kill all alive particles     <pre><code>emitter.killAll()\n</code></pre></li> </ul>"},{"location":"particles/#follow-target","title":"Follow target","text":"<ul> <li>Start     <pre><code>emitter.startFollow(target);\n// emitter.startFollow(target, offsetX, offsetY, trackVisible);\n</code></pre><ul> <li><code>target</code> : The Game Object to follow.</li> <li><code>offsetX</code>, <code>offsetY</code> : Horizontal/vertical offset of the particle origin from the Game Object.</li> <li><code>trackVisible</code> : Whether the emitter's visible state will track the target's visible state.    </li> </ul> </li> <li>Stop     <pre><code>emitter.stopFollow();\n</code></pre></li> </ul>"},{"location":"particles/#frame","title":"Frame","text":"<p><pre><code>emitter.setEmitterFrame(frames);\n// emitter.setEmitterFrame(frames, pickRandom, quantity);\n</code></pre> - <code>frames</code> : One or more texture frames, or a configuration object.     - String or number value     - Array of string or number value     - Configuration object :         <pre><code>{\nframes: [],\ncycle: false,\nquantity: 1\n}\n</code></pre> - <code>pickRandom</code> :      - <code>true</code> : Whether frames should be assigned at random from <code>frames</code>. Default behavior. - <code>quantity</code> : The number of consecutive particles that will receive each frame. Default value is <code>1</code>.</p>"},{"location":"particles/#animation","title":"Animation","text":"<p><pre><code>emitter.setAnim(anims);\n// emitter.setAnim(anims, pickRandom, quantity);\n</code></pre> - <code>anims</code> : One or more animations, or a configuration object.     - String or number value     - Array of string or number value     - Configuration object :         <pre><code>{\nanims: [],\ncycle: false,\nquantity: 1\n}\n</code></pre> - <code>pickRandom</code> :      - <code>true</code> : Whether frames should be assigned at random from <code>frames</code>. Default behavior. - <code>quantity</code> : The number of consecutive particles that will receive each frame. Default value is <code>1</code>.</p>"},{"location":"particles/#particle","title":"Particle","text":"<ul> <li>Speed     <pre><code>emitter.setParticleSpeed(x, y);\n</code></pre>     or     <pre><code>emitter.speedX = x;\nemitter.speedY = y;\n</code></pre><ul> <li>Changes the emitter from radial to a point emitter</li> </ul> </li> <li>Bounce     <pre><code>emitter.bounce = value;\n</code></pre><ul> <li><code>0</code> : No bounce</li> <li><code>1</code> : Full rebound</li> </ul> </li> <li>Max velocity     <pre><code>emitter.maxVelocityX = x;\nemitter.maxVelocityY = y;\n</code></pre></li> <li>Gravity     <pre><code>emitter.setParticleGravity(x, y);\n</code></pre>     or     <pre><code>emitter.gravityX = x;\nemitter.gravityY = y;\n</code></pre></li> <li>Acceleration     <pre><code>emitter.accelerationX = x;\nemitter.accelerationY = y;\n</code></pre></li> <li>Lifespan : Sets the lifespan of newly emitted particles in milliseconds.     <pre><code>emitter.setParticleLifespan(time);\n</code></pre>     or     <pre><code>emitter.lifespan = time\n</code></pre></li> <li>The number of milliseconds to wait after emission before the particles start updating.     <pre><code>emitter.delay = time;\n</code></pre></li> <li>The number of milliseconds to wait after a particle has finished its life before it will be removed.     <pre><code>emitter.hold = time;\n</code></pre></li> <li>Tint     <pre><code>emitter.setParticleTint(tint);\n</code></pre>     or     <pre><code>emitter.particleTint = tint;\n</code></pre><ul> <li>Webgl only</li> </ul> </li> <li>Color     <pre><code>emitter.particleColor = color;   // WebGL only.\nemitter.colorEase = easeName;\n</code></pre><ul> <li>Webgl only</li> </ul> </li> <li>Alpha     <pre><code>emitter.setParticleAlpha(alpha);\n</code></pre>     or     <pre><code>emitter.setAlpha(alpha);\n</code></pre>     or     <pre><code>emitter.particleAlpha = alpha;\n</code></pre></li> <li>Scale : Sets the vertical and horizontal scale of the emitted particles.     <pre><code>emitter.setParticleScale(x, y);\n</code></pre>     or     <pre><code>emitter.setScale(x, y);\n</code></pre>     or     <pre><code>emitter.particleScaleX = x;\nemitter.particleScaleY = y;\n</code></pre></li> <li>Position     <pre><code>emitter.particleX = x;\nemitter.particleY = y;\n</code></pre></li> <li>Position to move toward     <pre><code>emitter.moveToX = x;\nemitter.moveToY = y;\n</code></pre></li> <li>The angle at which the particles are emitted.     <pre><code>emitter.particleAngle = angle;  // degrees    \n</code></pre></li> <li>The rotation (or angle) of each particle when it is emitted.     <pre><code>emitter.particleRotate = rotation; // degrees\n</code></pre></li> <li>The number of particles that are emitted each time an emission occurs     <pre><code>emitter.quantity = quantity;\n</code></pre></li> <li>Hard limit the amount of particle objects     <pre><code>var count = emitter.maxParticles;\n</code></pre><ul> <li>Whether this emitter is at its limit     <pre><code>var atLimit = emitter.atLimit();\n</code></pre></li> </ul> </li> <li>Alive (active) particles<ul> <li>Amount of alive particles     <pre><code>var count = emitter.getAliveParticleCount();\n</code></pre>     or     <pre><code>var count = emitter.alive.length;\n</code></pre></li> <li>Add callback for newly emitted particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.onParticleEmit(callback, context);\n</code></pre><ul> <li>Clear callback     <pre><code>emitter.onParticleEmit();\n</code></pre></li> </ul> </li> <li>For each alive particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.forEachAlive(callback, context);\n</code></pre></li> </ul> </li> <li>Dead (inactive) particles        <ul> <li>Amount of dead particles     <pre><code>var count = emitter.getDeadParticleCount();\n</code></pre>     or     <pre><code>var count = emitter.dead.length;\n</code></pre></li> <li>Add callback for each particle death     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.onParticleDeath(callback, context);\n</code></pre><ul> <li>Clear callback     <pre><code>emitter.onParticleDeath();\n</code></pre></li> </ul> </li> <li>For each dead particle     <pre><code>var callback = function(particle, emitter) { /* ... */ }\nemitter.forEachDead(callback, context);\n</code></pre></li> <li>Add dead particles into pool     <pre><code>emitter.reserve(count);\n</code></pre></li> </ul> </li> <li>Total (alive + dead) number of particles.     <pre><code>var count = emitter.getParticleCount();\n</code></pre></li> <li>Active particles overlaps with a Rectangle Geometry object or an Arcade Physics Body.     <pre><code>var particles = emitter.overlap(target);\n</code></pre><ul> <li><code>target</code> : <ul> <li>A Rectangle.</li> <li>Arcade Physics Body.</li> </ul> </li> <li><code>particles</code> : An array of Particles that overlap with the given target</li> </ul> </li> <li>Gets a bounds Rectangle calculated from the bounds of all currently active Particles     <pre><code>emitter.getBounds(padding, advance, delta, output);\n</code></pre><ul> <li><code>padding</code> : The amount of padding, in pixels, to add to the bounds Rectangle.</li> <li><code>advance</code>, <code>delta</code> : Fast forward in time to try and allow the bounds to be more accurate.</li> <li><code>output</code> : The Rectangle to store the results in.</li> </ul> </li> <li>Gets the bounds of this particle as a Geometry Rectangle     <pre><code>particle.getBounds();\n</code></pre></li> </ul>"},{"location":"particles/#render-order","title":"Render order","text":"<ul> <li>Sort by property     <pre><code>emitter.setSortProperty(property, ascending);\n</code></pre><ul> <li><code>property</code> : The property on the <code>Particle</code> class to sort by.</li> <li><code>ascending</code> : Should the particles be sorted in ascending or descending order?</li> </ul> </li> <li>Sort by callback     <pre><code>var callback = function(particleA, particleB) {\nreturn 1; // 0,1,-1\n}\nemitter.setSortCallback(callback);\n</code></pre></li> </ul>"},{"location":"particles/#emitter","title":"Emitter","text":"<ul> <li>Frequency     <pre><code>emitter.setFrequency(frequency);\n// emitter.setFrequency(frequency, quantity);\n</code></pre><ul> <li><code>frequency</code> :<ul> <li><code>&gt;= 0</code> : The time interval of each flow cycle, in ms</li> <li><code>-1</code> : Explosion mode.</li> </ul> </li> <li><code>quantity</code> : The number of particles to release at each flow cycle or explosion.</li> </ul> </li> <li>Quantity     <pre><code>emitter.setQuantity(quantity);\n</code></pre><ul> <li><code>quantity</code> : The number of particles to release at each flow cycle or explosion.</li> </ul> </li> </ul>"},{"location":"particles/#zone","title":"Zone","text":""},{"location":"particles/#emit-zone","title":"Emit zone","text":""},{"location":"particles/#add-emit-zone","title":"Add emit zone","text":"<pre><code>var zone = emitter.addEmitZone({\ntype: 'random',\nsource: geom,\n});\n</code></pre> <ul> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon, BitmapZone, or Path or Curve, which has <code>getRandomPoint(point)</code> method<ul> <li>Custom zone     <pre><code>{\ngetRandomPoint: function(point) {\n// point.x = ...\n// point.y = ...\nreturn point;\n}\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"particles/#add-emit-edge","title":"Add emit edge","text":"<pre><code>var zone = emitter.addEmitZone({\ntype: 'edge',\nsource: curve,\n\nquantity: 1,\nstepRate: 0,\nyoyo: false,\nseamless: true,\ntotal: -1\n});\n</code></pre> <ul> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon, or Path or Curve, which has <code>getPoints(quantity, stepRate)</code> method<ul> <li>Custom edge     <pre><code>{\ngetPoints: function(quantity, stepRate) {\n// output = [point0, point1, ...];  // point: Phaser.Math.Vector2, or {x, y}\nreturn output;\n}\n}\n</code></pre></li> </ul> </li> <li><code>quantity</code> : The number of particles to place on the source edge. Set to 0 to use <code>stepRate</code> instead.</li> <li><code>stepRate</code> : The distance between each particle. When set, <code>quantity</code> is implied and should be set to 0.</li> <li><code>yoyo</code> : Whether particles are placed from start to end and then end to start. Default is <code>false</code>.</li> <li><code>seamless</code> : Whether one endpoint will be removed if it's identical to the other. Default is <code>true</code>.</li> <li><code>total</code> : The total number of particles this zone will emit before passing over to the next emission zone in the Emitter.</li> </ul> <p>quantity or stepRate</p> <ul> <li>Any geometry like circle, ellipse, kine, polygon, rectangle, triangle source has quantity, or stepRate</li> <li>Curve source has quantity, or stepRate</li> <li>Path source only has quantity</li> </ul>"},{"location":"particles/#set-emit-zone","title":"Set emit zone","text":"<pre><code>emitter.setEmitZone(zone);\n</code></pre> <ul> <li><code>zone</code> : The Emit Zone to set as the active zone.<ul> <li>A zone object</li> <li>A number as index</li> </ul> </li> </ul>"},{"location":"particles/#zone-source","title":"Zone source","text":"<ul> <li>Get     <pre><code>// var zone = emitter.emitZones[i];\nvar source = zone.source;    </code></pre></li> <li>(Edge type only) Update points of curve source     <pre><code>zone.updateSource();\n</code></pre></li> <li>(Edge type only) Set source to another curve, also update points     <pre><code>zone.changeSource(curve);\n</code></pre></li> </ul>"},{"location":"particles/#remove-emit-zone","title":"Remove emit zone","text":"<pre><code>emitter.removeEmitZone(zone)\n</code></pre>"},{"location":"particles/#clear-emit-zone","title":"Clear emit zone","text":"<pre><code>emitter.emitZones.length = 0;\nemitter.zoneIndex = 0;\n</code></pre>"},{"location":"particles/#death-zone","title":"Death zone","text":"<pre><code>var zone = emitter.addDeathZone({\ntype: 'onEnter',\nsource: geom\n});\n</code></pre> <ul> <li><code>type</code> : <code>'onEnter'</code> or <code>'onLeave'</code></li> <li><code>source</code> : Geom like Circle, Ellipse, Rectangle,Triangle, Polygon<ul> <li>Custom <code>source</code> :     <pre><code>{\ncontains: function (x, y) {\n// ...\nreturn bool;\n}\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"particles/#remove-death-zone","title":"Remove death zone","text":"<pre><code>emitter.removeDeathZone(zone)\n</code></pre>"},{"location":"particles/#clear-death-zone","title":"Clear death zone","text":"<pre><code>emitter.deathZones.length = 0;\n</code></pre>"},{"location":"particles/#events","title":"Events","text":"<ul> <li>Starts emission of particles.     <pre><code>emitter.on('start', function(emitter) {\n\n})\n</code></pre></li> <li>Explodes a set of particles.     <pre><code>emitter.on('explode', function(emitter, particle) {\n\n})\n</code></pre></li> <li>Death Zone kills a Particle instance.     <pre><code>emitter.on('deathzone', function(emitter, particle, zone) {\n\n})\n</code></pre></li> <li>Stops emission     <pre><code>emitter.on('stop', function(emitter) {\n\n})\n</code></pre><ul> <li>Directly call the <code>ParticleEmitter.stop</code> method.</li> <li>Stop after a set time via the <code>duration</code> property.</li> <li>Stop after a set number of particles via the <code>stopAfter</code> property.</li> </ul> </li> <li>Complete Event, no particles are still rendering at this point in time.     <pre><code>emitter.on('complete', function(emitter) {\n\n})\n</code></pre></li> </ul>"},{"location":"particles/#bounds","title":"Bounds","text":"<ul> <li>Add bounds     <pre><code>var bounds = emitter.addParticleBounds(x, y, width, height);\n// var bounds = emitter.addParticleBounds(x, y, width, height, collideLeft, collideRight, collideTop, collideBottom);\n</code></pre>     or     <pre><code>var bounds = emitter.addParticleBounds(rect);\n</code></pre><ul> <li><code>x, y, width, height</code>, <code>{x, y, width, height}</code>, or <code>{x, y, w, h}</code>, or Rectangle : Bounds</li> <li><code>collideLeft</code>, <code>collideRight</code>, <code>collideTop</code>, <code>collideBottom</code> : Whether particles interact with the left/right/top/bottom edge of the bounds.</li> </ul> </li> <li>Collide edges     <pre><code>bounds.collideLeft = enabled;\nbounds.collideRight = enabled;\nbounds.collideTop = enabled;\nbounds.collideBottom = enabled;\n</code></pre></li> <li>Bound rectangle     <pre><code>var rect = bounds.bounds;\n</code></pre><ul> <li><code>rect</code> : Rectangle</li> </ul> </li> </ul>"},{"location":"particles/#gravity-well","title":"Gravity well","text":"<ul> <li>Create a gravity well   <pre><code>var well = particles.createGravityWell({\n// x: 0,\n// y: 0,\n// power: 0,\n// epsilon: 100,\n// gravity: 50\n});\n</code></pre></li> <li>Enable<ul> <li>Active    <pre><code>well.active = true;\n</code></pre></li> <li>Inactive    <pre><code>well.active = false;\n</code></pre></li> </ul> </li> <li>Position     <pre><code>well.x = x;\nwell.y = y;\n</code></pre></li> <li>Gravity     <pre><code>well.gravity = value;\n</code></pre></li> <li>Power     <pre><code>well.power = value;\n</code></pre></li> </ul>"},{"location":"particles/#custom-particle-processor","title":"Custom Particle Processor","text":"<ul> <li>Declare Particle Processor class     <pre><code>class MyParticleProcessor extends Phaser.GameObjects.Particles.ParticleProcessor {\nconstructor() {\nsuper(x, y, active);\n// ...\n}\n\nupdate(particle, delta, step, t) {\n// particle : The Particle to update.\n// delta : The delta time in ms.\n// step : The delta value divided by 1000.\n// t : The current normalized lifetime of the particle, between 0 (birth) and 1 (death).\n}\n\ndestroy() {\nsuper.destroy();\n}\n}\n</code></pre><ul> <li>Override <code>update</code> method</li> </ul> </li> <li>Add to emitter     <pre><code>var myParticleProcessor = emitter.addParticleProcessor(new MyParticleProcessor);\n</code></pre></li> </ul>"},{"location":"particles/#custom-particle-class","title":"Custom particle class","text":"<pre><code>class MyParticle extends Phaser.GameObjects.Particles.Particle {\nconstructor (emitter) {\nsuper(emitter);\n/* ... */\n}\n\nupdate (delta, step, processors) {\nsuper.update(delta, step, processors);\n/* ... */\n}\n}\n</code></pre>"},{"location":"particles/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"particles/#create-mask","title":"Create mask","text":"<pre><code>var mask = emitter.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"particles/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"path/","title":"Path","text":""},{"location":"path/#introduction","title":"Introduction","text":"<p>Path in curves, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"path/#usage","title":"Usage","text":""},{"location":"path/#add-path-object","title":"Add path object","text":"<pre><code>var path = scene.add.path();\n// var path = scene.add.path(x, y);  // curve start from (x, y)\n</code></pre> <p>or</p> <pre><code>var path = new Phaser.Curves.Path();\n// var path = new Phaser.Curves.Path(x, y);  // curve start from (x, y)\n</code></pre>"},{"location":"path/#add-path-object-with-curves","title":"Add path object with curves","text":"<p>Curves in JSON</p> <p><pre><code>var path = scene.add.path(json);\n</code></pre> or <pre><code>var path = new Phaser.Curves.Path(json);\n</code></pre></p>"},{"location":"path/#add-curve","title":"Add curve","text":""},{"location":"path/#line","title":"Line","text":"<ul> <li>Add line object<ol> <li>Create line object     <pre><code>var curve = new Phaser.Curves.Line({x: x0, y: y0}, {x: x1, y: y1});\n</code></pre>     or     <pre><code>var curve = new Phaser.Curves.Line([x0, y0, x1, y1]);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add line started from previous end point to next point     <pre><code>path.lineTo(endX, endY);\n</code></pre>     or     <pre><code>path.lineTo(new Phaser.Math.Vector2({x, y}));\n</code></pre></li> </ul> <p>Properties:</p> <ul> <li><code>curve.p0</code> : The first endpoint.<ul> <li><code>curve.p0.x</code>, <code>curve.p0.y</code></li> </ul> </li> <li><code>curve.p1</code> : The second endpoint.<ul> <li><code>curve.p1.x</code>, <code>curve.p1.y</code></li> </ul> </li> </ul>"},{"location":"path/#circleellipsearc","title":"Circle/ellipse/arc","text":"<ul> <li>Add circle/ellipse/arc object<ol> <li>Create circle/ellipse/arc object<ul> <li>Circle     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, radius);\n</code></pre></li> <li>Ellipse     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius);\n</code></pre></li> <li>Arc     <pre><code>var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise,     rotation);\n</code></pre></li> </ul> </li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add circle/ellipse/arc started from previous end point to next point<ul> <li>Circle     <pre><code>path.circleTo(radius);\n</code></pre></li> <li>Ellipse     <pre><code>path.ellipseTo(xRadius, yRadius);\n</code></pre></li> <li>Arc     <pre><code>path.ellipseTo(xRadius, yRadius, startAngle, endAngle, clockwise, rotation);\n</code></pre></li> </ul> </li> </ul> <p>Properties:</p> <ul> <li><code>curve.p0</code> : Center point.<ul> <li><code>curve.p0.x</code>, <code>curve.p0.y</code></li> </ul> </li> <li><code>curve.xRadius</code>, <code>curve.yRadius</code> : Horizontal/vertical radiuse.</li> <li><code>curve.startAngle</code>, <code>curve.endAngle</code> : Start/end angle, in degrees.</li> <li><code>curve.clockwise</code> : <code>true</code> if Clockwise, <code>false</code> if anti-clockwise.</li> <li><code>curve.angle</code> : Rotation, in degrees.<ul> <li><code>curve.rotation</code> : Rotation, in radians.</li> </ul> </li> </ul>"},{"location":"path/#spline","title":"Spline","text":"<ul> <li>Add spline object<ol> <li>Create spline object     <pre><code>var curve = new Phaser.Curves.Spline([\np0,            // {x, y}, or [x, y]\np1,            // {x, y}, or [x, y]\n// ...\n]);\n</code></pre>     or     <pre><code>var curve = new Phaser.Curves.Spline([\nx0, y0,\nx1, y1,\n// ...\n]);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> </li> <li>Add spline started from previous end point to next point     <pre><code>var points = ;\npath.splineTo([\np0,            // {x, y}, or [x, y]\np1,            // {x, y}, or [x, y]\n// ...\n]);\n</code></pre>     or     <pre><code>path.splineTo([\nx0, y0,\nx1, y1,\n// ...\n]);\n</code></pre></li> </ul>"},{"location":"path/#append-point","title":"Append point","text":"<pre><code>var point = curve.addPoint(x, y);\n</code></pre>"},{"location":"path/#quadratic-bezier-curve","title":"Quadratic bezier curve","text":"<ol> <li>Create quadratic bezier curve object     <pre><code>var curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint, endPoint); // point: {x, y}\n</code></pre>     or     <pre><code>var points = [\nx0, y0,     // start point\nx1, y1,     // control point\nx2, y2      // end point\n];\nvar curve = new Phaser.Curves.QuadraticBezier(points);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> <p>Add quadratic bezier curve started from previous end point to next point</p> <p><pre><code>path.quadraticBezierTo(endX, endY, controlX, controlY);\n</code></pre> or <pre><code>path.quadraticBezierTo(endPoint, controlPoint);  // point : Phaser.Math.Vector2\n</code></pre></p>"},{"location":"path/#cubic-bezier-curve","title":"Cubic bezier curve","text":"<ol> <li>Create quadratic bezier curve object     <pre><code>var curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint); // point: {x, y}\n</code></pre>     or     <pre><code>var points = [\nx0, y0,     // start point\nx1, y1,     // control point1\nx2, y2,     // control point2\nx3, y3      // end point\n];\nvar curve = new Phaser.Curves.CubicBezier(points);\n</code></pre></li> <li>Add to path     <pre><code>path.add(curve);\n</code></pre></li> </ol> <p>Add cubic bezier curve started from previous end point to next point</p> <p><pre><code>path.cubicBezierTo(endX, endY, control1X, control1Y, control2X, control2Y);\n</code></pre> or <pre><code>path.cubicBezierTo(endPoint, controlPoint1, controlPoint2);  // point : Phaser.Math.Vector2\n</code></pre></p>"},{"location":"path/#move-to-point","title":"Move to point","text":"<pre><code>path.moveTo(x, y);\n</code></pre>"},{"location":"path/#add-curves-from-json","title":"Add curves from JSON","text":"<pre><code>path.fromJSON(json);\n</code></pre>"},{"location":"path/#get-curves","title":"Get curves","text":"<pre><code>var curves = path.curves;\n</code></pre>"},{"location":"path/#get-curve-at-t","title":"Get curve at t","text":"<pre><code>var curve = path.getCurveAt(t);\n</code></pre> <ul> <li><code>t</code> : The normalized location on the Path. Between <code>0</code> and <code>1</code></li> </ul>"},{"location":"path/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>path.draw(graphics);\n// path.draw(graphics, pointsTotal);\n</code></pre> <ul> <li><code>pointsTotal</code> : The number of points to draw for each Curve.</li> </ul> <p>or</p> <pre><code>curve.draw(graphics);\n// curve.draw(graphics, pointsTotal);\n</code></pre> <ul> <li><code>pointsTotal</code> : The resolution of the curve.</li> </ul>"},{"location":"path/#point","title":"Point","text":"<ul> <li>Get point     <pre><code>var out = path.getPoint(t);  // t: 0 ~ 1\n// var out = path.getPoint(t, out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getPoint(t);  // t: 0 ~ 1\n// var out = curve.getPoint(t, out);  // modify out\n</code></pre>     Distance of path from start point to target point (out) might not linear with t.</li> <li>Get random point     <pre><code>var out = path.getRandomPoint();\n// var out = path.getRandomPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getRandomPoint();\n// var out = curve.getRandomPoint(out);  // modify out\n</code></pre></li> <li>Get n points<ul> <li>Path     <pre><code>var points = path.getPoints(divisions);\n</code></pre><ul> <li><code>divisions</code> : The number of divisions per resolution per curve.</li> </ul> </li> <li>Curve     <pre><code>var points = curve.getPoints(divisions);\n// var points = curve.getPoints(divisions, undefined, out);\n</code></pre>     or     <pre><code>var points = curve.getPoints(undefined, stepRate);\n// var points = curve.getPoints(undefined, stepRate, out);\n</code></pre><ul> <li><code>divisions</code> : The number of divisions in this curve.<ol> <li><code>divisions</code>, if <code>divisions &gt; 0</code>, else</li> <li><code>this.getLength / stepRate</code>, if <code>stepRate &gt; 0</code>, else</li> <li><code>defaultDivisions</code></li> </ol> </li> <li><code>points</code> : Return <code>1 + divisions</code> points.</li> </ul> </li> </ul> </li> <li>Get (n+1) points equally spaced out along the curve     <pre><code>var points = path.getSpacedPoints(n);\n</code></pre>     or     <pre><code>var points = curve.getSpacedPoints(n);\n// var points = curve.getSpacedPoints(undefined, stepRate);\n// var points = curve.getSpacedPoints(divisions, stepRate, out);\n</code></pre></li> <li>Get points spaced out n distance pixels apart     <pre><code>var points = curve.getDistancePoints(n)\n</code></pre>     The smaller the distance, the larger the array will be.     Path object does NOT support this feature yet.</li> <li>Get start point     <pre><code>var out = path.getStartPoint();\n// var out = path.getStartPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getStartPoint();\n// var out = curve.getStartPoint(out);  // modify out\n</code></pre></li> <li>Get end point     <pre><code>var out = path.getEndPoint();\n// var out = path.getEndPoint(out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getEndPoint();\n// var out = curve.getEndPoint(out);  // modify out\n</code></pre></li> <li>Get t (0~1) from distance     <pre><code>var t = curve.getTFromDistance(d);\n</code></pre>     Path object does NOT support this feature yet.</li> <li>Get tangent     <pre><code>var out = path.getTangent(t);  // t: 0~1\n// var out = path.getTangent(t, out);  // modify out\n</code></pre>     or     <pre><code>var out = curve.getTangent(t);  // t: 0~1\n// var out = curve.getTangent(t, out);  // modify out\n</code></pre></li> </ul>"},{"location":"path/#length-of-path","title":"Length of path","text":"<p><pre><code>var l = path.getLength();\n</code></pre> or <pre><code>var l = curve.getLength();\n</code></pre></p> <p>Length of path/curve will be cached.</p>"},{"location":"path/#update-length","title":"Update length","text":"<p><pre><code>path.updateArcLengths();\n</code></pre> or <pre><code>curve.updateArcLengths();\n</code></pre></p>"},{"location":"path/#curves-to-json","title":"Curves to JSON","text":"<p><pre><code>var json = path.toJSON();\n</code></pre> or <pre><code>var json = curve.toJSON();\n</code></pre></p>"},{"location":"path/#bounds","title":"Bounds","text":"<p>Get bounds</p> <p><pre><code>var out = path.getBounds();    // accuracy = 16\n// var out = path.getBounds(out);\n// var out = path.getBounds(out, accuracy);\n</code></pre> or <pre><code>var out = curve.getBounds();    // accuracy = 16\n// var out = curve.getBounds(out);\n// var out = curve.getBounds(out, accuracy);\n</code></pre></p> <ul> <li><code>out</code> : A rectangle object</li> </ul>"},{"location":"path/#destroy","title":"Destroy","text":"<pre><code>path.destroy();\n</code></pre>"},{"location":"pathfollower/","title":"Path follower","text":""},{"location":"pathfollower/#introduction","title":"Introduction","text":"<p>Set position of game object on a path.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"pathfollower/#live-demos","title":"Live demos","text":"<ul> <li>Path follower</li> <li>Spaced points</li> </ul>"},{"location":"pathfollower/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"pathfollower/#install-plugin","title":"Install plugin","text":""},{"location":"pathfollower/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpathfollowerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpathfollowerplugin.min.js', true);\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = scene.plugins.get('rexpathfollowerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PathFollowerPlugin from 'phaser3-rex-plugins/plugins/pathfollower-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPathFollower',\nplugin: PathFollowerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = scene.plugins.get('rexPathFollower').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PathFollower from 'phaser3-rex-plugins/plugins/pathfollower.js';\n</code></pre></li> <li>Add path-follower behavior     <pre><code>var pathFollower = new PathFollower(gameObject, config);\n</code></pre></li> </ul>"},{"location":"pathfollower/#create-instance","title":"Create instance","text":"<pre><code>// var path = scene.add.path();\nvar pathFollower = scene.plugins.get('rexPathFollower').add(gameObject, {\n// path: path,          // path object\n// t: 0,                // t: 0~1\n// rotateToPath: false,\n// rotationOffset: 0,\n// angleOffset: 0,\n\n// spacedPoints: false,\n// spacedPoints: {\n//     divisions: undefined,\n//     stepRate: 10,\n// }\n\n});\n</code></pre> <ul> <li><code>path</code> : Path object</li> <li><code>t</code> : Initial value of property <code>t</code> (0~1)</li> <li><code>rotateToPath</code>: Set true to change angle towards path</li> <li><code>rotationOffset</code> : Rotation offset in radian, or <code>angleOffset</code> in degrees</li> <li><code>spacedPoints</code> :<ul> <li><code>false</code>, or <code>undefined</code> : Get point by <code>path.getPoint(t)</code></li> <li><code>spacedPoints.divisions</code>, <code>spacedPoints.stepRate</code> : <ol> <li>Get points by <code>path.getSpacedPoints(divisions, stepRate)</code></li> <li>Get point from linear interpolation of points in step1.</li> </ol> </li> </ul> </li> </ul>"},{"location":"pathfollower/#move-along-path","title":"Move along path","text":"<p>Set <code>pathFollower.t</code> (0~1) to move along path</p> <pre><code>pathFollower.t = t;  // t: 0~1\n// pathFollower.setT(t);\n</code></pre> <p>or tween <code>pathFollower.t</code></p> <pre><code>var tween = scene.tweens.add({\ntargets: pathFollower,\nt: 1,\nease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,\nyoyo: false\n});\n</code></pre>"},{"location":"pathfollower/#set-path","title":"Set path","text":"<pre><code>pathFollower.setPath(path);\n</code></pre>"},{"location":"pathfollower/#set-rotate-to-path","title":"Set rotate-to-path","text":"<pre><code>pathFollower.setRotateToPath(rotateToPath, rotationOffset);\n</code></pre> <ul> <li><code>rotateToPath</code> : Set <code>true</code> to change angle towards path</li> <li><code>rotationOffset</code> : Rotation offset in radian</li> </ul>"},{"location":"percentage/","title":"Percentage","text":""},{"location":"percentage/#introduction","title":"Introduction","text":"<p>Work out what percentage <code>value</code> is of the range between <code>min</code> and <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"percentage/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Percent(value, min, max);\n</code></pre> <ul> <li><code>result</code>: Percentage/t (0~1).</li> <li><code>value</code> : The value to determine the percentage of.</li> </ul>"},{"location":"perlin/","title":"Perlin","text":""},{"location":"perlin/#introduction","title":"Introduction","text":"<p>Perlin2/Perlin3 noise and simplex2/simplex3 noise. (Reference)</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"perlin/#live-demos","title":"Live demos","text":"<ul> <li>Perlin2</li> <li>Terrain generator</li> </ul>"},{"location":"perlin/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perlin/#install-plugin","title":"Install plugin","text":""},{"location":"perlin/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperlinplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperlinplugin.min.js', true);\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = scene.plugins.get('rexperlinplugin').add(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerlinPlugin from 'phaser3-rex-plugins/plugins/perlin-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerlin',\nplugin: PerlinPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = scene.plugins.get('rexPerlin').add(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Perlin from 'phaser3-rex-plugins/plugins/perlin.js';\n</code></pre></li> <li>Add perlin noise object     <pre><code>var noise = new Perlin(seed);\n</code></pre></li> </ul>"},{"location":"perlin/#create-noise-instance","title":"Create noise instance","text":"<pre><code>var noise = scene.plugins.get('rexPerlin').add(seed);\n</code></pre> <ul> <li><code>seed</code> : A seed for this noise, like <code>Math.random()</code></li> </ul>"},{"location":"perlin/#perlin","title":"Perlin","text":"<ul> <li>Perlin2     <pre><code>var value = noise.perlin2(x, y);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> <li>Perlin3     <pre><code>var value = noise.perlin3(x, y, z);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"perlin/#simplex","title":"Simplex","text":"<ul> <li>Simplex2     <pre><code>var value = noise.simplex2(x, y);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code> </li> </ul> </li> <li>Simplex3     <pre><code>var value = noise.simplex3(x, y, z);\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"perlin/#set-seed","title":"Set seed","text":"<pre><code>noise.setSeed(seed);\n</code></pre>"},{"location":"perspective-card/","title":"Card","text":""},{"location":"perspective-card/#introduction","title":"Introduction","text":"<p>A container with two perspective-images.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-card/#live-demos","title":"Live demos","text":"<ul> <li>Flip card</li> <li>Label front face</li> </ul>"},{"location":"perspective-card/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-card/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-card/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.add.rexPerspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.add.rexPerspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCard } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add card object     <pre><code>var card = new PerspectiveCard(scene, config);\nscene.add.existing(card);\n</code></pre></li> </ul>"},{"location":"perspective-card/#create-instance","title":"Create instance","text":"<pre><code>var card = scene.add.rexPerspectiveCard({\nx: 0, y: 0,\n\nback: {key, frame},\nfront: {key, frame},\nface: 0,\n\norientation: 0,\n\n// width,\n// height,\n\n// flip : {\n//     frontToBack: 0,\n//     backToFront: 1,\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n// flip: false\n});\n</code></pre> <ul> <li><code>front</code>, <code>back</code> : Perspective image game object for front and back face.<ul> <li><code>{key, frame}</code> : Texture key and frame name, to create perspective image</li> <li><code>{width, height}</code> : Width and height, to create perspective render texture.</li> <li>Perspective image</li> <li>Perspective render texture</li> </ul> </li> <li><code>face</code> : Show front or back face.<ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Flipping left-to-right, or right-to-left.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Flipping top-to-bottom, or bottom-to-top.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Specific width and height of this card container.<ul> <li><code>undefined</code> : Use width and height of front and back face.</li> </ul> </li> <li><code>flip</code> : Configuration of flipping behavior.<ul> <li><code>flip.frontToBack</code>, <code>flip.backToFront</code> : Flipping direction.<ul> <li><code>'right'</code>, <code>'left-to-right'</code>, or <code>0</code> : Flipping from right to left.</li> <li><code>'left'</code>, <code>'right-to-left'</code>, or <code>1</code> : Flipping from left to right.</li> </ul> </li> <li><code>flip.duration</code> : Duration of flipping, in millisecond.</li> <li><code>flip.delay</code> : Initial delay.</li> <li><code>flip.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add flipping behavior.</li> </ul> </li> </ul> <p>Add card from JSON</p> <pre><code>var card = scene.make.rexPerspectiveCard({\nx: 0,\ny: 0,\n\nfront,\nback,\nface: 0,\n\norientation: 0,\n\nwidth,\nheight,\n\nflip,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-card/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCard extends PerspectiveCard {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var card = new MyPerspectiveCard(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-card/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = card.face;\n</code></pre><ul> <li><code>face</code>:<ul> <li><code>0</code> : Show front face.</li> <li><code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>card.setFace(face)\n</code></pre><ul> <li><code>face</code><ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Toggle     <pre><code>card.toggleFace()\n</code></pre></li> </ul>"},{"location":"perspective-card/#face-instances","title":"Face instances","text":"<ul> <li>Front face     <pre><code>var frontFace = card.frontFace;\n// var frontFace = card.faces.front;\n</code></pre></li> <li>Back face     <pre><code>var backFace = card.backFace;\n// var backFace = card.faces.back;\n</code></pre></li> </ul>"},{"location":"perspective-card/#flip-behavior","title":"Flip behavior","text":""},{"location":"perspective-card/#start-flipping","title":"Start flipping","text":"<pre><code>card.flip.flip();\n// card.flip.flip(duration, repeat);\n</code></pre> <ul> <li><code>duration</code> : Overwrite default duration value.</li> <li><code>repeat</code> : Number of flipping time (<code>repeat + 1</code>) during <code>duration</code>. Default value is <code>0</code>.</li> </ul> <p>or</p> <ul> <li>Flip-right     <pre><code>card.flip.flipRight();\n// card.flip.flipRight(duration, repeat);\n</code></pre></li> <li>Flip-left     <pre><code>card.flip.flipLeft();\n// card.flip.flipLeft(duration, repeat);\n</code></pre></li> </ul>"},{"location":"perspective-card/#stop-flipping","title":"Stop flipping","text":"<pre><code>card.flip.stop();\n</code></pre>"},{"location":"perspective-card/#set-duration","title":"Set duration","text":"<pre><code>card.flip.setDuration(duration);\n// card.flip.duration = duration;\n</code></pre>"},{"location":"perspective-card/#set-ease","title":"Set ease","text":"<pre><code>card.flip.setEase(ease);\n// card.flip.ease = ease;\n</code></pre>"},{"location":"perspective-card/#events","title":"Events","text":"<ul> <li>On flipping start     <pre><code>card.flip.on('start', function(flip, card){\n// ...\n});\n</code></pre></li> <li>On flipping complete     <pre><code>card.flip.on('complete', function(flip, card){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-card/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = card.flip.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-card/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = card.angleX; // Angle in degrees\nvar angleY = card.angleY; // Angle in degrees\nvar angleZ = card.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = card.rotationX; // Angle in radians\nvar rotationY = card.rotationY; // Angle in radians\nvar rotationZ = card.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>card.angleX = angleX; // Angle in degrees\ncard.angleY = angleY; // Angle in degrees\ncard.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>card.rotationX = rotationX; // Angle in radians\ncard.rotationY = rotationY; // Angle in radians\ncard.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-card/#debug","title":"Debug","text":"<ol> <li>Set debug Graphics <pre><code>var debugGraphics = scene.add.graphics();\ncard.setDebug(debugGraphics);\n</code></pre></li> <li>Update Graphics in <code>scene.update()</code> method.     <pre><code>debugGraphics.clear();\ndebugGraphics.lineStyle(1, 0x00ff00);\n</code></pre></li> </ol>"},{"location":"perspective-card/#other-properties","title":"Other properties","text":"<p>See container, Mesh game object, game object</p>"},{"location":"perspective-card/#create-mask","title":"Create mask","text":"<pre><code>var mask = card.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-card/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"perspective-carousel/","title":"Carousel","text":""},{"location":"perspective-carousel/#introduction","title":"Introduction","text":"<p>A container with cards.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-carousel/#live-demos","title":"Live demos","text":"<ul> <li>Carousel</li> <li>List</li> <li>UI cards</li> </ul>"},{"location":"perspective-carousel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-carousel/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-carousel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCarousel } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = new PerspectiveCarousel(scene, config);\nscene.add.existing(carousel);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#create-instance","title":"Create instance","text":"<pre><code>var carousel = scene.add.rexPerspectiveCarousel({\nx: 0, y: 0,\n\nfaces: [],\n// face: 0,\n// rtl: false,\n\n// width,\n// height,\n\n// faceWidth,\n// faceSpace: 0,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n});\n</code></pre> <ul> <li><code>faces</code> : Array of perspective-card, perspective-rendertexture, perspective-image, or <code>null</code>.<ul> <li>Assume that all faces have the same size</li> </ul> </li> <li><code>face</code> : Index or name of current face (face at angle <code>0</code>).</li> <li><code>rtl</code><ul> <li><code>false</code> : Place faces from left to right. Default behavior.</li> <li><code>true</code> : Place faces from right to left.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Specific width and height of this carousel container.<ul> <li><code>undefined</code> : Use width and height of first face.</li> </ul> </li> <li><code>faceWidth</code> : Width of face. <ul> <li><code>undefined</code> : Use width of face. Assume that all faces have the same size.</li> </ul> </li> <li><code>faceSpace</code> : Extra space of face width. Used when <code>faceWidth</code> is <code>undefined</code>.</li> <li><code>z</code>, <code>zEnd</code> : Range of faces' z-index. Default value is <code>1</code>/<code>0</code>.</li> <li><code>roll</code> : Configuration of rolling behavior.<ul> <li><code>roll.duration</code> : Duration of rolling, in millisecond.</li> <li><code>roll.delay</code> : Initial delay.</li> <li><code>roll.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add rolling behavior.</li> </ul> </li> </ul> <p>Add carousel from JSON</p> <pre><code>var carousel = scene.make.rexPerspectiveCarousel({\nx: 0,\ny: 0,\n\nfaces: [],\n\n// width,\n// height,\n\n// faceWidth,\n// faceSpace: 0,\n\n// z: 1,\n// zEnd: 0,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-carousel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCarousel extends PerspectiveCarousel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var carousel = new MyPerspectiveCarousel(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#face-instances","title":"Face instances","text":"<pre><code>var faces = carousel.faces;\n</code></pre> <ul> <li><code>faces</code> : Array of face instances.</li> </ul>"},{"location":"perspective-carousel/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = carousel.face;\n</code></pre><ul> <li><code>face</code>: Index of <code>carousel.faces</code>.</li> </ul> </li> <li>Set     <pre><code>carousel.setFace(face)\n</code></pre><ul> <li><code>face</code> : Index or name of current face (face at angle <code>0</code>).</li> </ul> </li> </ul>"},{"location":"perspective-carousel/#roll-behavior","title":"Roll behavior","text":""},{"location":"perspective-carousel/#start-rolling","title":"Start rolling","text":"<ul> <li>Roll to next face     <pre><code>carousel.roll.toNext(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to previous face     <pre><code>carousel.roll.toPrevious(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to right face     <pre><code>carousel.roll.toRight(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to left face     <pre><code>carousel.roll.toLeft(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to face     <pre><code>carousel.roll.to(faceIndex, duration);\n</code></pre><ul> <li><code>faceIndex</code> : <ul> <li>A number : Index of face in <code>carousel.faces</code></li> <li>A string : Name of face  (<code>face.setName(name)</code>)</li> </ul> </li> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> </ul>"},{"location":"perspective-carousel/#stop-flipping","title":"Stop flipping","text":"<pre><code>carousel.roll.stop();\n</code></pre>"},{"location":"perspective-carousel/#set-duration","title":"Set duration","text":"<pre><code>carousel.roll.setDuration(duration);\n// carousel.roll.duration = duration;\n</code></pre>"},{"location":"perspective-carousel/#set-ease","title":"Set ease","text":"<pre><code>carousel.roll.setEase(ease);\n// carousel.roll.ease = ease;\n</code></pre>"},{"location":"perspective-carousel/#events","title":"Events","text":"<ul> <li>On rolling complete     <pre><code>carousel.roll.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#status","title":"Status","text":"<ul> <li>Is rolling     <pre><code>var isRunning = carousel.roll.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleY = carousel.angleY; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationY = carousel.rotationY; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>carousel.angleY = angleY; // Angle in degrees\n</code></pre>     or     <pre><code>carousel.rotationY = rotationY; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-carousel/#other-properties","title":"Other properties","text":"<p>See container, Mesh game object, game object</p>"},{"location":"perspective-carousel/#create-mask","title":"Create mask","text":"<pre><code>var mask = carousel.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-carousel/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"perspective-image/","title":"Image","text":""},{"location":"perspective-image/#introduction","title":"Introduction","text":"<p>Image with perspective rotation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-image/#live-demos","title":"Live demos","text":"<ul> <li>Flip image</li> </ul>"},{"location":"perspective-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-image/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveImage } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new PerspectiveImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"perspective-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexPerspectiveImage(x, y, texture, frame, {\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexPerspectiveImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveImage extends PerspectiveImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyPerspectiveImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-image/#transform-vertices","title":"Transform vertices","text":"<p>Offset then rotate all vertices.</p> <pre><code>image.transformVerts(x, y, z, rotateX, rotateY, rotateZ);\n</code></pre> <ul> <li><code>x</code>, <code>y</code>, <code>z</code> : Offset vertices<ul> <li><code>z+</code> : Near</li> <li><code>z-</code> : Far</li> <li><code>x-</code> : Left</li> <li><code>x+</code> : Right</li> <li><code>y+</code> : Up</li> <li><code>y-</code> : Down</li> </ul> </li> <li><code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> : Rotate vertices</li> </ul>"},{"location":"perspective-image/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = image.angleX; // Angle in degrees\nvar angleY = image.angleY; // Angle in degrees\nvar angleZ = image.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = image.rotationX; // Angle in radians\nvar rotationY = image.rotationY; // Angle in radians\nvar rotationZ = image.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>image.angleX = angleX; // Angle in degrees\nimage.angleY = angleY; // Angle in degrees\nimage.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>image.rotationX = rotationX; // Angle in radians\nimage.rotationY = rotationY; // Angle in radians\nimage.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul>"},{"location":"perspective-image/#flip","title":"Flip","text":"<pre><code>scene.tweens.add({\ntargets: image,\nangleY: { start: 0, to: -180}\n})\n</code></pre>"},{"location":"perspective-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"perspective-image/#change-frame","title":"Change frame","text":"<p>Frame is bound with vertices. Use perspective renderTexture to change frame without recreate vertices again (assume that size of frame won't changed).</p> <pre><code>rt.drawFrame(key, frame);\n</code></pre>"},{"location":"perspective-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"perspective-image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-image/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"perspective-imagecarousel/","title":"Image carousel","text":""},{"location":"perspective-imagecarousel/#introduction","title":"Introduction","text":"<p>Display list of images.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-imagecarousel/#live-demos","title":"Live demos","text":"<ul> <li>List</li> </ul>"},{"location":"perspective-imagecarousel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-imagecarousel/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-imagecarousel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveImageCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = scene.add.rexPerspectiveImageCarousel(config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveImageCarousel } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add carousel object     <pre><code>var carousel = new PerspectiveImageCarousel(scene, config);\nscene.add.existing(carousel);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#create-instance","title":"Create instance","text":"<pre><code>var carousel = scene.add.rexPerspectiveImageCarousel({\nx: 0, y: 0,\n\nimages: [],  // Array of {key, frame}\n// index: 0,\n// rtl: false,\n// repeat: true,\n\n// width,\n// height,\n// faceCount: 4,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n});\n</code></pre> <ul> <li><code>images</code> : Array of textures <code>{key, frame}</code><ul> <li>Assume that all textures have the same size</li> </ul> </li> <li><code>index</code> : Index of current image.</li> <li><code>rtl</code><ul> <li><code>false</code> : Place images from left to right. Default behavior.</li> <li><code>true</code> : Place images from right to left.</li> </ul> </li> <li><code>repeat</code> : Set <code>true</code> to roll to first image from last, or last to first.</li> <li><code>width</code>, <code>height</code> : Specific width and height of this carousel container.<ul> <li><code>undefined</code> : Use width and height of first image.</li> </ul> </li> <li><code>faceCount</code> : Faces count of this carousel. A integer which <code>&gt;=3</code>.</li> <li><code>z</code>, <code>zEnd</code> : Range of faces' z-index. Default value is <code>1</code>/<code>0</code>.</li> <li><code>roll</code> : Configuration of rolling behavior.<ul> <li><code>roll.duration</code> : Duration of rolling, in millisecond.</li> <li><code>roll.delay</code> : Initial delay.</li> <li><code>roll.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> <li><code>false</code> : Don't add rolling behavior.</li> </ul> </li> </ul> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImageCarousel({\nx: 0,\ny: 0,\n\nimages: [],  // Array of {key, frame}\n// index: 0,\n// rtl: false,\n// repeat: true,\n\n// width,\n// height,\n// faceCount: 4,\n\n// z: 1,\n// zEnd: 0,\n\n// roll : {\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-imagecarousel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveImageCarousel extends PerspectiveImageCarousel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var carousel = new MyPerspectiveImageCarousel(scene, config);\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#roll-behavior","title":"Roll behavior","text":""},{"location":"perspective-imagecarousel/#start-rolling","title":"Start rolling","text":"<ul> <li>Roll to next image     <pre><code>carousel.roll.toNext(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to previous image     <pre><code>carousel.roll.toPrevious(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to right image     <pre><code>carousel.roll.toRight(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to left image     <pre><code>carousel.roll.toLeft(duration);\n</code></pre><ul> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> <li>Roll to image     <pre><code>carousel.roll.to(faceIndex, duration);\n</code></pre><ul> <li><code>faceIndex</code> : <ul> <li>A number : Index of image.</li> </ul> </li> <li><code>duration</code> : Overwrite default duration value.</li> </ul> </li> </ul>"},{"location":"perspective-imagecarousel/#set-duration","title":"Set duration","text":"<pre><code>carousel.roll.setDuration(duration);\n// carousel.roll.duration = duration;\n</code></pre>"},{"location":"perspective-imagecarousel/#set-ease","title":"Set ease","text":"<pre><code>carousel.roll.setEase(ease);\n// carousel.roll.ease = ease;\n</code></pre>"},{"location":"perspective-imagecarousel/#events","title":"Events","text":"<ul> <li>On rolling complete     <pre><code>carousel.roll.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#status","title":"Status","text":"<ul> <li>Is rolling     <pre><code>var isRunning = carousel.roll.isRunning;\n</code></pre></li> </ul>"},{"location":"perspective-imagecarousel/#other-properties","title":"Other properties","text":"<p>See container, Mesh game object, game object</p>"},{"location":"perspective-imagecarousel/#create-mask","title":"Create mask","text":"<pre><code>var mask = carousel.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-imagecarousel/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"perspective-rendertexture/","title":"Render texture","text":""},{"location":"perspective-rendertexture/#introduction","title":"Introduction","text":"<p>Render texture with perspective rotation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"perspective-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexPerspectiveRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexPerspectiveRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveRenderTexture } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new PerspectiveRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexPerspectiveRenderTexturege(x, y, width, height, {\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexPerspectiveRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexPerspectiveRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveRenderTexturege extends PerspectiveRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyPerspectiveRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"perspective-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"perspective-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> <li>Snapshop game objects     <pre><code>image.snapshot(gameObjects);\n</code></pre><ul> <li><code>gameObjects</code> : Array of game objects.</li> </ul> </li> </ul>"},{"location":"perspective-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"perspective-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"perspective-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"perspective-rendertexture/#other-properties","title":"Other properties","text":"<p>See Perspective image game object, Mesh game object, game object</p>"},{"location":"perspective-rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-rendertexture/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"perspective-sprite/","title":"Sprite","text":""},{"location":"perspective-sprite/#introduction","title":"Introduction","text":"<p>Play animation on perspective-image.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"perspective-sprite/#live-demos","title":"Live demos","text":"<ul> <li>Play animation</li> </ul>"},{"location":"perspective-sprite/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"perspective-sprite/#install-plugin","title":"Install plugin","text":""},{"location":"perspective-sprite/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexperspectiveimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexperspectiveimageplugin.min.js', true);\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PerspectiveImagePlugin from 'phaser3-rex-plugins/plugins/perspectiveimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPerspectiveImagePlugin',\nplugin: PerspectiveImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveSprite } from 'phaser3-rex-plugins/plugins/perspectiveimage.js';\n</code></pre></li> <li>Add sprite object     <pre><code>var sprite = new PerspectiveSprite(scene, x, y, texture, frame, config);\nscene.add.existing(sprite);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#create-instance","title":"Create instance","text":"<pre><code>var sprite = scene.add.rexPerspectiveSprite(x, y, texture, frame, {\n// width: undefined,\n// height: undefined,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or </p> <pre><code>var sprite = scene.add.rexPerspectiveImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// width: undefined,\n// height: undefined,\n// hideCCW: true,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexPerspectiveImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// width: undefined,\n// height: undefined,\n// hideCCW: false,\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"perspective-sprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveSprite extends PerspectiveSprite {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var sprite = new MyPerspectiveSprite(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>sprite.play(key);\n// sprite.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>sprite.playReverse(key);\n// sprite.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>sprite.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>sprite.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"perspective-sprite/#chain","title":"Chain","text":"<ul> <li>Chain next animation     <pre><code>sprite.chain(key);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Chain next and next animation     <pre><code>sprite.chain(key0).chain(key1);\n</code></pre><ul> <li><code>key0</code>, <code>key1</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"perspective-sprite/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>sprite.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>sprite.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>sprite.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = sprite.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>sprite.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"perspective-sprite/#restart","title":"Restart","text":"<pre><code>sprite.anims.restart();\n// sprite.anims.restart(includeDelay, resetRepeats);\n</code></pre>"},{"location":"perspective-sprite/#other-properties","title":"Other properties","text":"<p>See Perspective image game object, Mesh game object, game object</p>"},{"location":"perspective-sprite/#create-mask","title":"Create mask","text":"<pre><code>var mask = sprite.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"perspective-sprite/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"plane/","title":"Plane","text":""},{"location":"plane/#introduction","title":"Introduction","text":"<p>A Plane is a kind of Mesh game object with one-sided grid of cells. which  can have a texture that is either repeated (tiled) across each cell, or applied to the full Plane.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"plane/#usage","title":"Usage","text":""},{"location":"plane/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"plane/#add-plane-object","title":"Add plane object","text":"<pre><code>var plane = scene.add.plane(x, y, key);\n// var plane = scene.add.plane(x, y, key, frame);\n// var plane = scene.add.plane(x, y, texture, frame, width, height, tile);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>key</code>, <code>frame</code> : Texture key of </li> <li><code>width</code>, <code>height</code> : The width/height of this Plane, in cells, not pixels.</li> <li><code>tile</code> : Is the texture tiled? I.e. repeated across each cell.</li> </ul> <p>Add plane from JSON</p> <pre><code>var plane = scene.make.plane({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n// width: 8,\n// height: 8,\n// tile: false,\n// checkerboard: null,\n// checkerboard: { color1, color2, alpha1, alpha2, height }\n\n// angle: 0,\n// alpha: 1,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"plane/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPlane extends Phaser.GameObjects.Plane {\nconstructor(scene, x, y, texture, frame, width, height, tile) {\nsuper(scene, x, y, texture, frame, width, height, tile);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var plane = new MyPlane(scene, x, y, texture, frame, width, height, tile);\n</code></pre></li> </ul>"},{"location":"plane/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"plane/#animation","title":"Animation","text":"<p>See Sprite's animation section.</p>"},{"location":"plane/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>plane.play(key);\n// plane.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>plane.playReverse(key);\n// plane.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>plane.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>plane.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"plane/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>plane.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>plane.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>plane.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = plane.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>plane.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"plane/#properties","title":"Properties","text":"<ul> <li>Has started     <pre><code>var hasStarted = plane.anims.hasStarted;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = plane.anims.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = plane.anims.isPaused;\n</code></pre></li> <li>Total frames count     <pre><code>var frameCount = plane.anims.getTotalFrames();\n</code></pre></li> <li>Delay     <pre><code>var delay = plane.anims.delay;\n</code></pre></li> <li>Repeat<ul> <li>Total repeat count     <pre><code>var repeatCount = plane.anims.repeat;\n</code></pre></li> <li>Repeat counter     <pre><code>var repeatCount = plane.anims.repeatCounter;\n</code></pre></li> <li>Repeat delay     <pre><code>var repeatDelay = plane.anims.repeatDelay;\n</code></pre></li> <li>Yoyo     <pre><code>var repeatDelay = plane.anims.yoyo;\n</code></pre></li> </ul> </li> <li>Current animation key     <pre><code>var key = plane.anims.getName();\n</code></pre><ul> <li><code>key</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current frame name     <pre><code>var frameName = plane.anims.getFrameName();\n</code></pre><ul> <li><code>frameName</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current animation     <pre><code>var currentAnim = plane.anims.currentAnim;\n</code></pre></li> <li>Current frame     <pre><code>var currentFrame = plane.anims.currentFrame;\n</code></pre></li> </ul>"},{"location":"plane/#interactive","title":"Interactive","text":"<p>To test if pointer is at any face of this mesh game object.</p> <pre><code>plane.setInteractive();\n</code></pre>"},{"location":"plane/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"plane/#checkerboard","title":"Checkerboard","text":"<p>Creates a checkerboard style texture,  based on the given colors and alpha values and applies it to this Plane,  replacing any current texture it may have.</p> <ul> <li>Create     <pre><code>plane.createCheckerboard(color1, color2, alpha1, alpha2, height)\n</code></pre></li> <li>Remove     <pre><code>plane.removeCheckerboard();\n</code></pre></li> </ul>"},{"location":"plane/#other-properties_1","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"plane/#create-mask","title":"Create mask","text":"<pre><code>var mask = plane.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"plane/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"plugin-list/","title":"Plugin list","text":""},{"location":"plugin-list/#list-of-my-plugins","title":"List of my plugins","text":"<p>Version of phaser3</p> <p>Please upgrade your phaser3 to version &gt;= 3.60.0.</p> <ol> <li>Achievements: Achievements in a csv table.</li> <li>Alpha mask image: Load a texture, then apply an alpha mask from another texture.</li> <li>Anchor: Set size and position based on visible window.</li> <li>Arcade-TCRP/Player: Run commands on step of Arcade.</li> <li>Arcade-TCRP/Recorder: Store commands with step of Arcade.</li> <li>AwaitLoader: Await custom task in preload stage.</li> <li>Away time: Get time from previous closing application to now.</li> <li>BBCode-text: Drawing text with BBCode protocol.</li> <li>Board: Core object of Board system.</li> <li>Board/Field of view: Visible testing, to find field of view.</li> <li>Board/Hexagon map: Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid.</li> <li>Board/Match: Get matched chess.</li> <li>Board/Mini board: Chess Container, to rotate/mirror/drag chess together.</li> <li>Board/Monopoly: Move through path tiles.</li> <li>Board/Move To: Move chess towards target position with a steady speed.</li> <li>Board/Path finder: Find moveable area or moving path.</li> <li>Board/Shape: Grid (polygon) shape object.</li> <li>Board/Tilemap: Create board from tilemap.</li> <li>Board/Tile texture: Create canvas-texture of tile.</li> <li>Bounds: Clamp game object inside target bounds.</li> <li>Bracket parser: A lite-weight bracket parser.</li> <li>Bracket parser2: A lite-weight bracket parser.</li> <li>Buff data: Data manager with buffs.</li> <li>Build arcade object: Create arcade body, and inject arcade object methods.</li> <li>Bullet: Move game object toward current angle of game object, with a constant speed.</li> <li>Button: Fires 'click' event when touch releasd after pressed.</li> <li>Canvas: Drawing on canvas.</li> <li>CanvasInput: An invisible Input DOM element to receive character input and display on DynamicText.</li> <li>Canvas/Circular progress: Circular progress bar on canvas.</li> <li>Canvas/Line progress: Horizontal line progress bar filled with gradient color on canvas.</li> <li>Canvas/Round rectangle: Round rectangle on canvas.</li> <li>Canvas image data: Get image data from texture, or text object.</li> <li>Canvas frame manager: Generate bitmapfont from text game object, or bbcode text game object.</li> <li>Circle mask image: Load a texture, then apply a circle mask.</li> <li>Click outside: Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.</li> <li>Clock: A clock to count elapsed time.</li> <li>Character cache: Generate bitmapfont from text game object, or bbcode text game object.</li> <li>Color/TintRGB: Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties to a game object.</li> <li>Conditions table: Check conditions to find passed tests listed in a csv table.</li> <li>ContainerLite: Control the position and angle of children game objects.</li> <li>Containerlite-perspective: Snapshot children of containerlite, to a perspective render texture.</li> <li>Containerlite-skew: Snapshot children of containerlite, to a skew render texture.</li> <li>CSV-scenario: Run script in csv format.</li> <li>CSV-to-hash-table: Hash table indexed by (col-key, row-key) from csv string.</li> <li>Cursor at bound: Map position pf cursor to cursor key state.</li> <li>Curve/Spiral: Spiral curve.</li> <li>Drag: Drag game object.</li> <li>Drag-rotate: Get dragging angle around a specific point.</li> <li>Drop down: Drop down game object below another target game object.</li> <li>Dynamic text: Control position, angle of each character drawn on a canvas.</li> <li>Ease-data: Easing data value of game object's data-manager.</li> <li>Ease-move: Ease-move game object.</li> <li>Effect properties: Attach properties to a game object or camera, to add/remove/control builtin preFX or postFX effects.</li> <li>Eight direction: Move game object by cursor keys, with a constant speed.</li> <li>Event promise: Return a promise of an event.</li> <li>Expression parser: Parse expression string into function.</li> <li>Fade-out-destroy: Fade out game object then destroy it.</li> <li>Fade-volume: Fade-in/fade-out volume of sound.</li> <li>File chooser: Create a transparent file chooser button.</li> <li>File drop zone: Create a div element for dropping file(s).</li> <li>Firebase/Broadcast: Broadcast real-time messages, using firebase-database.</li> <li>Firebase/Files: Save JSON data, using firebase-firestore.</li> <li>Firebase/ID-alias: Map an unique ID to another unique ID, using firebase-firestore.</li> <li>Firebase/Item-table: 1d/2d/3d table, using firebase-database.</li> <li>Firebase/Leaderboard: Descending sort scores, using firebase-firestore.</li> <li>Firebase/Messages: Store messages in firebase-firestore.</li> <li>Firebase/Online-user-list: Online user list, using firebase-database.</li> <li>Firebase/Single-room: Chat room, using firebase-database.</li> <li>Flash: Flashing (set invisible then visible) game object.</li> <li>Flip: Flipping game object to another face by scaling width/height.</li> <li>FSM: Finite state machine.</li> <li>Fuzzy: A wrap of fuzzy logic.</li> <li>Gashapon: Pick random item from box.</li> <li>Geom/Hexagon: Hexagon geometry object.</li> <li>Geom/Rhombus: Rhombus shape and methods.</li> <li>Gesture/Pan: Get pan events of a game object.</li> <li>Gesture/Pinch: Get scale factor from 2 dragging touch pointers.</li> <li>Gesture/Press: Get press events of a game object.</li> <li>Gesture/Rotate: Get spin angle from 2 dragging touch pointers.</li> <li>Gesture/Swipe: Get swipe events of a game object.</li> <li>Gesture/Tap: Get tap/multi-taps events of a game object.</li> <li>Grid align: Align objects on quadrilateral or hexagon grid.</li> <li>Grid cut image: Create image game objects in grids, to assemble target texture.</li> <li>Grid table: Viewer of grid table, to manipulate game object of each visible cell.</li> <li>Hidden input text: An invisible Input DOM element to receive character input and display on text game object.</li> <li>Image box: Keep aspect ratio of image game object after scale-down resizing.</li> <li>Image URI loader: Load image by uri in preload stage.</li> <li>Input text: Input DOM element.</li> <li>Interception: Predict the intersection position of two game objects with constant moving speed.</li> <li>In touching: Fires 'intouch' event every tick when pressing on a game object.</li> <li>Layer manager: A container of Layer game objects.</li> <li>Life time: Destroy game object when time-out.</li> <li>Line: Draw a line with start/end/body textures.</li> <li>Live2d: Display live2d model.</li> <li>Loading-progress: Pop-up dialog for loading-progress, then scale-down this dialog.</li> <li>LocalForage/Files: Save JSON data, using localforage.</li> <li>LocalStorage/Data: Sync data from data manager to local-storage.</li> <li>LZ-string: Compress string using LZ-based compression algorithm.</li> <li>Markdown event sheets: Event sheets contains main condition(s) and actions, in simple markdown format (headings, code block).</li> <li>Modal promise: Modal behavior wrapped into promise.</li> <li>Mouse-wheel to up/down: Map mouse-wheeling to (up/down) cursor key state.</li> <li>Mouse-wheel scroller: Emit scroll event when mouse-wheeling.</li> <li>Move to: Move game object towards target position with a steady speed.</li> <li>Nine patch: Stretchable image.</li> <li>Nine patch2: Stretchable image. Has better performance than nine-patch.</li> <li>Particles-along-bounds: Emit particles along bounds of game object.</li> <li>Particles/Bitmap-zone: Particles' emitter zone from canvas bitmap of text/canvas game object.</li> <li>Path follower: Set position of game object on a path.</li> <li>Perlin: Perlin2/Perlin3 noise and simplex2/simplex3 noise.</li> <li>Perspective/Card: A container with two perspective-images.</li> <li>Perspective/Carousel: A container with cards.</li> <li>Perspective/Image: Image with perspective rotation.</li> <li>Perspective/ImageCarousel: Display list of images.</li> <li>Perspective/Render texture: Render texture with perspective rotation.</li> <li>Perspective/Sprite: Play animation on perspective-image..</li> <li>PNG appender: Append user data below tail of PNG data, or extract this user data from PNG data.</li> <li>polar-coordinate: Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties to a game object.</li> <li>Pop up: Scale up game object.</li> <li>Quad/Image: Image with 4 or 9 vertex control points.</li> <li>Quad/Render texture: Render texture with 4 or 9 vertex control points.</li> <li>Quest: Question manager.</li> <li>Raycaster: Raycaster between obstacles.</li> <li>Random place: Place objects randomly inside an area without overlapping.</li> <li>Real-time timers: Start and counting timer by real-time timestamp.</li> <li>Restorable data: Restorable data manager.</li> <li>RotateTo: Rotate game object towards target position with a steady speed.</li> <li>Rotate: Rotate game object continually with a steady speed.</li> <li>Run-commands: Run commands in array.</li> <li>Scale-down-destroy: Scale down game object then destroy it.</li> <li>Scale outer: Scroll and zoom camera to make default game window fit the display area, in RESIZE scale mode.</li> <li>Script-tag loader: Load script tag in preload stage.</li> <li>Scroller: Drag content. Slow down when dragging released, pull back when out of bounds.</li> <li>Sequence: Run sequence commands in array.</li> <li>Shader/Barrel: Barrel post processing filter.</li> <li>Shader/Color-replace: Replace color post processing filter.</li> <li>Shader/Cross-stitching: Cross-stitching post processing filter.</li> <li>Shader/Dissolve: Dissolve transition post processing filter.</li> <li>Shader/Drop-shadow: Drop-shadow post processing filter.</li> <li>Shader/Fish-eye: Fish-eye post processing filter.</li> <li>Shader/Glow-filter: Glow post processing filter.</li> <li>Shader/Glow-filter: Glow post processing filter, ported from pixi.</li> <li>Shader/Gray-scale: Gray scale post processing filter.</li> <li>Shader/Horri-fi: 6-in-1 post processing filter.</li> <li>Shader/Hsl-adjust: Adjust color in HSL domain, post processing filter.</li> <li>Shader/Inverse: Inverse color post processing filter.</li> <li>Shader/Kawaseblur: Kawase-blur post processing filter.</li> <li>Shader/Outline: Outline post processing filter, ported from pixi.</li> <li>Shader/Pixelation: Pixelation post processing filter.</li> <li>Shader/Shockwave: Shockwave post processing filter.</li> <li>Shader/Split: Split image into 4 parts.</li> <li>Shader/Swirl: Swirl post processing filter.</li> <li>Shader/Toonify: Draw outlines and quantize color in HSV domain, post processing filter.</li> <li>Shader/Warp: Warp post processing filter. </li> <li>Shake-position: Shake position of game object.</li> <li>Shape/Checkbox: Checkbox input with drawing checker path animation.</li> <li>Shape/Circular progress: Circular progress bar shape.</li> <li>Shape/Cover: Rectangle shape covered full window, and block all touch events.</li> <li>Shape/Custom progress: Custom progress bar shape.</li> <li>Shape/Custom shapes: Custom shapes on shape.</li> <li>Shape/Full window rectangle: Rectangle shape covered full window.</li> <li>Shape/Line progress: Horizontal line progress bar shape.</li> <li>Shape/Round-Rectangle: Round rectangle shape.</li> <li>Shape/Spinner: Loading animations on shape.</li> <li>Shape/Toggle-switch: Toggle-switch input.</li> <li>Shape/Triangle: Trangle shape inside a rectangle bounds.</li> <li>Shatter/Image: Shatter image to triangle faces.</li> <li>Shatter/Render texture: Shatter render texture to triangle faces.</li> <li>Ship: Move game object as a space ship by cursor keys.</li> <li>Skew/Image: Skewable Image.</li> <li>Skew/RenderTexture: Skewable render texture.</li> <li>Slider: Drag thumb on a slider bar.</li> <li>State manager: Another version of Finite state machine.</li> <li>Step: Interpolate points between previous position and current position with fixed step length.</li> <li>Tag-player: Text commands to control sprites, texts, sound effect or backgroun music.</li> <li>Tag-text: Displays text with multi-color, font face, or font size with tags.</li> <li>TCRP/Player: Run commands on time.</li> <li>TCRP/Recorder: Store commands with time.</li> <li>Text/Edit: Create an input text object above a text object to edit string content.</li> <li>Text/Typing: Typing text on text object.</li> <li>Text/Page: Display text page by page on text object.</li> <li>Text/Translation: Apply translated string (i18next) to text object.</li> <li>Text player: Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.</li> <li>Touch event stop: Stop touch events propagation.</li> <li>Touch state: Store current touch input properties.</li> <li>Transition image: Transit texture to another one.</li> <li>Transition image pack: Transit texture to another one, with some pre-build effects.</li> <li>UI/Badge label: A container with badges above a main item.</li> <li>UI/Buttons: A container with a group of buttons.</li> <li>UI/Chart: Draw chart on canvas.</li> <li>UI/Color components: Edit color value by RGB, or HSV input fields.</li> <li>UI/Color input: Color value input field.</li> <li>UI/Color picker: Pick color value from H and SV palettes.</li> <li>UI/Confrim dialog: Using json style to create confirm dialog.</li> <li>UI/Dialog: A container with a title, content, buttons and backgrounds.</li> <li>UI/Drop down list: A label can open a drop-down list panel.</li> <li>UI/File selector button: A transparent file chooser button above a Label.</li> <li>UI/Fixwidthbuttons: A container with a group of fix-width buttons.</li> <li>UI/Fixwidthsizer: Layout children game objects into lines.</li> <li>UI/Folder: A container with a title, foldable child, and background.</li> <li>UI/Grid buttons: A container with a group of buttons in grids.</li> <li>UI/Grid sizer: Layout children game objects in grids.</li> <li>UI/Gird table: A container with a grid table, slider, and scroller.</li> <li>UI/Holy grail: Layout elements in Holy grail style.</li> <li>UI/Knob: A knob button based on circular progress.</li> <li>UI/Label: A game object container with an icon, text, and background.</li> <li>UI/Menu: A container with buttons and sub-menu.</li> <li>UI/Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, 1d an icon, background.</li> <li>UI/Number bar: A container with an icon, slider, text, and background.</li> <li>UI/Overlap sizer: Layout children game objects overlapped.</li> <li>UI/Pages: A container with pages, only current page is visible.</li> <li>UI/Perspective card: A container with front and back faces.</li> <li>UI/Scroll-able panel: A container with a panel, slider, and scroller.</li> <li>UI/Scroll bar: A container with slider, two buttons, and background.</li> <li>UI/Simple drop down list: Using plain object to create drop down list.</li> <li>UI/Simple label: Using json style to create label.</li> <li>UI/Sizer: Layout children game objects.</li> <li>UI/Slider: A container with a track, indicator, thumb and background.</li> <li>UI/States image: Using plain object to create image game object, with active, hover, disable styles.</li> <li>UI/States round-rectangle: Using plain object to create round rectangle game object, with active, hover, disable styles.</li> <li>UI/States text: Using plain object to create text game object, with active, hover, disable styles.</li> <li>UI/Tab-pages: A container with tabs and pages, only current page is visible.</li> <li>UI/Tabs: A container with 4 groups of buttons around a center panel.</li> <li>UI/Text area: A container with a text, slider, and scroller.</li> <li>UI/Text box: A container with an icon, (typing and paging) text, and background.</li> <li>UI/Title label: A container with title, text in two rows, and an icon, background.</li> <li>UI/Toast: Show text message for a short while.</li> <li>UI/Tweaker: Fine-tuning properties of target object.</li> <li>Unique item list: List of unique items. Support array and set methods.</li> <li>Viewport-coordinate: Attach <code>vpx</code>, <code>vpy</code> properties to a game object, to set position according to proportion of viewport.</li> <li>Virtual joystick: Simulate cursor keys according to touch events.</li> <li>Wait events: Wait fired events or callbacks.</li> <li>Webfont-loader: Load web font by google webfont loader in preload stage.</li> <li>XOR: Encrypt or decrypt string by XOR algorithm.</li> <li>YML-Achievements: Achievements in a YAML table.</li> <li>YML-Conditions table: Check conditions to find passed tests listed in a YAML table.</li> <li>Youtube player: Play youtube video on iframe.</li> </ol>"},{"location":"pluginsystem/","title":"Plugin system","text":""},{"location":"pluginsystem/#introduction","title":"Introduction","text":"<p>Plugin system, built-in system of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"pluginsystem/#usage","title":"Usage","text":""},{"location":"pluginsystem/#global-plugin","title":"Global plugin","text":""},{"location":"pluginsystem/#load-plugin","title":"Load plugin","text":"<ul> <li>Load plugin before any scene start     In game configuration <pre><code>// import pluginKlass from '...';\nvar config = {\n// ...\nplugins: {\nglobal: [\n{\nkey: key,\nplugin: pluginKlass,\nstart: true\n// mapping: memberName  // member name in each scene instance, optional\n// data: undefined\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>pluginKlass</code> : Class instance</li> <li><code>start</code> : Whether the plugin should be started automatically.</li> <li><code>mapping</code> : If this plugin is to be injected into the Scene Systems, this is the property key map used.</li> <li><code>data</code> : Arbitrary data passed to the plugin's <code>init()</code> method.</li> </ul> </li> <li>Load plugin in scene     <pre><code>scene.load.plugin(key, url, true);\n// scene.load.plugin(key, url, true, mapping);\n</code></pre><ul> <li><code>url</code> : File url or class instance.</li> </ul> </li> </ul>"},{"location":"pluginsystem/#get-instance","title":"Get instance","text":"<pre><code>var pluginInst = scene.plugins.get(key);\n</code></pre>"},{"location":"pluginsystem/#scene-plugin","title":"Scene plugin","text":""},{"location":"pluginsystem/#load-plugin_1","title":"Load plugin","text":"<ul> <li>Load plugin before any scene start     In game configuration <pre><code>// import pluginKlass from '...';\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: key,\nplugin: pluginKlass,\nmapping: sceneKey,    // member name in each scene instance\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>pluginKlass</code> : Class instance</li> </ul> </li> <li>Load plugin in scene     <pre><code>scene.load.scenePlugin(key, url, systemKey, sceneKey);\n</code></pre><ul> <li><code>url</code> : File url or class instance.</li> </ul> </li> </ul>"},{"location":"pluginsystem/#get-instance_1","title":"Get instance","text":"<pre><code>var pluginInst = scene[sceneKey];\n</code></pre>"},{"location":"pluginsystem/#plugin-cache","title":"Plugin cache","text":"<ul> <li>Has custom plugin     <pre><code>var hasPlugin = Phaser.Plugins.PluginCache.hasCustom(key);\n</code></pre></li> </ul>"},{"location":"png-appender/","title":"PNG Appender","text":""},{"location":"png-appender/#introduction","title":"Introduction","text":"<p>Append user data below tail of PNG data, or extract this user data from PNG data.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"png-appender/#live-demos","title":"Live demos","text":"<ul> <li>Append-extract</li> </ul>"},{"location":"png-appender/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"png-appender/#install-plugin","title":"Install plugin","text":""},{"location":"png-appender/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpngappenderplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpngappenderplugin.min.js', true);\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = scene.plugins.get('rexpngappenderplugin').append(pngBuffer, data);\nvar data = scene.plugins.get('rexpngappenderplugin').extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PNGAppenderPlugin from 'phaser3-rex-plugins/plugins/pngappender-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPNGAppender',\nplugin: PNGAppenderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = scene.plugins.get('rexPNGAppender').append(pngBuffer, data);\nvar data = scene.plugins.get('rexPNGAppender').extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PNGAppender from 'phaser3-rex-plugins/plugins/pngappender.js';\n</code></pre></li> <li>Append, or extract data     <pre><code>var resultBuffer = PNGAppender.append(pngBuffer, data);\nvar data = PNGAppender.extract(pngBuffer);\n</code></pre></li> </ul>"},{"location":"png-appender/#append-data","title":"Append data","text":"<pre><code>var resultBuffer = scene.plugins.get('rexPNGAppender').append(pngBuffer, data);\n</code></pre> <ul> <li><code>pngBuffer</code> : PNG data loaded from binary loader.</li> <li><code>data</code> : JSON. dictionary, array, string, number, or Uint8Array.</li> <li><code>resultBuffer</code> : PNG data with custom data (<code>data</code>). <ul> <li>Can add to texture cache via <code>scene.load.image(...)</code><ol> <li>Create blob from <code>resultBuffer</code> : <code>var blob = new Blob([buffer], { type: 'image/png' })</code></li> <li>Create object url from blob : <code>var url = window.URL.createObjectURL(blob)</code></li> <li>Load texture from object url : <code>scene.load.image(textureKey, url)</code></li> <li>Start loader if in create stage of scene : <code>scene.load.start()</code></li> </ol> </li> <li>Can download and display on image viewer as normal PNG file.</li> </ul> </li> </ul>"},{"location":"png-appender/#extract-data","title":"Extract data","text":"<pre><code>var data = scene.plugins.get('rexPNGAppender').extract(pngBuffer);\n</code></pre> <ul> <li><code>pngBuffer</code> : PNG data loaded from binary loader.</li> <li><code>data</code> : User data.<ul> <li><code>null</code> : This <code>pngBuffer</code> does not have user data.</li> </ul> </li> </ul>"},{"location":"point-light/","title":"Point light","text":""},{"location":"point-light/#introduction","title":"Introduction","text":"<p>A point light with gradient color in a circle.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"point-light/#usage","title":"Usage","text":""},{"location":"point-light/#add-point-light","title":"Add point light","text":"<pre><code>var pointLight = scene.add.pointlight(x, y, color, radius, intensity, attenuation);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical position of this Game Object in the world.</li> <li><code>color</code> : Color of this light.</li> <li><code>radius</code> : Radius of this light.</li> <li><code>intensity</code> : <code>0</code>~<code>1</code>, intensity of color.</li> <li><code>attenuation</code> : <code>0</code>~<code>1</code>, decay intensity along radius.</li> </ul>"},{"location":"point-light/#position","title":"Position","text":"<ul> <li>Set     <pre><code>pointLight.setPosition(x, y);\n</code></pre>     or     <pre><code>pointLight.x = x;\npointLight.y = y;\n</code></pre></li> <li>Get     <pre><code>var x = pointLight.x;\nvar y = pointLight.y;\n</code></pre></li> </ul>"},{"location":"point-light/#color","title":"Color","text":"<ul> <li>Set<ul> <li>Red, green, blue     <pre><code>pointLight.color.set(red, green, blue);\n</code></pre>     or     <pre><code>pointLight.color.r = red;\npointLight.color.g = green;\npointLight.color.b = blue;\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> <li>Get<ul> <li>Red, green, blue     <pre><code>var red = pointLight.color.r;\nvar green = pointLight.color.g;\nvar blue = pointLight.color.b;\n</code></pre><ul> <li><code>red</code>, <code>green</code>, <code>blue</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"point-light/#radius","title":"Radius","text":"<ul> <li>Set     <pre><code>pointLight.radius = radius;\n</code></pre></li> <li>Get     <pre><code>var radius = pointLight.radius;\n</code></pre></li> </ul>"},{"location":"point-light/#intensity","title":"Intensity","text":"<ul> <li>Set     <pre><code>pointLight.intensity = intensity;\n</code></pre></li> <li>Get     <pre><code>var intensity = pointLight.intensity;\n</code></pre></li> </ul>"},{"location":"point-light/#attenuation","title":"Attenuation","text":"<ul> <li>Set     <pre><code>pointLight.attenuation = attenuation;\n</code></pre></li> <li>Get     <pre><code>var attenuation = pointLight.attenuation;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/","title":"Polar-coordinate","text":""},{"location":"polar-coordinate/#introduction","title":"Introduction","text":"<p>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties to a game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"polar-coordinate/#live-demos","title":"Live demos","text":"<ul> <li>Circle</li> <li>Spiral</li> </ul>"},{"location":"polar-coordinate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"polar-coordinate/#install-plugin","title":"Install plugin","text":""},{"location":"polar-coordinate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpolarcoordinateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpolarcoordinateplugin.min.js', true);\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>scene.plugins.get('rexpolarcoordinateplugin').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PolarCoordinatePlugin from 'phaser3-rex-plugins/plugins/polarcoordinate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPolarCoordinate',\nplugin: PolarCoordinatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>scene.plugins.get('rexPolarCoordinate').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddPolarCoordinateProperties from 'phaser3-rex-plugins/plugins/polarcoordinate.js';\n</code></pre></li> <li>Attach <code>polarOX</code>, <code>polarOY</code>, <code>polarRotation</code>, <code>polarAngle</code>, and <code>polarRadius</code> properties.     <pre><code>AddPolarCoordinateProperties(gameObject, ox, oy, rotation, radius);\ngameObject.polarOX = 400;\ngameObject.polarOY = 300;\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre></li> </ul>"},{"location":"polar-coordinate/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexPolarCoordinate').add(gameObject, ox, oy, rotation, radius);\ngameObject.polarOX = 400;\ngameObject.polarOY = 300;\ngameObject.polarRadius = 200;\ngameObject.polarAngle = -45;\n</code></pre> <ul> <li><code>ox</code>, <code>oy</code> : Position of origin point.</li> <li><code>rotation</code> : Polar angle, in radian.</li> <li><code>radius</code> : Polar radius.</li> </ul> <pre><code>x = ( polarRadius * cos(polarRotation) ) + polarOX\ny = ( polarRadius * sin(polarRotation) ) + polarOY\n</code></pre>"},{"location":"polar-coordinate/#circle","title":"Circle","text":"<pre><code>scene.tweens.add({\ntargets: gameObject,\npolarAngle: 360,\nduration: 3000\n})\n</code></pre>"},{"location":"popup/","title":"Pop up","text":""},{"location":"popup/#introduction","title":"Introduction","text":"<p>Scale up from <code>0</code> to current scale of game object.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"popup/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"popup/#install-plugin","title":"Install plugin","text":""},{"location":"popup/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscaleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleplugin.min.js', true);\n</code></pre></li> <li>Pop-up object     <pre><code>scene.plugins.get('rexscaleplugin').popup(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScalePlugin from 'phaser3-rex-plugins/plugins/scale-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScale',\nplugin: ScalePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Pop-up object     <pre><code>scene.plugins.get('rexScale').popup(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import PopUp from 'phaser3-rex-plugins/plugins/popup.js';\n</code></pre></li> <li>Pop-up object     <pre><code>PopUp(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"popup/#pop-up","title":"Pop up","text":"<ul> <li>Pop up width and height     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration);\n// var scale = popUp(gameObject, duration, undefined, ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop up width only     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration, 'x');\n// var scale = popUp(gameObject, duration, 'x', ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop up height only     <pre><code>var scale = scene.plugins.get('rexScale').popup(gameObject, duration, 'y');\n// var scale = popUp(gameObject, duration, 'y', ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> </ul>"},{"location":"popup/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>scale.on('complete', function(gameObject, scale){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/","title":"Post fx pipeline","text":""},{"location":"postfx-pipeline/#introduction","title":"Introduction","text":"<p>Post fx pipelines for game objects or camera.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>All kinds of post fx pipelines only work in WebGL render mode.</p>"},{"location":"postfx-pipeline/#usage","title":"Usage","text":""},{"location":"postfx-pipeline/#post-fx-pipeline-class","title":"Post fx pipeline class","text":"<pre><code>class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {\nconstructor(game) {\nsuper({\ngame: game,\nrenderTarget: true,\nfragShader: '...',  // GLSL shader\nuniforms: []\n});\n}\n\nonPreRender() {\nthis.set1f('intensity', this._intensity);\n}\n\nonDraw(renderTarget) {\n}\n}\n</code></pre>"},{"location":"postfx-pipeline/#set-uniform-values","title":"Set uniform values","text":"<ul> <li>Property with 1 value<ul> <li>Float     <pre><code>pipelineInstance.set1f(name, value0);\n// pipelineInstance.set1f(name, value0, shader);\n</code></pre></li> <li>uniform1fv     <pre><code>pipelineInstance.set1fv(name, value0);\n// pipelineInstance.set1fv(name, value0, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set1i(name, value0);\n// pipelineInstance.set1i(name, value0, shader);\n</code></pre></li> </ul> </li> <li>Property with 2 values<ul> <li>Float     <pre><code>pipelineInstance.set2f(name, value0, value1);\n// pipelineInstance.set2f(name, value0, value1, shader);\n</code></pre></li> <li>uniform2fv     <pre><code>pipelineInstance.set2fv(name, value0, value1);\n// pipelineInstance.set2fv(name, value0, value1, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set2i(name, value0, value1);\n// pipelineInstance.set2i(name, value0, value1, shader);\n</code></pre></li> </ul> </li> <li>Property with 3 value<ul> <li>Float     <pre><code>pipelineInstance.set3f(name, value0, value1, value2);\n// pipelineInstance.set3f(name, value0, value1, value2, shader);\n</code></pre></li> <li>uniform3fv     <pre><code>pipelineInstance.set3fv(name, value0, value1, value2);\n// pipelineInstance.set3fv(name, value0, value1, value2, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set3i(name, value0, value1, value2);\n// pipelineInstance.set3i(name, value0, value1, value2, shader);\n</code></pre></li> </ul> </li> <li>Property with 4 values<ul> <li>Float     <pre><code>pipelineInstance.set4f(name, value0, value1, value2, value3);\n// pipelineInstance.set4f(name, value0, value1, value2, value3, shader);\n</code></pre></li> <li>uniform4fv     <pre><code>pipelineInstance.set4fv(name, value0, value1, value2, value3);\n// pipelineInstance.set4fv(name, value0, value1, value2, value3, shader);\n</code></pre></li> <li>Int     <pre><code>pipelineInstance.set4i(name, value0, value1, value2, value3);\n// pipelineInstance.set4i(name, value0, value1, value2, value3, shader);\n</code></pre></li> </ul> </li> </ul>"},{"location":"postfx-pipeline/#onprerender","title":"onPreRender","text":"<ul> <li>Set uniform values in <code>onPreRender</code> method.</li> </ul>"},{"location":"postfx-pipeline/#ondraw","title":"onDraw","text":"<ul> <li>Ping-pong drawing<ul> <li>Variables : <ul> <li><code>renderTarget</code> : Render target, parameter of <code>onDraw</code> method.</li> <li><code>pipelineInstance.fullFrame1</code>, <code>pipelineInstance.fullFrame2</code> : Ping-pong render texture.</li> </ul> </li> <li>Steps<ol> <li>Copy frame to <code>pipelineInstance.fullFrame1</code> <pre><code>pipelineInstance.copyFrame(source, target);\n// pipelineInstance.copyFrame(source, target, brightness, clear, clearAlpha);\n</code></pre></li> <li>Set uniform values</li> <li>Bind and draw on <code>pipelineInstance.fullFrame1</code>, <code>pipelineInstance.fullFrame2</code>.     <pre><code>pipelineInstance.bindAndDraw(source, target);\n// pipelineInstance.bindAndDraw(source, target, clear, clearAlpha, shader);\n</code></pre></li> <li>Draw result back     <pre><code>pipelineInstance.bindAndDraw(source);\n</code></pre></li> </ol> </li> </ul> </li> </ul>"},{"location":"postfx-pipeline/#register-post-fx-pipeline","title":"Register post-fx pipeline","text":"<ul> <li>Register post-fx pipeline in game config     <pre><code>import MyPostFxClass from 'path';\nvar config = {\n// ...\npipeline: [MyPostFxClass]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Or register post-fx pipeline at runtime     <pre><code>var pipelineManager = scene.sys.renderer.pipelines;\npipelineManager.addPostPipeline(PostFxName, MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(MyPostFxClass);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#get-post-fx-pipeline","title":"Get post-fx pipeline","text":"<ul> <li>Get post-fx pipeline from game ovject     <pre><code>var pipelineInstance = gameObject.getPostPipeline(MyPostFxClass);\n</code></pre></li> <li>Get post-fx pipeline from camera     <pre><code>var pipelineInstance = camera.getPostPipeline(MyPostFxClass);\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#remove-post-fx-pipeline","title":"Remove post-fx pipeline","text":"<pre><code>gameObject.removePostPipeline(MyPostFxClass);\n</code></pre>"},{"location":"postfx-pipeline/#unregister-post-fx-pipeline","title":"Unregister post-fx pipeline","text":"<pre><code>var pipelineManager = scene.sys.renderer.pipelines;\npipelineManager.remove(PostFxName);\n</code></pre>"},{"location":"postfx-pipeline/#color-matrix","title":"Color matrix","text":"<p>Use color martix to change RGB render result, and more...</p> <pre><code>class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {\nconstructor(game) {\nsuper({\ngame: game,\nrenderTarget: true,\nfragShader: '...',  // GLSL shader\nuniforms: []\n});\n}\n\nonPreRender() {\n// this.set1f('intensity', this._intensity);\nthis.colorMatrix.grayscale(this._intensity);\n}\n\nonDraw(renderTarget) {\nthis.colorMatrix.grayscale(this._intensity);\nthis.drawFrame(renderTarget, this.fullFrame1);\nthis.bindAndDraw(this.fullFrame1);\n}\n}\n</code></pre>"},{"location":"postfx-pipeline/#color-adjusting","title":"Color adjusting","text":"<p>Invoke before <code>drawFrame()</code>.</p> <ul> <li>Grayscale     <pre><code>this.colorMatrix.grayscale(value);\n// this.colorMatrix.grayscale(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> <li>Night vision tone     <pre><code>this.colorMatrix.night(value);\n// this.colorMatrix.night(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> <li>Sepia tone     <pre><code>this.colorMatrix.sepia();\n// this.colorMatrix.sepia(true); // Cascade\n</code></pre></li> <li>Trippy color tone     <pre><code>this.colorMatrix.lsd();\n// this.colorMatrix.lsd(true); // Cascade\n</code></pre></li> <li>Brown tone     <pre><code>this.colorMatrix.brown();\n// this.colorMatrix.brown(true); // Cascade\n</code></pre></li> <li>Vintage pinhole color effect     <pre><code>this.colorMatrix.vintagePinhole();\n// this.colorMatrix.vintagePinhole(true); // Cascade\n</code></pre></li> <li>Kodachrome color effect     <pre><code>this.colorMatrix.kodachrome();\n// this.colorMatrix.kodachrome(true); // Cascade\n</code></pre></li> <li>Technicolor color effect     <pre><code>this.colorMatrix.technicolor();\n// this.colorMatrix.technicolor(true); // Cascade\n</code></pre></li> <li>Polaroid color effect     <pre><code>this.colorMatrix.polaroid();\n// this.colorMatrix.polaroid(true); // Cascade\n</code></pre></li> <li>Brightness     <pre><code>this.colorMatrix.brightness(value);\n// this.colorMatrix.brightness(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>0</code>(black) ~ <code>1</code></li> </ul> </li> <li>Saturation     <pre><code>this.colorMatrix.saturate(value);\n// this.colorMatrix.saturate(value, true); // Cascade\n</code></pre><ul> <li><code>value</code> : <code>-1</code> ~ <code>1</code></li> </ul> </li> <li>Desaturate     <pre><code>this.colorMatrix.desaturate();\n// this.colorMatrix.desaturate(true); // Cascade\n</code></pre></li> <li>Hue     <pre><code>this.colorMatrix.hue(rotation);\n// this.colorMatrix.hue(rotation, true); // Cascade\n</code></pre><ul> <li><code>rotation</code> : Hue rotation, in degree.</li> </ul> </li> <li>Black and white     <pre><code>this.colorMatrix.blackWhite();\n// this.colorMatrix.blackWhite(true); // Cascade\n</code></pre></li> <li>Negative     <pre><code>this.colorMatrix.negative();\n// this.colorMatrix.negative(true); // Cascade\n</code></pre></li> <li>Contrast     <pre><code>this.colorMatrix.contrast(value);\n// this.colorMatrix.contrast(value, true); // Cascade\n</code></pre></li> <li>Desaturate luminance     <pre><code>this.colorMatrix.desaturateLuminance();\n// this.colorMatrix.desaturateLuminance(true); // Cascade\n</code></pre></li> <li>Shifts RGB to BGR order     <pre><code>this.colorMatrix.shiftToBGR();\n// this.colorMatrix.shiftToBGR(true); // Cascade\n</code></pre></li> </ul>"},{"location":"postfx-pipeline/#draw","title":"Draw","text":"<p>Invoke under <code>onDraw(renderTarget)</code>.</p> <pre><code>this.drawFrame(renderTarget, this.fullFrame1);\nthis.bindAndDraw(this.fullFrame1);\n</code></pre>"},{"location":"quad-image/","title":"Image","text":""},{"location":"quad-image/#introduction","title":"Introduction","text":"<p>Image with 4 or 9 vertex control points.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"quad-image/#live-demos","title":"Live demos","text":"<ul> <li>Quad image</li> <li>Nine points</li> </ul>"},{"location":"quad-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quad-image/#install-plugin","title":"Install plugin","text":""},{"location":"quad-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadImage } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new QuadImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"quad-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexQuadImage(x, y, texture, frame, {\n// ninePointMode: false,\n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexQuadImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n// ninePointMode: false,\n// rtl: false\n});\n</code></pre> <ul> <li><code>ninePointMode</code> :<ul> <li><code>true</code> : Add 9 vertex control points.</li> <li><code>false</code> : Add 4 vertex control points. Default behavior.</li> </ul> </li> <li><code>rtl</code> : Diagonal direction in 4 vertices mode.<ul> <li><code>true</code> : Diagonal from right to left</li> <li><code>false</code> : Diagonal from left to right. Default behavior.</li> </ul> </li> </ul> <p>Add quadimage from JSON</p> <pre><code>var quadimage = scene.make.rexQuadImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\n// ninePointMode: false,\n// rtl: false\n\nadd: true\n});\n</code></pre>"},{"location":"quad-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyQuadImage extends QuadImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyQuadImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"quad-image/#vertex-control-points","title":"Vertex control points","text":"<ul> <li>Array of vertex control points     <pre><code>var controlPoints = image.controlPoints;\n</code></pre><ul> <li>4, or 9 vertex control points</li> </ul> </li> <li>4 vertex control points     <pre><code>var topLeftPoint = image.topLeft;         // image.controlPoints[0]\nvar topRightPoint = image.topRight;       // image.controlPoints[1]\nvar bottomLeftPoint = image.bottomLeft;   // image.controlPoints[2]\nvar bottomRightPoint = image.bottomRight; // image.controlPoints[3]\n</code></pre></li> <li>9 vertex control points     <pre><code>var topLeft = image.topLeft;               // image.controlPoints[0]\nvar topCenter = image.topCenter;           // image.controlPoints[1]\nvar topRight = image.topRight;             // image.controlPoints[2]\nvar centerLeft = image.centerLeft;         // image.controlPoints[3]\nvar center = image.center;                 // image.controlPoints[4]\nvar centerRight = image.centerRight;       // image.controlPoints[5]\nvar bottomLeft = image.bottomLeft;         // image.controlPoints[6]\nvar bottomCenter = image.bottomCenter;     // image.controlPoints[7]\nvar bottomRight = image.bottomRight;       // image.controlPoints[8]\n</code></pre></li> </ul>"},{"location":"quad-image/#position","title":"Position","text":"<ul> <li>Get     <pre><code>var worldXY = controlPoint.getWorldXY();\nvar x = worldXY.x;\nvar y = worldXY.y;\n</code></pre>     or     <pre><code>var x = controlPoint.x;\nvar y = controlPoint.y;\n</code></pre></li> <li>Set     <pre><code>controlPoint.setPosition(x, y);\n// controlPoint.setWorldXY(x, y);\n</code></pre>     or     <pre><code>controlPoint.x = x;\ncontrolPoint.y = y;\n</code></pre></li> </ul>"},{"location":"quad-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"quad-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"quad-image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"quad-image/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"quad-rendertexture/","title":"Render texture","text":""},{"location":"quad-rendertexture/#introduction","title":"Introduction","text":"<p>Render texture with 4 or 9 vertex control points.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"quad-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"quad-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quad-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"quad-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexQuadRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexQuadRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { QuadRenderTexture } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new QuadRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexQuadRenderTexturege(x, y, width, height, {\n// hideCCW: true,\n// ninePointMode: false,\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexQuadRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// hideCCW: true,\n// ninePointMode: false,\n});\n</code></pre> <ul> <li><code>ninePointMode</code> :<ul> <li><code>true</code> : Add 9 vertex control points.</li> <li><code>false</code> : Add 4 vertex control points. Default behavior.</li> </ul> </li> </ul> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexQuadRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// hideCCW: false,\n// ninePointMode: false,\n\nadd: true\n});\n</code></pre>"},{"location":"quad-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyQuadRenderTexturege extends QuadRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyQuadRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"quad-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"quad-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> <li>Snapshop game objects     <pre><code>image.snapshot(gameObjects);\n</code></pre><ul> <li><code>gameObjects</code> : Array of game objects.</li> </ul> </li> </ul>"},{"location":"quad-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"quad-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"quad-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"quad-rendertexture/#other-properties","title":"Other properties","text":"<p>See Quad image game object, Mesh game object, game object</p>"},{"location":"quad-rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"quad-rendertexture/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"quest/","title":"Quest","text":""},{"location":"quest/#introduction","title":"Introduction","text":"<p>Question manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"quest/#live-demos","title":"Live demos","text":"<ul> <li>(CSV) Branch</li> <li>(YAML) Branch</li> <li>Shuffle</li> </ul>"},{"location":"quest/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"quest/#install-plugin","title":"Install plugin","text":""},{"location":"quest/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true);\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = scene.plugins.get('rexquestplugin').add(config);\n</code></pre></li> </ul>"},{"location":"quest/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuestPlugin from 'phaser3-rex-plugins/plugins/quest-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuest',\nplugin: QuestPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = scene.plugins.get('rexQuest').add(config);\n</code></pre></li> </ul>"},{"location":"quest/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Quest from 'phaser3-rex-plugins/plugins/quest.js';\n</code></pre></li> <li>Add quest-manager object     <pre><code>var questionManager = new Quest(config);\n</code></pre></li> </ul>"},{"location":"quest/#question-manager","title":"Question manager","text":""},{"location":"quest/#create-question-manager-instance","title":"Create question manager instance","text":"<pre><code>var questionManager = scene.plugins.get('rexQuest').add({\nquestions: undefined,\n// format: undefined,\n// delimiter: ',',\n// types: {\n//     question: 'q',\n//     option: '',\n// },\n// convert: true,\n\nquest: undefined,\n// quest: {\n//     shuffleQuestions: false,\n//     shuffleOptions: false,\n// }\n});\n</code></pre> <ul> <li><code>format</code> : Input data (parameter <code>question</code>) format.<ul> <li><code>'csv'</code> : Input data is a csv string</li> <li><code>'yaml'</code> : Input data is a yaml string represented multiple documents, or an array of yaml string for each document.</li> <li><code>'json'</code> : Input data is a json string.</li> <li><code>undefined</code> : Input data is a plain array of questions, don' parse it.</li> </ul> </li> <li><code>questions</code> : Input data of questions.<ul> <li>A plain array of questions. Parsing result of other input formats.     <pre><code>[\n{\nkey: q0,\nparam0: value0,\nparam1: value1,\nparam2: value2,\noptions: [\n{\nkey: o0,\nparam0: value0,\nparam1: value1,\n// ...\n},\n{\nkey: o1,\nparam0: value0,\nparam1: value1,\n// ...\n}\n]\n},\n{\nkey: q1,\nparam0: value0,\nparam1: value1,\nparam2: value2,\noptions: [\n{\nkey: o0,\nparam0: value0,\nparam1: value1,\n// ...\n},\n{\nkey: o1,\nparam0: value0,\nparam1: value1,\n// ...\n}\n]\n},\n]\n</code></pre><ul> <li>Question object : <code>{key, options, param, ...}</code><ul> <li><code>key</code> : An unique key string. Create a key string <code>'_' + serialNumber</code> if not given.</li> <li><code>options</code> : An array of option objects.</li> <li>Other key-value parameters.</li> </ul> </li> <li>Option object : <code>{key, param, ...}</code><ul> <li><code>key</code> : An unique key string. Create a key string <code>'_' + serialNumber</code> if not given.</li> <li>Other key-value parameters.</li> </ul> </li> </ul> </li> <li>A yaml string represented multiple documents, will parse it to array of questions.     <pre><code>key: q0\nparam0: value0\nparam1: value1\noptions:\n- key: o0\nparam0: value0\nparam1: value1\n- key: o1\nparam0: value0\nparam1: value1\n---\nkey: q1\nparam0: value0\nparam1: value1\noptions:\n- key: o0\nparam0: value0\nparam1: value1\n- key: o1\nparam0: value0\nparam1: value1\n</code></pre></li> <li>An array of yaml strings for each document, will parse them to array of questions.   </li> <li>A csv string, will parse it to array of questions.     <pre><code>type,key,param0,param1,...\nq,q0,value0,value1,...\n,o0,value0,value1,...\n,o1,value0,value1,...\nq,q1,value0,value1,...\n,o0,value0,value1,...\n,o1,value0,value1,...\n</code></pre><ul> <li>Fields in first row<ul> <li><code>type</code> : Type of this row. These values can be redefined via <code>types</code> in configuration object.</li> <li><code>q</code> : A row of question object.</li> <li>Empty string : A row of option object belong a question object.</li> <li><code>key</code> : Unique key string. Create a key string <code>'_' + serialNumber</code> if this field does not exist.</li> <li>Other fields.</li> </ul> </li> </ul> </li> <li>A json string, will parse it to array of questions.</li> </ul> </li> <li><code>delimiter</code> : Delimiter of csv string. Default value is <code>','</code></li> <li><code>types</code> : Define value of row type.<ul> <li><code>types.question</code> : Define value of question row. Default value is <code>q</code>.</li> <li><code>types.option</code> : Define value of option row. Default value is <code>''</code> (empty string).</li> </ul> </li> <li><code>convert</code> : Convert string values to other types.<ul> <li>Default type converting : Convert string to number, boolean, null, or string<ul> <li><code>'0'</code>, <code>'1'</code>, ... (number string) -&gt; number</li> <li><code>'true'</code>, or <code>'false'</code> -&gt; <code>true</code> or <code>false</code></li> <li><code>''</code> (empty string) -&gt; <code>null</code></li> <li>Others : string.</li> </ul> </li> <li>Set <code>false</code> to ignore types converting, i.e. all values are string.</li> <li>A custom type converting function :     <pre><code>function(stringValue, key) {\n// return value;\n}\n</code></pre></li> </ul> </li> <li><code>quest</code> : Create a private quest task object.<ul> <li><code>undefined</code> : Don't create a private quest task object.</li> <li><code>true</code> : Create a private quest task object with default configuration.</li> <li>Configuration of quest task :<ul> <li><code>quest.shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>quest.shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul> </li> </ul>"},{"location":"quest/#add-questions","title":"Add questions","text":"<pre><code>questionManager.add(questions, config);\n</code></pre> <ul> <li><code>questions</code> : An array of question objects, or a csv string. See <code>questions</code> section in Create question manager instance section.</li> <li><code>config</code> :<ul> <li><code>delimiter</code> : Delimiter of csv string. Default value is <code>','</code></li> <li><code>types</code> : Define value of row type.<ul> <li><code>types.question</code> : Define value of question row. Default value is <code>q</code>.</li> <li><code>types.option</code> : Define value of option row. Default value is <code>''</code> (empty string).</li> </ul> </li> <li><code>convert</code> : Convert string values to other types.<ul> <li>Default type converting : Convert string to number, boolean, null, or string<ul> <li><code>'0'</code>, <code>'1'</code>, ... (number string) -&gt; number</li> <li><code>'true'</code>, or <code>'false'</code> -&gt; <code>true</code> or <code>false</code></li> <li><code>''</code> (empty string) -&gt; <code>null</code></li> <li>Others : string.</li> </ul> </li> <li>Set <code>false</code> to ignore types converting, i.e. all values are string.</li> <li>A custom type converting function :     <pre><code>function(stringValue, key) {\n// return value;\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"quest/#remove-question","title":"Remove question","text":"<ul> <li>Remove a question object     <pre><code>questionManager.remove(key);\n</code></pre><ul> <li><code>key</code> : An unique key string.</li> </ul> </li> <li>Remove all question objects     <pre><code>questionManager.removeAll();\n</code></pre></li> </ul>"},{"location":"quest/#get-question","title":"Get question","text":"<ul> <li>Get a question object     <pre><code>var question = questionManager.get(key);\n</code></pre></li> <li>Get all keys of question objects     <pre><code>var questionKeys = questionManager.getKeys();\n// var out = questionManager.getKeys(out);\n</code></pre><ul> <li><code>questionKeys</code> : Array of question key string.</li> </ul> </li> </ul>"},{"location":"quest/#question-is-existed","title":"Question is existed","text":"<pre><code>var isExisted = questionManager.has(key);\n</code></pre>"},{"location":"quest/#array-of-questions","title":"Array of questions","text":"<pre><code>var questions = questionManager.questions;\n</code></pre> <p>Rearrange items of this <code>questions</code> array to reorder questions in quest task.</p>"},{"location":"quest/#get-option","title":"Get option","text":"<pre><code>var option = questionManager.getOption(question, optionKey);\n</code></pre> <ul> <li><code>question</code> : A question object, or a question key string.</li> <li><code>optionKey</code> : A option key string.</li> </ul>"},{"location":"quest/#private-quest-task","title":"Private quest task","text":""},{"location":"quest/#create-private-quest-task","title":"Create private quest task","text":"<p>Each question manager can hava a private quest task object, created when creating question manager, or</p> <pre><code>questionManager.startQuest(config);\n</code></pre> <ul> <li><code>config</code> : <ul> <li><code>shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul>"},{"location":"quest/#get-next-question-object","title":"Get next question object","text":"<ul> <li>Get next question object     <pre><code>var question = questionManager.getNextQuestion();\n</code></pre></li> <li>Get next question object via question key     <pre><code>var question = questionManager.getNextQuestion(questionKey);\n</code></pre></li> </ul>"},{"location":"quest/#event","title":"Event","text":"<ul> <li>Fire <code>'quest'</code> when calling <code>questionManager.getNextQuestion()</code> <pre><code>questionManager.on('quest', function(question, questionManager, quest){\n// questionManager.getNextQuestion();\n})\n</code></pre><ul> <li><code>question</code> : Question object.<ul> <li><code>question.options</code> : Option objects of this question.</li> </ul> </li> <li><code>questionManager</code> : Question manager.</li> <li><code>quest</code> : Quest task.</li> </ul> </li> </ul>"},{"location":"quest/#is-last-question","title":"Is last question","text":"<pre><code>var isLast = questionManager.isLastQuestion();\n</code></pre>"},{"location":"quest/#restart-quest-task","title":"Restart quest task","text":"<pre><code>questionManager.restartQuest();\n</code></pre>"},{"location":"quest/#private-data","title":"Private data","text":"<ul> <li>Get data     <pre><code>var value = questionManager.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = questionManager.getData();\n</code></pre></li> <li>Set value     <pre><code>questionManager.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>questionManager.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>questionManager.mulData(key, mul, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>questionManager.clearData();\n</code></pre></li> </ul>"},{"location":"quest/#quest-task","title":"Quest task","text":"<p>Create new quest task if user needs more then 1 quest task.</p>"},{"location":"quest/#create-quest-task","title":"Create quest task","text":"<pre><code>var quest = questionManager.newQuest(config);\n</code></pre> <ul> <li><code>config</code> : <ul> <li><code>shuffleQuestions</code> : Set <code>true</code> to shuffle questions.</li> <li><code>shuffleOptions</code> : Set <code>true</code> to shuffle options.</li> </ul> </li> </ul>"},{"location":"quest/#get-next-question-object_1","title":"Get next question object","text":"<ul> <li>Get next question object     <pre><code>var question = quest.getNextQuestion();\n</code></pre></li> <li>Get next question object via question key     <pre><code>var question = quest.getNextQuestion(questionKey);\n</code></pre></li> </ul>"},{"location":"quest/#event_1","title":"Event","text":"<ul> <li>Fire <code>'quest'</code> when calling <code>questionManager.getNextQuestion()</code> <pre><code>quest.on('quest', function(question, questionManager, quest){\n// questionManager.getNextQuestion();\n})\n</code></pre><ul> <li><code>question</code> : Question object.<ul> <li><code>question.options</code> : Option objects of this question.</li> </ul> </li> <li><code>questionManager</code> : Question manager.</li> <li><code>quest</code> : Quest task.</li> </ul> </li> </ul>"},{"location":"quest/#is-last-question_1","title":"Is last question","text":"<pre><code>var isLast = quest.isLastQuestion();\n</code></pre>"},{"location":"quest/#restart-quest-task_1","title":"Restart quest task","text":"<pre><code>quest.start();\n</code></pre>"},{"location":"quest/#private-data_1","title":"Private data","text":"<ul> <li>Get data     <pre><code>var value = quest.getData(key, defaultValue);\n</code></pre></li> <li>Get all data     <pre><code>var data = quest.getData();\n</code></pre></li> <li>Set value     <pre><code>quest.setData(key, value);\n</code></pre></li> <li>Increase value     <pre><code>quest.incData(key, inc, defaultValue);\n</code></pre></li> <li>Multiple value     <pre><code>quest.mulData(key, inc, defaultValue);\n</code></pre></li> <li>Clear all data     <pre><code>quest.clearData();\n</code></pre></li> </ul>"},{"location":"quest/#get-option_1","title":"Get option","text":"<pre><code>var option = quest.getOption(question, optionKey);\n</code></pre> <ul> <li><code>question</code> : A question object, or a question key string, or <code>undefined</code> to get current question object.</li> <li><code>optionKey</code> : A option key string.</li> </ul>"},{"location":"random-data-generator/","title":"Random data generator","text":""},{"location":"random-data-generator/#introduction","title":"Introduction","text":"<p>Get random value from a random generator, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"random-data-generator/#usage","title":"Usage","text":""},{"location":"random-data-generator/#random-data-generator","title":"Random data generator","text":"<ul> <li>Pre-defined random data generator     <pre><code>var rnd = Phaser.Math.RND;\n</code></pre></li> <li>New random generator     <pre><code>var rnd = new Phaser.Math.RandomDataGenerator(seed);\n</code></pre></li> </ul>"},{"location":"random-data-generator/#set-seed","title":"Set seed","text":"<ul> <li>Set seed in game config for pre-defined random data generator     <pre><code>var config = {\n// ...\nseed: seed,\n// ...\n}\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li><code>seed</code> : <ul> <li>An array of string, like <code>[(Date.now() * Math.random()).toString()]</code></li> </ul> </li> </ul> </li> <li>Set seed     <pre><code>rnd.init(seed);\n</code></pre><ul> <li><code>seed</code> : A string or an array of string.</li> </ul> </li> </ul>"},{"location":"random-data-generator/#get-random-value","title":"Get random value","text":"<ul> <li>Random real number between <code>0</code> and <code>1</code>.     <pre><code>var value = rnd.frac();\n</code></pre></li> <li>Random integer between <code>0</code> and <code>2^32</code>.     <pre><code>var value = rnd.integer();\n</code></pre></li> <li>Random real number between 0 and 2^32.     <pre><code>var value = rnd.real();\n</code></pre></li> <li>Random integer between and including min and max.     <pre><code>var value = rnd.between(min, max);\n// var value = rnd.integerInRange(min, max);\n</code></pre></li> <li>Random real number between min and max.     <pre><code>var value = rnd.realInRange(min, max);\n</code></pre></li> <li>Random real number between -1 and 1.     <pre><code>var value = rnd.normal();\n</code></pre></li> <li>Random angle between <code>-180</code> and <code>180</code>.     <pre><code>var angle = rnd.angle();\n</code></pre></li> <li>Random rotation in radians, between <code>-3.141</code> and <code>3.141</code>.     <pre><code>var angle = rnd.rotation();\n</code></pre></li> <li>Random timestamp between min and max.     <pre><code>var timestamp = rnd.timestamp(min, max);\n</code></pre><ul> <li><code>min</code> : Default value is the beginning of 2000.</li> <li><code>max</code> : Default value is the end of 2020.</li> </ul> </li> <li>UUID <pre><code>var uuid = rnd.uuid();\n</code></pre></li> <li>Random sign value     <pre><code>var sign = rnd.sign();\n</code></pre><ul> <li><code>sign</code> : <code>-1</code> or <code>1</code></li> </ul> </li> </ul>"},{"location":"random-data-generator/#get-random-item","title":"Get random item","text":"<ul> <li>Random element from within the given array.     <pre><code>var item = rnd.pick(arr);\n</code></pre></li> <li>Random element from within the given array, favoring the earlier entries.     <pre><code>var item = rnd.weightedPick(arr);\n</code></pre></li> </ul>"},{"location":"random-data-generator/#shuffle-array","title":"Shuffle array","text":"<pre><code>var arr = rnd.shuffle(arr);\n</code></pre>"},{"location":"random/","title":"Random number","text":""},{"location":"random/#introduction","title":"Introduction","text":"<p>Get random value, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"random/#usage","title":"Usage","text":""},{"location":"random/#get-random-value-between-min-max","title":"Get random value between (min, max)","text":"<ul> <li>Random integer     <pre><code>var value = Phaser.Math.Between(min, max);\n</code></pre></li> <li>Random floating point number     <pre><code>var value = Phaser.Math.FloatBetween(min, max);\n</code></pre></li> </ul>"},{"location":"random/#get-random-vector","title":"Get random vector","text":"<ul> <li>2D vector     <pre><code>var vec = Phaser.Math.RandomXY(vec);    // return vec {x, y}\n// var vec = Phaser.Math.RandomXY(vec, scale);\n</code></pre></li> <li>3D vector     <pre><code>var vec = Phaser.Math.RandomXYZ(vec);    // return vec {x, y, z}\n// var vec = Phaser.Math.RandomXYZ(vec, scale);\n</code></pre></li> <li>4D vector     <pre><code>var vec = Phaser.Math.RandomXYZW(vec);    // return vec {x, y, z, w}\n// var vec = Phaser.Math.RandomXYZW(vec, scale);\n</code></pre></li> </ul>"},{"location":"randomplace/","title":"Random place","text":""},{"location":"randomplace/#introduction","title":"Introduction","text":"<p>Place objects randomly inside an area without overlapping.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"randomplace/#live-demos","title":"Live demos","text":"<ul> <li>Random place</li> </ul>"},{"location":"randomplace/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"randomplace/#install-plugin","title":"Install plugin","text":""},{"location":"randomplace/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrandomplaceplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrandomplaceplugin.min.js', true);\n</code></pre></li> <li>Random place objects     <pre><code>scene.plugins.get('rexrandomplaceplugin').randomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RandomPlacePlugin from 'phaser3-rex-plugins/plugins/randomplace-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRandomPlace',\nplugin: RandomPlacePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Random place objects     <pre><code>scene.plugins.get('rexRandomPlace').randomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RandomPlace from 'phaser3-rex-plugins/plugins/randomplace.js';\n</code></pre></li> <li>Random place objects     <pre><code>RandomPlace(gameObjects, config);\n</code></pre></li> </ul>"},{"location":"randomplace/#random-place","title":"Random place","text":"<pre><code>scene.plugins.get('rexRandomPlace').randomPlace(gameObjects, {\nradius: radius,\n\ngetPositionCallback: undefined,\narea: areaGeomObject,\n});\n</code></pre> <ul> <li><code>gameObjects</code> : An array of gameObjects. Each item can be<ul> <li>A game objects.</li> <li>A plain object contains     <pre><code>{\ngameObject: gameObject,\nradius: radius,\n}\n</code></pre><ul> <li><code>radius</code> : Collision radius of this game object.</li> </ul> </li> </ul> </li> <li><code>radius</code> : Default collision radius of each game object.</li> <li><code>getPositionCallback</code> : A callback to get a random position.<ul> <li><code>undefined</code> : Use <code>area.getRandomPoint(out)</code> as callback.</li> <li>A function object :     <pre><code>function(out) {\nout.x = 0;\nout.y = 0;\n}\n</code></pre></li> </ul> </li> <li><code>area</code> : A geom object, which has <code>getRandomPoint</code> method.<ul> <li>A circle : <code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li>A rectangle : <code>new Phaser.Geom.Rectangle(x, y, width, height)</code></li> <li>A triangle : <code>new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3)</code></li> <li>An ellipse : <code>new Phaser.Geom.Ellipse(x, y, width, height)</code></li> <li><code>undefined</code> : A rectangle (0, 0, gameWidth, gameHeight)</li> </ul> </li> </ul>"},{"location":"raycaster/","title":"Raycaster","text":""},{"location":"raycaster/#introduction","title":"Introduction","text":"<p>Raycaster between obstacles.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"raycaster/#live-demos","title":"Live demos","text":"<ul> <li>Reflaction</li> </ul>"},{"location":"raycaster/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"raycaster/#install-plugin","title":"Install plugin","text":""},{"location":"raycaster/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexraycasterplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexraycasterplugin.min.js', true);\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = scene.plugins.get('rexraycasterplugin').add(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RaycasterPlugin from 'phaser3-rex-plugins/plugins/raycaster-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRaycaster',\nplugin: RaycasterPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = scene.plugins.get('rexRaycaster').add(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Raycaster from 'phaser3-rex-plugins/plugins/raycaster.js';\n</code></pre></li> <li>Add raycaster object     <pre><code>var raycaster = new Raycaster(config);\n</code></pre></li> </ul>"},{"location":"raycaster/#create-instance","title":"Create instance","text":"<pre><code>var raycaster = scene.plugins.get('rexRaycaster').add({\n// maxRayLength: 10000\n});\n</code></pre> <ul> <li><code>maxRayLength</code> : Max length of ray.</li> </ul>"},{"location":"raycaster/#obstacle","title":"Obstacle","text":""},{"location":"raycaster/#add","title":"Add","text":"<pre><code>raycaster.addObstacle(gameObject);\n// raycaster.addObstacle(gameObject, polygon);\n</code></pre> <ul> <li><code>polygon</code> : A polygon. <ul> <li><code>undefined</code> : Created polygon from 4 vertics of game object.</li> </ul> </li> </ul> <p>or</p> <pre><code>raycaster.addObstacle(gameObjects);\n</code></pre> <ul> <li><code>gameObjects</code> : Array of game object.</li> </ul>"},{"location":"raycaster/#remove","title":"Remove","text":"<pre><code>raycaster.removeObstacle(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul>"},{"location":"raycaster/#clear","title":"Clear","text":"<pre><code>raycaster.clearObstacle();\n</code></pre>"},{"location":"raycaster/#update-shape","title":"Update shape","text":"<pre><code>raycaster.updateObstacle(gameObject);\n// raycaster.updateObstacle(gameObject, polygon);\n</code></pre> <ul> <li><code>polygon</code> : A polygon. <ul> <li><code>undefined</code> : Created polygon from 4 vertics of game object.</li> </ul> </li> </ul>"},{"location":"raycaster/#raycaster","title":"Raycaster","text":"<pre><code>var result = raycaster.rayToward(x, y, angle);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Emit ray from world-position.</li> <li><code>angle</code> : Emit ray toward to angle, in radian.</li> <li><code>result</code> :<ul> <li><code>false</code> : Ray dose not hit any game object.</li> <li>An object : Hit to a game object.     <pre><code>{\ngameObject,\npolygon,\nsegment,\nx, y,\nreflectAngle\n}\n</code></pre><ul> <li><code>gameObject</code> : Hitting game object.</li> <li><code>polygon</code> : Polygon of hitting game object.</li> <li><code>segment</code> : Segment(line) of hitting polygon.</li> <li><code>x</code>, <code>y</code> : World position of hitting</li> <li><code>reflectAngle</code> : Reflect angle, in radian.</li> </ul> </li> </ul> </li> </ul> <p>Reflection</p> <p>Use <code>result.x</code>, <code>result.y</code>, <code>result.reflectAngle</code> for next reflection ray. <pre><code>raycaster.rayToward(result.x, result.y, result.reflectAngle)\n</code></pre></p>"},{"location":"realtimetimers/","title":"Real time timers","text":""},{"location":"realtimetimers/#introduction","title":"Introduction","text":"<p>Start and counting timer by real-time timestamp.</p> <p>Note</p> <p>Not support pause, or timescale features.</p> <ul> <li>Author: Rex</li> <li>Member of scene, or game object</li> </ul>"},{"location":"realtimetimers/#live-demos","title":"Live demos","text":"<ul> <li>Progress</li> </ul>"},{"location":"realtimetimers/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"realtimetimers/#install-plugin","title":"Install plugin","text":""},{"location":"realtimetimers/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrealtimetimersplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrealtimetimersplugin.min.js', true);\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = scene.plugins.get('rexrealtimetimersplugin').add(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RealTimeTimersPlugin from 'phaser3-rex-plugins/plugins/realtimetimers-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRealTimeTimers',\nplugin: RealTimeTimersPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = scene.plugins.get('rexRealTimeTimers').add(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RealTimeTimers from 'phaser3-rex-plugins/plugins/realtimetimers.js';\n</code></pre></li> <li>Add real-time timers object     <pre><code>var realTimeTimers = new RealTimeTimers(config);\n</code></pre></li> </ul>"},{"location":"realtimetimers/#create-instance","title":"Create instance","text":"<pre><code>var realTimeTimers = scene.plugins.get('rexRealTimeTimers').add({\n// startTimestamp: new Date().getTime(),\n// getTimestampCallback: functio() { return timestamp; }\n});\n</code></pre> <ul> <li><code>getTimestampCallback</code> : Custom callback of get current timestamp, optional.<ul> <li>Default behavior is getting current timestamp from system.</li> </ul> </li> <li><code>startTimestamp</code> : Start time, optional. Use this start-timestamp if <code>getTimestampCallback</code> is not given.<ul> <li>Default value is current timestamp <code>new Date().getTime()</code>.</li> </ul> </li> </ul>"},{"location":"realtimetimers/#set-start-timestamp","title":"Set start timestamp","text":"<p>Start-timestamp is set when creating this real-time timers object.</p> <p>User still can change Start-timestamp by</p> <pre><code>realTimeTimers.setStartTimestamp(timestamp);\n</code></pre> <p>This changing won't affect existed timers.</p>"},{"location":"realtimetimers/#add-a-timer","title":"Add a timer","text":"<pre><code>realTimeTimers.addTimer(name, period);\n// realTimeTimers.addTimer(name, period, data);\n// realTimeTimers.addTimer(name, period, data, currentTimestamp);\n</code></pre> <ul> <li><code>name</code> : Any name string of this timer. </li> <li><code>period</code> : Will expire after period time, in millisecond.</li> <li><code>data</code> : Any kind of custom data.</li> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> <p>or</p> <pre><code>realTimeTimers.addTimer(name, {\nday: dayCount,        // d: dayCount,\nhour: hourCount,      // h: hourCount,\nminute: minuteCount,  // m: minuteCount,\nsecond: secondCount,  // s: secondCount,\n}, data, currentTimestamp);\n</code></pre> <ul> <li>Sum period by <ul> <li><code>day</code>, or <code>d</code> : Day count</li> <li><code>hour</code>, or <code>h</code> : Hour count</li> <li><code>minute</code>, or <code>m</code> : Minute count</li> <li><code>second</code>, or <code>s</code> : Second count</li> </ul> </li> </ul>"},{"location":"realtimetimers/#increase-period","title":"Increase period","text":"<pre><code>realTimeTimers.incTimerPeriod(name, period);\n</code></pre> <ul> <li><code>name</code> : Any name string of this timer. </li> <li><code>period</code> : Will expire after period time, in millisecond.</li> </ul> <p>or</p> <pre><code>realTimeTimers.incTimerPeriod(name, {\nday: dayCount,        // d: dayCount,\nhour: hourCount,      // h: hourCount,\nminute: minuteCount,  // m: minuteCount,\nsecond: secondCount,  // s: secondCount,\n});\n</code></pre> <p>Will trigger <code>'update'</code> event.</p>"},{"location":"realtimetimers/#expire-timers","title":"Expire timers","text":"<ul> <li>Get expired timers     <pre><code>var timers = realTimeTimers.getExpiredTimers();\n// var timers = realTimeTimers.getExpiredTimers(currentTimestamp);\n</code></pre><ul> <li><code>timers</code> : Array of expired timers. Each timer include these properties -      <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> </li> <li>Pop(get and remove) expired timers     <pre><code>var timers = realTimeTimers.popExpiredTimers();\n// var timers = realTimeTimers.popExpiredTimers(currentTimestamp);\n</code></pre><ul> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> </ul> </li> <li>Get progress of timer     <pre><code>var result = realTimeTimers.getTimersProgress()\n// var result = realTimeTimers.getTimersProgress(currentTimestamp);\n</code></pre><ul> <li><code>currentTimestamp</code> : Start this time in current time, optional. <ul> <li><code>undefined</code> : Get current timestamp from <code>getTimestampCallback</code> callback.</li> </ul> </li> <li><code>result</code> : Array of timer's progress. Include these properties -     <pre><code>{\nname: name,\nperiod: time,\nelapsed: time,\nprogress: t    // elapsed/period\ntimer: timerObject\n}\n</code></pre><ul> <li><code>timer</code> : Timer object, can remove this timer object by      <pre><code>realTimeTimers.removeTimers(timer);\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"realtimetimers/#get-timers","title":"Get timers","text":"<ul> <li>Get last added timer     <pre><code>var timer = realtimetimers.lastTimer;\n</code></pre></li> <li>Get all timers     <pre><code>var timers = realtimetimers.getTimers();\n</code></pre></li> <li>Get timers by name.     <pre><code>var timers = realtimetimers.getTimers(name);\n</code></pre></li> <li>Amount of total timers     <pre><code>var amount = realtimetimers.length;\n</code></pre></li> </ul>"},{"location":"realtimetimers/#remove-timers","title":"Remove timers","text":"<ul> <li>Remove timers by name     <pre><code>realtimetimers.removeTimers(name);\n</code></pre></li> <li>Remove timer object     <pre><code>realtimetimers.removeTimers(timer);\n</code></pre><ul> <li><code>timer</code> : A timer object, or an array of timer objects.</li> </ul> </li> <li>Remove all timers     <pre><code>realtimetimers.clearTimers();\n</code></pre></li> </ul>"},{"location":"realtimetimers/#states","title":"States","text":"<ul> <li>Get states in plain object     <pre><code>var states = realtimetimers.toJSON();\n</code></pre></li> <li>Get states in JSON string. Can store this JSON string into webstorage or server.     <pre><code>var s = JSON.stringify(realtimetimers);\n</code></pre></li> <li>Set states by plain object     <pre><code>realtimetimers.resetFromJSON(states)\n</code></pre></li> </ul>"},{"location":"realtimetimers/#events","title":"Events","text":"<ul> <li>On add a timer     <pre><code>realtimetimers.on('add', function(timer, timers){ })\n</code></pre><ul> <li><code>timer</code> : Added timer.     <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>timers</code> : Total timers after adding.</li> </ul> </li> <li>On remove a timer     <pre><code>realtimetimers.on('remove', function(timer, timers){ })\n</code></pre><ul> <li><code>timer</code> : Removed timer.     <pre><code>{\nname: name,\nstart: timestamp,\nperiod: time\n}\n</code></pre></li> <li><code>timers</code> : Total timers after removing.</li> </ul> </li> <li>On timers updated (add, remove, or increas period).     <pre><code>realtimetimers.on('update', function(timers){ var s = JSON.stringify(realtimetimers);\n// Store current states to webstorage or server here.\n})\n</code></pre><ul> <li><code>timers</code> : Total timers after updating.</li> </ul> </li> </ul>"},{"location":"rendertexture/","title":"Render texture","text":""},{"location":"rendertexture/#introduction","title":"Introduction","text":"<p>Paste game objects or textures on dynaimc texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"rendertexture/#usage","title":"Usage","text":""},{"location":"rendertexture/#add-render-texture-object","title":"Add render texture object","text":"<ul> <li>Create an empty render texture object.     <pre><code>var rt = scene.add.renderTexture(x, y, width, height);\n</code></pre></li> </ul> <p>Add render texture from JSON</p> <pre><code>var rt = scene.make.renderTexture({\nx: 0,\ny: 0,\nwidth: 32,\nheight: 32,\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <p>Origin position</p> <p>Origin position of this render texture is <code>(0,0)</code> (top-left)</p>"},{"location":"rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRenderTexture extends Phaser.GameObjects.RenderTexture {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rt = new MyRenderTexture(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>rt.draw(gameObject, x, y);\n// rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>rt.draw(group, x, y);\n// rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene's display list     <pre><code>rt.draw(scene.children, x, y);\n// rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>rt.draw(key, x, y);\n// rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>rt.drawFrame(key, frame, x, y);\n// rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"rendertexture/#global-alpha","title":"Global alpha","text":"<pre><code>rt.setGlobalAlpha(alpha);\n// rt.globalAlpha = alpha;\n</code></pre>"},{"location":"rendertexture/#global-tint","title":"Global tint","text":"<pre><code>rt.setGlobalTint(tint);\n// rt.globalTint = tint;\n</code></pre>"},{"location":"rendertexture/#erase","title":"Erase","text":"<pre><code>rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"rendertexture/#clear","title":"Clear","text":"<pre><code>rt.clear();\n</code></pre>"},{"location":"rendertexture/#fill","title":"Fill","text":"<pre><code>rt.fill(rgb, alpha);\n// rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"rendertexture/#set-size","title":"Set size","text":"<pre><code>rt.setSize(width, height);\n// rt.resize(width, height);\n</code></pre>"},{"location":"rendertexture/#save-texture","title":"Save texture","text":"<p>Stores a copy of this Render Texture in the Texture Manager using the given key.</p> <pre><code>rt.saveTexture(key);\n</code></pre> <p>Calling <code>saveTexture</code> again will not save another copy of the same texture, it will just rename the key of the existing copy.</p>"},{"location":"rendertexture/#internal-camera","title":"Internal camera","text":"<p>Internal camera <code>rt.camera</code></p> <ul> <li>Scroll (offset)     <pre><code>rt.camera.setScroll(x, y);\n</code></pre></li> <li>Zoom (scale)     <pre><code>rt.camera.setZoom(zoom);\n</code></pre></li> <li>Rotate     <pre><code>rt.camera.setAngle(angle);  // angle in degrees\n</code></pre></li> </ul>"},{"location":"rendertexture/#snapshot","title":"Snapshot","text":"<ul> <li>Takes a snapshot of the whole of this Render Texture.     <pre><code>rt.snapshot(callback);\n// rt.snapshot(callback, type, encoderOptions);\n</code></pre></li> <li>Takes a snapshot of the given area of this Render Texture.     <pre><code>rt.snapshotArea(x, y, width, height, callback);\n// rt.snapshotArea(x, y, width, height, callback, type, encoderOptions);\n</code></pre></li> <li>Takes a snapshot of the given pixel from this Render Texture.     <pre><code>rt.snapshotPixel(x, y, callback);\n</code></pre></li> </ul>"},{"location":"rendertexture/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = rt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"rendertexture/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"restorabledata/","title":"Restorable data","text":""},{"location":"restorabledata/#introduction","title":"Introduction","text":"<p>Restorable data manager, extends from built-in data manager.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"restorabledata/#live-demos","title":"Live demos","text":"<ul> <li>Restorable canvas</li> </ul>"},{"location":"restorabledata/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"restorabledata/#install-plugin","title":"Install plugin","text":""},{"location":"restorabledata/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrestorabledataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrestorabledataplugin.min.js', true);\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = scene.plugins.get('rexrestorabledataplugin').add(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RestorableDataPlugin from 'phaser3-rex-plugins/plugins/restorabledata-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRestorableData',\nplugin: RestorableDataPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = scene.plugins.get('rexRestorableData').add(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RestorableData from 'phaser3-rex-plugins/plugins/restorabledata.js';\n</code></pre></li> <li>Add restorable data object     <pre><code>var data = new RestorableData(parent);\n</code></pre></li> </ul>"},{"location":"restorabledata/#create-instance","title":"Create instance","text":"<pre><code>var data = scene.plugins.get('rexRData').add(parent);\n// var data = scene.plugins.get('rexRData').add(parent, eventEmitter);\n</code></pre> <ul> <li><code>parent</code> : The object (a scene, or a game object) that this DataManager belongs to.</li> <li><code>eventEmitter</code> : The DataManager's event emitter.</li> </ul>"},{"location":"restorabledata/#getsetremove-value","title":"Get/set/remove value","text":"<p>See built-in data manager.</p>"},{"location":"restorabledata/#commit","title":"Commit","text":"<p>Commit current data status into repository, and increase current version number.</p> <pre><code>data.commit();\n</code></pre> <p>or</p> <pre><code>data.commit(alias);\n</code></pre> <ul> <li><code>alias</code> : A version alias string.</li> </ul>"},{"location":"restorabledata/#restore","title":"Restore","text":"<ul> <li>Restore data status to a specific version.     <pre><code>data.restore(version);\n</code></pre>     or     <pre><code>data.version = version;\n</code></pre><ul> <li><code>version</code> : Version number or version alias string.</li> </ul> </li> <li>Rebuild data status from version <code>0</code> to a specific version.     <pre><code>data.restore(version, true);\n</code></pre><ul> <li><code>version</code> : Version number or version alias string.</li> </ul> </li> <li>Reverse data status to last version.     <pre><code>data.restore();\n</code></pre></li> </ul>"},{"location":"restorabledata/#version","title":"Version","text":"<ul> <li>Get current version alias string     <pre><code>var version = data.versionAlias;\n</code></pre></li> <li>Get all version alias strings     <pre><code>var aliases = data.versionAliases;\n</code></pre></li> <li>Get current version number     <pre><code>var version = data.version;\n</code></pre></li> <li>Get last version number     <pre><code>var version = data.lastVersion;\n</code></pre></li> </ul> <p>Version starts from <code>0</code> which has no data. Each <code>data.commit()</code> will increase this version number.</p>"},{"location":"restorabledata/#saveload-status","title":"Save/load status","text":"<ul> <li>Get current status     <pre><code>var o = data.toJSON();\n</code></pre></li> <li>Load status     <pre><code>data.resetFromJSON(o);\n</code></pre></li> </ul> <p>or</p> <ul> <li>Get current status via JSON string     <pre><code>var s = JSON.stringify(data);\n</code></pre></li> <li>Load status via JSON string     <pre><code>data.resetFromJSON(JSON.parse(s));\n</code></pre></li> </ul>"},{"location":"reverse-string/","title":"Reverse","text":""},{"location":"reverse-string/#introduction","title":"Introduction","text":"<p>Reverses string, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"reverse-string/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Utils.String.ReverseString(str);\n</code></pre>"},{"location":"rexvideo/","title":"Rexvideo","text":""},{"location":"rexvideo/#introduction","title":"Introduction","text":"<p>Play video on DOM, or on canvas.</p> <ul> <li>Author: Rex</li> <li>DOM Game object, or Canvas Game object</li> </ul>"},{"location":"rexvideo/#live-demos","title":"Live demos","text":"<ul> <li>DOM video, and canvas video</li> </ul>"},{"location":"rexvideo/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rexvideo/#install-plugin","title":"Install plugin","text":""},{"location":"rexvideo/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexvideoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvideoplugin.min.js', true);\n</code></pre></li> <li>Add video object     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);    // var video = scene.add.rexVideo(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import VideoPlugin from 'phaser3-rex-plugins/plugins/video-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexVideo',\nplugin: VideoPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add video object     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);\n// var video = scene.add.rexVideo(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import VideoCanvas from 'phaser3-rex-plugins/plugins/videocanvas/VideoCanvas.js';\n// import VideoDOM from 'phaser3-rex-plugins/plugins/videodom/VideoDOM.js';\n</code></pre></li> <li>Add text object     <pre><code>var video = new VideoCanvas(scene, x, y, width, height, config);\nscene.add.existing(video);\n// var video = new VideoDOM(scene, x, y, width, height, config);\n// scene.add.existing(video);\n</code></pre></li> </ul>"},{"location":"rexvideo/#add-video-object","title":"Add video object","text":"<ul> <li>Video on DOM     <pre><code>var video = scene.add.rexVideo(x, y, width, height, config);\n// var video = scene.add.rexVideo(x, y, config);\n// var video = scene.add.rexVideo(config);\n</code></pre></li> <li>Video on canvas     <pre><code>var video = scene.add.rexVideoCanvas(x, y, width, height, config);\n// var video = scene.add.rexVideoCanvas(x, y, config);\n// var video = scene.add.rexVideoCanvas(config);\n</code></pre></li> </ul> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\n// Element properties\nsrc: url,\n// src: {\n//     webm: webmFileURL,\n//     ogg: oggFileURL,\n//     mp4: mp4FileURL,\n//     h264: h264FileURL,\n// }\nid: undefined,\nautoPlay: true,\ncontrols: false,\nloop: false,\nmuted: false,\nplaysInline: true,\ncrossOrigin: 'anonymous',\nplaybackTimeChangeEventEnable: true,\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li>Element properties<ul> <li><code>src</code> : Specifies the URL of the video file.<ul> <li>A string : url of the video file.</li> <li>A plain object : <code>{ videoType: fileURL }</code><ol> <li>Get <code>webmFileURL</code> if browser supports webm video format.</li> <li>Get <code>oggFileURL</code> if browser supports ogg video format.</li> <li>Get <code>mp4FileURL</code> if browser supports mp4 video format.</li> <li>Get <code>h264FileURL</code> if browser supports h264 video format.</li> </ol> </li> </ul> </li> <li><code>id</code> : <code>id</code> element property.</li> <li><code>autoPlay</code> : <code>autoplay</code> element property.</li> <li><code>controls</code> : <code>controls</code> element property.</li> <li><code>loop</code> : <code>loop</code> element property.</li> <li><code>muted</code> : <code>muted</code> element property.</li> <li><code>playsInline</code> : <code>playsInline</code> element property.</li> <li><code>crossOrigin</code> : <code>crossOrigin</code> element property.</li> </ul> </li> <li><code>playbackTimeChangeEventEnable</code> : Set <code>false</code> to disable <code>playbacktimechange</code> event.</li> </ul>"},{"location":"rexvideo/#different-between-rexvideo-and-rexvideocanvas","title":"Different between rexVideo and rexVideoCanvas","text":"<ul> <li><code>rexVideo</code> plays video on DOM.<ul> <li>DOM object always above game canvas.</li> <li>Won't be affected by webgl shader.</li> <li>Right clicks to pop up a menu.    </li> </ul> </li> <li><code>rexVideoCanvas</code> plays video on canvas.<ul> <li>Can be placed between game objects via depth setting.</li> <li>Can be affected by webgl shader.</li> </ul> </li> </ul>"},{"location":"rexvideo/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyVideo extends Video {  // or VideoCanvas\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     if (super.preUpdate) {\n//         super.preUpdate(time, delta)\n//     }\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var video = new MyVideo(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"rexvideo/#load","title":"Load","text":"<pre><code>video.load(src);\n</code></pre> <ul> <li><code>src</code> : Specifies the URL of the video file.<ul> <li>A string : url of the video file.</li> <li>A plain object : <code>{ videoType: fileURL }</code><ol> <li>Get <code>webmFileURL</code> if browser supports webm video format.</li> <li>Get <code>oggFileURL</code> if browser supports ogg video format.</li> <li>Get <code>mp4FileURL</code> if browser supports mp4 video format.</li> <li>Get <code>h264FileURL</code> if browser supports h264 video format.</li> </ol> </li> </ul> </li> </ul>"},{"location":"rexvideo/#play","title":"Play","text":"<pre><code>video.play();\n</code></pre>"},{"location":"rexvideo/#pause","title":"Pause","text":"<pre><code>video.pause();\n</code></pre>"},{"location":"rexvideo/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = video.playbackTime; // time in seconds\n</code></pre> <pre><code>var t = video.t; // t: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setPlaybackTime(time); // time in seconds\n// video.playbackTime = time;\n</code></pre> <pre><code>video.setT(t); // t: 0~1\n// video.t = t;\n</code></pre></li> </ul>"},{"location":"rexvideo/#duration","title":"Duration","text":"<pre><code>var duration = video.duration;  // time in seconds\n</code></pre>"},{"location":"rexvideo/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = video.volume;  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setVolume(volume);  // volume: 0~1\n// video.volume = volume;\n</code></pre></li> </ul>"},{"location":"rexvideo/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = video.muted;  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>video.setMute(muted);  // muted: true/false\n// video.muted = muted;\n</code></pre></li> </ul>"},{"location":"rexvideo/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = video.loop;  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>video.setLoop(loop);  // loop: true/false\n// video.loop = loop;\n</code></pre></li> </ul>"},{"location":"rexvideo/#resize","title":"Resize","text":"<pre><code>video.resize(width, height);\n</code></pre>"},{"location":"rexvideo/#status","title":"Status","text":"<ul> <li>Is playing     <pre><code>var isPlaying = video.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = video.isPaused;\n</code></pre></li> <li>Has end     <pre><code>var hasEnded = video.hasEnded;\n</code></pre></li> <li>Ready state     <pre><code>var readyState = video.readyState;\n</code></pre><ul> <li><code>0</code> = HAVE_NOTHING - no information whether or not the audio/video is ready</li> <li><code>1</code> = HAVE_METADATA - metadata for the audio/video is ready</li> <li><code>2</code> = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond</li> <li><code>3</code> = HAVE_FUTURE_DATA - data for the current and at least the next frame is available</li> <li><code>4</code> = HAVE_ENOUGH_DATA - enough data available to start playing</li> </ul> </li> </ul>"},{"location":"rexvideo/#events","title":"Events","text":"<ul> <li>Load start     <pre><code>video.on('loadstart', function(video){ }, scope);\n</code></pre></li> <li>Can play     <pre><code>video.on('canplay', function(video){ }, scope);\n</code></pre></li> <li>Can play through     <pre><code>video.on('canplaythrough', function(video){ }, scope);\n</code></pre></li> <li>Playing     <pre><code>video.on('playing', function(video){ }, scope);\n</code></pre></li> <li>Pause     <pre><code>video.on('pause', function(video){ }, scope);\n</code></pre></li> <li>Stalled     <pre><code>video.on('stalled', function(video){ }, scope);\n</code></pre></li> <li>Ended     <pre><code>video.on('ended', function(video){ }, scope);\n</code></pre></li> <li>Error     <pre><code>video.on('error', function(video){ }, scope);\n</code></pre></li> <li>Playback time changed     <pre><code>video.on('playbacktimechange', function(video){ }, scope);\n</code></pre><ul> <li>Set <code>playbackTimeChangeEventEnable</code> to <code>true</code> to enable this event.</li> </ul> </li> </ul>"},{"location":"rope/","title":"Rope","text":""},{"location":"rope/#introduction","title":"Introduction","text":"<p>Manipulate the vertices of images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"rope/#usage","title":"Usage","text":""},{"location":"rope/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"rope/#add-object","title":"Add object","text":"<pre><code>var rope = scene.add.rope(x, y, texture, frame, points, horizontal);\n// var rope = scene.add.rope(x, y, texture, frame, points, horizontal, colors, alphas);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>A number : Segments to split the texture frame into.</li> <li>An number array : An array containing the vertices data.</li> </ul> </li> <li><code>horizontal</code> : <ul> <li><code>true</code> : Vertices of this Rope be aligned horizontally.</li> <li><code>false</code> : Vertices of this Rope be aligned vertically.</li> </ul> </li> <li><code>colors</code> : An optional array containing the color data for this Rope. One color value per pair of vertices.</li> <li><code>alphas</code> : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.</li> </ul> <p>Add rope from JSON</p> <pre><code>var rope = scene.make.rope({\nx: 0,\ny: 0,\nkey: '',\nframe: null,\nhorizontal: true,\npoints: undefined,\ncolors: undefined,\nalphas: undefined,\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"rope/#custom-rope-class","title":"Custom rope class","text":"<ul> <li>Define class     <pre><code>class MyRope extends Phaser.GameObjects.Rope {\nconstructor(scene, x, y, texture, frame, points, horizontal, colors, alphas) {\nsuper(scene, x, y, texture, frame, points, horizontal, colors, alphas);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rope = new MyRope(scene, x, y, texture, frame, points, horizontal);\n</code></pre></li> </ul>"},{"location":"rope/#origin","title":"Origin","text":"<p>A Ropes origin is always 0.5 x 0.5 and cannot be changed.</p>"},{"location":"rope/#set-vertices","title":"Set vertices","text":"<p>Set vertices via </p> <pre><code>rope.setPoints(points);\n// rope.setPoints(points, colors, alphas);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>A number : Segments to split the texture frame into.</li> <li>An number array : An array containing the vertices data.</li> </ul> </li> <li><code>colors</code> : An optional array containing the color data for this Rope. One color value per pair of vertices.</li> <li><code>alphas</code> : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.</li> </ul> <p>Also change horizontal mode : </p> <ul> <li>Change vertical rope to horizontal rope, do nothing if rope is horizontal mode already     <pre><code>rope.setHorizontal(points);\n// rope.setHorizontal(points, colors, alphas);\n</code></pre></li> <li>Change horizontal rope to vertical rope, do nothing if rope is vertical mode already     <pre><code>rope.setVertical(points);\n// rope.setVertical(points, colors, alphas);\n</code></pre></li> </ul> <p>Or set <code>rope.points</code> directly :</p> <ol> <li>Change <code>rope.points</code><ul> <li>Horizontal rope : <code>rope.points[i].y = newY</code></li> <li>Vertical rope :  <code>rope.points[i].x = newX</code></li> </ul> </li> <li>Call <code>rope.setDirty()</code>, or <code>rope.updateVertices()</code></li> </ol> <p>Each point is relative to position of rope object, get points of world via</p> <pre><code>var worldX = rope.points[i].x + rope.x;\nvar worldY = rope.points[i].y + rope.y;\n</code></pre>"},{"location":"rope/#play-animation","title":"Play animation","text":"<pre><code>rope.play(key);\n// rope.play(key, ignoreIfPlaying, startFrame);\n</code></pre> <ul> <li><code>ignoreIfPlaying</code> : If an animation is already playing then ignore this call. Default value is <code>false</code>.</li> <li><code>startFrame</code> : Optionally start the animation playing from this frame index. Default value is <code>0</code>.</li> </ul>"},{"location":"rope/#alpha","title":"Alpha","text":"<ul> <li>Single alpha     <pre><code>rope.setAlphas(alpha);\n</code></pre></li> <li>Top - bottom alpha     <pre><code>rope.setAlphas(topAlpha, bottomAlpha);\n</code></pre></li> <li>Alpha array for each point     <pre><code>rope.setAlphas(alphaArray);\n</code></pre><ul> <li><code>alphaArray</code> : Array of alpha value.</li> </ul> </li> </ul>"},{"location":"rope/#color-tint","title":"Color tint","text":"<ul> <li>Single color tint     <pre><code>rope.setColors(color);\n</code></pre></li> <li>Color tint array for each point     <pre><code>rope.setAlphas(colorArray);\n</code></pre><ul> <li><code>colorArray</code> : Array of color tint value.</li> </ul> </li> </ul>"},{"location":"rope/#tint-fill-mode","title":"Tint fill mode","text":"<p>Sets the tint fill mode.</p> <pre><code>rope.setTintFill(mode);\n</code></pre> <ul> <li><code>mode</code> : <ul> <li><code>0</code> : Additive tint, blends the vertices colors with the texture. Default behavior.</li> <li><code>1</code> : Fill tint with alpha.</li> <li><code>2</code> : Fill tint without alpha.</li> </ul> </li> </ul>"},{"location":"rope/#flip","title":"Flip","text":"<pre><code>rope.flipX = flip;\nrope.flipY = flip;\n</code></pre> <p>If this Game Object has a physics body, it will not change the body. This is a rendering toggle only.</p>"},{"location":"rope/#debug","title":"Debug","text":"<p>Draw debug mesh each render tick.</p> <pre><code>rope.setDebug(graphic);\n// rope.setDebug(graphic, callback);\n</code></pre> <ul> <li><code>graphic</code> : Graphics game object</li> <li><code>callback</code> : Callback of rendering debug graphics (default callback)     <pre><code>function(rope, meshLength, verts) {\n// var graphic = rope.debugGraphic;\n}\n</code></pre><ul> <li><code>rope</code> : Rope instance.<ul> <li><code>rope.debugGraphic</code> : Graphics game object</li> </ul> </li> <li><code>meshLength</code> : The number of mesh vertices in total.</li> <li><code>verts</code> : An array of the translated vertex coordinates.</li> </ul> </li> </ul> <p>Note</p> <p>Clear Debug graphics (<code>rope.debugGraphic.clear()</code>) during scene's update stage (<code>scene.update() { }</code>)</p>"},{"location":"rotate/","title":"Rotate","text":""},{"location":"rotate/#introduction","title":"Introduction","text":"<p>Rotate game object continually with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"rotate/#live-demos","title":"Live demos","text":"<ul> <li>Change speed</li> </ul>"},{"location":"rotate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rotate/#install-plugin","title":"Install plugin","text":""},{"location":"rotate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrotateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrotateplugin.min.js', true);\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = scene.plugins.get('rexrotateplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RotatePlugin from 'phaser3-rex-plugins/plugins/rotate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRotate',\nplugin: RotatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = scene.plugins.get('rexRotate').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Rotate from 'phaser3-rex-plugins/plugins/rotate.js';\n</code></pre></li> <li>Add rotate behavior     <pre><code>var rotate = new Rotate(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotate/#create-instance","title":"Create instance","text":"<pre><code>var rotate = scene.plugins.get('rexRotate').add(gameObject, {\n// speed: 180,\n// enable: true,\n// timeScale: 1,\n});\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotate/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>rotate.setEnable();\n</code></pre>     or     <pre><code>rotate.enable = true;\n</code></pre></li> <li>Disable     <pre><code>rotate.setEnable(false);\n</code></pre>     or     <pre><code>rotate.enable = false;\n</code></pre></li> </ul>"},{"location":"rotate/#set-speed","title":"Set speed","text":"<pre><code>rotate.setSpeed(speed);\n// rotate.speed = speed;\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotate/#status","title":"Status","text":"<ul> <li>Is rotating     <pre><code>var enable = rotate.enable;\n// var isRunning = rotate.isRunning;\n</code></pre></li> </ul>"},{"location":"rotateto/","title":"Rotate to","text":""},{"location":"rotateto/#introduction","title":"Introduction","text":"<p>Rotate game object towards target position with a steady speed.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"rotateto/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"rotateto/#install-plugin","title":"Install plugin","text":""},{"location":"rotateto/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexrotatetoplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexrotatetoplugin.min.js', true);\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = scene.plugins.get('rexrotatetoplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RotateToPlugin from 'phaser3-rex-plugins/plugins/rotateto-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRotateTo',\nplugin: RotateToPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = scene.plugins.get('rexRotateTo').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RotateTo from 'phaser3-rex-plugins/plugins/rotateto.js';\n</code></pre></li> <li>Add rotate-to behavior     <pre><code>var rotateTo = new RotateTo(gameObject, config);\n</code></pre></li> </ul>"},{"location":"rotateto/#create-instance","title":"Create instance","text":"<pre><code>var rotateTo = scene.plugins.get('rexRotateTo').add(gameObject, {\n// speed: 180,\n// enable: true,\n// timeScale: 1,\n});\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotateto/#start-moving","title":"Start moving","text":""},{"location":"rotateto/#rotate-game-object-towards-position","title":"Rotate game object towards position","text":"<ul> <li>Shortest angle     <pre><code>rotateTo.rotateTowardsPosition(x, y);\n</code></pre><ul> <li><code>x</code> , <code>y</code> : Target position</li> </ul> </li> <li>Clockwise/counter-clockwise     <pre><code>rotateTo.rotateTowardsPosition(x, y, dir);\n// rotateTo.rotateTowardsPosition(x, y, dir, speed);\n</code></pre><ul> <li><code>dir</code> :<ul> <li><code>0</code> : Shortest angle</li> <li><code>1</code>, or <code>'cw'</code> : Clockwise</li> <li><code>2</code>, or <code>'ccw'</code> : Counter-clockwise</li> </ul> </li> <li><code>speed</code> : Turn speed, degrees in second</li> </ul> </li> </ul>"},{"location":"rotateto/#rotate-game-object-to-angle","title":"Rotate game object to angle","text":"<ul> <li>Shortest angle     <pre><code>rotateTo.rotateTo(angle);\n</code></pre><ul> <li><code>angle</code> : Target angle in degrees</li> </ul> </li> <li>Clockwise/counter-clockwise     <pre><code>rotateTo.rotateTo(angle, dir);\n// rotateTo.rotateTo(angle, dir, speed);\n</code></pre><ul> <li><code>dir</code> :<ul> <li><code>0</code> : Shortest angle</li> <li><code>1</code>, or <code>cw</code> : Clockwise</li> <li><code>2</code>, or <code>ccw</code> : Counter-clockwise</li> </ul> </li> <li><code>speed</code> : Turn speed, degrees in second</li> </ul> </li> </ul>"},{"location":"rotateto/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>rotateTo.setEnable();\n</code></pre>     or     <pre><code>rotateTo.enable = true;\n</code></pre></li> <li>Disable     <pre><code>rotateTo.setEnable(false);\n</code></pre>     or     <pre><code>rotateTo.enable = false;\n</code></pre></li> </ul>"},{"location":"rotateto/#pause-resume-stop-rotating","title":"Pause, Resume, stop rotating","text":"<pre><code>rotateTo.pause();\nrotateTo.resume();\nrotateTo.stop();\n</code></pre>"},{"location":"rotateto/#set-speed","title":"Set speed","text":"<pre><code>rotateTo.setSpeed(speed);\n// rotateTo.speed = speed;\n</code></pre> <ul> <li><code>speed</code> : Turn speed, degrees in second</li> </ul>"},{"location":"rotateto/#events","title":"Events","text":"<ul> <li>On rotating start     <pre><code>rotateTo.on('start', function(gameObject, rotateTo){});\n</code></pre></li> <li>On reached target     <pre><code>rotateTo.on('complete', function(gameObject, rotateTo){});\n</code></pre></li> </ul>"},{"location":"rotateto/#status","title":"Status","text":"<ul> <li>Is moving     <pre><code>var isRunning = rotateTo.isRunning;\n</code></pre></li> </ul>"},{"location":"round-to/","title":"Round to","text":""},{"location":"round-to/#introduction","title":"Introduction","text":"<p>Round/ceil/floor to the given precision, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"round-to/#usage","title":"Usage","text":""},{"location":"round-to/#round-to","title":"Round to","text":"<p><pre><code>var result = Phaser.Math.RoundTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.RoundTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul> <p>Examples</p> <pre><code>RoundTo(123.456789, 0) = 123\nRoundTo(123.456789, -1) = 123.5\nRoundTo(123.456789, -2) = 123.46\nRoundTo(123.456789, -3) = 123.457\n</code></pre>"},{"location":"round-to/#ceil-to","title":"Ceil to","text":"<p><pre><code>var result = Phaser.Math.CeilTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.CeilTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul>"},{"location":"round-to/#floor-to","title":"Floor to","text":"<p><pre><code>var result = Phaser.Math.floorTo(value);\n</code></pre> or <pre><code>var result = Phaser.Math.floorTo(value, place, base);\n</code></pre></p> <ul> <li><code>value</code> : The value to round.</li> <li><code>place</code> : The place to round to. Positive to round the units, negative to round the decimal. Default is <code>0</code>.</li> <li><code>base</code> : The base to round in. Default is <code>10</code> for decimal.</li> </ul>"},{"location":"runcommands/","title":"Run commands","text":""},{"location":"runcommands/#introduction","title":"Introduction","text":"<p>Run commands in array.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"runcommands/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"runcommands/#install-plugin","title":"Install plugin","text":""},{"location":"runcommands/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexruncommandsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexruncommandsplugin.min.js', true);\n</code></pre></li> <li>Run commands     <pre><code>scene.plugins.get('rexruncommandsplugin').run(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RunCommandsPlugin from 'phaser3-rex-plugins/plugins/runcommands-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRunCommands',\nplugin: RunCommandsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Run commands     <pre><code>scene.plugins.get('rexRunCommands').run(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RunCommands from 'phaser3-rex-plugins/plugins/runcommands.js';\n</code></pre></li> <li>Run commands     <pre><code>RunCommands(commands, scope);\n</code></pre></li> </ul>"},{"location":"runcommands/#run-commands","title":"Run commands","text":"<pre><code>scene.plugins.get('rexRunCommands').run(commands, scope);\n</code></pre> <ul> <li>Format of command :     <pre><code>[fnName, param0, param1, ...]\n</code></pre>     or     <pre><code>[callback, param0, param1, ...]\n</code></pre></li> <li>Commands in nested array :     <pre><code>[\ncommand0,\ncommand1\n[\ncommand2,\ncommand3\n]\n]\n</code></pre></li> <li>Run command :     <pre><code>scope[fnName].call(scope, param0, param1 ...)\n</code></pre>     or     <pre><code>callback.call(scope, param0, param1 ...)\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/","title":"Scale down destroy","text":""},{"location":"scaledowndestroy/#introduction","title":"Introduction","text":"<p>Scale down (i.e. ease scaleX, scaleY to <code>0</code>) game object then destroy it.</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"scaledowndestroy/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scaledowndestroy/#install-plugin","title":"Install plugin","text":""},{"location":"scaledowndestroy/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscaleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleplugin.min.js', true);\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>scene.plugins.get('rexscaleplugin').scaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScalePlugin from 'phaser3-rex-plugins/plugins/scale-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScale',\nplugin: ScalePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScaleDownDestroy from 'phaser3-rex-plugins/plugins/scale-down-destroy.js';\n</code></pre></li> <li>Scale down, then destroy object     <pre><code>ScaleDownDestroy(gameObject, duration);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#scale-down","title":"Scale down","text":"<ul> <li>Scale down width and height     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration);\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, undefined, ease);\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li>Scale down width only     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'x');\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'x', ease);\n</code></pre></li> <li>Scale down height only     <pre><code>var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'y');\n// var scale = scene.plugins.get('rexScale').scaleDownDestroy(gameObject, duration, 'y', ease);\n</code></pre></li> </ul>"},{"location":"scaledowndestroy/#events","title":"Events","text":"<p>See Events of tween task</p> <ul> <li>Scale completes or is stopped.     <pre><code>scale.on('complete', function(gameObject, scale){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"scalemanager/","title":"Scale manager","text":""},{"location":"scalemanager/#introduction","title":"Introduction","text":"<p>Scale game window, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"scalemanager/#usage","title":"Usage","text":""},{"location":"scalemanager/#setup","title":"Setup","text":"<p>Setup scale mode in game configuration.</p> <pre><code>var config = {\n// ...\nparent: divId,\n\n// Game size\nwidth: 1024,\nheight: 768,\n\nscale: {\n// Or set parent divId here\nparent: divId,\n\nmode: Phaser.Scale.FIT,\nautoCenter: Phaser.Scale.CENTER_BOTH,\n\n// Or put game size here\n// width: 1024,\n// height: 768,\n\n// Minimum size\nmin: {\nwidth: 800,\nheight: 600\n},\n// Or set minimum size like these\n// minWidth: 800,\n// minHeight: 600,\n\n// Maximum size\nmax: {\nwidth: 1600,\nheight: 1200\n},\n// Or set maximum size like these\n// maxWidth: 1600,\n// maxHeight: 1200,\n\nzoom: 1,  // Size of game canvas = game size * zoom\n},\nautoRound: false\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre> <ul> <li><code>scale.mode</code> :<ul> <li><code>Phaser.Scale.NONE</code> : No scaling happens at all.</li> <li><code>Phaser.Scale.FIT</code> : The width and height are automatically adjusted to fit inside the given target area, while keeping the aspect ratio. Depending on the aspect ratio there may be some space inside the area which is not covered.</li> <li><code>Phaser.Scale.ENVELOP</code> : The width and height are automatically adjusted to make the size cover the entire target area while keeping the aspect ratio. This may extend further out than the target size.</li> <li><code>Phaser.Scale.WIDTH_CONTROLS_HEIGHT</code> : The height is automatically adjusted based on the width.</li> <li><code>Phaser.Scale.HEIGHT_CONTROLS_WIDTH</code> : The width is automatically adjusted based on the height.</li> <li><code>Phaser.Scale.RESIZE</code> : The Canvas is resized to fit all available parent space, regardless of aspect ratio.</li> </ul> </li> <li><code>scale.autoCenter</code> :<ul> <li><code>Phaser.Scale.NO_CENTER</code> : The game canvas is not centered within the parent by Phaser.</li> <li><code>Phaser.Scale.CENTER_BOTH</code> : The game canvas is centered both horizontally and vertically within the parent.</li> <li><code>Phaser.Scale.CENTER_HORIZONTALLY</code> : The game canvas is centered horizontally within the parent.</li> <li><code>Phaser.Scale.CENTER_VERTICALLY</code> : The game canvas is centered both vertically within the parent.</li> </ul> </li> </ul>"},{"location":"scalemanager/#resize-canvas-element","title":"Resize canvas element","text":"<pre><code>scene.scale.resize(width, height);\n</code></pre> <p>Modify the size of the Phaser canvas element directly. You should only use this if you are using the <code>NO_SCALE</code> scale mode,</p>"},{"location":"scalemanager/#set-game-size","title":"Set game size","text":"<pre><code>scene.scale.setGameSize(width, height);\n</code></pre> <p>It should only be used if you're looking to change the base size of your game and are using one of the Scale Manager scaling modes, i.e. <code>FIT</code>. If you're using <code>NO_SCALE</code> and wish to change the game and canvas size directly, then please use the <code>resize</code> method instead.</p>"},{"location":"scalemanager/#get-view-port","title":"Get view port","text":"<pre><code>var viewport = scene.scale.getViewPort();\n// var viewport = scene.scale.getViewPort(camera, out);\n</code></pre> <ul> <li><code>viewport</code> : The Rectangle of visible area.</li> <li><code>camera</code> : The camera this viewport is respond upon.</li> <li><code>out</code> : The Rectangle of visible area.</li> </ul>"},{"location":"scalemanager/#members","title":"Members","text":"<ul> <li>The un-modified game size, as requested in the game config (the raw width / height), as used for world bounds, cameras, etc     <pre><code>var gameSize = scene.scale.gameSize;\n</code></pre><ul> <li><code>gameSize.width</code>, <code>gameSize.height</code></li> </ul> </li> <li>The modified game size, which is the auto-rounded gameSize, used to set the canvas width and height (but not the CSS style)     <pre><code>var baseSize = scene.scale.baseSize;\n</code></pre><ul> <li><code>baseSize.width</code>, <code>baseSize.height</code></li> </ul> </li> <li>The size used for the canvas style, factoring in the scale mode, parent and other values.     <pre><code>var displaySize = scene.scale.displaySize;\n</code></pre><ul> <li><code>displaySize.width</code>, <code>displaySize.height</code></li> </ul> </li> </ul>"},{"location":"scalemanager/#events","title":"Events","text":"<pre><code>scene.scale.on('resize', function(gameSize, baseSize, displaySize, previousWidth, previousHeight) {});\n</code></pre> <ul> <li><code>gameSize</code><ul> <li><code>gameSize.width</code>, <code>gameSize.height</code></li> </ul> </li> <li><code>baseSize</code><ul> <li><code>baseSize.width</code>, <code>baseSize.height</code></li> </ul> </li> <li><code>displaySize</code><ul> <li><code>displaySize.width</code>, <code>displaySize.height</code></li> </ul> </li> </ul>"},{"location":"scalemanager/#update-bounds","title":"Update bounds","text":"<p>This method dose not have to be invoked, unless the canvas position, or visibility is changed via any other method (i.e. via an Angular route).</p> <pre><code>scene.scale.updateBounds();\n</code></pre>"},{"location":"scalemanager/#full-screen","title":"Full screen","text":"<p>Under <code>'pointerup'</code> touch event :</p> <ul> <li>Start full screen     <pre><code>scene.scale.startFullscreen();\n</code></pre></li> <li>Stop full screen     <pre><code>scene.scale.stopFullscreen();\n</code></pre></li> <li>Toggle full screen     <pre><code>scene.scale.toggleFullscreen();\n</code></pre></li> <li>Is full screen     <pre><code>var isFullscreen = scene.scale.isFullscreen;\n</code></pre></li> </ul> <p>Games within an iframe will also be blocked from fullscreen  unless the iframe has the <code>allowfullscreen</code> attribute.</p> <p>Performing an action that navigates to another page,  or opens another tab, will automatically cancel fullscreen mode,  as will the user pressing the ESC key.</p>"},{"location":"scalemanager/#events_1","title":"Events","text":"<ul> <li>Enter full screen     <pre><code>scene.scale.on('enterfullscreen', function() {}, scope);\n</code></pre></li> <li>Enter full screen failed     <pre><code>scene.scale.on('fullscreenfailed', function(error) {}, scope);\n</code></pre></li> <li>Leave full screen     <pre><code>scene.scale.on('leavefullscreen', function() {}, scope);\n</code></pre></li> <li>Full screen unsupport     <pre><code>scene.scale.on('fullscreenunsupported', function() {}, scope);\n</code></pre></li> <li>Leave full screen     <pre><code>scene.scale.on('leavefullscreen', function() {}, scope);\n</code></pre></li> </ul>"},{"location":"scalemanager/#orientation","title":"Orientation","text":"<pre><code>scene.scale.on('orientationchange', function(orientation) {\nif (orientation === Phaser.Scale.PORTRAIT) {\n\n} else if (orientation === Phaser.Scale.LANDSCAPE) {\n\n}\n}, scope);\n</code></pre>"},{"location":"scaleouter/","title":"Scale outer","text":""},{"location":"scaleouter/#introduction","title":"Introduction","text":"<p>Scroll and zoom camera to make default game window fit the display area, in RESIZE scale mode.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"scaleouter/#live-demos","title":"Live demos","text":"<ul> <li>Viewport</li> <li>Static camera</li> <li>Tween camera</li> </ul>"},{"location":"scaleouter/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scaleouter/#install-plugin","title":"Install plugin","text":""},{"location":"scaleouter/#set-scale-mode-to-resize","title":"Set scale mode to RESIZE","text":"<pre><code>var config = {\n// ...\nscale: {\nparent: divId,\nmode: Phaser.Scale.RESIZE,\nwidth: 1024,    // Default game window width\nheight: 768,    // Default game window height\n// ...\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"scaleouter/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexscaleouterplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscaleouterplugin.min.js', 'rexScaleOuter', 'rexScaleOuter');\n</code></pre></li> <li>Scale outer is created as a member of scene (<code>scene.rexScaleOuter</code>) for each scene.    It will control main camera (<code>scene.cameras.main</code>) by default.</li> </ul>"},{"location":"scaleouter/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install scene plugin in configuration of game <pre><code>import ScaleOuterPlugin from 'phaser3-rex-plugins/plugins/scaleouter-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexScaleOuter',\nplugin: ScaleOuterPlugin,\nmapping: 'rexScaleOuter'\n}]\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Scale outer is created as a member of scene (<code>scene.rexScaleOuter</code>) for each scene.    It will control main camera (<code>scene.cameras.main</code>) by default.</li> </ul>"},{"location":"scaleouter/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScaleOuter from 'phaser3-rex-plugins/plugins/scaleouter.js';\n</code></pre></li> <li>Add scaleouter object     <pre><code>var scaleouter = new ScaleOuter(scene);\n</code></pre></li> </ul>"},{"location":"scaleouter/#create-instance","title":"Create instance","text":"<p>ScaleOuter plugin is a scene plugin, which created as a member of scene (<code>scene.rexScaleOuter</code>)  for each scene. It does not have to create other scale outer instance.</p>"},{"location":"scaleouter/#remove-instance","title":"Remove instance","text":"<p>Invoke <code>scene.rexScaleOuter.destroy()</code> under <code>scene.create() { ... }</code>.</p>"},{"location":"scaleouter/#add-camera","title":"Add camera","text":"<ul> <li>Add camera manually, under <code>scene.create() { ... }</code> <pre><code>scene.rexScaleOuter.add(camera);\n</code></pre></li> <li>Scale outer will control main camera (<code>scene.cameras.main</code>) if no camera added.</li> </ul>"},{"location":"scaleouter/#viewport","title":"Viewport","text":"<ul> <li>Inner viewport, a recangle object, for area of default size in game config after camera zoom/scroll.     <pre><code>var innerViewport = scene.rexScaleOuter.innerViewport;\n</code></pre></li> <li>Outer viewport, a recangle object, for the visible area after camera zoom/scroll.     <pre><code>var outerViewport = scene.rexScaleOuter.outerViewport;\n</code></pre></li> </ul>"},{"location":"scaleouter/#manual-scale","title":"Manual scale","text":"<ol> <li>Stop resize callback     <pre><code>scene.rexScaleOuter.stop()\n</code></pre></li> <li>Manual scale     <pre><code>scene.rexScaleOuter.scale();\n</code></pre></li> </ol>"},{"location":"scene/","title":"Scene","text":""},{"location":"scene/#define-a-scene","title":"Define a scene","text":""},{"location":"scene/#configuration-of-scene","title":"Configuration of scene","text":"<pre><code>var config = {\nkey: \"\",\n// active: false,\n// visible: true,\n// pack: false,\n// cameras: null,\n// map: {},\n// physics: {},\n// loader: {},\n// plugins: false,\n// input: {}\n};\n</code></pre> <ul> <li><code>key</code> : The unique key of this Scene. Must be unique within the entire Game instance.</li> <li><code>active</code> : Does the Scene start as active or not? An active Scene updates each step.</li> <li><code>visible</code> : Does the Scene start as visible or not? A visible Scene renders each step.</li> <li><code>pack</code> : An optional Loader Packfile to be loaded before the Scene begins.</li> <li><code>cameras</code> : An optional Camera configuration object.   <pre><code>{\nname: '',\nx: 0,\ny: 0,\nwidth: scene.sys.scale.width,\nheight: scene.sys.scale.height,\nzoom: 1,\nrotation: 0,\nscrollX: 0,\nscrollY: 0,\nroundPixels: false,\nvisible: true,\nbackgroundColor: false,\nbounds: null, // {x, y, width, height}\n}\n</code></pre></li> <li><code>map</code> : Overwrites the default injection map for a scene.</li> <li><code>physics</code> : The physics configuration object for the Scene.   <pre><code>{\ndefault: 'arcade', // 'arcade', or 'matter'\narcade: {...},\nmatter: {...}\n}\n</code></pre></li> <li><code>arcade</code> : Arcade Physics configuration.</li> <li><code>matter</code> : Matter Physics configuration.</li> <li><code>loader</code> : The loader configuration object for the Scene.   <pre><code>{\nbaseURL: '',\npath: '',\nenableParallel: true,\nmaxParallelDownloads: 4,\ncrossOrigin: undefined,\nresponseType: '',\nasync: true,\nuser: '',\npassword: '',\ntimeout: 0\n}\n</code></pre></li> <li><code>plugins</code> : The plugin configuration object for the Scene.   <pre><code>{\nglobal: [\n//{key, plugin, start}\n],\nscene: [\n// ...\n]\n}\n</code></pre></li> <li><code>input</code> : The input configuration object for the Scene.   <pre><code>{\nkeyboard: {\ntarget: window\n},\nmouse: {\ntarget: null,\ncapture: true\n},\nactivePointers: 1,\ntouch: {\ntarget: null,\ncapture: true\n},\nsmoothFactor: 0,\ngamepad: false,\nwindowEvents: true,\n}\n</code></pre></li> </ul>"},{"location":"scene/#es6-class","title":"ES6 class","text":"<pre><code>class MyScene extends Phaser.Scene {\nconstructor(config) {\nsuper(config);\n}\n\ninit(data) {}\npreload() {}\ncreate(data) {}\nupdate(time, delta) {}\n}\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#class","title":"Class","text":"<pre><code>var MyScene = new Phaser.Class({\nExtends: Phaser.Scene,\n\ninitialize: function MyScene(config) {\nPhaser.Scene.call(this, config);\n},\n\ninit: function (data) {},\npreload: function () {},\ncreate: function (data) {},\nupdate: function (time, delta) {},\n});\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul> <pre><code>var MyGame = {};\n\nMyGame.Boot = function () {};\n\nMyGame.Boot.prototype.constructor = MyGame.Boot;\n\nMyGame.Boot.prototype = {\ninit: function (data) {},\npreload: function () {},\ncreate: function (data) {},\nupdate: function (time, delta) {},\n};\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#override","title":"Override","text":"<pre><code>var demo = new Phaser.Scene(\"Demo\");\n\ndemo.init = function (data) {};\ndemo.preload = function () {};\ndemo.create = function (data) {};\ndemo.update = function (time, delta) {};\n</code></pre> <ul> <li><code>data</code> : Parameters passed from adding new scene, or starting scene</li> </ul>"},{"location":"scene/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nsubgraph Stop\nSceneEventDestroy&gt;\"scene.events: destroy\"]\nStop[\"Shutdown&lt;br&gt;Free game objects\"]\nend\n\nsubgraph Update\nSceneUpdate[\"Run: Every tick&lt;br&gt;scene.update()\"]\nSceneEventPauseSleep&gt;\"scene.events: pause&lt;br&gt;scene.events: sleep\"]\nPause[\"Pause: render but no update&lt;br&gt;Sleep: no update, no render\"]\nSceneEventResumeWake&gt;\"scene.events: resume&lt;br&gt;scene.events: wake\"]\nend\n\nsubgraph Create\nSceneEventStart&gt;\"scene.events: start\"]\nSceneEventReady&gt;\"scene.events: ready\"]\nSceneInit[\"scene.init()\"]\nScenePreLoad[\"Load assets&lt;br&gt;scene.preload()\"]\nSceneCreate[\"Create game objects&lt;br&gt;scene.create()\"]\nend\n\nStart((Start)) --&gt; SceneEventStart\nSceneEventStart --&gt; SceneEventReady\nSceneEventReady --&gt; SceneInit\nSceneInit --&gt; ScenePreLoad\nScenePreLoad --&gt; SceneCreate\nSceneCreate --&gt; SceneUpdate\nSceneUpdate --&gt; SceneUpdate\nSceneUpdate --&gt; |\"scene.scene.pause()&lt;br&gt;scene.scene.sleep()\"|SceneEventPauseSleep\nSceneEventPauseSleep --&gt; Pause\nPause --&gt; |\"scene.scene.resume()&lt;br&gt;scene.scene.wake()\"|SceneEventResumeWake\nSceneEventResumeWake --&gt; SceneUpdate\n\nSceneUpdate --&gt; |\"scene.scene.stop()&lt;br&gt;scene.scene.restart()\"|Stop\nPause --&gt; |\"scene.scene.stop()&lt;br&gt;scene.scene.restart()\"|SceneEventDestroy\nSceneEventDestroy --&gt; Stop\n\nStop --&gt; |\"scene.scene.start()&lt;br&gt;scene.scene.launch()&lt;br&gt;scene.scene.restart()\"|SceneEventStart</code></pre> <ul> <li><code>Run</code> : Update and render</li> <li><code>Pause</code> : Render but no update</li> <li><code>Sleep</code> : No update, no render</li> <li><code>Stop</code> : Shutdown</li> </ul> <p>See also</p> <ul> <li>Pause/resume</li> <li>Stop</li> <li>Main loop</li> </ul>"},{"location":"scene/#start","title":"Start","text":"<ol> <li>Invoke <code>scene.preload()</code></li> <li>Invoke <code>scene.create()</code></li> </ol> <p><code>scene.scene.restart()</code> is equal to</p> <pre><code>scene.scene.stop();\nscene.scene.start();\n</code></pre>"},{"location":"scene/#stop","title":"Stop","text":"<ul> <li>All game objects will be destroyed.</li> <li>Registered events on game objects will also be clear, too.</li> <li>Touch, keyboard and GamePad events will be clear.</li> <li>Cameras will be destroyed.</li> <li>Loader will be stopped.</li> <li>Assets will be stored in global cache.</li> <li>Events registered on scene plugin (<code>scene.events.on</code>) won't be clear.</li> </ul>"},{"location":"scene/#members","title":"Members","text":"<ul> <li><code>plugins</code></li> <li><code>load</code> : Loader</li> <li><code>events</code> : Local events</li> <li><code>input</code> : Touch, keyboard</li> <li><code>tweens</code> : Tween tasks</li> <li><code>time</code> : Timer</li> <li><code>cameras</code> : Camera</li> <li><code>scene</code> : scenePlugin</li> <li><code>anims</code></li> <li><code>physics</code> : ArcadePhysics</li> <li><code>matter</code> :\u3000 MatterPhysics</li> <li><code>registry</code> : Global data manager</li> <li><code>data</code> : Local data manager</li> <li><code>sys</code></li> <li><code>game</code></li> <li><code>render</code></li> <li><code>cache</code></li> <li><code>sound</code></li> <li><code>textures</code></li> <li><code>add</code></li> <li><code>make</code></li> <li><code>children</code> : DisplayList <pre><code>scene.children.bringToTop(child);\nscene.children.sendToBack(child);\nscene.children.moveUp(child);\nscene.children.moveDown(child);\nscene.children.moveUp(child);\nscene.children.moveTo(child, index);\nscene.children.moveAbove(child1, child2); // Move child1 above child2\nscene.children.moveBelow(child1, child2); // Move child1 below child2\nscene.children.swap(child1, child2);\n</code></pre></li> <li><code>lights</code></li> </ul> <p>Preserve word in a scene.</p>"},{"location":"scene/#events","title":"Events","text":"<ul> <li>Start (Before <code>scene.init()</code>)   <pre><code>scene.events.on(\"start\", function () {});\n</code></pre></li> <li>Ready (After <code>start</code>)   <pre><code>scene.events.on(\"ready\", function () {});\n</code></pre></li> <li>Every tick<ul> <li>Preupdate     <pre><code>scene.events.on(\"preupdate\", function (time, delta) {});\n</code></pre></li> <li>Update     <pre><code>scene.events.on(\"update\", function (time, delta) {});\n</code></pre></li> <li>Postupdate     <pre><code>scene.events.on(\"postupdate\", function (time, delta) {});\n</code></pre></li> <li>Render     <pre><code>scene.events.on(\"render\", function () {});\n</code></pre></li> </ul> </li> <li>State changed<ul> <li>Pause (from <code>scene.scene.pause()</code>)     <pre><code>scene.events.on(\"pause\", function () {});\n</code></pre></li> <li>Resume (from <code>scene.scene.resume()</code>)     <pre><code>scene.events.on(\"resume\", function () {});\n</code></pre></li> <li>Sleep (from <code>scene.scene.sleep()</code>)     <pre><code>scene.events.on(\"sleep\", function () {});\n</code></pre></li> <li>Wake (from <code>scene.scene.wake()</code>)     <pre><code>scene.events.on(\"wake\", function () {});\n</code></pre></li> <li>Stop/shutdown (from <code>scene.scene.stop()</code>)     <pre><code>scene.events.on(\"shutdown\", function () {});\n</code></pre><ul> <li>Free-up any resources that may be in use by this scene</li> </ul> </li> </ul> </li> <li>Destroy (from <code>scene.scene.remove()</code>)     <pre><code>scene.events.on(\"destroy\", function () {});\n</code></pre></li> <li>Resize     <pre><code>scene.events.on(\"resize\", function () {});\n</code></pre></li> <li>Boot     <pre><code>scene.events.on(\"boot\", function () {});\n</code></pre></li> <li>Game object added to scene<ul> <li>Add     <pre><code>scene.events.on(\"addedtoscene\", function (gameObject, scene) {});\n</code></pre></li> <li>Remove     <pre><code>scene.events.on(\"removedfromscene\", function (gameObject, scene) {});\n</code></pre></li> </ul> </li> </ul>"},{"location":"scenemanager/","title":"Scene manager","text":"<p>Scene manager plugin:</p> <ul> <li>In each scene instance: <code>scene.scene</code></li> </ul>"},{"location":"scenemanager/#add-new-scene","title":"Add new scene","text":"<pre><code>var newScene = scene.scene.add(key, sceneConfig, autoStart, data);\n// var newScene = game.scene.add(key, sceneConfig, autoStart, data);\n</code></pre> <ul> <li><code>key</code> : A unique key used to reference the Scene.</li> <li><code>sceneConfig</code> : The config for the Scene, or a scene class.</li> <li><code>autoStart</code> : Set <code>true</code> to start scene immediately after added.</li> <li><code>data</code> : Optional data object. This will be set as <code>scene.settings.data</code> and passed to <code>scene.init</code>.</li> </ul>"},{"location":"scenemanager/#load-scene-from-external-files","title":"Load scene from external files","text":"<ol> <li>load script <pre><code>scene.load.script(key, url);\n</code></pre></li> <li>add new scene     <pre><code>scene.scene.add(key, sceneConfig, autoStart);\n// game.scene.add(key, sceneConfig, autoStart);\n</code></pre></li> </ol>"},{"location":"scenemanager/#destroy-scene","title":"Destroy scene","text":"<pre><code>scene.scene.remove(key);\n</code></pre> <ul> <li>Fires scene.events <code>destroy</code></li> </ul>"},{"location":"scenemanager/#start-scene","title":"Start scene","text":"<ul> <li>Launch the given Scene and run it in parallel with this one     <pre><code>scene.scene.launch(key, data);\n</code></pre></li> <li>Shutdown this Scene and run the given one     <pre><code>scene.scene.start(key, data);\n</code></pre></li> <li>Restarts this Scene     <pre><code>scene.scene.restart(data);\n</code></pre></li> </ul>"},{"location":"scenemanager/#pauseresume-scene","title":"Pause/Resume scene","text":"<ul> <li>Pause : stops the update step but still renders     <pre><code>scene.scene.pause(key);\n// scene.scene.pause();  // pause myself\n</code></pre><ul> <li>Fires scene.events <code>pause</code></li> </ul> </li> <li>Resume : starts the update loop again     <pre><code>scene.scene.resume(key);\n// scene.scene.resume();  // resume myself\n</code></pre><ul> <li>Fires scene.events <code>resume</code></li> </ul> </li> <li>Sleep : no update, no render but doesn't shutdown     <pre><code>scene.scene.sleep(key);\n// scene.scene.sleep();  // sleep myself\n</code></pre><ul> <li>Fires scene.events <code>sleep</code></li> </ul> </li> <li>Wake-up: starts update and render     <pre><code>scene.scene.wake(key);\n// scene.scene.wake();  // wake-up myself\n</code></pre><ul> <li>Fires scene.events <code>wake</code></li> </ul> </li> <li>Makes this Scene sleep then starts the Scene given     <pre><code>scene.scene.switch(key);\n</code></pre></li> </ul>"},{"location":"scenemanager/#run-scene","title":"Run scene","text":"<p>Runs the given Scene, but does not change the state of this Scene.</p> <p>If the given Scene is paused, it will resume it. If sleeping, it will wake it. If not running at all, it will be started.</p> <pre><code>scene.scene.run(key, data);\n</code></pre>"},{"location":"scenemanager/#stop-scene","title":"Stop scene","text":"<p>Shutdown the Scene, clearing display list, timers, etc.</p> <pre><code>scene.scene.stop(key);\n// scene.scene.stop();  // stop myself\n</code></pre>"},{"location":"scenemanager/#set-visible","title":"Set visible","text":"<pre><code>scene.scene.setVisible(value, key);  // value: true/false\n// scene.scene.setVisible(value);    // set visible to myself\n</code></pre>"},{"location":"scenemanager/#read-status","title":"Read status","text":"<pre><code>var isSleep = scene.scene.isSleeping(key);\n// var isSleep = scene.scene.isSleeping();\n</code></pre> <pre><code>var isPaused = scene.scene.isPaused(key);\n// var isPaused = scene.scene.isPaused();\n</code></pre> <pre><code>var isActive = scene.scene.isActive(key);\n// var isActive = scene.scene.isActive();\n</code></pre> <pre><code>var isVisible = scene.scene.isVisible(key);\n// var isVisible = scene.scene.isVisible();\n</code></pre> Update/isActive Render/isVisible Run Pause Sleep <p>Pause/Sleep/Stop</p> <ul> <li>Pause: Pause <code>update</code> stage.</li> <li>Sleep: Pause <code>update</code> stage, and set scene invisible.</li> <li>Stop: Shoutdown, clearing display list, timers, etc. </li> </ul> <pre><code>var status = scene.scene.getStatus(key);\n// var status = scene.scene.getStatus();\n</code></pre> <ul> <li><code>status</code> :<ul> <li><code>Phaser.Scenes.PENDING</code>, or <code>0</code></li> <li><code>Phaser.Scenes.INIT</code>, or <code>1</code></li> <li><code>Phaser.Scenes.START</code>, or <code>2</code></li> <li><code>Phaser.Scenes.LOADING</code>, or <code>3</code></li> <li><code>Phaser.Scenes.CREATING</code>, or <code>4</code></li> <li><code>Phaser.Scenes.RUNNING</code>, or <code>5</code></li> <li><code>Phaser.Scenes.PAUSED</code>, or <code>6</code></li> <li><code>Phaser.Scenes.SLEEPING</code>, or <code>7</code></li> <li><code>Phaser.Scenes.SHUTDOWN</code>, or <code>8</code></li> <li><code>Phaser.Scenes.DESTROYED</code>, or <code>9</code></li> </ul> </li> </ul>"},{"location":"scenemanager/#get-scene","title":"Get scene","text":"<pre><code>var scene = scene.scene.get(key);\n</code></pre>"},{"location":"scenemanager/#order-of-scenes","title":"Order of scenes","text":"<p>Swaps the position of two scenes in the Scenes list.</p> <pre><code>scene.scene.swapPosition(keyA, keyB);\n// scene.scene.stop(keyA);\n</code></pre> <pre><code>scene.scene.moveAbove(keyA, keyB);\n// scene.scene.moveAbove(keyA);\n</code></pre> <p>Scene B is directly above Scene A.</p> <pre><code>scene.scene.moveBelow(keyA, keyB);\n// scene.scene.moveBelow(keyA);\n</code></pre> <p>Scene B is directly below Scene A.</p> <pre><code>scene.scene.moveUp(keyA);\n// scene.scene.moveBelow();\n</code></pre> <pre><code>scene.scene.moveDown(keyA);\n// scene.scene.moveDown();\n</code></pre> <pre><code>scene.scene.bringToTop(keyA);\n// scene.scene.bringToTop();\n</code></pre> <pre><code>scene.scene.sendToBack(keyA);\n// scene.scene.sendToBack();\n</code></pre>"},{"location":"scenemanager/#transition","title":"Transition","text":"<pre><code>scene.scene.transition({\ntarget: key,\n// data: null,\n// moveAbove: false,\n// moveBelow: false,\n\nduration: 1000,\n\n// remove: false,\n// sleep: false,\n// allowInput: false,\n\n// onStart: null,\n// onStartScope: scene,\n\n// onUpdate: null,\n// onUpdateScope: scene,\n})\n</code></pre> <ul> <li><code>target</code> : The Scene key to transition to.</li> <li><code>data</code> : An object containing any data you wish to be passed to the target scenes init / create methods.</li> <li><code>moveAbove</code>. <code>moveBelow</code> : Move the target Scene to be above/below this current scene before the transition starts.</li> <li><code>duration</code> : Transition duration, in ms.</li> <li><code>remove</code> : Set true to remove this scene.</li> <li><code>sleep</code> : Set true to sleep this scene, set false to stop this scene.</li> <li><code>allowInput</code> : Set true to enable input system of current scene and target scene.</li> <li><code>onStart</code>, <code>onStartScope</code> : Invoked when transition start     <pre><code>function(fromScene, toScene, duration) {\n\n}\n</code></pre><ul> <li><code>fromScene</code> : Current scene instance</li> <li><code>toScene</code> : Target scene instance</li> <li><code>duration</code> : Transition duration, in ms.</li> </ul> </li> <li><code>onUpdate</code> ,<code>onUpdateScope</code> : Transition callback in each tick.     <pre><code>function(progress) {\n\n}\n</code></pre><ul> <li><code>progress</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ul>"},{"location":"scenemanager/#execution-flow","title":"Execution flow","text":"<ol> <li>Invoke <code>scene.scene.transition</code> method.<ul> <li>Current scene : <ul> <li>Fire <code>'transitionout'</code> event.     <pre><code>fromScene.events.on('transitionout', function(targetScene, duration){ });\n</code></pre></li> <li>Run transition's <code>onUpdate</code> callback every tick.</li> <li>Current scene's <code>update</code> method is still running every tick.</li> </ul> </li> <li>Target scene :<ul> <li>Start target scene immediately.</li> <li>Fire target scene's <code>'transitionstart'</code> event. (Register this event in <code>create</code> stage)     <pre><code>targetScene.events.on('transitionstart', function(fromScene, duration){ });\n</code></pre></li> </ul> </li> </ul> </li> <li>When transition completed.<ul> <li>Current scene : <ul> <li>Remove or sleep current scene after transition completed.</li> </ul> </li> <li>Target scene : <ul> <li>Fire target scene's <code>transitioncomplete</code> event.     <pre><code>targetScene.events.on('transitioncomplete', function(fromScene){ });\n</code></pre></li> </ul> </li> </ul> </li> </ol>"},{"location":"scenemanager/#events","title":"Events","text":"<ul> <li>boot     <pre><code>scene.events.on('transitioninit', function(fromScene, duration)){ });\n</code></pre></li> <li>start     <pre><code>scene.events.on('transitionstart', function(fromScene, duration){ });\n</code></pre></li> <li>transition-out     <pre><code>scene.events.on('transitionout', function(targetScene){ });\n</code></pre></li> <li>complete     <pre><code>scene.events.on('transitioncomplete', function(fromScene){ });\n</code></pre></li> <li>wake : wake-up target scene if it was previously asleep     <pre><code>scene.events.on('transitionwake', function(fromScene, duration){ });\n</code></pre></li> </ul>"},{"location":"scenemanager/#system-scene","title":"System scene","text":"<p>A default empty Scene that lives outside of the Scene list,  but can be used by plugins and managers that need access to a live Scene,  without being tied to one.</p> <pre><code>var scene = scene.scene.get('__SYSTEM');\n</code></pre> <p>or</p> <pre><code>var scene = scene.scene.systemScene;\n</code></pre>"},{"location":"scripttagloader/","title":"Script tag loader","text":""},{"location":"scripttagloader/#introduction","title":"Introduction","text":"<p>Load script tag in preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"scripttagloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scripttagloader/#install-plugin","title":"Install plugin","text":""},{"location":"scripttagloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexscripttagloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscripttagloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexscripttagloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexscripttagloaderplugin').addToScene(this);\n\nthis.load.rexScriptTag(url);\n}\n}\n</code></pre></li> </ul>"},{"location":"scripttagloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScriptTagLoaderPlugin from 'phaser3-rex-plugins/plugins/scripttagloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScriptTagLoader',\nplugin: ScriptTagLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexScriptTag(url);\n</code></pre></li> </ul>"},{"location":"scripttagloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ScriptTagLoader from 'phaser3-rex-plugins/plugins/scripttagloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>ScriptTagLoader.call(scene.load, url);\n// ScriptTagLoader.call(scene.load, url, availableTest);\n</code></pre></li> </ul>"},{"location":"scripttagloader/#load-script-tag","title":"Load script tag","text":"<p>In preload stage:</p> <pre><code>this.load.rexScriptTag(url);\n// this.load.rexScriptTag(url, availableTest);\n</code></pre> <p>or</p> <pre><code>this.load.rexScriptTag({\nurl: url,\navailableTest: undefined\n});\n</code></pre> <ul> <li><code>availableTest</code> : Callback invoked after loading script tag, optional.      <pre><code>function() {        return true;\n}\n</code></pre><ul> <li>Wait until <code>availableTest</code> return <code>true</code>.</li> </ul> </li> </ul>"},{"location":"scripttagloader/#compare-with-script-loader","title":"Compare with script loader","text":"<ul> <li>Built-in script loader uses AJAX to load text as script, which might have CORS issue.</li> <li>Script tag loader uses <code>&lt;script&gt;</code> tag to load script.</li> </ul>"},{"location":"scroller/","title":"Scroller","text":""},{"location":"scroller/#introduction","title":"Introduction","text":"<p>Drag content. Slow down when dragging released, pull back when out of bounds.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"scroller/#live-demos","title":"Live demos","text":"<ul> <li>Scroller</li> </ul>"},{"location":"scroller/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"scroller/#install-plugin","title":"Install plugin","text":""},{"location":"scroller/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexscrollerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexscrollerplugin.min.js', true);\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = scene.plugins.get('rexscrollerplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ScrollerPlugin from 'phaser3-rex-plugins/plugins/scroller-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexScroller',\nplugin: ScrollerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = scene.plugins.get('rexScroller').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Scroller from 'phaser3-rex-plugins/plugins/scroller.js';\n</code></pre></li> <li>Add scroller behavior     <pre><code>var scroller = new Scroller(gameObject, config);\n</code></pre></li> </ul>"},{"location":"scroller/#create-instance","title":"Create instance","text":"<pre><code>var scroller = scene.plugins.get('rexScroller').add(gameObject, {\nbounds: [\nbottomBound,\ntopBound\n],\nvalue: topBound,    // threshold: 10,\n// slidingDeceleration: 5000,\n// backDeceleration: 2000,\n\n// dragReverse: false,\n// dragRate: 1,\n\n// enable: true,\n// orientation: 'vertical',\n// pointerOutRelease: true,\n\n// valuechangeCallback: null,\n// valuechangeCallbackScope: null,\n\n// overmaxCallback: null,\n// overmaxCallbackScope: null,\n\n// overminCallback: null,\n// overminCallbackScope: null,\n});\n</code></pre> <ul> <li><code>bounds</code> : An array of 2 values <code>[bound0, bound1]</code></li> <li><code>value</code> : Initial value between bound0 and bound1<ul> <li>Map this value to position of content under event 'valuechange'</li> </ul> </li> <li><code>threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>dragReverse</code> :<ul> <li><code>false</code> : Dragging up will decrease value, dragging down will increase value. Default behavior.<ul> <li>Use this mode when scrolling by position of game object.</li> </ul> </li> <li><code>true</code> : Dragging up will increase value, dragging down will decrease value.<ul> <li>Use this mode when scrolling by camera.</li> </ul> </li> </ul> </li> <li><code>dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li><code>enable</code> : Set true to get dragging events.</li> <li><code>orientation</code> :<ul> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>0</code> : dragging on vertical/y axis.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : dragging on horizontal/x axis.</li> </ul> </li> <li><code>pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject. Default value is <code>true</code>.</li> <li><code>valuechangeCallback</code> , <code>valuechangeCallbackScope</code> : Bind this callback to <code>valuechange</code> event</li> <li><code>overminCallback</code> , <code>overmaxCallbackScope</code> : Bind this callback to <code>overmax</code> event</li> <li><code>overminCallback</code> , <code>overminCallbackScope</code> : Bind this callback to <code>overmin</code> event</li> </ul>"},{"location":"scroller/#set-bounds","title":"Set bounds","text":"<pre><code>this.setBounds(bounds);  // bounds: [bound0, bound1]\n// this.setBounds(bound0, bound1);\n</code></pre>"},{"location":"scroller/#set-deceleration","title":"Set deceleration","text":"<ul> <li>Deceleration of slow down when dragging released     <pre><code>scroller.setSlidingDeceleration(dec);\n</code></pre><ul> <li>Disable     <pre><code>scroller.setSlidingDeceleration(false);\n</code></pre></li> </ul> </li> <li>Deceleration of pull back when out of bounds     <pre><code>scroller.setBackDeceleration(dec);\n</code></pre><ul> <li>Disable     <pre><code>scroller.setBackDeceleration(false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"scroller/#get-value","title":"Get value","text":"<pre><code>var value = scroller.value;\n</code></pre>"},{"location":"scroller/#set-value","title":"Set value","text":"<ul> <li>Set value     <pre><code>scroller.value = newValue;\n// scroller.setValue(newValue);\n</code></pre></li> <li>Set value, clamp between minValue and maxValue     <pre><code>scroller.setValue(newValue, true);\n</code></pre></li> <li>Add value     <pre><code>scroller.value += inc;\n// scroller.addValue(inc);\n</code></pre></li> <li>Add value, clamp between minValue and maxValue     <pre><code>scroller.addValue(inc, true);\n</code></pre></li> </ul> <p>Fires <code>valuechange</code> event if new value is not equal to current value.</p>"},{"location":"scroller/#events","title":"Events","text":"<ul> <li>Value changed     <pre><code>scroller.on('valuechange', function(newValue, prevValue){ /* ... */ });\n</code></pre><ul> <li>Set position of content under this event</li> </ul> </li> <li>Value out of max/min bound     <pre><code>scroller.on('overmax', function(newValue, prevValue){ /* ... */ });\n</code></pre> <pre><code>scroller.on('overmin', function(newValue, prevValue){ /* ... */ });\n</code></pre></li> <li>On drag start     <pre><code>scroller.on('dragstart', function() { /* ... */ });\n</code></pre></li> <li>On drag end     <pre><code>scroller.on('dragend', function() { /* ... */ });\n</code></pre></li> </ul>"},{"location":"scroller/#drag","title":"Drag","text":""},{"location":"scroller/#drag-enable","title":"Drag enable","text":"<ul> <li>Get     <pre><code>var enable = scroller.enable;\n</code></pre></li> <li>Set     <pre><code>scroller.setEnable();\n// scroller.setEnable(enable);  // enable: true, or false\n</code></pre>     or     <pre><code>scroller.enable = enable; // enable: true, or false\n</code></pre></li> <li>Toggle     <pre><code>scroller.toggleEnable();\n</code></pre></li> </ul>"},{"location":"scroller/#is-dragging","title":"Is dragging","text":"<pre><code>var isDragging = scroller.isDragging;\n</code></pre>"},{"location":"scroller/#state-machine","title":"State machine","text":"<pre><code>graph TB\n\nIDLE[\"Idle\"] --&gt; |Drag| DRAG[\"Dragging&lt;br&gt;event 'valuechange'\"]\nDRAG --&gt; |Release| OnRelease{\"Under bounds?\"}\n\nOnRelease --&gt; |Yes| SLIDE[\"Sliding&lt;br&gt;Sliding-deceleration\"]\nSLIDE --&gt; |Stop| IDLE\nSLIDE --&gt; |Drag| DRAG\n\nOnRelease --&gt; |No| BACK[\"Pull back to bounds&lt;br&gt;Back-deceleration\"]\nBACK --&gt; |Stop| IDLE\nBACK --&gt; |Drag| DRAG</code></pre> <ul> <li>Get state     <pre><code>var state = scroller.state;\n</code></pre><ul> <li><code>'IDLE'</code> : No dragging, no sliding</li> <li><code>'DRAG'</code> : Dragging</li> <li><code>'SLIDE'</code> : Sliding when dragging released</li> <li><code>'BACK'</code> : Sliding back to bound when out of bound</li> </ul> </li> </ul>"},{"location":"sequence/","title":"Sequence","text":""},{"location":"sequence/#introduction","title":"Introduction","text":"<p>Run sequence commands in array.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"sequence/#live-demos","title":"Live demos","text":"<ul> <li>Sequence</li> </ul>"},{"location":"sequence/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"sequence/#install-plugin","title":"Install plugin","text":""},{"location":"sequence/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsequenceplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsequenceplugin.min.js', true);\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = this.plugins.get('rexsequenceplugin').add(config);\n</code></pre></li> </ul>"},{"location":"sequence/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SequencePlugin from 'phaser3-rex-plugins/plugins/sequence-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSequence',\nplugin: SequencePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = this.plugins.get('rexSequence').add(config);\n</code></pre></li> </ul>"},{"location":"sequence/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Sequence from 'phaser3-rex-plugins/plugins/sequence.js';\n</code></pre></li> <li>Create sequence instance     <pre><code>var seq = new Sequence(config);\n</code></pre></li> </ul>"},{"location":"sequence/#create-sequence-instance","title":"Create sequence instance","text":"<pre><code>var seq = this.plugins.get('rexSequence').add({\n// yoyo: false  // reverse sequence when it reaches the end\n// repeat: 0,   // repeat count\n// loop: false  // repeat forever\n});\n</code></pre>"},{"location":"sequence/#load-commands","title":"Load commands","text":"<pre><code>seq.load(commands, actionScope);\n</code></pre> <ul> <li>Format of command :     <pre><code>[fnName, param0, param1, ...]\n</code></pre></li> <li>Commands in nested array :     <pre><code>[\ncommand0,\ncommand1\n[\ncommand2,\ncommand3\n]\n]\n</code></pre></li> <li>ActionScope</li> </ul> <p>Format of command is the same as run-command.</p>"},{"location":"sequence/#run-commands","title":"Run commands","text":"<pre><code>seq.start();\n</code></pre> <ul> <li>Run command :     <pre><code>var eventEmitter = actionScope[fnName].call(actionScope, param0, param1 ...);\n</code></pre><ul> <li>Return an event emitter to pause the sequence, otherwise run next command  </li> <li>Sequence will continue when that event emitter fires <code>complete</code> event</li> </ul> </li> </ul>"},{"location":"sequence/#stop","title":"Stop","text":"<pre><code>seq.stop();\n</code></pre>"},{"location":"sequence/#events","title":"Events","text":"<ul> <li>On sequence completed :</li> </ul> <pre><code>seq.on('complete', function(actionScope, seq){ });\n</code></pre>"},{"location":"sequence/#action-of-commands","title":"Action of commands","text":"<p>Action of commands, extended from <code>Phaser.Events.EventEmitter</code>.</p> <pre><code>class ActionKlass extends Phaser.Events.EventEmitter {\nconstructor(scene) {\nsuper();\n\nthis.scene = scene;\nthis.myConsole = scene.add.text(100, 100, '');\n\nthis['wait-click'] = this.waitClick;\nthis['wait-time'] = this.waitTime;\n}\n\n// callbacks\nprint(msg) {\nthis.myConsole.setText(msg);\n// return undefined to run next command\n}\n\nwaitClick() {\nthis.scene.input.once('pointerup', this.complete, this);\nreturn this;  // return eventEmitter to pause the sequence\n}\n\nwaitTime(delay) {\nthis.scene.time.delayedCall(delay * 1000, this.complete, [], this);\nreturn this;  // return eventEmitter to pause the sequence\n}\n\ncomplete() {\nthis.emit('complete');  // resume sequence\n}\n}\nvar actionScope = new ActionKlass(scene);\n</code></pre> <p>Now this scope supports 3 commands</p> <ul> <li>print(msg): <code>['print', msg]</code></li> <li>waitClick(): <code>['wait-click']</code></li> <li>waitTime(delay): <code>['wait-time', delay]</code></li> </ul>"},{"location":"sequence/#state","title":"State","text":"<pre><code>var state = seq.state;\n</code></pre> <ul> <li><code>0</code> : Idle</li> <li><code>1</code> : Run</li> <li><code>2</code> : Last command</li> <li><code>3</code> : Completed</li> </ul> <pre><code>var completed = seq.completed; // seq.state === 3\n</code></pre>"},{"location":"sequence/#other-properties","title":"Other properties","text":"<ul> <li>Yoyo<ul> <li>Get     <pre><code>var yoyo = seq.yoyo;\n</code></pre></li> <li>Set     <pre><code>seq.setYoyo();\nseq.setYoyo(fals);\n// seq.yoyo = yoyo;\n</code></pre></li> </ul> </li> <li>Repeat<ul> <li>Get     <pre><code>var repeat = seq.repeat;\n</code></pre></li> <li>Set     <pre><code>seq.setRepeat(count);\n</code></pre></li> </ul> </li> <li>Loop<ul> <li>Get     <pre><code>var loop = seq.loop;\n</code></pre></li> <li>Set     <pre><code>seq.setLoop();\nseq.setLoop(fals);\n// seq.loop = loop;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/","title":"Barrel","text":"<p>Note</p> <p>Phaser3.60 has a built-in barrel effect.</p>"},{"location":"shader-barrel/#introduction","title":"Introduction","text":"<p>Barrel post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-barrel/#live-demos","title":"Live demos","text":"<ul> <li>Barrel</li> </ul>"},{"location":"shader-barrel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-barrel/#install-plugin","title":"Install plugin","text":""},{"location":"shader-barrel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexbarrelpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbarrelpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexbarrelpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexbarrelpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import BarrelPipelinePlugin from 'phaser3-rex-plugins/plugins/barrelpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexBarrelPipeline',\nplugin: BarrelPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import BarrelPostFx from 'phaser3-rex-plugins/plugins/barrelpipeline.js';\nvar config = {\n// ...\npipeline: [BarrelPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(BarrelPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(BarrelPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-barrel/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 barrel effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(gameObject, {\n// shrink: false,\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// power: 0.5,\n// intensity: 1,\n\n// name: 'rexBarrelPostFx'\n});\n</code></pre><ul> <li><code>shrink</code> : <ul> <li><code>false</code> : Fish-eye effect</li> <li><code>true</code> : Anti fish-eye effect.</li> </ul> </li> <li><code>center.x</code>, <code>center.y</code> : Local position of barrel center.</li> <li><code>radius</code> : Barrel radius.</li> <li><code>power</code> : 0~1.</li> <li><code>intensity</code> : 0(original) ~ 1(barrel). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 barrel effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexBarrelPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexBarrelPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexBarrelPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexBarrelPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexBarrelPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#shrink-mode","title":"Shrink mode","text":"<ul> <li>Get     <pre><code>var shrinkMode = pipelineInstance.shrinkMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setShrinkMode(true);\n// pipelineInstance.setShrinkMode(false);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#power","title":"Power","text":"<ul> <li>Get     <pre><code>var power = pipelineInstance.power;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.power = power;\n</code></pre>     or     <pre><code>pipelineInstance.setPower(power);\n</code></pre></li> </ul>"},{"location":"shader-barrel/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original) ~ 1(barrel)</li> </ul> </li> </ul>"},{"location":"shader-barrel/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-builtin/","title":"Effects","text":""},{"location":"shader-builtin/#introduction","title":"Introduction","text":"<p>Built-in pre-fx, and post-fx shader effects.</p> <ul> <li>Barrel Distortion : A nice pinch / bulge distortion effect.</li> <li>Bloom : Add bloom to any Game Object, with custom offset, blur strength, steps and color.</li> <li>Blur : 3 different levels of gaussian blur (low, medium and high) and custom distance and color.</li> <li>Bokeh / Tilt Shift : A bokeh and tiltshift effect, with intensity, contrast and distance settings.</li> <li>Circle Outline : Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.</li> <li>Color Matrix : Add a ColorMatrix to any Game Object with access to all of its methods, such as <code>sepia</code>, <code>greyscale</code>, <code>lsd</code> and lots more.</li> <li>Glow : Add a smooth inner or outer glow, with custom distance, strength and color.</li> <li>Displacement : Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.</li> <li>Gradient : Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.</li> <li>Pixelate : Make any Game Object appear pixelated, to a varying degree.</li> <li>Shine : Run a 'shine' effect across a Game Object, either additively or as part of a reveal.</li> <li>Shadow : Add a drop shadow behind a Game Object, with custom depth and color.</li> <li>Vignette : Apply a vignette around a Game Object, with custom offset position, radius and color.</li> <li>Wipe / Reveal : Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.</li> </ul> <p>Texture-based Game Objects also support Pre FX, including: Image, Sprite, TileSprite, Text, RenderTexture, Video.</p> <p>All Game Objects and camera support Post FX. These are effects applied after the Game Object has been rendered.</p> <ul> <li>Author: Richard Davey</li> <li>Pre-fx, and Post-fx shader effects</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-builtin/#live-demos","title":"Live demos","text":"<ul> <li>Official demos</li> </ul>"},{"location":"shader-builtin/#usage","title":"Usage","text":""},{"location":"shader-builtin/#barrel","title":"Barrel","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addBarrel(amount);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.</li> </ul> </li> <li><code>amount</code> : The amount of distortion applied to the barrel effect.<ul> <li><code>1</code> : No distortion</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBarrel(amount);\n</code></pre> <pre><code>var effect = camera.postFX.addBarrel(amount);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.amount = amount;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#bloom","title":"Bloom","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre><ul> <li><code>color</code> : The color of the Bloom, as a hex value.</li> <li><code>offsetX</code>, <code>offsetY</code> : The horizontal/vertical offset of the bloom effect. Default value is <code>1</code>.</li> <li><code>blurStrength</code> , <code>strength</code> : The strength of the blur/blend process of the bloom effect. Default value is <code>1</code>.</li> <li><code>steps</code> : The number of steps to run the Bloom effect for. This value should always be an integer. Default value is <code>4</code>.<ul> <li>The higher the value, the smoother the Bloom, but at the cost of exponentially more gl operations.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBloom(color, offsetX, offsetY, blurStrength, strength, steps);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color = color;  // hex value\neffect.offsetX = offsetX;\neffect.offsetY = offsetY;\neffect.blurStrength = blurStrength;\neffect.strength = strength;\neffect.steps = steps; // integer\n</code></pre></li> </ul>"},{"location":"shader-builtin/#blur","title":"Blur","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre><ul> <li><code>quality</code> : The quality of the blur effect. Default value is <code>0</code>.<ul> <li><code>0</code> : Low Quality</li> <li><code>1</code> : Medium Quality</li> <li><code>2</code> : High Quality</li> </ul> </li> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the blur effect. Default value is <code>2</code></li> <li><code>strength</code> : The strength of the blur effect. Default value is <code>1</code>.</li> <li><code>color</code> : The color of the blur, as a hex value. Default value is <code>0xffffff</code>.</li> <li><code>steps</code> : The number of steps to run the blur effect for. This value should always be an integer.<ul> <li>The higher the value, the smoother the blur, but at the cost of exponentially more gl operations.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.quality = quality;\neffect.x = x;\neffect.y = y;\neffect.strength = strength;\neffect.color = color;\neffect.steps = steps;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#bokeh","title":"Bokeh","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addBokeh(radius, amount, contrast);\n</code></pre><ul> <li><code>radius</code> : The radius of the bokeh effect. Default value is <code>0.5</code>.</li> <li><code>amount</code> : The amount of the bokeh effect. Default value is <code>1</code>.</li> <li><code>contrast</code> : The color contrast of the bokeh effect. Default value is <code>0.2</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addBlur(quality, x, y, strength, color, steps);\n</code></pre> <pre><code>var effect = camera.postFX.addBokeh(radius, amount, contrast);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.radius = radius;\neffect.amount = amount;\neffect.contrast = contrast;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#tilt-shift","title":"Tilt Shift","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre><ul> <li><code>radius</code> : The radius of the bokeh effect. Default value is <code>0.5</code>.</li> <li><code>amount</code> : The amount of the bokeh effect. Default value is <code>1</code>.</li> <li><code>contrast</code> : The color contrast of the bokeh effect. Default value is <code>0.2</code>.</li> <li><code>blurX</code>, <code>blurY</code> : The amount of horizontal/vertical blur.</li> <li><code>strength</code> : The strength of the blur.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre> <pre><code>var effect = camera.postFX.addTiltShift(radius, amount, contrast, blurX, blurY, strength);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.radius = radius;\neffect.amount = amount;\neffect.contrast = contrast;\neffect.blurX = blurX;\neffect.blurY = blurY;\neffect.strength = strength;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#circle-outline","title":"Circle Outline","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre><ul> <li><code>thickness</code> : The width of the circle around the texture, in pixels. Default value is <code>8</code>.</li> <li><code>color</code> : The color of the circular ring, given as a number value. Default value is <code>0xfeedb6</code>.</li> <li><code>backgroundColor</code> : The color of the background, behind the texture, given as a number value. Default value is <code>0xff0000</code>.</li> <li><code>scale</code> : The scale of the circle. Default value is <code>1</code>.<ul> <li><code>1</code> : Full size of the underlying texture.</li> </ul> </li> <li><code>feather</code> : The amount of feathering to apply to the circle from the ring. Default value is <code>0.005</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre> <pre><code>var effect = camera.postFX.addCircle(thickness, color, backgroundColor, scale, feather);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.thickness = thickness;\neffect.color = color;\neffect.backgroundColor = backgroundColor;\neffect.scale = scale;\neffect.feather = feather;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#colormatrix","title":"ColorMatrix","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addColorMatrix();\n</code></pre></li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addColorMatrix();\n</code></pre> <pre><code>var effect = camera.postFX.addColorMatrix();\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Methods<ul> <li>Brightness : Changes the brightness of this ColorMatrix by the given amount.     <pre><code>effect.brightness(value, multiply);\n</code></pre><ul> <li><code>value</code> : The amount of brightness to apply to this ColorMatrix. <code>0</code>(black)~<code>1</code>. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Saturate : Changes the saturation of this ColorMatrix by the given amount.     <pre><code>effect.saturate(value, multiply);\n</code></pre><ul> <li><code>value</code> :  The amount of saturation to apply to this ColorMatrix. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Desaturate : Desaturates this ColorMatrix (removes color from it).     <pre><code>effect.desaturate(value, multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Hue : Rotates the hues of this ColorMatrix by the value given.     <pre><code>effect.hue(rotation, multiply);\n</code></pre><ul> <li><code>rotation</code> : The amount of hue rotation to apply to this ColorMatrix, in degrees. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Grayscale : Sets this ColorMatrix to be grayscale.     <pre><code>effect.grayscale(value, multiply);\n</code></pre><ul> <li><code>value</code> : The grayscale scale <code>0</code>(black)~<code>1</code>. Default value is <code>1</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>BlackWhite : Sets this ColorMatrix to be black and white.     <pre><code>effect.blackWhite(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Contrast : Change the contrast of this ColorMatrix by the amount given.     <pre><code>effect.contrast(value, multiply);\n</code></pre><ul> <li><code>value</code> : The amount of contrast to apply to this ColorMatrix. Default value is <code>0</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Negative : Converts this ColorMatrix to have negative values.     <pre><code>effect.negative(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>DesaturateLuminance : Apply a desaturated luminance to this ColorMatrix.     <pre><code>effect.desaturateLuminance(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Sepia : Applies a sepia tone to this ColorMatrix.     <pre><code>effect.sepia(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Night : Applies a night vision tone to this ColorMatrix.     <pre><code>effect.night(intensity, multiply);\n</code></pre><ul> <li><code>intensity</code> : The intensity of this effect. Default value is <code>0.1</code>.</li> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>LSD : Applies a trippy color tone to this ColorMatrix.     <pre><code>effect.lsd(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Brown : Applies a brown tone to this ColorMatrix.     <pre><code>effect.brown(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>VintagePinhole : Applies a vintage pinhole color effect to this ColorMatrix.     <pre><code>effect.vintagePinhole(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Kodachrome : Applies a kodachrome color effect to this ColorMatrix.     <pre><code>effect.kodachrome(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Technicolor : Applies a technicolor color effect to this ColorMatrix.     <pre><code>effect.technicolor(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>Polaroid : Applies a polaroid color effect to this ColorMatrix.     <pre><code>effect.polaroid(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> <li>ShiftToBGR : Shifts the values of this ColorMatrix into BGR order.     <pre><code>effect.shiftToBGR(multiply);\n</code></pre><ul> <li><code>multiply</code> : Multiply the resulting ColorMatrix (<code>true</code>), or set it (<code>false</code>) ?<ul> <li><code>true</code> : Multiply the resulting.</li> <li><code>false</code> : Set the resulting. Default behavior.</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-builtin/#displacement","title":"Displacement","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addDisplacement(texture, x, y);\n</code></pre><ul> <li><code>texture</code> : The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager. Default value is <code>'__WHITE'</code>.<ul> <li>You can only use a whole texture, not a frame from a texture atlas or sprite sheet.</li> </ul> </li> <li><code>x</code>, <code>y</code> : The amount of horizontal/vertical displacement to apply. Default value is <code>0.005</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addDisplacement(texture, x, y);\n</code></pre> <pre><code>var effect = camera.postFX.addDisplacement(texture, x, y);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;    </code></pre></li> <li>Methods<ul> <li>Set texture     <pre><code>effect.setTexture(key);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-builtin/#glow","title":"Glow","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addGlow(color, outerStrength, innerStrength, knockout);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.    </li> </ul> </li> <li><code>color</code> : The color of the glow effect as a number value. Default value is <code>0xffffff</code>.</li> <li><code>outerStrength</code>, <code>innerStrength</code> : The strength of the glow outward/inward from the edge of the Sprite. Default value is <code>4</code>/<code>0</code>.</li> <li><code>knockout</code> : <ul> <li><code>true</code> : Only the glow is drawn</li> <li><code>false</code> : Draw glow and texture. Default behavior.</li> </ul> </li> <li><code>quality</code> : Only available for PostFX. Sets the quality of this Glow effect. Default is 0.1. Cannot be changed post-creation.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addGlow(color, outerStrength, innerStrength, knockout, quality, distance);\n</code></pre> <pre><code>var effect = camera.postFX.addGlow(color, outerStrength, innerStrength, knockout, quality, distance);\n</code></pre><ul> <li><code>quality</code> : Sets the quality of this Glow effect. Default is <code>0.1</code>. Cannot be changed post-creation.</li> <li><code>distance</code> : Sets the distance of this Glow effect. Default is <code>10</code>. Cannot be changed post-creation.</li> </ul> </li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color = color;\neffect.outerStrength = outerStrength;\neffect.innerStrength = innerStrength;\neffect.knockout = knockout;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#gradient","title":"Gradient","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre><ul> <li><code>color1</code>, <code>color2</code> : The first/second gradient color, given as a number value. Default values are <code>0xff0000</code>/<code>0x00ff00</code>.</li> <li><code>alpha</code> : The alpha value of the gradient effect.</li> <li><code>fromX</code>, <code>fromY</code> : The horizontal/vertical position the gradient will start from. Value between <code>0</code> and <code>1</code>.</li> <li><code>toX</code>, <code>toY</code> : The horizontal/vertical position the gradient will end at. Value between <code>0</code> and <code>1</code>.</li> <li><code>size</code> : How many 'chunks' the gradient is divided in to, as spread over the entire height of the texture.<ul> <li><code>0</code> : Smooth gradient. Default behavior.</li> <li>Others : Retro chunky effect.</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre> <pre><code>var effect = camera.postFX.addGradient(color1, color2, alpha, fromX, fromY, toX, toY, size);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.color1 = color1;\neffect.color2 = color2;\neffect.alpha = alpha;\neffect.fromX = fromX;\neffect.fromY = fromY;\neffect.toX = toX;\neffect.toY = toY;\neffect.size = size;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#pixelate","title":"Pixelate","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addPixelate(amount);\n</code></pre><ul> <li><code>amount</code> : The amount of pixelation to apply, in pixels.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addPixelate(amount);\n</code></pre> <pre><code>var effect = camera.postFX.addPixelate(amount);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.amount = amount;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#shadow","title":"Shadow","text":"<ul> <li>Add pre-fx to game object     <pre><code>// gameObject.preFX.setPadding(padding);\nvar effect = gameObject.preFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre><ul> <li><code>padding</code> : The amount of padding to add to this Game Object, in pixels.<ul> <li>Used when <code>amount</code> is larger than <code>1</code>.    </li> </ul> </li> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the shadow effect. Default value is <code>0</code>.</li> <li><code>decay</code> : The amount of decay for shadow effect. Default value is <code>0.1</code>.</li> <li><code>power</code> : The power of the shadow effect. Default value is <code>1</code>.</li> <li><code>color</code> : The color of the shadow. Default value is <code>0x000000</code>.</li> <li><code>samples</code> : The number of samples that the shadow effect will run for. An integer between <code>1</code> and <code>12</code>.</li> <li><code>intensity</code> : The intensity of the shadow effect. Default value is <code>1</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre> <pre><code>var effect = camera.postFX.addShadow(x, y, decay, power, color, samples, intensity);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;\neffect.decay = decay;\neffect.power = power;\neffect.color = color;\neffect.samples = samples;\neffect.intensity = intensity;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#shine","title":"Shine","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre><ul> <li><code>speed</code> : The speed of the Shine effect. Default value is <code>0.5</code>.</li> <li><code>lineWidth</code> : The line width of the Shine effect. Default value is <code>0.5</code>.</li> <li><code>gradient</code> : The gradient of the Shine effect. Default value is <code>3</code>.</li> <li><code>reveal</code> : Does this Shine effect reveal or get added to its target?</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre> <pre><code>var effect = camera.postFX.addShine(speed, lineWidth, gradient, reveal);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.speed = speed;\neffect.lineWidth = lineWidth;\neffect.gradient = gradient;\neffect.reveal = reveal;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#vignette","title":"Vignette","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addVignette(x, y, radius, strength);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical offset of the vignette effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.5</code>.</li> <li><code>radius</code> : The radius of the vignette effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.5</code>.</li> <li><code>strength</code> : The strength of the vignette effect. Default value is <code>0.5</code>.</li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addVignette(x, y, radius, strength);\n</code></pre> <pre><code>var effect = camera.postFX.addVignette(x, y, radius, strength);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.x = x;\neffect.y = y;\neffect.radius = radius;\neffect.strength = strength;\n</code></pre></li> </ul>"},{"location":"shader-builtin/#wipe","title":"Wipe","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addWipe(wipeWidth, direction, axis);\n</code></pre><ul> <li><code>wipeWidth</code> : The width of the wipe effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.1</code>.</li> <li><code>direction</code> : The direction of the wipe effect.<ul> <li><code>0</code> : Left to right, or top to bottom</li> <li><code>1</code> : Right to left, or bottom to top</li> </ul> </li> <li><code>axis</code> : The axis of the wipe effect.<ul> <li><code>0</code> : Left to right, or right to left</li> <li><code>1</code> : Bottom to top, or top to bottom</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addWipe(wipeWidth, direction, axis);\n</code></pre> <pre><code>var effect = camera.postFX.addWipe(wipeWidth, direction, axis);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.progress = t; // 0~1\neffect.wipeWidth = wipeWidth;\neffect.direction = direction;  // 0, 1\neffect.axis = axis;  // 0, 1    \n</code></pre></li> </ul>"},{"location":"shader-builtin/#reveal","title":"Reveal","text":"<ul> <li>Add pre-fx to game object     <pre><code>var effect = gameObject.preFX.addReveal(wipeWidth, direction, axis);\n</code></pre><ul> <li><code>wipeWidth</code> : The width of the wipe effect. Value is between <code>0</code> and <code>1</code>. Default value is <code>0.1</code>.</li> <li><code>direction</code> : The direction of the wipe effect.<ul> <li><code>0</code> : Left to right, or top to bottom</li> <li><code>1</code> : Right to left, or bottom to top</li> </ul> </li> <li><code>axis</code> : The axis of the wipe effect.<ul> <li><code>0</code> : Left to right, or right to left</li> <li><code>1</code> : Bottom to top, or top to bottom</li> </ul> </li> </ul> </li> <li>Add post-fx to game object, or camera     <pre><code>var effect = gameObject.postFX.addReveal(wipeWidth, direction, axis);\n</code></pre> <pre><code>var effect = camera.postFX.addReveal(wipeWidth, direction, axis);\n</code></pre></li> <li>Disable effect     <pre><code>effect.setActive(false);\n// effect.active = false;\n</code></pre></li> <li>Remove effect     <pre><code>gameObject.preFX.remove(effect);\n</code></pre> <pre><code>camera.postFX.remove(effect);\n</code></pre></li> <li>Properties     <pre><code>effect.progress = t; // 0~1\neffect.wipeWidth = wipeWidth;\neffect.direction = direction;  // 0, 1\neffect.axis = axis;  // 0, 1\n</code></pre></li> </ul>"},{"location":"shader-builtin/#remove-all-effects","title":"Remove all effects","text":"<p><pre><code>gameObject.preFX.clear();\n</code></pre> <pre><code>gameObject.postFX.clear();\n</code></pre> <pre><code>camera.postFX.clear();\n</code></pre></p>"},{"location":"shader-builtin/#disable-all-effects","title":"Disable all effects","text":"<p><pre><code>gameObject.preFX.disable();\n// gameObject.preFX.disable(true);  // Also remove all effects\n</code></pre> <pre><code>gameObject.postFX.disable();\n// gameObject.postFX.disable(true);  // Also remove all effects\n</code></pre> <pre><code>camera.postFX.disable();\n// camera.postFX.disable(true);  // Also remove all effects\n</code></pre></p>"},{"location":"shader-colorreplace/","title":"Color replace","text":""},{"location":"shader-colorreplace/#introduction","title":"Introduction","text":"<p>Replace color post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-colorreplace/#live-demos","title":"Live demos","text":"<ul> <li>Color replace</li> </ul>"},{"location":"shader-colorreplace/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-colorreplace/#install-plugin","title":"Install plugin","text":""},{"location":"shader-colorreplace/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcolorreplacepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcolorreplacepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ColorReplacePipelinePlugin from 'phaser3-rex-plugins/plugins/colorreplacepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexColorReplacePipeline',\nplugin: ColorReplacePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ColorReplacePostFx from 'phaser3-rex-plugins/plugins/colorreplacepipeline.js';\nvar config = {\n// ...\npipeline: [ColorReplacePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ColorReplacePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ColorReplacePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 colorreplace effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, {\noriginalColor: 0xFF0000,\nnewColor: 0x000000,\n// epsilon: 0.4,\n\n// name: 'rexColorReplacePostFx'\n});\n</code></pre><ul> <li><code>originalColor</code> : The color (<code>0xRRGGBB</code>) that will be changed.</li> <li><code>newColor</code> : The resulting color (<code>0xRRGGBB</code>).</li> <li><code>epsilon</code> : Tolerance/sensitivity of the floating-point comparison between colors (lower = more exact, higher = more inclusive)    </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 colorreplace effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexColorReplacePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexColorReplacePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-colorreplace/#original-color","title":"Original color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.originalColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setOriginalColor(value);\n</code></pre> <pre><code>pipelineInstance.originalColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#new-color","title":"New color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.newColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setNewColor(value);\n</code></pre> <pre><code>pipelineInstance.newColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-colorreplace/#epsilon","title":"Epsilon","text":"<ul> <li>Get     <pre><code>var epsilon = pipelineInstance.epsilon;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.epsilon = epsilon;\n// pipelineInstance.epsilon += value;\n</code></pre>     or     <pre><code>pipelineInstance.setEpsilon(value);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/","title":"Cross-stitching","text":""},{"location":"shader-crossstitching/#introduction","title":"Introduction","text":"<p>Cross-stitching post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-crossstitching/#live-demos","title":"Live demos","text":"<ul> <li>Cross-stitching</li> </ul>"},{"location":"shader-crossstitching/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-crossstitching/#install-plugin","title":"Install plugin","text":""},{"location":"shader-crossstitching/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcrossstitchingpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcrossstitchingpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexcrossstitchingpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CrossStitchingPipelinePlugin from 'phaser3-rex-plugins/plugins/crossstitchingpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCrossStitchingPipeline',\nplugin: CrossStitchingPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import CrossStitchingPostFx from 'phaser3-rex-plugins/plugins/crossstitchingpipeline.js';\nvar config = {\n// ...\npipeline: [CrossStitchingPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(CrossStitchingPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(CrossStitchingPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-crossstitching/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 cross-stitching effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(gameObject, {\n// stitchingWidth: 6,\n// stitchingHeight: 6,\n// brightness: 0,\n\n// name: 'rexCrossStitchingPostFx'\n});\n</code></pre><ul> <li><code>stitchingWidth</code>, <code>stitchingHeight</code> : Stitching size.</li> <li><code>brightness</code> : Brightness of stitching edges</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 cross-stitching effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexCrossStitchingPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexCrossStitchingPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexCrossStitchingPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexCrossStitchingPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#stitching-size","title":"Stitching size","text":"<ul> <li>Get     <pre><code>var stitchingWidth = pipelineInstance.stitchingWidth;\nvar stitchingHeight = pipelineInstance.stitchingHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.stitchingWidth = stitchingWidth;\npipelineInstance.stitchingHeight = stitchingHeight;\n// pipelineInstance.stitchingWidth += value;\n// pipelineInstance.stitchingHeight += value;\n</code></pre>     or     <pre><code>pipelineInstance.setStitchingWidth(stitchingWidth);\npipelineInstance.setStitchingHeight(stitchingHeight);\npipelineInstance.setStitchingSize(stitchingWidth, stitchingHeight);\n</code></pre></li> </ul>"},{"location":"shader-crossstitching/#brightness","title":"Brightness","text":"<ul> <li>Get     <pre><code>var brightness = pipelineInstance.brightness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.brightness = brightness;\n// pipelineInstance.brightness += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBrightness(radius);\n</code></pre><ul> <li><code>brightness</code> : 0(black) ~ 1(white)</li> </ul> </li> </ul>"},{"location":"shader-dissolve/","title":"Dissolve","text":""},{"location":"shader-dissolve/#introduction","title":"Introduction","text":"<p>Dissolve transition post processing filter. (Reference)</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-dissolve/#live-demos","title":"Live demos","text":"<ul> <li>Dissolve</li> </ul>"},{"location":"shader-dissolve/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-dissolve/#install-plugin","title":"Install plugin","text":""},{"location":"shader-dissolve/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdissolvepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdissolvepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexdissolvepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexdissolvepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DissolvePipelinePlugin from 'phaser3-rex-plugins/plugins/dissolvepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDissolvePipeline',\nplugin: DissolvePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import DissolvePostFx from 'phaser3-rex-plugins/plugins/dissolvepipeline.js';\nvar config = {\n// ...\npipeline: [DissolvePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(DissolvePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(DissolvePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dissolve/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, {\n// toTexture: textureKey,\n// toFrame: frameName,\n// resizeMode: 1,\n\n// noiseX: undefined,\n// noiseY: undefined,\n// noiseZ: undefined,\n// fromEdgeStart: 0.01,\n// fromEdgeWidth: 0.05,\n// toEdgeStart: 0.01,\n// toEdgeWidth: 0.05,\n\n// progress: 0,\n\n// name: 'rexDissolvePostFx'\n});\n</code></pre><ul> <li><code>toTexture</code>, <code>toFrame</code> : Texture key and frame name of transition target texture.</li> <li><code>resizeMode</code> : Resize mode of transition target texture.<ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.</li> </ul> </li> <li><code>noiseX</code>, <code>noiseY</code>, <code>noiseZ</code> : Parameter of Perline noise.<ul> <li><code>undefined</code> : A random value.</li> </ul> </li> <li><code>fromEdgeStart</code>, <code>fromEdgeWidth</code> : Dissolve edge start, edge width of from-texture (texture of game object, or render result of camera).</li> <li><code>toEdgeStart</code>, <code>toEdgeWidth</code> : Reveal edge start, edge width of to-texture.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexDissolvePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexDissolvePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexDissolvePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDissolvePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexDissolvePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#transition-target-texture","title":"Transition target texture","text":"<ul> <li>Get     <pre><code>var textureKey = pipelineInstance.toFrame.texture.key;\nvar frameName = pipelineInstance.toFrame.name;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setTransitionTargetTexture(textureKey, frameName);\n// pipelineInstance.setTransitionTargetTexture(textureKey, frameName, resizeMode);\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#progress","title":"Progress","text":"<ul> <li>Get     <pre><code>var progress = pipelineInstance.progress;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setProgress(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.progress = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#resize-mode","title":"Resize mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.resizeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setResizeMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.    </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-dissolve/#noise","title":"Noise","text":"<ul> <li>Get     <pre><code>var noiseX = pipelineInstance.noiseX;\nvar noiseY = pipelineInstance.noiseY;\nvar noiseZ = pipelineInstance.noiseZ;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.noiseX = noiseX;\npipelineInstance.noiseY = noiseY;\npipelineInstance.noiseZ = noiseZ;\n</code></pre>     or     <pre><code>pipelineInstance.setNoise(noiseX, noiseY, noiseZ);\n// pipelineInstance.setNoise(); // Passing 3 random float numbers\n</code></pre></li> </ul>"},{"location":"shader-dissolve/#edge","title":"Edge","text":"<ul> <li>Get<ul> <li>From texture (texture of game object, or render result of camera)     <pre><code>var edgeStart = pipelineInstance.fromEdgeStart;\nvar edgeWidth = pipelineInstance.fromEdgeWidth;\n</code></pre></li> <li>To texture (transition target texture)     <pre><code>var edgeStart = pipelineInstance.toEdgeStart;\nvar edgeWidth = pipelineInstance.toEdgeWidth;\n</code></pre></li> </ul> </li> <li>Set<ul> <li>From texture (texture of game object, or render result of camera)     <pre><code>pipelineInstance.fromEdgeStart = edgeStart;\npipelineInstance.fromEdgeWidth = edgeWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setFromEdge(edgeStart, edgeWidth);\n</code></pre><ul> <li><code>edgeStart</code> : <code>0</code>~<code>1</code>, default value is <code>0.01</code></li> <li><code>edgeWidth</code> : <code>0</code>~<code>1</code>, default value is <code>0.05</code></li> </ul> </li> <li>To texture (transition target texture)     <pre><code>pipelineInstance.toEdgeStart = edgeStart;\npipelineInstance.toEdgeWidth = edgeWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setToEdge(edgeStart, edgeWidth);\n</code></pre><ul> <li><code>edgeStart</code> : <code>0</code>~<code>1</code>, default value is <code>0.01</code></li> <li><code>edgeWidth</code> : <code>0</code>~<code>1</code>, default value is <code>0.05</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-dropshadow/","title":"Drop shadow","text":""},{"location":"shader-dropshadow/#introduction","title":"Introduction","text":"<p>Drop-shadow post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-dropshadow/#live-demos","title":"Live demos","text":"<ul> <li>Drop-shadow</li> </ul>"},{"location":"shader-dropshadow/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-dropshadow/#install-plugin","title":"Install plugin","text":""},{"location":"shader-dropshadow/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexdropshadowpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdropshadowpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import DropShadowPipelinePlugin from 'phaser3-rex-plugins/plugins/dropshadowpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexDropShadowPipeline',\nplugin: DropShadowPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import DropShadowPostFx from 'phaser3-rex-plugins/plugins/dropshadowpipeline.js';\nvar config = {\n// ...\npipeline: [DropShadowPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(DropShadowPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(DropShadowPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 dropshadow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, {\n// ** Offset **\n// rotation: \n// angle: 45,      // degrees\n// distance: 5,\n\n// ** Shadow color **\n// shadowColor: 0xffffff,\n// alpha: 0.5,\n\n// shadowOnly: false,\n\n// ** Parameters of KawaseBlur **\n// blur: 4,\n// quality: 3,\n// pixelWidth: 1,\n// pixelHeight: 1,\n\n// name: 'rexDropShadowPostFx'\n});\n</code></pre><ul> <li>Offset<ul> <li><code>rotation</code>, <code>angle</code> : The angle of the shadow in radians/degrees.</li> <li><code>distance</code> : Distance of shadow.</li> </ul> </li> <li>Color<ul> <li><code>shadowColor</code> : Color of the shadow.</li> <li><code>alpha</code> : Alpha of the shadow.</li> </ul> </li> <li><code>shadowOnly</code> : Whether render shadow only.</li> <li>Parameters of KawaseBlur<ul> <li><code>blur</code> : The blur of the filter. Should be greater than <code>0</code>. If value is an Array, setting kernels.</li> <li><code>quality</code> : The quality of the filter. Should be an integer greater than <code>1</code>.    </li> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Sets the pixel size of the filter. Large size is blurrier. For advanced usage.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 dropshadow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexDropShadowPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexDropShadowPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#rotation","title":"Rotation","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;   // radians\n// pipelineInstance.angle = angle;      // degrees\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(radians);\npipelineInstance.setAngle(degrees);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#distance","title":"Distance","text":"<ul> <li>Get     <pre><code>var distance = pipelineInstance.distance;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.distance = distance;\n// pipelineInstance.distance += value;\n</code></pre>     or     <pre><code>pipelineInstance.setDistance(distance);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#shadow-color","title":"Shadow color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.shadowColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setShadowColor(value);\n</code></pre> <pre><code>pipelineInstance.shadowColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-dropshadow/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = pipelineInstance.alpha;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.alpha = alpha;\n</code></pre>     or     <pre><code>pipelineInstance.setAlpha(alpha);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#shadow-only","title":"Shadow-only","text":"<ul> <li>Get     <pre><code>var enable = pipelineInstance.shadowOnly;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.shadowOnly = enable;\n</code></pre>     or     <pre><code>pipelineInstance.setShadowOnly(enable);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#blur","title":"Blur","text":"<ul> <li>Get     <pre><code>var blur = pipelineInstance.blur;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.blur = blur;\n// pipelineInstance.blur += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBlur(value);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#quality","title":"Quality","text":"<ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.quality = quality;\n// pipelineInstance.quality += value;\n</code></pre>     or     <pre><code>pipelineInstance.setQuality(value);\n</code></pre></li> </ul>"},{"location":"shader-dropshadow/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/","title":"Fisheye","text":""},{"location":"shader-fisheye/#introduction","title":"Introduction","text":"<p>Fish-eye post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-fisheye/#live-demos","title":"Live demos","text":"<ul> <li>FishEye</li> </ul>"},{"location":"shader-fisheye/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-fisheye/#install-plugin","title":"Install plugin","text":""},{"location":"shader-fisheye/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfisheyepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfisheyepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexfisheyepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexfisheyepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FishEyePipelinePlugin from 'phaser3-rex-plugins/plugins/fisheyepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFishEyePipeline',\nplugin: FishEyePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import FishEyePostFx from 'phaser3-rex-plugins/plugins/fisheyepipeline.js';\nvar config = {\n// ...\npipeline: [FishEyePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(FishEyePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(FishEyePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-fisheye/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 fisheye effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// intensity: 1,\n// mode:0,  // 0|1|'asin'|'sin'\n\n// name: 'rexFishEyePostFx'\n});\n</code></pre><ul> <li><code>center.x</code>, <code>center.y</code> : Local position of fisheye center.</li> <li><code>radius</code> : FishEye radius.</li> <li><code>intensity</code> : 0(original) ~ 1(fisheye). Default value is <code>1</code>.</li> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'asin'</code> : asin mode. Defaule value is <code>0</code>.</li> <li><code>1</code>, or <code>'sin'</code> : sin mode.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 fisheye effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexFishEyePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexFishEyePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexFishEyePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexFishEyePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexFishEyePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(intensity);\n</code></pre><ul> <li><code>intensity</code> : 0(original) ~ 1(fisheye)</li> </ul> </li> </ul>"},{"location":"shader-fisheye/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-fisheye/#mode","title":"Mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.fishEyeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setFishEyeMode(mode);\n</code></pre><ul> <li><code>0</code>, or <code>'asin'</code> : asin mode.</li> <li><code>1</code>, or <code>'sin'</code> : sin mode.</li> </ul> </li> </ul>"},{"location":"shader-glowfilter/","title":"Glow","text":"<p>Note</p> <p>Phaser3.60 has a built-in Glow effect.</p>"},{"location":"shader-glowfilter/#introduction","title":"Introduction","text":"<p>Glow post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-glowfilter/#live-demos","title":"Live demos","text":"<ul> <li>Glow filter</li> </ul>"},{"location":"shader-glowfilter/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-glowfilter/#install-plugin","title":"Install plugin","text":""},{"location":"shader-glowfilter/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexglowfilterpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexglowfilterpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilterpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilterpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilterpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGlowFilterPipeline',\nplugin: GlowFilterPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilterpipeline.js';\nvar config = {\n// ...\npipeline: [GlowFilterPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 glow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, {\n// intensity: 0\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(white color)<ul> <li>Suggestion value : 0 ~ 0.02</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 glow effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(white color)<ul> <li>Suggestion value : 0 ~ 0.02</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/","title":"Glow","text":"<p>Note</p> <p>Phaser3.60 has a built-in Glow effect.</p>"},{"location":"shader-glowfilter2/#introduction","title":"Introduction","text":"<p>Glow post processing filter, port from pixi. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-glowfilter2/#live-demos","title":"Live demos","text":"<ul> <li>Glow filter</li> </ul>"},{"location":"shader-glowfilter2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-glowfilter2/#install-plugin","title":"Install plugin","text":""},{"location":"shader-glowfilter2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexglowfilter2pipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexglowfilter2pipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilter2pipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexglowfilter2pipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilter2pipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGlowFilterPipeline',\nplugin: GlowFilterPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilter2pipeline.js';\nvar config = {\n// ...\npipeline: [GlowFilterPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GlowFilterPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 glowfilter effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(gameObject, {    // outerStrength: 4,\n// innerStrength: 0,\n// glowColor: 0xffffff,\n// knockout: false,\n\n// distance: 10,\n// quality: 0.1,\n\n// name: 'rexGlowFilterPostFx'\n});\n</code></pre><ul> <li><code>outerStrength</code> : The strength of the glow outward from the edge of the texture.</li> <li><code>innerStrength</code> : The strength of the glow inward from the edge of the texture.</li> <li><code>glowColor</code> : The color of the glow.</li> <li><code>knockout</code> :<ul> <li><code>true</code> : Only show effect.</li> <li><code>false</code> : Show content and effect.</li> </ul> </li> <li><code>distance</code> : The distance of the glow. It can't be changed after filter creation.</li> <li><code>quality</code> : 0~1. The higher the number the less performant. It can't be changed after filter creation.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 glowfilter effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGlowFilterPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGlowFilterPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGlowFilterPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#outer-strength","title":"Outer strength","text":"<ul> <li>Get     <pre><code>var outerStrength = pipelineInstance.outerStrength;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.outerStrength = outerStrength;\n// pipelineInstance.outerStrength += value;\n</code></pre>     or     <pre><code>pipelineInstance.setOuterStrength(value);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#inner-strength","title":"Inner strength","text":"<ul> <li>Get     <pre><code>var innerStrength = pipelineInstance.innerStrength;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.innerStrength = innerStrength;\n// pipelineInstance.innerStrength += value;\n</code></pre>     or     <pre><code>pipelineInstance.setInnerStrength(value);\n</code></pre></li> </ul>"},{"location":"shader-glowfilter2/#glow-color","title":"Glow color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.glowColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setGlowColor(value);\n</code></pre> <pre><code>pipelineInstance.glowColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#distance","title":"Distance","text":"<p>The distance of the glow. Make it 2 times more for resolution=2.  It can't be changed after filter creation.</p> <ul> <li>Get     <pre><code>var distance = pipelineInstance.distance;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setDistance(distance);\n</code></pre>     or     <pre><code>pipelineInstance.distance = distance;\n</code></pre><ul> <li><code>distance</code> : The distance of the glow.</li> </ul> </li> </ul>"},{"location":"shader-glowfilter2/#quality","title":"Quality","text":"<p>A number between 0 and 1 that describes the quality of the glow.  The higher the number the less performant.</p> <ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setQuality(quality);\n</code></pre>     or     <pre><code>pipelineInstance.quality = quality;\n</code></pre><ul> <li><code>quality</code> : <code>0</code> ~ <code>1</code>, default is <code>0.1</code>.<ul> <li><code>0.1</code> : 10 sample points.</li> <li><code>0.08</code> : 8 sample points.</li> <li><code>1</code> : 100 sample points.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-grayscale/","title":"Gray scale","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-grayscale/#introduction","title":"Introduction","text":"<p>Gray scale post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-grayscale/#live-demos","title":"Live demos","text":"<ul> <li>Gray scale</li> </ul>"},{"location":"shader-grayscale/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-grayscale/#install-plugin","title":"Install plugin","text":""},{"location":"shader-grayscale/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexgrayscalepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgrayscalepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexgrayscalepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexgrayscalepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import GrayScalePipelinePlugin from 'phaser3-rex-plugins/plugins/grayscalepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexGrayScalePipeline',\nplugin: GrayScalePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import GrayScalePostFx from 'phaser3-rex-plugins/plugins/grayscalepipeline.js';\nvar config = {\n// ...\npipeline: [GrayScalePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(GrayScalePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(GrayScalePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-grayscale/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(gameObject, {\n// intensity: 1,\n\n// name: 'rexGrayScalePostFx'\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(gray scale). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 gray-scale effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexGrayScalePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexGrayScalePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexGrayScalePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexGrayScalePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexGrayScalePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-grayscale/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(gray scale)</li> </ul> </li> </ul>"},{"location":"shader-horrifi/","title":"Horri-fi","text":""},{"location":"shader-horrifi/#introduction","title":"Introduction","text":"<p>6-in-1 post processing filter</p> <ul> <li>Bloom</li> <li>Chromatic Abberation</li> <li>Scanlines</li> <li>VHS Distortion</li> <li>CRT TV Curve</li> <li>Noise</li> <li>Vignette</li> </ul> <p>Reference : Horri-fi shader effect</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-horrifi/#live-demos","title":"Live demos","text":"<ul> <li>Horrifi</li> </ul>"},{"location":"shader-horrifi/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-horrifi/#install-plugin","title":"Install plugin","text":""},{"location":"shader-horrifi/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhorrifipipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhorrifipipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexhorrifipipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexhorrifipipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HorrifiPipelinePlugin from 'phaser3-rex-plugins/plugins/horrifipipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHorrifiPipeline',\nplugin: HorrifiPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import HorrifiPostFx from 'phaser3-rex-plugins/plugins/horrifipipeline.js';\nvar config = {\n// ...\npipeline: [HorrifiPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(HorrifiPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(HorrifiPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-horrifi/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 horrifi effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(gameObject, {\nenable: false,\n\n// Bloom\nbloomEnable: false,\nbloomRadius: 0, bloomIntensity: 0, bloomThreshold: 0,\nbloomTexelWidth: 0, bloomTexelHeight: 0,\n\n// Chromatic abberation\nchromaticEnable: false,\nchabIntensity: 0,\n\n// Vignette\nvignetteEnable: false,\nvignetteStrength: 0, vignetteIntensity: 0,\n\n// Noise\nnoiseEnable: false,\nnoiseStrength: 0,\nnoiseSeed: 0,\n\n// VHS\nvhsEnable: false,\nvhsStrength: 0,\n\n// Scanlines\nscanlinesEnable: false,\nscanStrength: 0,\n\n// CRT\ncrtEnable: false,\ncrtWidth: 0, crtHeight: 0,\n\n// name: 'rexHorrifiPostFx'\n});\n</code></pre><ul> <li><code>enable</code> : Default <code>enable</code> value for all shader effects.</li> <li>Bloom<ul> <li><code>bloomEnable</code> : Set <code>true</code> to enable bloom effect.</li> <li><code>bloomRadius</code>, <code>bloomIntensity</code>, <code>bloomThreshold</code></li> <li><code>bloomTexelWidth</code>, <code>bloomTexelHeight</code></li> </ul> </li> <li>Chromatic abberation<ul> <li><code>chromaticEnable</code> : Set <code>true</code> to enable chromatic abberation effect.</li> <li><code>chabIntensity</code></li> </ul> </li> <li>Vignette<ul> <li><code>vignetteEnable</code> : Set <code>true</code> to enable vignette effect.</li> <li><code>vignetteStrength</code>, <code>vignetteIntensity</code></li> </ul> </li> <li>Noise<ul> <li><code>noiseEnable</code> : Set <code>true</code> to enable noise effect.</li> <li><code>noiseStrength</code></li> <li><code>noiseSeed</code></li> </ul> </li> <li>VHS<ul> <li><code>vhsEnable</code> : Set <code>true</code> to enable VHS effect.</li> <li><code>vhsStrength</code></li> </ul> </li> <li>Scanlines<ul> <li><code>scanlinesEnable</code> : Set <code>true</code> to enable Scanlines effect.</li> <li><code>scanStrength</code></li> </ul> </li> <li>CRT<ul> <li><code>crtEnable</code> : Set <code>true</code> to enable Scanlines effect.</li> <li><code>crtWidth</code>, <code>crtHeight</code></li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 horrifi effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexHorrifiPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexHorrifiPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexHorrifiPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexHorrifiPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#bloom","title":"Bloom","text":""},{"location":"shader-horrifi/#enable","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setBloomEnable();\n// pipelineInstance.setBloomEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.bloomEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setBloomEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.bloomEnable = false;\n</code></pre></li> <li>Get     <pre><code>var bloomEnable = pipelineInstance.bloomEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setBloomRadius(value);\npipelineInstance.setBloomIntensity(value);\npipelineInstance.setBloomThreshold(value);\npipelineInstance.setBloomTexelSize(width, height);\n</code></pre>     or     <pre><code>pipelineInstance.bloomRadius = value;\npipelineInstance.bloomIntensity = value;\npipelineInstance.bloomThreshold = value;\npipelineInstance.bloomTexelWidth = width;\npipelineInstance.bloomTexelHeight = height;\n</code></pre></li> <li>Get     <pre><code>var bloomRadius = pipelineInstance.bloomRadius;\nvar bloomIntensity = pipelineInstance.bloomIntensity;\nvar bloomThreshold = pipelineInstance.bloomThreshold;\nvar bloomTexelWidth = pipelineInstance.bloomTexelWidth;\nvar bloomTexelHeight = pipelineInstance.bloomTexelHeight;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#chromatic-abberation","title":"Chromatic abberation","text":""},{"location":"shader-horrifi/#enable_1","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setChromaticEnable();\n// pipelineInstance.setChromaticEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.chromaticEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setChromaticEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.chromaticEnable = false;\n</code></pre></li> <li>Get     <pre><code>var chromaticEnable = pipelineInstance.chromaticEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_1","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setChabIntensity(value);\n</code></pre>     or     <pre><code>pipelineInstance.chabIntensity = value;\n</code></pre></li> <li>Get     <pre><code>var chabIntensity = pipelineInstance.chabIntensity;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#vignette","title":"Vignette","text":""},{"location":"shader-horrifi/#enable_2","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setVignetteEnable();\n// pipelineInstance.setVignetteEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setVignetteEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteEnable = false;\n</code></pre></li> <li>Get     <pre><code>var vignetteEnable = pipelineInstance.vignetteEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_2","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setVignetteStrength(value);\npipelineInstance.setVignetteIntensity(value);\n</code></pre>     or     <pre><code>pipelineInstance.vignetteStrength = value;\npipelineInstance.vignetteIntensity = value;\n</code></pre></li> <li>Get     <pre><code>var vignetteStrength = pipelineInstance.vignetteStrength;\nvar vignetteIntensity = pipelineInstance.vignetteIntensity;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#noise","title":"Noise","text":""},{"location":"shader-horrifi/#enable_3","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setNoiseEnable();\n// pipelineInstance.setNoiseEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.noiseEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setNoiseEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.noiseEnable = false;\n</code></pre></li> <li>Get     <pre><code>var noiseEnable = pipelineInstance.noiseEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_3","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setNoiseStrength(value);\npipelineInstance.setNoiseSeed(value);\n</code></pre>     or     <pre><code>pipelineInstance.noiseStrength = value;\npipelineInstance.noiseSeed = value;\n</code></pre></li> <li>Get     <pre><code>var noiseStrength = pipelineInstance.noiseStrength;\nvar noiseSeed = pipelineInstance.noiseSeed;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#vhs","title":"VHS","text":""},{"location":"shader-horrifi/#enable_4","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setVHSEnable();\n// pipelineInstance.setVHSEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.vhsEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setVHSEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.vhsEnable = false;\n</code></pre></li> <li>Get     <pre><code>var vhsEnable = pipelineInstance.vhsEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_4","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setVhsStrength(value);\n</code></pre>     or     <pre><code>pipelineInstance.vhsStrength = value;\n</code></pre></li> <li>Get     <pre><code>var vhsStrength = pipelineInstance.vhsStrength;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#scanlines","title":"Scanlines","text":""},{"location":"shader-horrifi/#enable_5","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setScanlinesEnable();\n// pipelineInstance.setScanlinesEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.scanlinesEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setScanlinesEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.scanlinesEnable = false;\n</code></pre></li> <li>Get     <pre><code>var scanlinesEnable = pipelineInstance.scanlinesEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_5","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setScanStrength(value);\n</code></pre>     or     <pre><code>pipelineInstance.scanStrength = value;\n</code></pre></li> <li>Get     <pre><code>var scanStrength = pipelineInstance.scanStrength;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#crt","title":"CRT","text":""},{"location":"shader-horrifi/#enable_6","title":"Enable","text":"<ul> <li>Enable     <pre><code>pipelineInstance.setCRTEnable();\n// pipelineInstance.setCRTEnable(true);\n</code></pre>     or     <pre><code>pipelineInstance.crtEnable = true;\n</code></pre></li> <li>Disable     <pre><code>pipelineInstance.setCRTEnable(false);\n</code></pre>     or     <pre><code>pipelineInstance.crtEnable = false;\n</code></pre></li> <li>Get     <pre><code>var crtEnable = pipelineInstance.crtEnable;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#parameters_6","title":"Parameters","text":"<ul> <li>Set     <pre><code>pipelineInstance.setCrtSize(width, height);\n</code></pre>     or     <pre><code>pipelineInstance.crtWidth = width;\npipelineInstance.crtHeight = height;\n</code></pre></li> <li>Get     <pre><code>var crtWidth = pipelineInstance.crtWidth;\nvar crtHeight = pipelineInstance.crtHeight;\n</code></pre></li> </ul>"},{"location":"shader-horrifi/#enable-all-effects","title":"Enable all effects","text":"<ul> <li>Enable all     <pre><code>pipelineInstance.setEnable();\n// pipelineInstance.setEnable(true);\n</code></pre></li> <li>Disable all     <pre><code>pipelineInstance.setEnable(false);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/","title":"HSL adjust","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-hsladjust/#introduction","title":"Introduction","text":"<p>Adjust color in HSL domain, post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-hsladjust/#live-demos","title":"Live demos","text":"<ul> <li>HSL adjust</li> </ul>"},{"location":"shader-hsladjust/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-hsladjust/#install-plugin","title":"Install plugin","text":""},{"location":"shader-hsladjust/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexhsladjustpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhsladjustpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexhsladjustpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexhsladjustpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import HSLAdjustPipelinePlugin from 'phaser3-rex-plugins/plugins/hsladjustpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexHSLAdjustPipeline',\nplugin: HSLAdjustPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHSLAdjustPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHSLAdjustPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import HSLAdjustPostFx from 'phaser3-rex-plugins/plugins/hsladjustpipeline.js';\nvar config = {\n// ...\npipeline: [HSLAdjustPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(HSLAdjustPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(HSLAdjustPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 hsl-adjust effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').add(gameObject, {\n// hueRotate: 0,\n// satAdjust: 1,\n// lumAdjust: 0.5,\n\n// name: 'rexHslAdjustPostFx'\n});\n</code></pre><ul> <li><code>hueRotate</code> : Hue rotation<ul> <li><code>0</code> : Rotate 0 degrees, original color (Default value)</li> <li><code>0.5</code> : Rotate 180 degrees</li> <li><code>1</code> : Rotate 360 degrees</li> </ul> </li> <li><code>satAdjust</code> : Saturation adjustment<ul> <li><code>0</code> : Gray</li> <li><code>1</code> : Original color (Default value)</li> <li> <p>1 :</p> </li> </ul> </li> <li><code>lumAdjust</code> : Lumen adjustment<ul> <li><code>0</code> : Dark</li> <li><code>0.5</code> : Original color (Default value)</li> <li><code>1</code> : White</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 hsl-adjust effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexHslAdjustPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexHslAdjustPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexHslAdjustPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexHslAdjustPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexHslAdjustPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-hsladjust/#hue-rotation","title":"Hue rotation","text":"<ul> <li>Get     <pre><code>var hueRotate = pipelineInstance.hueRotate;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.hueRotate = hueRotate;\n// pipelineInstance.hueRotate += value;\n</code></pre>     or     <pre><code>pipelineInstance.setHueRotate(value);\n</code></pre><ul> <li><code>0</code> : Rotate 0 degrees, original color</li> <li><code>0.5</code> : Rotate 180 degrees</li> <li><code>1</code> : Rotate 360 degrees</li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#saturation-adjustment","title":"Saturation adjustment","text":"<ul> <li>Get     <pre><code>var satAdjust = pipelineInstance.satAdjust;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.satAdjust = satAdjust;\n// pipelineInstance.satAdjust += value;\n</code></pre>     or     <pre><code>pipelineInstance.setSatAdjust(value);\n</code></pre><ul> <li><code>0</code> : Gray</li> <li><code>1</code> : Original color</li> <li> <p>1 :</p> </li> </ul> </li> </ul>"},{"location":"shader-hsladjust/#lumen-adjustment","title":"Lumen adjustment","text":"<ul> <li>Get     <pre><code>var lumAdjust = pipelineInstance.lumAdjust;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.lumAdjust = lumAdjust;\n// pipelineInstance.lumAdjust += value;\n</code></pre>     or     <pre><code>pipelineInstance.setLumAdjust(value);\n</code></pre><ul> <li><code>0</code> : Dark</li> <li><code>0.5</code> : Original color</li> <li><code>1</code> : White</li> </ul> </li> </ul>"},{"location":"shader-inverse/","title":"Inverse","text":"<p>Note</p> <p>Phaser3.60 has a built-in Color Matrix effects.</p>"},{"location":"shader-inverse/#introduction","title":"Introduction","text":"<p>Inverse color post processing filter.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-inverse/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-inverse/#install-plugin","title":"Install plugin","text":""},{"location":"shader-inverse/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexinversepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinversepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexinversepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexinversepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import InversePipelinePlugin from 'phaser3-rex-plugins/plugins/inversepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexInversePipeline',\nplugin: InversePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import InversePostFx from 'phaser3-rex-plugins/plugins/inversepipeline.js';\nvar config = {\n// ...\npipeline: [InversePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(InversePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(InversePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-inverse/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 inverse effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(gameObject, {\n// intensity: 1,\n\n// name: 'rexInversePostFx'\n});\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(inverse scale). Default value is <code>1</code>.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 inverse effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexInversePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexInversePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexInversePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexInversePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexInversePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-inverse/#intensity","title":"Intensity","text":"<ul> <li>Get     <pre><code>var intensity = pipelineInstance.intensity;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.intensity = intensity;\n// pipelineInstance.intensity += value;\n</code></pre>     or     <pre><code>pipelineInstance.setIntensity(radius);\n</code></pre><ul> <li><code>intensity</code> : 0(original color) ~ 1(inverse color)</li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/","title":"Kawase blur","text":"<p>Note</p> <p>Phaser3.60 has a built-in blur effect.</p>"},{"location":"shader-kawaseblur/#introduction","title":"Introduction","text":"<p>Kawase-blur post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-kawaseblur/#live-demos","title":"Live demos","text":"<ul> <li>Kawase-blur</li> </ul>"},{"location":"shader-kawaseblur/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-kawaseblur/#install-plugin","title":"Install plugin","text":""},{"location":"shader-kawaseblur/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexkawaseblurpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkawaseblurpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexkawaseblurpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexkawaseblurpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import KawaseBlurPipelinePlugin from 'phaser3-rex-plugins/plugins/kawaseblurpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexKawaseBlurPipeline',\nplugin: KawaseBlurPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import KawaseBlurPostFx from 'phaser3-rex-plugins/plugins/kawaseblurpipeline.js';\nvar config = {\n// ...\npipeline: [KawaseBlurPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(KawaseBlurPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(KawaseBlurPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-kawaseblur/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 kawaseblur effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(gameObject, {\n// blur: 4,\n// quality: 3,\n// pixelWidth: 1,\n// pixelHeight: 1,\n\n// name: 'rexKawaseBlurPostFx'\n});\n</code></pre><ul> <li><code>blur</code> : The blur of the filter. Should be greater than <code>0</code>. If value is an Array, setting kernels.</li> <li><code>quality</code> : The quality of the filter. Should be an integer greater than <code>1</code>.    </li> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Sets the pixel size of the filter. Large size is blurrier. For advanced usage.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 kawaseblur effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexKawaseBlurPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexKawaseBlurPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexKawaseBlurPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexKawaseBlurPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#blur","title":"Blur","text":"<ul> <li>Get     <pre><code>var blur = pipelineInstance.blur;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.blur = blur;\n// pipelineInstance.blur += value;\n</code></pre>     or     <pre><code>pipelineInstance.setBlur(value);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#quality","title":"Quality","text":"<ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.quality = quality;\n// pipelineInstance.quality += value;\n</code></pre>     or     <pre><code>pipelineInstance.setQuality(value);\n</code></pre></li> </ul>"},{"location":"shader-kawaseblur/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-outline/","title":"Outline","text":""},{"location":"shader-outline/#introduction","title":"Introduction","text":"<p>Outline post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-outline/#live-demos","title":"Live demos","text":"<ul> <li>Outline</li> </ul>"},{"location":"shader-outline/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-outline/#install-plugin","title":"Install plugin","text":""},{"location":"shader-outline/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexoutlinepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexoutlinepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexoutlinepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexoutlinepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexOutlinePipeline',\nplugin: OutlinePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import OutlinePostFx from 'phaser3-rex-plugins/plugins/outlinepipeline.js';\nvar config = {\n// ...\npipeline: [OutlinePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(OutlinePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(OutlinePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-outline/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 outline effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(gameObject, {\n// thickness: 3,\n// outlineColor: 0x000000,\n\n// quality: 0.1,\n\n// name: 'rexOutlinePostFx'\n});\n</code></pre><ul> <li><code>thickness</code> : Thickness of outline.</li> <li><code>outlineColor</code> : Color of outline.</li> <li><code>quality</code> : 0~1. The higher the number the less performant. It can't be changed after filter creation.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 outline effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-outline/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexOutlinePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexOutlinePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-outline/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexOutlinePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexOutlinePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexOutlinePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-outline/#thickness","title":"Thickness","text":"<ul> <li>Get     <pre><code>var thickness = pipelineInstance.thickness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.thickness = thickness;\n// pipelineInstance.thickness += value;\n</code></pre>     or     <pre><code>pipelineInstance.setThickness(value);\n</code></pre></li> </ul>"},{"location":"shader-outline/#outline-color","title":"Outline color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.outlineColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setOutlineColor(value);\n</code></pre> <pre><code>pipelineInstance.outlineColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-outline/#quality","title":"Quality","text":"<p>The quality of the outline from 0 to 1, using a higher quality setting will  result in slower performance and more accuracy.</p> <ul> <li>Get     <pre><code>var quality = pipelineInstance.quality;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setQuality(quality);\n</code></pre>     or     <pre><code>pipelineInstance.quality = quality;\n</code></pre><ul> <li><code>quality</code> : <code>0</code> ~ <code>1</code>, default is <code>0.1</code>.<ul> <li><code>0.1</code> : 10 sample points.</li> <li><code>0.08</code> : 8 sample points.</li> <li><code>1</code> : 100 sample points.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-pixelation/","title":"Pixelation","text":"<p>Note</p> <p>Phaser3.60 has a built-in pixelate effect.</p>"},{"location":"shader-pixelation/#introduction","title":"Introduction","text":"<p>Pixelation post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-pixelation/#live-demos","title":"Live demos","text":"<ul> <li>Pixelation</li> </ul>"},{"location":"shader-pixelation/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-pixelation/#install-plugin","title":"Install plugin","text":""},{"location":"shader-pixelation/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexpixelationpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpixelationpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexpixelationpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexpixelationpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import PixelationPipelinePlugin from 'phaser3-rex-plugins/plugins/pixelationpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexPixelationPipeline',\nplugin: PixelationPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import PixelationPostFx from 'phaser3-rex-plugins/plugins/pixelationpipeline.js';\nvar config = {\n// ...\npipeline: [PixelationPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(PixelationPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(PixelationPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-pixelation/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 pixelation effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(gameObject, {\n// pixelWidth: 0,\n// pixelHeight: 0,\n\n// name: 'rexPixelationPostFx'\n});\n</code></pre><ul> <li><code>pixelWidth</code>, <code>pixelHeight</code> : Pixel size.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 pixelation effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexPixelationPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexPixelationPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexPixelationPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexPixelationPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexPixelationPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-pixelation/#pixel-size","title":"Pixel size","text":"<ul> <li>Get     <pre><code>var pixelWidth = pipelineInstance.pixelWidth;\nvar pixelHeight = pipelineInstance.pixelHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.pixelWidth = pixelWidth;\npipelineInstance.pixelHeight = pixelHeight;\n// pipelineInstance.pixelWidth += value;\n// pipelineInstance.pixelHeight += value;\n</code></pre>     or     <pre><code>pipelineInstance.setPixelWidth(pixelWidth);\npipelineInstance.setPixelHeight(pixelHeight);\npipelineInstance.setPixelSize(pixelWidth, pixelHeight);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/","title":"Shockwave","text":""},{"location":"shader-shockwave/#introduction","title":"Introduction","text":"<p>Shockwave post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-shockwave/#live-demos","title":"Live demos","text":"<ul> <li>Shockwave</li> </ul>"},{"location":"shader-shockwave/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-shockwave/#install-plugin","title":"Install plugin","text":""},{"location":"shader-shockwave/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshockwavepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshockwavepipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexshockwavepipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexshockwavepipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShockwavePipelinePlugin from 'phaser3-rex-plugins/plugins/shockwavepipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShockwavePipeline',\nplugin: ShockwavePipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ShockwavePostFx from 'phaser3-rex-plugins/plugins/shockwavepipeline.js';\nvar config = {\n// ...\npipeline: [ShockwavePostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ShockwavePostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ShockwavePostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-shockwave/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 shockwave effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// waveRadius: 0,\n// waveWidth: 20,\n// powBaseScale: 0.8,\n// powExponent: 0.1,\n\n// name: 'rexShockwavePostFx'\n});\n</code></pre><ul> <li><code>waveRadius</code> : Radius of shockwave, in pixels.</li> <li><code>waveWidth</code> : Width of shockwave, in pixels.</li> <li><code>powBaseScale</code>, <code>powExponent</code> : Parameters of shockwave.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 shockwave effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexShockwavePipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexShockwavePipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexShockwavePipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexShockwavePipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexShockwavePipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#wave-radius","title":"Wave radius","text":"<ul> <li>Get     <pre><code>var waveRadius = pipelineInstance.waveRadius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.waveRadius = waveRadius;\n</code></pre>     or     <pre><code>pipelineInstance.setWaveRadius(waveRadius);\n</code></pre></li> </ul>"},{"location":"shader-shockwave/#wave-width","title":"Wave width","text":"<ul> <li>Get     <pre><code>var waveWidth = pipelineInstance.waveWidth;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.waveWidth = waveWidth;\n</code></pre>     or     <pre><code>pipelineInstance.setWaveWidth(waveWidth);\n</code></pre></li> </ul>"},{"location":"shader-split/","title":"Split","text":""},{"location":"shader-split/#introduction","title":"Introduction","text":"<p>Split image into 4 parts.</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-split/#live-demos","title":"Live demos","text":"<ul> <li>Split</li> </ul>"},{"location":"shader-split/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-split/#install-plugin","title":"Install plugin","text":""},{"location":"shader-split/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsplitpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsplitpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexsplitpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SplitPipelinePlugin from 'phaser3-rex-plugins/plugins/splitpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSplitPipeline',\nplugin: SplitPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import SplitPostFx from 'phaser3-rex-plugins/plugins/splitpipeline.js';\nvar config = {\n// ...\npipeline: [SplitPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(SplitPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(SplitPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-split/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 split effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(gameObject, {\n// x: undefined,  // renderer.width / 2\n// y: undefined,  // renderer.height / 2\n\n// width: undefined,\n// left: 0,\n// right: 0,\n// height: undefined,\n// top: 0,\n// bottom: 0,\n\n// angle: undefined,  // Degrees\n// rotation: 0,       // Radian\n\n// shiftEnable: true,\n\n// name: 'rexSplitPostFx'\n});\n</code></pre><ul> <li><code>x</code> : Vertical split position. Default value is center of render width.</li> <li><code>y</code> : Horizontal split position. Default value is center of render height.</li> <li><code>width</code>, <code>height</code> : Vertical/Horizontal split length.</li> <li><code>left</code>, <code>right</code> : Specify left/right part length of vertical split. Default value is half Vertical split length.</li> <li><code>top</code>, <code>bottom</code> : Specify top/bottom part length of horizontal split. Default value is half Horizontal split length.</li> <li><code>angle</code>, <code>rotation</code> : Rotation of split axis. Default value is <code>0</code>.</li> <li><code>shiftEnable</code> :<ul> <li><code>true</code> : Shift splitted parts out. Default value.</li> <li><code>false</code> : Don't shift splitted parts. Equal to apply mask on this image.</li> </ul> </li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 split effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-split/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexSplitPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexSplitPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-split/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSplitPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexSplitPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-split/#split-position","title":"Split position","text":"<ul> <li>Get     <pre><code>var splitX = pipelineInstance.splitX;\nvar splitY = pipelineInstance.splitY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.splitX = splitX;\npipelineInstance.splitY = splitY;\n</code></pre>     or     <pre><code>pipelineInstance.setSplit(x, y);\n</code></pre></li> </ul>"},{"location":"shader-split/#split-at-center-of-render","title":"Split at center of render","text":"<pre><code>pipelineInstance.splitAtCenter();\n// pipelineInstance.splitAtCenter(width, height);\n</code></pre>"},{"location":"shader-split/#split-length","title":"Split length","text":"<ul> <li>Get     <pre><code>var splittedWidth = pipelineInstance.splittedWidth;\nvar splittedHeight = pipelineInstance.splittedHeight;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.splittedWidth = splittedWidth;\npipelineInstance.splittedHeight = splittedHeight;\n</code></pre>     or     <pre><code>pipelineInstance.setSplittedWidth(splittedWidth);\npipelineInstance.setSplittedHeight(splittedHeight);\n</code></pre></li> </ul> <p>or specify left/right/top/bottom of split length</p> <ul> <li>Get     <pre><code>var left = pipelineInstance.spaceLeft;\nvar right = pipelineInstance.spaceRight;\nvar top = pipelineInstance.spaceTop;\nvar bottom = pipelineInstance.spaceBottom;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.spaceLeft = left;\npipelineInstance.spaceRight = right;\npipelineInstance.spaceTop = top;\npipelineInstance.spaceBottom = bottom;\n</code></pre>     or     <pre><code>pipelineInstance.setSpace(left, right, top, bottom);\n</code></pre></li> </ul>"},{"location":"shader-split/#rotation-axis-of-split-edge","title":"Rotation Axis of Split edge","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;\npipelineInstance.rotation += value;\n// pipelineInstance.angle = angle;\n// pipelineInstance.angle += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(rotation);\n// pipelineInstance.setAngle(angle);\n</code></pre></li> </ul>"},{"location":"shader-split/#shift-enable","title":"Shift enable","text":"<ul> <li>Get     <pre><code>var enable = pipelineInstance.shiftEnable;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.shiftEnable = enable;\n</code></pre>     or     <pre><code>pipelineInstance.setShiftEnable(enable);\n</code></pre></li> </ul>"},{"location":"shader-swirl/","title":"Swirl","text":""},{"location":"shader-swirl/#introduction","title":"Introduction","text":"<p>Swirl post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-swirl/#live-demos","title":"Live demos","text":"<ul> <li>Swirl</li> </ul>"},{"location":"shader-swirl/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-swirl/#install-plugin","title":"Install plugin","text":""},{"location":"shader-swirl/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexswirlpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexswirlpipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexswirlpipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexswirlpipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SwirlPipelinePlugin from 'phaser3-rex-plugins/plugins/swirlpipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSwirlPipeline',\nplugin: SwirlPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import SwirlPostFx from 'phaser3-rex-plugins/plugins/swirlpipeline.js';\nvar config = {\n// ...\npipeline: [SwirlPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(SwirlPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(SwirlPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-swirl/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 swirl effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(gameObject, {\n// center: {\n//    x: windowWidth / 2,\n//    y: windowHeight / 2\n//}\n// radius: 0,\n// rotation: 0,  // or angle: 0,\n\n// name: 'rexSwirlPostFx'\n});\n</code></pre><ul> <li><code>center.x</code>, <code>center.y</code> : Local position of swirl center.</li> <li><code>radius</code> : Swirl radius.</li> <li><code>rotation</code> (<code>angle</code>) : Swirl angle.</li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 swirl effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexSwirlPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexSwirlPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexSwirlPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexSwirlPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexSwirlPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = pipelineInstance.radius;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.radius = radius;\n// pipelineInstance.radius += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRadius(radius);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#rotation","title":"Rotation","text":"<ul> <li>Get     <pre><code>var rotation = pipelineInstance.rotation;  // radians\n// var angle = pipelineInstance.angle;     // degrees\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.rotation = rotation;\npipelineInstance.rotation += value;\n// pipelineInstance.angle = angle;\n// pipelineInstance.angle += value;\n</code></pre>     or     <pre><code>pipelineInstance.setRotation(rotation);\n// pipelineInstance.setAngle(angle);\n</code></pre></li> </ul>"},{"location":"shader-swirl/#center-position","title":"Center position","text":"<p>Default value is center of window.</p> <ul> <li>Get     <pre><code>var x = pipelineInstance.centerX;\nvar y = pipelineInstance.centerY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.centerX = x;\npipelineInstance.centerY = y;\n</code></pre>     or     <pre><code>pipelineInstance.setCenter(x, y);\n// pipelineInstance.setCenter();   // set to center of window\n</code></pre></li> </ul>"},{"location":"shader-toonify/","title":"Toonify","text":""},{"location":"shader-toonify/#introduction","title":"Introduction","text":"<p>Draw outlines and quantize color in HSV domain, post processing filter. Reference</p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-toonify/#live-demos","title":"Live demos","text":"<ul> <li>Toonify</li> </ul>"},{"location":"shader-toonify/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-toonify/#install-plugin","title":"Install plugin","text":""},{"location":"shader-toonify/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoonifypipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextoonifypipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rextoonifypipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rextoonifypipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ToonifyPipelinePlugin from 'phaser3-rex-plugins/plugins/toonifypipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexToonifyPipeline',\nplugin: ToonifyPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import ToonifyPostFx from 'phaser3-rex-plugins/plugins/toonifypipeline.js';\nvar config = {\n// ...\npipeline: [ToonifyPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(ToonifyPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(ToonifyPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-toonify/#apply-effect","title":"Apply effect","text":"<ul> <li>Apply effect to game object. A game object only can add 1 toonify effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(gameObject, {\n// edgeThreshold: 0.2,\n// hueLevels: 0,\n// sLevels: 0,\n// vLevels: 0,\n// edgeColor: 0,\n\n// name: 'rexToonifyPostFx'\n});\n</code></pre><ul> <li><code>edgeThreshold</code> : Threshold of edge. Set <code>1.1</code> (or any number larger then <code>1</code>) to disable this feature.</li> <li><code>hueLevels</code> : Amount of hue levels. Set <code>0</code> to disable this feature.</li> <li><code>sLevels</code> : Amount of saturation levels. Set <code>0</code> to disable this feature.</li> <li><code>vLevels</code> : Amount of value levels. Set <code>0</code> to disable this feature.</li> <li><code>edgeColor</code> : Color of edge, could be a number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> <li>Apply effect to camera. A camera only can add 1 toonify effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(camera, config);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexToonifyPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexToonifyPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexToonifyPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexToonifyPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexToonifyPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-toonify/#edge-threshold","title":"Edge threshold","text":"<ul> <li>Get     <pre><code>var edgeThreshold = pipelineInstance.edgeThreshold;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.edgeThreshold = edgeThreshold;\n</code></pre>     or     <pre><code>pipelineInstance.setEdgeThreshold(value);\n</code></pre><ul> <li>Set <code>1.1</code> (or any number larger then <code>1</code>) to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#hue-levels","title":"Hue levels","text":"<ul> <li>Get     <pre><code>var hueLevels = pipelineInstance.hueLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.hueLevels = hueLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setHueLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#saturation-levels","title":"Saturation levels","text":"<ul> <li>Get     <pre><code>var satLevels = pipelineInstance.satLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.satLevels = satLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setSatLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#value-levels","title":"Value levels","text":"<ul> <li>Get     <pre><code>var valLevels = pipelineInstance.valLevels;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.valLevels = valLevels;\n</code></pre>     or     <pre><code>pipelineInstance.setValLevels(value);\n</code></pre><ul> <li>Set <code>0</code> to disable this feature.</li> </ul> </li> </ul>"},{"location":"shader-toonify/#edge-color","title":"Edge color","text":"<ul> <li>Get     <pre><code>var color = pipelineInstance.edgeColor;\n</code></pre><ul> <li><code>color</code> : Color object.<ul> <li>Red: <code>color.red</code>, 0~255.</li> <li>Green: <code>color.green</code>, 0~255.</li> <li>Blue: <code>color.blue</code>, 0~255.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setEdgeColor(value);\n</code></pre>     or     <pre><code>pipelineInstance.edgeColor = value;\n</code></pre><ul> <li><code>value</code> : A number <code>0xRRGGBB</code>, or a JSON object <code>{r:255, g:255, b:255}</code></li> </ul> </li> </ul>"},{"location":"shader-warp-transition/","title":"Warp","text":""},{"location":"shader-warp-transition/#introduction","title":"Introduction","text":"<p>Warp transition post processing filter.</p> <ul> <li>Author: Richard Davey</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-warp-transition/#usage","title":"Usage","text":"<p>Reference</p>"},{"location":"shader-warp-transition/#install-plugin","title":"Install plugin","text":""},{"location":"shader-warp-transition/#import-class","title":"Import class","text":"<ul> <li>Get minify file from github</li> <li>Add to game config     <pre><code>import { WarpPostFX } from './dist/WarpPostFX.js';  // Path to your minify file\nvar config = {\n// ...\npipeline: { WarpPostFX }\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(WarpPostFX);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(WarpPostFX);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp-transition/#remove-effect","title":"Remove effect","text":"<pre><code>gameObject.removePostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre>"},{"location":"shader-warp-transition/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = gameObject.getPostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = camera.getPostPipeline(WarpPostFX); // WarpPostFX class\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#set-texture","title":"Set texture","text":"<pre><code>pipelineInstance.setTexture(textureKey, resizeMode);\n</code></pre> <ul> <li><code>textureKey</code> : The key of the texture to use.</li> <li><code>resizeMode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.   </li> </ul> </li> </ul>"},{"location":"shader-warp-transition/#progress","title":"Progress","text":"<ul> <li>Get     <pre><code>var progress = pipelineInstance.progress;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setProgress(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.progress = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#direction","title":"Direction","text":"<ul> <li>Get     <pre><code>var direction = pipelineInstance.direction;  // {x, y}\n</code></pre><ul> <li>Default value is <code>{x:-1, y:1}</code></li> </ul> </li> <li>Set     <pre><code>pipelineInstance.setDirection(x, y);  // x, y : 1, or -1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#smoothness","title":"Smoothness","text":"<ul> <li>Get     <pre><code>var smoothness = pipelineInstance.smoothness;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setSmoothness(value);  // value: 0~1\n</code></pre>     or     <pre><code>pipelineInstance.smoothness = value;  // value: 0~1\n</code></pre></li> </ul>"},{"location":"shader-warp-transition/#resize-mode","title":"Resize mode","text":"<ul> <li>Get     <pre><code>var mode = pipelineInstance.resizeMode;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.setResizeMode(mode);\n</code></pre><ul> <li><code>mode</code> : <ul> <li><code>0</code>, or <code>'stretch'</code> : The target texture is stretched to the size of the source texture.</li> <li><code>1</code>, or <code>'contain'</code> : The target texture is resized to fit the source texture.</li> <li><code>2</code>, or <code>'cover'</code> : The target texture is resized to cover the source texture.    </li> </ul> </li> </ul> </li> </ul>"},{"location":"shader-warp/","title":"Warp","text":""},{"location":"shader-warp/#introduction","title":"Introduction","text":"<p>Warp post processing filter. </p> <ul> <li>Author: Rex</li> <li>A post-fx shader effect</li> </ul> <p>WebGL only</p> <p>Only work in WebGL render mode.</p>"},{"location":"shader-warp/#live-demos","title":"Live demos","text":"<ul> <li>Warp</li> </ul>"},{"location":"shader-warp/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shader-warp/#install-plugin","title":"Install plugin","text":""},{"location":"shader-warp/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexwarppipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwarppipelineplugin.min.js', true);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexwarppipelineplugin').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexwarppipelineplugin').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WarpPipelinePlugin from 'phaser3-rex-plugins/plugins/warppipeline-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWarpPipeline',\nplugin: WarpPipelinePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(gameObject, config);\n</code></pre></li> <li>Apply effect to camera     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(camera, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Add to game config     <pre><code>import WarpPostFx from 'phaser3-rex-plugins/plugins/warppipeline.js';\nvar config = {\n// ...\npipeline: [WarpPostFx]\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Apply effect<ul> <li>Apply effect to game object     <pre><code>gameObject.setPostPipeline(WarpPostFx);\n</code></pre></li> <li>Apply effect to camera     <pre><code>camera.setPostPipeline(WarpPostFx);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader-warp/#apply-effect","title":"Apply effect","text":"<ul> <li> <p>Apply effect to game object. A game object only can add 1 warp effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(gameObject, {\n// frequencyX: 10,\n// frequencyY: 10,\n\n// amplitudeX: 10,\n// amplitudeY: 10,\n\n// speedX: 0,\n// speedY: 0,\n// speedEnable: \n\n// name: 'rexWarpPostFx'\n});\n</code></pre></p> <ul> <li><code>frequencyX</code>, <code>frequencyY</code> : Horizontal/vertical frequency, in pixel.</li> <li><code>amplitudeX</code>, <code>amplitudeY</code> : Horizontal/vertical amplitude, in pixel.</li> <li><code>speedX</code>, <code>speedY</code> : Horizontal/vertical speed.</li> <li><code>speedEnable</code><ul> <li><code>true</code> : Enable speed. Default value if <code>speedX</code> or <code>speedY</code> is not <code>0</code>.</li> <li><code>false</code> : Disable speed. Default value if <code>speedX</code> and <code>speedY</code> are both <code>0</code>.</li> </ul> </li> </ul> </li> <li> <p>Apply effect to camera. A camera only can add 1 warp effect.     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').add(camera, config);\n</code></pre></p> </li> </ul>"},{"location":"shader-warp/#remove-effect","title":"Remove effect","text":"<ul> <li>Remove effect from game object     <pre><code>scene.plugins.get('rexWarpPipeline').remove(gameObject);\n</code></pre></li> <li>Remove effect from camera     <pre><code>scene.plugins.get('rexWarpPipeline').remove(camera);\n</code></pre></li> </ul>"},{"location":"shader-warp/#get-effect","title":"Get effect","text":"<ul> <li>Get effect from game object     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').get(gameObject)[0];\n// var pipelineInstances = scene.plugins.get('rexWarpPipeline').get(gameObject);\n</code></pre></li> <li>Get effect from camera     <pre><code>var pipelineInstance = scene.plugins.get('rexWarpPipeline').get(camera)[0];\n// var pipelineInstances = scene.plugins.get('rexWarpPipeline').get(camera);\n</code></pre></li> </ul>"},{"location":"shader-warp/#frequency","title":"Frequency","text":"<p>Horizontal/vertical frequency, in pixel.</p> <ul> <li>Get     <pre><code>var frequencyX = pipelineInstance.frequencyX;\nvar frequencyY = pipelineInstance.frequencyY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.frequencyX = frequencyX;\npipelineInstance.frequencyY = frequencyY;\n// pipelineInstance.frequencyX += value;\n// pipelineInstance.frequencyY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setFrequencyX(frequencyX);\npipelineInstance.setFrequencyY(frequencyY);\npipelineInstance.setFrequency(frequencyX, frequencyY);\n</code></pre></li> </ul>"},{"location":"shader-warp/#amplitude","title":"Amplitude","text":"<p>Horizontal/vertical amplitude, in pixel.</p> <ul> <li>Get     <pre><code>var amplitudeX = pipelineInstance.amplitudeX;\nvar amplitudeY = pipelineInstance.amplitudeY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.amplitudeX = amplitudeX;\npipelineInstance.amplitudeY = amplitudeY;\n// pipelineInstance.amplitudeX += value;\n// pipelineInstance.amplitudeY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setAmplitudeX(amplitudeX);\npipelineInstance.setAmplitudeY(amplitudeY);\npipelineInstance.setAmplitude(amplitudeX, amplitudeY);\n</code></pre></li> </ul>"},{"location":"shader-warp/#speed","title":"Speed","text":"<p>Horizontal/vertical speed.</p> <ul> <li>Eanble/resume     <pre><code>pipelineInstance.setSpeedEnable();\n</code></pre></li> <li>Pause     <pre><code>pipelineInstance.setSpeedEnable(false);\n</code></pre></li> <li>Get     <pre><code>var speedX = pipelineInstance.speedX;\nvar speedY = pipelineInstance.speedY;\n</code></pre></li> <li>Set     <pre><code>pipelineInstance.speedX = speedX;\npipelineInstance.speedY = speedY;\n// pipelineInstance.speedX += value;\n// pipelineInstance.speedY += value;\n</code></pre>     or     <pre><code>pipelineInstance.setSpeedX(speedX);\npipelineInstance.setSpeedY(speedY);\npipelineInstance.setSpeed(speedX, speedY);\n</code></pre></li> </ul>"},{"location":"shader/","title":"Shader","text":""},{"location":"shader/#introduction","title":"Introduction","text":"<p>A quad with its own shader, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shader/#usage","title":"Usage","text":""},{"location":"shader/#load-glsl","title":"Load GLSL","text":"<pre><code>scene.load.glsl(key, url);\n</code></pre> <p>Reference: load glsl</p>"},{"location":"shader/#add-shader-object","title":"Add shader object","text":"<pre><code>var shader = scene.add.shader(key, x, y, width, height, textures);\n</code></pre> <ul> <li><code>key</code> : The key of the shader to use from the shader cache, or a BaseShader instance.</li> <li><code>x</code>, <code>y</code> : Position.</li> <li><code>width</code>, <code>height</code> : Size.</li> <li><code>textures</code> : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms.</li> </ul> <p>Note</p> <p>Lots of shaders expect textures to be power-of-two sized.</p> <p>Add shader object from JSON</p> <pre><code>var shader = scene.make.shader({\nx: 0,\ny: 0,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> : The key of the shader to use from the shader cache, or a BaseShader instance.<ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShader extends Phaser.GameObjects.Shader {\nconstructor(scene, key, x, y, width, height, textures) {\nsuper(scene, key, x, y, width, height, textures);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var shader = new MyShader(scene, key, x, y, width, height, textures);\n</code></pre></li> </ul>"},{"location":"shader/#sampler2d-uniform","title":"Sampler2D uniform","text":"<ul> <li>Default uniform mappings :<ul> <li><code>resolution</code> (2f) - Set to the size of this shader.<ul> <li><code>uniform vec2 resolution;</code> in GLSL.</li> </ul> </li> <li><code>time</code> (1f) - The elapsed game time, in seconds.<ul> <li><code>uniform float time;</code> in GLSL.</li> </ul> </li> <li><code>mouse</code> (2f) - If a pointer has been bound (with <code>setPointer</code>), this uniform contains its position each frame.<ul> <li><code>uniform vec2 mouse;</code> in GLSL.</li> </ul> </li> <li><code>date</code> (4fv) - A vec4 containing the year, month, day and time in seconds.<ul> <li><code>uniform vec4 date;</code> in GLSL.</li> </ul> </li> <li><code>sampleRate</code> (1f) - Sound sample rate. 44100 by default.<ul> <li><code>uniform float sampleRate;</code> in GLSL.</li> </ul> </li> <li><code>iChannel0...3</code> (sampler2D) - Input channels 0 to 3. <code>null</code> by default.     <code>uniform sampler2D iChannel0;</code> in GLSL.</li> </ul> </li> <li>Get uniform object     <pre><code>var uniform = shader.getUniform(key);\n</code></pre><ul> <li>Texture key     <pre><code>var textureKey = uniform.textureKey;\n</code></pre></li> <li>Get texture key of <code>iChannel0</code>, <code>iChannel1</code>, <code>iChannel2</code>, <code>iChannel3</code> sampler2D uniform.     <pre><code>var textureKey = shader.getUniform('iChannel0').textureKey;\nvar textureKey = shader.getUniform('iChannel1').textureKey;\nvar textureKey = shader.getUniform('iChannel2').textureKey;\nvar textureKey = shader.getUniform('iChannel3').textureKey;\n</code></pre></li> </ul> </li> <li>Sets a property of a uniform already present on this shader.     <pre><code>shader.setUniform(key, value);\n</code></pre><ul> <li><code>key</code> : The key of the uniform to modify. Use dots for deep properties, i.e. <code>resolution.value.x</code>.</li> </ul> </li> <li>Sets a sampler2D uniform from texture manager.     <pre><code>shader.setChannel0(textureKey);\nshader.setChannel1(textureKey);\nshader.setChannel2(textureKey);\nshader.setChannel3(textureKey);\n// shader.setChannel0(textureKey, textureData);\n// shader.setChannel1(textureKey, textureData);\n// shader.setChannel2(textureKey, textureData);\n// shader.setChannel3(textureKey, textureData);\n</code></pre>     or     <pre><code>shader.setSampler2D(uniformKey, textureKey, textureIndex);\n// shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData);\n</code></pre><ul> <li><code>uniformKey</code> : <code>'iChannel0'</code>, <code>'iChannel1'</code>, <code>'iChannel2'</code>, or <code>'iChannel3'</code>.</li> <li><code>textureIndex</code> : <code>0</code>(for iChannel0), <code>1</code>(for iChannel1), <code>2</code>(for iChannel2), <code>3</code>(for iChannel3).</li> <li><code>textureData</code> : Additional texture data.</li> <li><code>textureKey</code>: Key from the Texture Manager cache. It cannot be a single frame from a texture, only the full image. Lots of shaders expect textures to be power-of-two sized.</li> </ul> </li> <li>Sets a sampler2D uniform from a webgl texture.     <pre><code>shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex);\n// shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData);\n</code></pre><ul> <li><code>uniformKey</code> : <code>'iChannel0'</code>, <code>'iChannel1'</code>, <code>'iChannel2'</code>, or <code>'iChannel3'</code>.</li> <li><code>width</code>, <code>height</code> : The width, height of the texture.</li> <li><code>textureIndex</code> : <code>0</code>(for iChannel0), <code>1</code>(for iChannel1), <code>2</code>(for iChannel2), <code>3</code>(for iChannel3).</li> <li><code>textureData</code> : Additional texture data.</li> </ul> </li> </ul>"},{"location":"shader/#other-uniforms","title":"Other uniforms","text":"<ul> <li><code>mouse</code>, a pointer parameter.<ul> <li>Get     <pre><code>var pointer = shader.pointer;\n</code></pre></li> <li>Set     <pre><code>shader.setPointer(pointer);\n</code></pre><ul> <li><code>pointer</code> : <code>{x, y}</code></li> </ul> </li> </ul> </li> <li><code>time</code>, the elapsed game time, in seconds.<ul> <li>Get     <pre><code>var time = shader.getUniform('time').value;\n// var time = shader.uniforms.time.value\n</code></pre></li> <li>Set     <pre><code>shader.setUniform('time.value', time);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shader/#output","title":"Output","text":"<ul> <li>Render to Display list, by default.</li> <li>Redirect render result to internal webgl texture.     <pre><code>shader.setRenderToTexture();\nvar texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to internal webgl texture, and sample2D from buffer.     <pre><code>shader.setRenderToTexture(undefined, true);\nvar texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to texture manager, for texture-based game object.     <pre><code>shader.setRenderToTexture(textureKey);\n// var texture = shader.glTexture;\n</code></pre></li> <li>Redirect render result to texture manager, and Sample2D from buffer.     <pre><code>shader.setRenderToTexture(textureKey, true);\n// var texture = shader.glTexture;\n</code></pre></li> </ul>"},{"location":"shader/#texture-routing","title":"Texture routing","text":"<pre><code>graph TB\n\nTextureManagerIn[\"Texture manager\"] --&gt; |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:&lt;br&gt;iChannel0&lt;br&gt;iChannel1&lt;br&gt;iChannel2&lt;br&gt;iChannel3\"]\nSampler2D--&gt; Shader[\"shader&lt;br&gt;Shader game object\"]\nShader --&gt; DisplayList[\"Display list\"]\nShader --&gt; |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"]\nInternalTexture -.-&gt; |\"Texture key\"| TextureManagerOut[\"Texture manager\"]\nTextureManagerOut -.-&gt; GameObject[\"Image game object\"]\nGameObject -.-&gt; DisplayList\n\nWebGLTexture[\"WebGl texture&lt;br&gt;gameObject.glTexture\"] --&gt; |\"shader.setSampler2DBuffer()\"| Sampler2D\nInternalTexture --&gt; WebGLTexture\n\nsubgraph Output\nDisplayList\nGameObject\nTextureManagerOut\nend\n\nsubgraph Input\nTextureManagerIn\nWebGLTexture\nend</code></pre>"},{"location":"shader/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shader/#create-mask","title":"Create mask","text":"<pre><code>var mask = shader.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"shader/#baseshader","title":"BaseShader","text":"<pre><code>var baseShader = new Phaser.Display.BaseShader(key, fragmentSrc, vertexSrc, uniforms);\n</code></pre> <ul> <li><code>key</code> : The key of this shader</li> <li><code>fragmentSrc</code> : The fragment source for the shader.</li> <li><code>vertexSrc</code> : The vertex source for the shader.<ul> <li><code>undefined</code>, or <code>''</code> : Use default vertex source.</li> </ul> </li> <li><code>uniforms</code> : Optional object defining the uniforms the shader uses.     <pre><code>{\nuniformName : {type: uniformType, value: initValue},\n...\n}\n</code></pre><ul> <li><code>uniformName</code> : Uniform name in fragment source.</li> <li><code>uniformType</code>, <code>initValue</code> : Type and initial value of uniform.<ul> <li><code>'1f'</code> : <code>initValue</code> is a single float value. <ul> <li>Example : <code>time: { type: '1f', value: 0 }</code></li> </ul> </li> <li><code>'2f'</code> : <code>initValue</code> is float numbers <code>{x, y}</code>.<ul> <li>Example : <code>resolution: { type: '2f', value: { x: this.width, y: this.height } }</code></li> </ul> </li> <li><code>'3f'</code> : <code>initValue</code> is float numbers <code>{x, y, z}</code>.<ul> <li>Example : <code>color: { type: '3f', value: {x: 0, y: 0, z: 0}}</code></li> </ul> </li> <li><code>'4f'</code> : <code>initValue</code> is float numbers <code>{x, y, z, w}</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shake-position/","title":"Shake position","text":""},{"location":"shake-position/#introduction","title":"Introduction","text":"<p>Shake position of game object.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"shake-position/#live-demos","title":"Live demos","text":"<ul> <li>Shake position</li> <li>Shake position on mutliple game objects</li> </ul>"},{"location":"shake-position/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shake-position/#install-plugin","title":"Install plugin","text":""},{"location":"shake-position/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshakepositionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshakepositionplugin.min.js', true);\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = scene.plugins.get('rexshakepositionplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShakePositionPlugin from 'phaser3-rex-plugins/plugins/shakeposition-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShakePosition',\nplugin: ShakePositionPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = scene.plugins.get('rexShakePosition').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ShakePosition from 'phaser3-rex-plugins/plugins/shakeposition.js';\n</code></pre></li> <li>Add shake-position behavior     <pre><code>var shakePosition = new ShakePosition(gameObject, config);\n</code></pre></li> </ul>"},{"location":"shake-position/#create-instance","title":"Create instance","text":"<pre><code>var shake = scene.plugins.get('rexShake').add(gameObject, {\n// mode: 1, // 0|'effect'|1|'behavior'\n// duration: 500,\n// magnitude: 10,\n// magnitudeMode: 1, // 0|'constant'|1|'decay'\n// axis: 0,      //0|'both'|'h&amp;v'|1|'horizontal'|'h'|2|'vertical'|'v'\n});\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'effect'</code>, or <code>0</code> : Shake position in <code>'poststep'</code> game event, and restore in <code>'prestep'</code> game event.</li> <li><code>'behavior'</code>, or <code>1</code> : Shake position in <code>'preupdate'</code> scene event.</li> </ul> </li> <li><code>duration</code> : Duration of shaking, in millisecond.</li> <li><code>magnitude</code> : The strength of the shake, in pixels.</li> <li><code>magnitudeMode</code> :<ul> <li><code>'constant'</code>, or <code>0</code> : Constant strength of the shake.</li> <li><code>'decay'</code>, or <code>1</code> : Decay the strength of the shake.</li> </ul> </li> <li><code>axis</code> :<ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Changing position on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Changing position on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Changing position on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"shake-position/#start-shaking","title":"Start shaking","text":"<pre><code>shake.shake();\n// shake.shake(duration, magnitude);\n</code></pre> <p>or</p> <pre><code>shake.shake({\nduration: 500,\nmagnitude: 10\n});\n</code></pre>"},{"location":"shake-position/#stop-shakeing","title":"Stop shakeing","text":"<pre><code>shake.stop();\n</code></pre>"},{"location":"shake-position/#enable","title":"Enable","text":"<ul> <li>Enable/resume (default)     <pre><code>shake.setEnable();\n</code></pre>     or     <pre><code>shake.enable = true;\n</code></pre></li> <li>Disable/pause     <pre><code>shake.setEnable(false);\n</code></pre>     or     <pre><code>shake.enable = false;\n</code></pre></li> </ul>"},{"location":"shake-position/#set-updating-mode","title":"Set updating mode","text":"<pre><code>shake.setMode(mode);\n</code></pre> <ul> <li><code>mode</code> :<ul> <li><code>'effect'</code>, or <code>0</code> : Shake position in post-update stage, and restore in pre-update stage.</li> <li><code>'behavior'</code>, or <code>1</code> : Shake position in pre-update stage.</li> </ul> </li> </ul>"},{"location":"shake-position/#set-duration","title":"Set duration","text":"<pre><code>shake.setDuration(duration);\n// shake.duration = duration;\n</code></pre>"},{"location":"shake-position/#set-magnitude","title":"Set magnitude","text":"<pre><code>shake.setMagnitude(magnitude);\nshake.magnitude = magnitude;\n</code></pre> <ul> <li><code>magnitude</code> : The strength of the shake, in pixels.</li> </ul>"},{"location":"shake-position/#set-magnitude-mode","title":"Set magnitude mode","text":"<pre><code>shake.setMagnitudeMode(magnitudeMode);\n// shake.magnitudeMode = magnitudeMode;\n</code></pre> <ul> <li><code>magnitudeMode</code> :<ul> <li><code>'constant'</code>, or <code>0</code> : Constant strength of the shake.</li> <li><code>'decay'</code>, or <code>1</code> : Decay the strength of the shake.</li> </ul> </li> </ul>"},{"location":"shake-position/#set-axis-mode","title":"Set axis mode","text":"<pre><code>shake.setAxisMode(axis);\n</code></pre> <ul> <li><code>axis</code> : <ul> <li><code>'both'</code>,<code>'h&amp;v'</code>, <code>'x&amp;y'</code>, or <code>0</code> : Dragging on all directions.</li> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>1</code> : Dragging on horizontal/x axis.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>2</code> : Dragging on vertical/y axis.</li> </ul> </li> </ul>"},{"location":"shake-position/#events","title":"Events","text":"<ul> <li>On reached target     <pre><code>shake.on('complete', function(gameObject, shake){});\n</code></pre></li> </ul>"},{"location":"shake-position/#status","title":"Status","text":"<ul> <li>Is shakeing     <pre><code>var isRunning = shake.isRunning;\n</code></pre></li> </ul>"},{"location":"shape-arc/","title":"Arc","text":""},{"location":"shape-arc/#introduction","title":"Introduction","text":"<p>Arc shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-arc/#usage","title":"Usage","text":""},{"location":"shape-arc/#create-shape","title":"Create shape","text":"<pre><code>var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n// var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-arc/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyArc extends Phaser.GameObjects.Arc {\nconstructor(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor) {\nsuper(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var arc = new MyArc(scene, x, y, radius, startAngle, endAngle, anticlockwise, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-arc/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = arc.fillColor;\nvar alpha = arc.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>arc.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>arc.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = arc.strokeColor;\n</code></pre></li> <li>Set     <pre><code>arc.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>arc.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>arc.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-arc/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = arc.alpha;\n</code></pre></li> <li>Set     <pre><code>arc.setAlpha(alpha);\n// arc.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-arc/#angle","title":"Angle","text":"<ul> <li>Start angle, in degrees.<ul> <li>Get     <pre><code>var startAngle = arc.startAngle;\n</code></pre></li> <li>Set     <pre><code>arc.setStartAngle(startAngle);\n// arc.setStartAngle(startAngle, anticlockwise);\n</code></pre>     or     <pre><code>arc.startAngle = startAngle;\n</code></pre></li> </ul> </li> <li>End angle, in degrees.<ul> <li>Get     <pre><code>var endAngle = arc.endAngle;\n</code></pre></li> <li>Set     <pre><code>arc.seEndAngle(endAngle);\n</code></pre>     or     <pre><code>arc.endAngle = endAngle;\n</code></pre></li> </ul> </li> <li>Anticlockwise (<code>true</code>, or <code>false</code>)<ul> <li>Get     <pre><code>var anticlockwise = arc.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>arc.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-arc/#radius","title":"Radius","text":"<ul> <li>Radius<ul> <li>Get     <pre><code>var radius = arc.radius;\n</code></pre></li> <li>Set     <pre><code>arc.setRadius(radius);\n</code></pre>     or     <pre><code>arc.radius = radius;\n</code></pre></li> </ul> </li> <li>Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is <code>0.01</code><ul> <li>Get     <pre><code>var iterations = arc.iterations;\n</code></pre></li> <li>Set     <pre><code>arc.iterations = iterations;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-arc/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = arc.displayWidth;\nvar height = arc.displayHeight;\n</code></pre></li> <li>Set     <pre><code>arc.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>arc.displayWidth = width;\narc.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-arc/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-arc/#create-mask","title":"Create mask","text":"<pre><code>var mask = arc.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-arc/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-checkbox/","title":"Checkbox","text":""},{"location":"shape-checkbox/#introduction","title":"Introduction","text":"<p>Checkbox input with drawing checker path animation.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-checkbox/#live-demos","title":"Live demos","text":"<ul> <li>Checkbox</li> </ul>"},{"location":"shape-checkbox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-checkbox/#install-plugin","title":"Install plugin","text":""},{"location":"shape-checkbox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcheckboxplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexcheckboxplugin.min.js', true);\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>var checkbox = scene.add.rexCheckboxShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CheckboxPlugin from 'phaser3-rex-plugins/plugins/checkbox-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCheckboxPlugin',\nplugin: CheckboxPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>var checkbox = scene.add.rexCheckboxShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Checkbox from 'phaser3-rex-plugins/plugins/checkbox.js';\n</code></pre></li> <li>Add checkbox input     <pre><code>var checkbox = new Checkbox(scene, x, y, width, height, color, config);\nscene.add.existing(checkbox);\n</code></pre></li> <li>Add checkbox shape (without click input)     <pre><code>// import CheckboxShape from 'phaser3-rex-plugins/plugins/checkboxshape.js';\nvar checkbox = new CheckboxShape(scene, x, y, width, height, color, config);\nscene.add.existing(checkbox);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#create-checkbox-input","title":"Create checkbox input","text":"<pre><code>var checkbox = scene.add.rexCheckbox(x, y, width, height, color, config);\n</code></pre> <p>or</p> <pre><code>var checkbox = scene.add.rexCheckbox({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ncolor: 0x005cb2,\nboxFillAlpha: 1,\nuncheckedColor: null,\nuncheckedBoxFillAlpha: 1,\n\nboxLineWidth: 4,\nboxStrokeColor: 0x005cb2,\nboxStrokeAlpha: 1,\nuncheckedBoxStrokeColor: 0x005cb2,\nuncheckedBoxStrokeAlpha: 1,\n\ncheckerColor: 0xffffff,\ncheckerAlpha: 1,\n\n// boxSize: 1,\n// checkerSize: 1,\n\ncircleBox: false,\n\nanimationDuration: 150,\n\nchecked: false, // or value: false,\n\nclick: undefined,\n// click: {\n//     mode: 1,            // 0|'press'|1|'release'\n//     clickInterval: 100  // ms\n//     threshold: undefined\n// },\nreadOnly: false,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of checkbox.</li> <li>Box fill style<ul> <li><code>color</code>, <code>boxFillAlpha</code> : Box color and alpha of checked        </li> <li><code>uncheckedColor</code>, <code>uncheckedBoxFillAlpha</code> : Box color and alpha of unchecked</li> </ul> </li> <li>Box stroke style<ul> <li><code>boxLineWidth</code>, <code>boxStrokeColor</code>, <code>boxStrokeAlpha</code> : Box stroke color and alpha of checked.</li> <li><code>uncheckedBoxStrokeColor</code>, <code>uncheckedBoxStrokeAlpha</code> : Box stroke color and alpha of unchecked.</li> </ul> </li> <li>Checker style<ul> <li><code>checkerColor</code>, <code>checkerAlpha</code> : Checker color and alpha</li> </ul> </li> <li><code>circleBox</code> : Shape of box<ul> <li><code>false</code> : Rectangle shape box. Default behavior.</li> <li><code>true</code> : Circle shape box    </li> </ul> </li> <li><code>boxSize</code>, <code>checkerSize</code> : Size ratio of box, and checker. Default value is <code>1</code>.</li> <li><code>animationDuration</code> : Duration of drawing path of checker.</li> <li><code>checked</code> : Initial value of checked.</li> <li><code>click</code> : Configuration of click input<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>click.threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior. </li> </ul> </li> </ul> </li> <li><code>readOnly</code> : Set <code>ture</code> to disable input.</li> </ul>"},{"location":"shape-checkbox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCheckbox extends RexPlugins.GameObjects.Checkbox {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var checkbox = new MyCheckbox(scene, x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#check","title":"Check","text":"<ul> <li>Get     <pre><code>var checked = checkbox.checked;\n// var checked = checkbox.value;\n</code></pre></li> <li>Set<ul> <li>Check     <pre><code>checkbox.setChecked();\n// checkbox.setChecked(true);\n// checkbox.setValue(true);\n</code></pre>     or     <pre><code>checkbox.checked = true;\n// checkbox.value = true;\n</code></pre></li> <li>Uncheck     <pre><code>checkbox.setChecked(false);\n// checkbox.setValue(false);\n</code></pre>     or     <pre><code>checkbox.checked = false;\n// checkbox.value = false;\n</code></pre></li> <li>Toggle     <pre><code>checkbox.toggleChecked();\n// checkbox.setValue(!checkbox.checked);\n</code></pre>     or     <pre><code>checkbox.checked = !checkbox.checked;\n// checkbox.value = !checkbox.value;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-checkbox/#read-only","title":"Read only","text":"<ul> <li>Get     <pre><code>var readOnly = checkbox.readOnly;\n</code></pre></li> <li>Set     <pre><code>checkbox.setReadOnly();\n// checkbox.setReadOnly(true);\n</code></pre>     or     <pre><code>checkbox.readOnly = true;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#box-fill-style","title":"Box fill style","text":"<ul> <li>Get     <pre><code>var color = checkbox.boxFillColor;\nvar alpha = checkbox.boxFillAlpha;\n</code></pre> <pre><code>var color = checkbox.uncheckedBoxFillColor;\nvar alpha = checkbox.uncheckedBoxFillAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setBoxFillStyle(color, alpha);\n// checkbox.boxFillColor = color;\n// checkbox.boxFillAlpha = alpha;\n</code></pre> <pre><code>checkbox.setUncheckedBoxFillStyle(color, alpha);\n// checkbox.uncheckedBoxFillColor = color;\n// checkbox.uncheckedBoxFillAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#box-stroke-style","title":"Box stroke style","text":"<ul> <li>Get     <pre><code>var lineWidth = checkbox.boxLineWidth;\nvar color = checkbox.boxStrokeColor;\nvar alpah = checkbox.boxStrokeAlpha;\n</code></pre> <pre><code>var lineWidth = checkbox.uncheckedBoxLineWidth;\nvar color = checkbox.uncheckedBoxStrokeColor;\nvar alpah = checkbox.uncheckedBoxStrokeAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setBoxStrokeStyle(lineWidth, color, alpha);\n// checkbox.boxLineWidth = lineWidth;\n// checkbox.boxStrokeColor = color;\n// checkbox.boxStrokeAlpha = alpha;\n</code></pre> <pre><code>checkbox.setUncheckedBoxStrokeStyle(lineWidth, color, alpha);\n// checkbox.uncheckedBoxLineWidth = lineWidth;\n// checkbox.uncheckedBoxStrokeColor = color;\n// checkbox.uncheckedBoxStrokeAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#checker-style","title":"Checker style","text":"<ul> <li>Get     <pre><code>var color = checkbox.checkerColor;\nvar alpha = checkbox.checkAlpha;\n</code></pre></li> <li>Set     <pre><code>checkbox.setCheckerStyle(color, alpha);\n// checkbox.checkerColor = color;\n// checkbox.checkAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#checker-animation","title":"Checker animation","text":"<ul> <li>Duration<ul> <li>Get     <pre><code>var duration = checkbox.checkerAnimDuration;\n</code></pre></li> <li>Set     <pre><code>checkbox.setCheckerAnimDuration(duration);\ncheckbox.checkerAnimDuration = duration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-checkbox/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = checkbox.width;\nvar height = checkbox.height;\n</code></pre></li> <li>Set     <pre><code>checkbox.setSize(width, height);\n</code></pre>     or     <pre><code>checkbox.width = width;\ncheckbox.height = height;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = checkbox.displayWidth;\nvar height = checkbox.displayHeight;\n</code></pre></li> <li>Set     <pre><code>checkbox.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>checkbox.displayWidth = width;\ncheckbox.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#size-ratio","title":"Size ratio","text":"<ul> <li>Get     <pre><code>var boxSize = checkbox.boxSize;\nvar checkerSize =checkbox.checkerSize;\n</code></pre><ul> <li><code>boxSize</code>, <code>checkerSize</code> : Size ratio of box, and checker</li> </ul> </li> <li>Set     <pre><code>checkbox.setBoxSize(sizeRatio);\ncheckbox.setCheckerSize(sizeRatio);\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#events","title":"Events","text":"<ul> <li>On value change     <pre><code>checkbox.on('valuechange', function(value) {\n// value: checked\n})\n</code></pre></li> </ul>"},{"location":"shape-checkbox/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-checkbox/#create-mask","title":"Create mask","text":"<pre><code>var mask = checkbox.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-checkbox/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-circle/","title":"Circle","text":""},{"location":"shape-circle/#introduction","title":"Introduction","text":"<p>Circle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-circle/#usage","title":"Usage","text":""},{"location":"shape-circle/#create-shape-object","title":"Create shape object","text":"<pre><code>var circle = scene.add.circle(x, y, radius, fillColor);\n// var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-circle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircle extends Phaser.GameObjects.Arc {\nconstructor(scene, x, y, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, radius, 0, 360, false, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circle = new MyCircle(scene, x, y, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-circle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = circle.fillColor;\nvar alpha = circle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>circle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>circle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = circle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>circle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>circle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>circle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-circle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = circle.alpha;\n</code></pre></li> <li>Set     <pre><code>circle.setAlpha(alpha);\n// circle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-circle/#radius","title":"Radius","text":"<ul> <li>Radius<ul> <li>Get     <pre><code>var radius = circle.radius;\n</code></pre></li> <li>Set     <pre><code>circle.setRadius(radius);\n</code></pre>     or     <pre><code>circle.radius = radius;\n</code></pre></li> </ul> </li> <li>Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is <code>0.01</code><ul> <li>Get     <pre><code>var iterations = circle.iterations;\n</code></pre></li> <li>Set     <pre><code>circle.iterations = iterations;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = circle.displayWidth;\nvar height = circle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>circle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>circle.displayWidth = width;\ncircle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-circle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-circle/#create-mask","title":"Create mask","text":"<pre><code>var mask = circle.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-circle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-circularprogress/","title":"Circular progres","text":""},{"location":"shape-circularprogress/#introduction","title":"Introduction","text":"<p>Circular progress bar shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-circularprogress/#live-demos","title":"Live demos","text":"<ul> <li>Circular-progress</li> </ul>"},{"location":"shape-circularprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-circularprogress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-circularprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcircularprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcircularprogressplugin.min.js', true);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CircularProgressPlugin from 'phaser3-rex-plugins/plugins/circularprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressPlugin',\nplugin: CircularProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CircularProgress from 'phaser3-rex-plugins/plugins/circularprogress.js';\n</code></pre></li> <li>Add circular-progress object     <pre><code>var circularProgress = new CircularProgress(scene, x, y, radius, color, value, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCircularProgressPlugin',\nplugin: CircularProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-circularprogress/#create-instance","title":"Create instance","text":"<pre><code>var circularProgress = scene.add.rexCircularProgress(x, y, radius, barColor, value, {    trackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var circularProgress = scene.add.rexCircularProgress({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},  });\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>radius</code> : Radius of this circle. Size will be <code>(radius*2, radius*2)</code>.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, circularProgress) {\n}\n</code></pre></li> </ul> <p>Add circular-progress from JSON</p> <pre><code>var circularProgress = scene.make.rexCircularProgress({\nx: 0,\ny: 0,\nradius: 1,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},  add: true\n});\n</code></pre>"},{"location":"shape-circularprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCircularProgress extends CircularProgress {\nconstructor(scene, x, y, radius, color, value, config) {\nsuper(scene, x, y, radius, color, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var circularProgress = new MyCircularProgress(scene, x, y, radius, color, value, config);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = circularProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = circularProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = circularProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>circularProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>circularProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>circularProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>circularProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>circularProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>circularProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>circularProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>circularProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>circularProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = circularProgress.radius;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setRadius(radius);\n// circularProgress.radius = radius;\n</code></pre><ul> <li>Also resize this game object to <code>(radius*2, radius*2)</code></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#circular-track","title":"Circular track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = circularProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setTrackColor(trackColor);\n// circularProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#circular-bar","title":"Circular bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = circularProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setBarColor(barColor);\n// circularProgress.barColor = barColor;\n</code></pre></li> </ul> </li> <li>Thickness : <code>radius*thickness</code> <pre><code>circularProgress.setThickness(thickness);\n</code></pre><ul> <li><code>thickness</code> : <code>0</code>~<code>1</code>.</li> </ul> </li> <li>Start angle<ul> <li>Get     <pre><code>var startAngle = circularProgress.startAngle;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setStartAngle(startAngle);\ncircularProgress.startAngle = startAngle;\n</code></pre><ul> <li><code>startAngle</code> : Start angle of circular bar, in radians.</li> </ul> </li> </ul> </li> <li>Anticlockwise<ul> <li>Get     <pre><code>var anticlockwise = circularProgress.anticlockwise;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAnticlockwise(anticlockwise);\n// circularProgress.anticlockwise = anticlockwise;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#center-circle","title":"Center circle","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var centerColor = circularProgress.centerColor;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setCenterColor(centerColor);\n// circularProgress.centerColor = centerColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-circularprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>circularProgress.on('valuechange', function(newValue, oldValue, circularProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = circularProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>circularProgress.setAlpha(alpha);\n// circularProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-circularprogress/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-circularprogress/#create-mask","title":"Create mask","text":"<pre><code>var mask = circularProgress.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-circularprogress/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-circularprogress/#compare-with-circular-progress-canvas","title":"Compare with Circular-progress canvas","text":"<ul> <li>Circular-progress canvas creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li> <li>Circular-progress canvas can draw text directly, circular progress shape can't draw any text.</li> </ul>"},{"location":"shape-cover/","title":"Cover","text":""},{"location":"shape-cover/#introduction","title":"Introduction","text":"<p>Rectangle shape covered full window, and block all touch events.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-cover/#live-demos","title":"Live demos","text":"<ul> <li>Cover</li> </ul>"},{"location":"shape-cover/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-cover/#install-plugin","title":"Install plugin","text":""},{"location":"shape-cover/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcoverplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcoverplugin.min.js', true);\n</code></pre></li> <li>Add cover object     <pre><code>var cover = scene.add.rexCover(config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CoverPlugin from 'phaser3-rex-plugins/plugins/cover-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCoverPlugin',\nplugin: CoverPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add cover object     <pre><code>var cover = scene.add.rexCover(config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Cover from 'phaser3-rex-plugins/plugins/cover.js';\n</code></pre></li> <li>Add cover object     <pre><code>var cover = new Cover(scene, config);\nscene.add.existing(cover);\n</code></pre></li> </ul>"},{"location":"shape-cover/#create-cover-object","title":"Create cover object","text":"<pre><code>var cover = scene.add.rexCover({\n// color: 0x0,\n// alpha: 0.8\n});\n</code></pre> <ul> <li><code>color</code> : Color of cover.</li> <li><code>alpha</code> : Alpha value of cover.</li> </ul>"},{"location":"shape-cover/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCover extends RexPlugins.GameObjects.Cover {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var cover = new MyCover(scene, config);\n</code></pre></li> </ul>"},{"location":"shape-cover/#color","title":"Color","text":"<ul> <li>Tint<ul> <li>Get     <pre><code>var tint = cover.tint;\n</code></pre></li> <li>Set     <pre><code>cover.tint = tint;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = cover.alpha;\n</code></pre></li> <li>Set     <pre><code>cover.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Fill color<ul> <li>Get     <pre><code>var color = cover.fillColor;\nvar alpha = cover.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>cover.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>cover.setFillStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-cover/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-cover/#create-mask","title":"Create mask","text":"<pre><code>var mask = cover.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-cover/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-curve/","title":"Curve","text":""},{"location":"shape-curve/#introduction","title":"Introduction","text":"<p>Curve shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-curve/#usage","title":"Usage","text":""},{"location":"shape-curve/#create-shape-object","title":"Create shape object","text":"<pre><code>var curve = scene.add.curve(x, y, path, fillColor);\n// var curve = scene.add.curve(x, y, path, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>path</code> : Path object.</li> </ul>"},{"location":"shape-curve/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCurve extends Phaser.GameObjects.Curve {\nconstructor(scene, x, y, path, fillColor, fillAlpha) {\nsuper(scene, x, y, path, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var curve = new MyCurve(scene, x, y, path, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-curve/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = curve.fillColor;\nvar alpha = curve.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>curve.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>curve.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = curve.strokeColor;\n</code></pre></li> <li>Set     <pre><code>curve.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>curve.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>curve.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-curve/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = curve.alpha;\n</code></pre></li> <li>Set     <pre><code>curve.setAlpha(alpha);\n// curve.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-curve/#smoothness","title":"Smoothness","text":"<p>The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered.</p> <p><pre><code>curve.setSmoothness(smoothness);\n</code></pre> or <pre><code>curve.smoothness = smoothness;\n</code></pre></p>"},{"location":"shape-curve/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = curve.displayWidth;\nvar height = curve.displayHeight;\n</code></pre></li> <li>Set     <pre><code>curve.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>curve.displayWidth = width;\ncurve.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-curve/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-curve/#create-mask","title":"Create mask","text":"<pre><code>var mask = curve.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-curve/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-custom-progress/","title":"Custom progress","text":""},{"location":"shape-custom-progress/#introduction","title":"Introduction","text":"<p>Custom progress bar based on custom-shapes.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-custom-progress/#live-demos","title":"Live demos","text":"<ul> <li>React-circle-progress-bar</li> <li>Round rectangle</li> <li>Orb</li> <li>Trapezoid Mask</li> <li>Round rectangles mask</li> <li>Slash effect with rexUI</li> <li>Path segment animation</li> </ul>"},{"location":"shape-custom-progress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-custom-progress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-custom-progress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcustomprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcustomprogressplugin.min.js', true);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CustomProgressPlugin from 'phaser3-rex-plugins/plugins/customprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCustomProgressPlugin',\nplugin: CustomProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CustomProgress from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customProgress = new CustomProgress(scene, x, y, width, height, config);\nscene.add.existing(customProgress);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#add-custom-shapes-object","title":"Add custom shapes object","text":"<pre><code>var customProgress = scene.add.rexCustomProgress(x, y, width, height, {\n// type: 'rexCustomProgress',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <p>or</p> <pre><code>var customProgress = scene.add.rexCustomProgress({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// type: 'rexCustomProgress',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n\nvalue: 0,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\n\nvaluechangeCallback: function(newValue, oldValue, circularProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>create</code> : Callback to create shapes<ul> <li>An array of object with <code>name</code> and <code>type</code> <pre><code>{ name: name0, type: shapeType }\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> </ul> </li> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <code>arc</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>rectangle</code>, <code>triangle</code></li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This custom shapes game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom custom shapes.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when refresh     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n\n// var fillColor = this.fillColor;\n// var fillAlpha = this.fillAlpha;\n// var lineWidth = this.lineWidth;\n// var strokeColor = this.strokeColor;\n// var strokeAlpha = this.strokeAlpha;\n// ...\n// var value = this.value;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed : <code>this.isSizeChanged</code></li> <li>Fill style : <code>this.fillColor</code>, <code>this.fillAlpha</code></li> <li>Stroke style : <code>this.strokeColor</code>, <code>this.strokeAlpha</code>, <code>this.lineWidth</code></li> <li>Current progress value : <code>this.value</code></li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, customProgress) {\n}\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#set-update-shape-callback","title":"Set update shape callback","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#size","title":"Size","text":"<p>See Size</p>"},{"location":"shape-custom-progress/#styles","title":"Styles","text":"<p>See Styles</p>"},{"location":"shape-custom-progress/#recreate-shapes","title":"Recreate shapes","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = customProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = customProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = customProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>customProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>customProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>customProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>customProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>customProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>customProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Set ease duration     <pre><code>customProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>customProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> <li>Ease value to     <pre><code>customProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>customProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Ease value repeat     <pre><code>customProgress.easeValueRepeat(from, to);  // from, to: 0 ~ 1\n// customProgress.easeValueRepeat(from, to, repeat, repeatDelay);\n</code></pre></li> <li>Stop ease     <pre><code>customProgress.stopEaseValue();\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#refresh","title":"Refresh","text":"<p>Redraw shapes when</p> <ul> <li>Value changed : <code>customProgress.setValue(newValue)</code>, <code>customProgress.easeValueTo(newValue)</code></li> <li>Resize : <code>customProgress.resize(width, height)</code></li> <li>Set dirty : <code>customProgress.setDirty()</code></li> <li>Set update shape callback : <code>customProgress.setUpdateShapesCallback(callback)</code></li> </ul>"},{"location":"shape-custom-progress/#shape-class","title":"Shape class","text":"<p>See Shape class</p>"},{"location":"shape-custom-progress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>customProgress.on('valuechange', function(newValue, oldValue, customProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = customProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>customProgress.setAlpha(alpha);\n// customProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-custom-progress/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-custom-progress/#create-mask","title":"Create mask","text":"<pre><code>var mask = customProgress.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-custom-progress/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-custom-shapes/","title":"Custom shapes","text":""},{"location":"shape-custom-shapes/#introduction","title":"Introduction","text":"<p>Custom shapes on shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-custom-shapes/#live-demos","title":"Live demos","text":"<ul> <li>Speech bubble</li> <li>Jigsaw</li> <li>Checkbox</li> <li>World to localXY</li> </ul>"},{"location":"shape-custom-shapes/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-custom-shapes/#install-plugin","title":"Install plugin","text":""},{"location":"shape-custom-shapes/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexcustomshapesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcustomshapesplugin.min.js', true);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import CustomShapesPlugin from 'phaser3-rex-plugins/plugins/customshapes-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexCustomShapesPlugin',\nplugin: CustomShapesPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import CustomShapes from 'phaser3-rex-plugins/plugins/bbcodetext.js';\n</code></pre></li> <li>Add custom shapes object     <pre><code>var customShapes = new CustomShapes(scene, x, y, width, height, config);\nscene.add.existing(customShapes);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#add-custom-shapes-object","title":"Add custom shapes object","text":"<pre><code>var customShapes = scene.add.rexCustomShapes(x, y, width, height, {\n// type: 'rexCustomShapes',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n});\n</code></pre> <p>or</p> <pre><code>var customShapes = scene.add.rexCustomShapes({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// type: 'rexCustomShapes',\n\ncreate: [\n{ name: name0, type: shapeType},\n{ name: name1, type: shapeType},\n...\n],\n\n// create: {\n//     shapeType: [name0, name1, ...],\n//     shapeType: number,\n//     shapeType: name,\n// },\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>create</code> : Callback to create shapes<ul> <li>An array of object with <code>name</code> and <code>type</code> <pre><code>{ name: name0, type: shapeType }\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> </ul> </li> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <code>arc</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>rectangle</code>, <code>triangle</code></li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This custom shapes game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom custom shapes.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when refresh     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n\n// var fillColor = this.fillColor;\n// var fillAlpha = this.fillAlpha;\n// var lineWidth = this.lineWidth;\n// var strokeColor = this.strokeColor;\n// var strokeAlpha = this.strokeAlpha;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed : <code>this.isSizeChanged</code></li> <li>Fill style : <code>this.fillColor</code>, <code>this.fillAlpha</code></li> <li>Stroke style : <code>this.strokeColor</code>, <code>this.strokeAlpha</code>, <code>this.lineWidth</code></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#set-update-shape-callback","title":"Set update shape callback","text":"<pre><code>customShapes.setUpdateShapesCallback(callback);\n</code></pre> <ul> <li><code>callback</code> :     <pre><code>function() {\n// this : This custom shapes game object     \nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\n// ...\n// var isSizeChanged = this.isSizeChanged;\n}\n</code></pre><ul> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> <li>Is size changed: <code>this.isSizeChanged</code></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#size","title":"Size","text":"<p><pre><code>customShapes.setSize(width, height);\n</code></pre> or <pre><code>customShapes.resize(width, height);\n</code></pre> or <pre><code>customShapes.width = width;\ncustomShapes.height = height;\n</code></pre></p> <p>Will set dirty and redraw shapes</p>"},{"location":"shape-custom-shapes/#styles","title":"Styles","text":"<ul> <li>Fill style     <pre><code>customShapes.setFillStyle(color, alpha);\n</code></pre>     or     <pre><code>customShapes.fillColor = color;\ncustomShapes.fillAlpha = alpha;\n</code></pre></li> <li>Stroke style     <pre><code>customShapes.setStrokeStyle(lineWidth, color, alpha);\n</code></pre>     or     <pre><code>customShapes.lineWidth = lineWidth;\ncustomShapes.strokeColor = color;\ncustomShapes.strokeAlpha = alpha;\n</code></pre></li> </ul> <p>Will set dirty and redraw shapes. Apply styles to shapes in update callback.</p>"},{"location":"shape-custom-shapes/#world-position-to-local-position","title":"World position to local position","text":"<pre><code>var localXY = customShapes.worldToLocalXY(worldX, worldY); // localXY: {x, y}\n</code></pre> <p>or</p> <pre><code>var out = customShapes.worldToLocalXY(worldX, worldY, camera, out);\n</code></pre>"},{"location":"shape-custom-shapes/#recreate-shapes","title":"Recreate shapes","text":"<ul> <li>Clear all shapes     <pre><code>customShapes.clear();\n</code></pre></li> <li>Add new shape     <pre><code>customShapes.createShape(shapeType, name);\n</code></pre><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> <li><code>name</code> : A string name of this shape.</li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#refresh","title":"Refresh","text":"<p>Redraw shapes when</p> <ul> <li>Resize : <code>customShapes.resize(width, height)</code><ul> <li><code>customShapes.isSizeChanged</code> will also be <code>true</code>.</li> </ul> </li> <li>Set fill color : <code>customShapes.setFillStyle(color, alpha)</code></li> <li>Set stroke color : <code>customShapes.setStrokeStyle(lineWidth, color, alpha)</code></li> <li>Set dirty : <code>customShapes.setDirty()</code></li> <li>Set update shape callback : <code>customShapes.setUpdateShapesCallback(callback)</code></li> </ul>"},{"location":"shape-custom-shapes/#update-shape-data","title":"Update shape data","text":"<p>Shape data will be updated during rendering, or call <code>shape.updateData()</code> to update shape data before rendering.</p>"},{"location":"shape-custom-shapes/#shape-class","title":"Shape class","text":""},{"location":"shape-custom-shapes/#common-properties","title":"Common properties","text":"<ul> <li>Style<ul> <li>Get     <pre><code>var fillColor = shape.fillColor;\nvar fillAlpha = shape.fillAlpha;\nvar lineWidth = shape.lineWidth;\nvar strokeColor = shape.strokeColor;\nvar strokeAlpha = shape.strokeAlpha;\n</code></pre></li> <li>Set     <pre><code>shape.fillStyle(color, alpha);\nshape.lineStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>shape.fillStyle().lineStyle();\n</code></pre></li> </ul> </li> <li>Private data<ul> <li>Get     <pre><code>var data = shape.getData(key);\n// var data = shape.getData(key, defaultValue);\n</code></pre></li> <li>Set     <pre><code>shape.setData(key, value);\n</code></pre>     or     <pre><code>shape.setData({key:value, ...});\n</code></pre></li> <li>Inc     <pre><code>shape.incData(key, incValue);\n// shape.incData(key, incValue, defaultValue);\n</code></pre></li> <li>Mul     <pre><code>shape.mulData(key, mulValue);\n// shape.mulData(key, mulValue, defaultValue);\n</code></pre></li> <li>Clear     <pre><code>shape.clearData();\n</code></pre></li> </ul> </li> <li>Name<ul> <li>Get     <pre><code>var name = shape.name;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#line","title":"Line","text":"<ul> <li>End points<ul> <li>Get     <pre><code>var x0 = line.x0;\nvar y0 = line.y0;\nvar x1 = line.x1;\nvar y1 = line.y1;\n</code></pre></li> <li>Set     <pre><code>line.setP0(x, y);\nline.setP1(x, y);\n</code></pre>     or     <pre><code>line.x0 = x0;\nline.y0 = y0;\nline.x1 = x1;\nline.y1 = y1;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#lines","title":"Lines","text":""},{"location":"shape-custom-shapes/#create-path","title":"Create path","text":"<ul> <li>Start, clear points data     <pre><code>lines.start();\n</code></pre></li> <li>Start at position, clear points data     <pre><code>lines.startAt(x, y);\n</code></pre></li> <li>Line to<ul> <li>To position     <pre><code>lines.lineTo(x, y);\n</code></pre></li> <li>To relative position     <pre><code>lines.lineTo(x, y, true);\n</code></pre></li> <li>To vertical position     <pre><code>lines.verticalLineTo(x);\n</code></pre></li> <li>To relative vertical position     <pre><code>lines.verticalLineTo(x, true);\n</code></pre></li> <li>To horizontal position     <pre><code>lines.horizontalLineTo(y);\n</code></pre></li> <li>To relative horizontal position     <pre><code>lines.horizontalLineTo(y, true);\n</code></pre></li> </ul> </li> <li>Add arc composed of lines     <pre><code>lines.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise);\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start and end angle in degrees.</li> </ul> </li> <li>Add elliptical arc composed of lines     <pre><code>lines.ellipticalArc(centerX, centerY, radiusX, radiusY, startAngle, endAngle, anticlockwise);\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start and end angle in degrees.</li> </ul> </li> <li>Add quadratic bezier of lines     <pre><code>lines.quadraticBezierTo(cx, cy, x, y);\n</code></pre><ul> <li><code>cx</code>, <code>cy</code> : Control point</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add smooth quadratic bezier of lines     <pre><code>lines.smoothQuadraticBezierTo(x, y);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add cubic bezier of lines     <pre><code>lines.cubicBezierCurveTo(cx0, cy0, cx1, cy1, x, y);\n</code></pre><ul> <li><code>cx0</code>, <code>cy0</code> : Control point0</li> <li><code>cx1</code>, <code>cy1</code> : Control point1</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>Add smooth cubic bezier of lines     <pre><code>lines.smoothCubicBezierCurveTo(cx1, cy1, x, y);\n</code></pre><ul> <li><code>cx1</code>, <code>cy1</code> : Control point1</li> <li><code>x</code>, <code>y</code> : End point</li> </ul> </li> <li>End commands<ul> <li>Close path, to fill color     <pre><code>lines.close();\n</code></pre></li> <li>End path, to draw lines only     <pre><code>lines.end();\n</code></pre></li> </ul> </li> <li>Copy path from another lines     <pre><code>lines.copyPathFrom(srcLine);\n</code></pre>     or     <pre><code>lines.copyPathFrom(srcLine, startT, endT);\n</code></pre></li> <li>Append path from another lines     <pre><code>lines.appendPathFrom(srcLine);\n</code></pre>     or     <pre><code>lines.appendPathFrom(srcLine, startT, endT);\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#transform","title":"Transform","text":"<ul> <li>Offset all points     <pre><code>lines.offset(x, y);\n</code></pre></li> <li>Rotation all points     <pre><code>lines.rotateAround(centerX, centerY, angle);\n</code></pre><ul> <li><code>angle</code> : Rotate angle in degrees.</li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#display-path-segment","title":"Display path segment","text":"<ol> <li>Create path, under <code>customShapes.isSizeChanged</code> condition.</li> <li>Display segment of path     <pre><code>lines.setDisplayPathSegment(startT, endT);\n</code></pre>     or     <pre><code>lines.setDisplayPathSegment(endT);  // startT = 0\n</code></pre><ul> <li><code>startT</code>, <code>endT</code> : <code>0</code>~<code>1</code>. Start, end position on path, in percentage of path.<ul> <li><code>0</code> : Start position of path</li> <li><code>1</code> : End position of path</li> </ul> </li> </ul> </li> </ol>"},{"location":"shape-custom-shapes/#misc","title":"Misc","text":"<ul> <li>Get polygon     <pre><code>var polygon = lines.toPolygon();\n</code></pre><ul> <li>Can be used in <code>setInteractive method</code> <pre><code>shape.setInteractive({\nhitArea: shape.getShapes()[0].toPolygon(),\nhitAreaCallback: Phaser.Geom.Polygon.Contains,\n})\n</code></pre></li> </ul> </li> <li>Position of first or last point     <pre><code>var p0x = lines.firstPointX;\nvar p0y = lines.firstPointY;\nvar pNx = lines.lastPointX;\nvar pNy = lines.lastPointY;\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#rectangle","title":"Rectangle","text":"<ul> <li>Top-left<ul> <li>Get     <pre><code>var left = rectangle.x;\nvar top = rectangle.y;\n</code></pre></li> <li>Set     <pre><code>rectangle.setTopLeftPosition(x, y);\n</code></pre>     or     <pre><code>rectangle.x = left;\nrectangle.y = top;\n</code></pre></li> </ul> </li> <li>Center<ul> <li>Get     <pre><code>var centerX = rectangle.centerX;\nvar centerY = rectangle.centerY;\n</code></pre></li> <li>Set     <pre><code>rectangle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>rectangle.centerX = centerX;\nrectangle.centerY = centerY;\n</code></pre><ul> <li>Will change <code>rectangle.x</code>, <code>rectangle.y</code></li> </ul> </li> </ul> </li> <li>Size<ul> <li>Get     <pre><code>var width = rectangle.width;\nvar height = rectangle.height;\n</code></pre></li> <li>Set     <pre><code>rectangle.setSize(width, height);\n</code></pre>     or     <pre><code>rectangle.width = width;\nrectangle.height = height;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#round-rectangle","title":"Round rectangle","text":"<ul> <li>Top-left<ul> <li>Get     <pre><code>var left = roundRectangle.x;\nvar top = roundRectangle.y;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setTopLeftPosition(x, y);\n</code></pre>     or     <pre><code>roundRectangle.x = left;\nroundRectangle.y = top;\n</code></pre></li> </ul> </li> <li>Center<ul> <li>Get     <pre><code>var centerX = roundRectangle.centerX;\nvar centerY = roundRectangle.centerY;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>roundRectangle.centerX = centerX;\nroundRectangle.centerY = centerY;\n</code></pre><ul> <li>Will change <code>roundRectangle.x</code>, <code>roundRectangle.y</code></li> </ul> </li> </ul> </li> <li>Size<ul> <li>Get     <pre><code>var width = roundRectangle.width;\nvar height = roundRectangle.height;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setSize(width, height);\n</code></pre>     or     <pre><code>roundRectangle.width = width;\nroundRectangle.height = height;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radius = roundRectangle.radius;\n</code></pre>     or     <pre><code>var radiusTL = roundRectangle.radiusTL;\nvar radiusTR = roundRectangle.radiusTR;\nvar radiusBL = roundRectangle.radiusBL;\nvar radiusBR = roundRectangle.radiusBR;\n</code></pre></li> <li>Set     <pre><code>roundRectangle.setRadius(radius);\n// roundRectangle.radius = radius;\n</code></pre>     or     <pre><code>roundRectangle.setRadius({\ntl: radiusTL, tr: radiusTR,\nbl: radiusBL, br: radiusBR,\n});\n// roundRectangle.radiusTL = radiusTL;\n// roundRectangle.radiusTR = radiusTR;\n// roundRectangle.radiusBL = radiusBL;\n// roundRectangle.radiusBR = radiusBR;\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#triangle","title":"Triangle","text":"<ul> <li>Vertices<ul> <li>Get     <pre><code>var x0 = triangle.x0;\nvar y0 = triangle.x0;\nvar x1 = triangle.x1;\nvar y1 = triangle.x1;\nvar x2 = triangle.x2;\nvar y2 = triangle.x2;\n</code></pre></li> <li>Set     <pre><code>triangle.setP0(x, y);\ntriangle.setP1(x, y);\ntriangle.setP2(x, y);\n</code></pre>     or     <pre><code>triangle.x0 = x0;\ntriangle.x0 = y0;\ntriangle.x1 = x1;\ntriangle.x1 = y1;\ntriangle.x2 = x2;\ntriangle.x2 = y2;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#arc","title":"Arc","text":"<ul> <li>Center position<ul> <li>Get     <pre><code>var x = arc.x;\nvar y = arc.y;\n</code></pre></li> <li>Set     <pre><code>arc.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>arc.x = x;\narc.y = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radiusX = arc.radiusX;\nvar radiusY = arc.radiusY;\n</code></pre></li> <li>Set     <pre><code>arc.setRadius(radiusX, radiusY);\n// arc.setRadius(radius);\n</code></pre>     or     <pre><code>arc.radiusX = radiusX;\narc.radiusY = radiusY;\n</code></pre></li> </ul> </li> <li>Angles<ul> <li>Get     <pre><code>var startAngle = arc.startAngle;\nvar endAngle = arc.endAngle;\nvar anticlockwise = arc.anticlockwise; // boolean        \n</code></pre></li> <li>Set     <pre><code>arc.setAngle(startAngle, endAngle);  // anticlockwise = false\n// arc.setAngle(startAngle, endAngle, anticlockwise);\n</code></pre>     or     <pre><code>arc.startAngle = startAngle;\narc.endAngle = endAngle;\narc.anticlockwise = anticlockwise; // boolean\n</code></pre><ul> <li><code>startAngle</code>, <code>endAngle</code> : Start/end angle in degrees.</li> </ul> </li> </ul> </li> <li>Pie<ul> <li>Get     <pre><code>var pie = arc.pie; // boolean\n</code></pre></li> <li>Set     <pre><code>arc.setPie();\n</code></pre>     or     <pre><code>arc.pie = true;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#circle","title":"Circle","text":"<ul> <li>Center position<ul> <li>Get     <pre><code>var x = circle.x;\nvar y = circle.y;\n</code></pre></li> <li>Set     <pre><code>circle.setCenterPosition(x, y);\n</code></pre>     or     <pre><code>circle.x = x;\ncircle.y = y;\n</code></pre></li> </ul> </li> <li>Radius<ul> <li>Get     <pre><code>var radiusX = circle.radiusX;\nvar radiusY = circle.radiusY;\n</code></pre></li> <li>Set     <pre><code>circle.setRadius(radiusX, radiusY);\n// arc.setRadius(radius);\n</code></pre>     or     <pre><code>circle.radiusX = radiusX;\ncircle.radiusY = radiusY;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-custom-shapes/#ellipse","title":"Ellipse","text":"<p>The same as Circle.</p>"},{"location":"shape-custom-shapes/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = shape.alpha;\n</code></pre></li> <li>Set     <pre><code>shape.setAlpha(alpha);\n// shape.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-custom-shapes/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-custom-shapes/#create-mask","title":"Create mask","text":"<pre><code>var mask = shape.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-custom-shapes/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-custom-shapes/#compare-with-similar-plugins","title":"Compare with similar plugins","text":"<ul> <li>Custom Shapes : Draw shapes.</li> <li>Custom Porgress : Similar with custom-shapes, plus a <code>value</code> property</li> <li>Custom Spinner : Similar with custom-progress, plus a <code>value</code> tween task.</li> </ul>"},{"location":"shape-ellipse/","title":"Ellipse","text":""},{"location":"shape-ellipse/#introduction","title":"Introduction","text":"<p>Ellipse shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-ellipse/#usage","title":"Usage","text":""},{"location":"shape-ellipse/#create-shape-object","title":"Create shape object","text":"<pre><code>var ellipse = scene.add.ellipse(x, y, width, height, fillColor);\n// var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-ellipse/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyEllipse extends Phaser.GameObjects.Ellipse {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var ellipse = new MyEllipse(scene, x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = ellipse.fillColor;\nvar alpha = ellipse.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>ellipse.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>ellipse.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = ellipse.strokeColor;\n</code></pre></li> <li>Set     <pre><code>ellipse.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>ellipse.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>ellipse.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-ellipse/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = ellipse.alpha;\n</code></pre></li> <li>Set     <pre><code>ellipse.setAlpha(alpha);\n// ellipse.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = ellipse.width;\nvar height = ellipse.height;\n</code></pre></li> <li>Set     <pre><code>ellipse.setSize(width, height);\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = ellipse.displayWidth;\nvar height = ellipse.displayHeight;\n</code></pre></li> <li>Set     <pre><code>ellipse.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>ellipse.displayWidth = width;\nellipse.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-ellipse/#smoothness","title":"Smoothness","text":"<p>The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered.</p> <p><pre><code>ellipse.setSmoothness(smoothness);\n</code></pre> or <pre><code>ellipse.smoothness = smoothness;\n</code></pre></p>"},{"location":"shape-ellipse/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-ellipse/#create-mask","title":"Create mask","text":"<pre><code>var mask = ellipse.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-ellipse/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-fullwindowrectangle/","title":"Full window rectangle","text":""},{"location":"shape-fullwindowrectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape covered full window.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-fullwindowrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Cover</li> </ul>"},{"location":"shape-fullwindowrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-fullwindowrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"shape-fullwindowrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexfullwindowrectangleplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexfullwindowrectangleplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FullWindowRectanglePlugin from 'phaser3-rex-plugins/plugins/fullwindowrectangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexFullWindowRectanglePlugin',\nplugin: FullWindowRectanglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import FullWindowRectangle from 'phaser3-rex-plugins/plugins/fullwindowrectangle.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new FullWindowRectangle(scene, fillColor, fillAlpha);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexFullWindowRectangle(fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-fullwindowrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFullWindowRectangle extends RexPlugins.GameObjects.FullWindowRectangle {\nconstructor(scene, fillColor, fillAlpha) {\nsuper(scene, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyFullWindowRectangle(scene, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-fullwindowrectangle/#color","title":"Color","text":"<ul> <li>Tint<ul> <li>Get     <pre><code>var tint = rect.tint;\n</code></pre></li> <li>Set     <pre><code>rect.tint = tint;\n</code></pre></li> </ul> </li> <li>Alpha<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.alpha = alpha;\n</code></pre></li> </ul> </li> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-fullwindowrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-fullwindowrectangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = rect.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-fullwindowrectangle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-grid/","title":"Grid","text":""},{"location":"shape-grid/#introduction","title":"Introduction","text":"<p>Grid shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-grid/#usage","title":"Usage","text":""},{"location":"shape-grid/#create-shape-object","title":"Create shape object","text":"<pre><code>var grid = scene.add.grid(x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n</code></pre>"},{"location":"shape-grid/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGrid extends Phaser.GameObjects.Grid {\nconstructor(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha) {\nsuper(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var grid = new MyGrid(scene, x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineFillColor, outlineFillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-grid/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = grid.fillColor;\nvar alpha = grid.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>grid.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = grid.strokeColor;\n</code></pre></li> <li>Set     <pre><code>grid.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setStrokeStyle();\n</code></pre></li> </ul> </li> <li>Alternating color<ul> <li>Get     <pre><code>var color = grid.altFillColor;\n</code></pre></li> <li>Set     <pre><code>grid.setAltFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>grid.setAltFillStyle();\n</code></pre></li> </ul> </li> <li>Outline color<ul> <li>Get     <pre><code>var color = grid.outlineFillColor;\n</code></pre></li> <li>Set     <pre><code>grid.setOutlineStyle(color, alpha;\n</code></pre></li> <li>Clear     <pre><code>grid.setOutlineStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>grid.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-grid/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = grid.alpha;\n</code></pre></li> <li>Set     <pre><code>grid.setAlpha(alpha);\n// grid.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-grid/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = grid.displayWidth;\nvar height = grid.displayHeight;\n</code></pre></li> <li>Set     <pre><code>grid.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>grid.displayWidth = width;\ngrid.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-grid/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-grid/#create-mask","title":"Create mask","text":"<pre><code>var mask = grid.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-grid/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-isobox/","title":"Iso box","text":""},{"location":"shape-isobox/#introduction","title":"Introduction","text":"<p>Iso-box shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-isobox/#usage","title":"Usage","text":""},{"location":"shape-isobox/#create-shape-object","title":"Create shape object","text":"<pre><code>var isoBox = scene.add.isobox(x, y, width, height, fillTop, fillLeft, fillRight);\n</code></pre>"},{"location":"shape-isobox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyIsoBox extends Phaser.GameObjects.IsoBox {\nconstructor(scene, x, y, width, height, fillTop, fillLeft, fillRight) {\nsuper(scene, x, y, width, height, fillTop, fillLeft, fillRight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var isoBox = new MyIsoBox(scene, x, y, width, height, fillTop, fillLeft, fillRight);\n</code></pre></li> </ul>"},{"location":"shape-isobox/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>isoBox.setFillStyle(fillTop, fillLeft, fillRight);\n</code></pre></li> <li>Show face     <pre><code>isoBox.setFaces(showTop, showLeft, showRight);\n</code></pre><ul> <li><code>showTop</code>, <code>showLeft</code>, <code>showRight</code>: Set <code>true</code> to show that face</li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>isoBox.setFillStyle(fillTop, fillLeft, fillRight)</code> to change color.</p>"},{"location":"shape-isobox/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = isoBox.alpha;\n</code></pre></li> <li>Set     <pre><code>isoBox.setAlpha(alpha);\n// isoBox.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#projection","title":"Projection","text":"<ul> <li>Get    <pre><code>var projection = isoBox.projection;\n</code></pre></li> <li>Set    <pre><code>isoBox.setProjection(value)\n</code></pre>    or    <pre><code>isoBox.projection = value;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = isoBox.displayWidth;\nvar height = isoBox.displayHeight;\n</code></pre></li> <li>Set     <pre><code>isoBox.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>isoBox.displayWidth = width;\nisoBox.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-isobox/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-isobox/#create-mask","title":"Create mask","text":"<pre><code>var mask = isoBox.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-isobox/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-isotriangle/","title":"Iso triangle","text":""},{"location":"shape-isotriangle/#introduction","title":"Introduction","text":"<p>Iso-triangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-isotriangle/#usage","title":"Usage","text":""},{"location":"shape-isotriangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var isoTriangle = scene.add.isotriangle(x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n</code></pre>"},{"location":"shape-isotriangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyIsoTriangle extends Phaser.GameObjects.IsoTriangle {\nconstructor(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight) {\nsuper(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var isoTriangle = new MyIsoTriangle(scene, x, y, width, height, reversed, fillTop, fillLeft, fillRight);\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#set-color","title":"Set color","text":"<ul> <li>Fill color     <pre><code>isoTriangle.setFillStyle(fillTop, fillLeft, fillRight);\n</code></pre></li> <li>Show face     <pre><code>isoTriangle.setFaces(showTop, showLeft, showRight);\n</code></pre><ul> <li><code>showTop</code>, <code>showLeft</code>, <code>showRight</code>: Set <code>true</code> to show that face</li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>isoTriangle.setFillStyle(fillTop, fillLeft, fillRight)</code> to change color.</p>"},{"location":"shape-isotriangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = isoTriangle.alpha;\n</code></pre></li> <li>Set     <pre><code>isoTriangle.setAlpha(alpha);\n// isoTriangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#projection","title":"Projection","text":"<ul> <li>Get    <pre><code>var projection = isoTriangle.projection;\n</code></pre></li> <li>Set    <pre><code>isoTriangle.setProjection(value)\n</code></pre>    or    <pre><code>isoTriangle.projection = value;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#reverse","title":"Reverse","text":"<ul> <li>Get    <pre><code>var isReversed = isoTriangle.isReversed;\n</code></pre></li> <li>Set    <pre><code>isoTriangle.setReversed(reversed);\n</code></pre>    or    <pre><code>isoTriangle.reversed = reversed;\n</code></pre></li> <li>Set <code>true</code> to render upside down.</li> </ul>"},{"location":"shape-isotriangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = isoTriangle.displayWidth;\nvar height = isoTriangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>isoTriangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>isoTriangle.displayWidth = width;\nisoTriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-isotriangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-isotriangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = isoTriangle.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-isotriangle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-line/","title":"Line","text":""},{"location":"shape-line/#introduction","title":"Introduction","text":"<p>Line shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-line/#usage","title":"Usage","text":""},{"location":"shape-line/#create-shape-object","title":"Create shape object","text":"<pre><code>var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor);\n// var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha);\n</code></pre>"},{"location":"shape-line/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyCurve extends Phaser.GameObjects.Line {\nconstructor(scene, x, y, x1, y1, x2, y2, strokeColor) {\nsuper(scene, x, y, x1, y1, x2, y2, strokeColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var line = new MyLine(scene, x, y, x1, y1, x2, y2, strokeColor);\n</code></pre></li> </ul>"},{"location":"shape-line/#set-color","title":"Set color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = line.fillColor;\nvar alpha = line.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>line.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>line.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = line.strokeColor;\n</code></pre></li> <li>Set     <pre><code>line.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>line.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>line.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-line/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = line.alpha;\n</code></pre></li> <li>Set     <pre><code>line.setAlpha(alpha);\n// line.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-line/#set-end-points","title":"Set end points","text":"<pre><code>line.setTo(x1, y1, x2, y2);\n</code></pre>"},{"location":"shape-line/#line-width","title":"Line width","text":"<pre><code>line.setLineWidth(startWidth, endWidth);\n</code></pre> <ul> <li><code>endWidth</code> : The end width of the line. Only used in WebGL.</li> </ul>"},{"location":"shape-line/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = line.displayWidth;\nvar height = line.displayHeight;\n</code></pre></li> <li>Set     <pre><code>line.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>line.displayWidth = width;\nline.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-line/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-line/#create-mask","title":"Create mask","text":"<pre><code>var mask = line.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-line/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-lineprogress/","title":"Line progress","text":""},{"location":"shape-lineprogress/#introduction","title":"Introduction","text":"<p>Horizontal line progress bar shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-lineprogress/#live-demos","title":"Live demos","text":"<ul> <li>Line-progress</li> </ul>"},{"location":"shape-lineprogress/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-lineprogress/#install-plugin","title":"Install plugin","text":""},{"location":"shape-lineprogress/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexlineprogressplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineprogressplugin.min.js', true);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import LineProgressPlugin from 'phaser3-rex-plugins/plugins/lineprogress-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressPlugin',\nplugin: LineProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import LineProgress from 'phaser3-rex-plugins/plugins/lineprogress.js';\n</code></pre></li> <li>Add line-progress object     <pre><code>var lineProgress = new LineProgress(scene, x, y, width, height, barColor, value, config);\nscene.add.existing(lineProgress);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexLineProgressPlugin',\nplugin: LineProgressPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-lineprogress/#create-instance","title":"Create instance","text":"<pre><code>var lineProgress = scene.add.rexLineProgress(x, y, width, height, barColor, value, {    trackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <p>or </p> <pre><code>var lineProgress = scene.add.rexLineProgress({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>barColor</code> : Fill color of line bar, in number or css string value.</li> <li><code>trackColor</code> : Fill color of line track, in number or css string value.</li> <li><code>trackStrokeColor</code> : Stroke color of track, in number or css string value.</li> <li><code>trackStrokeThickness</code> : Stroke line width of track.</li> <li><code>skewX</code> : Horizontal skew of track and bar.</li> <li><code>rtl</code> : <ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>value</code> : <code>0</code> ~ <code>1</code>, progress value. Default is <code>0</code>.</li> <li><code>easeValue</code> : Parameters of easing value.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, lineProgress) {\n}\n</code></pre></li> </ul> <p>Add line-progress from JSON</p> <pre><code>var lineProgress = scene.make.rexLineProgress({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\nbarColor: undefined,\ntrackColor: undefined,\ntrackStrokeColor: undefined,\ntrackStrokeThickness: 2,\n\nskewX:0,\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvalue: 0,\nvaluechangeCallback: function(newValue, oldValue, lineProgress) {\n},\n\nadd: true\n});\n</code></pre>"},{"location":"shape-lineprogress/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLineProgress extends LineProgress {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var lineProgress = new MyLineProgress(scene, x, y, width, height, barColor, value, config);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#progress-value","title":"Progress value","text":"<ul> <li>Get value     <pre><code>var value = lineProgress.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = lineProgress.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = lineProgress.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>lineProgress.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>lineProgress.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>lineProgress.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>lineProgress.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#ease-progress-value","title":"Ease progress value","text":"<ul> <li>Ease value to     <pre><code>lineProgress.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>lineProgress.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>lineProgress.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>lineProgress.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>lineProgress.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#line-track","title":"Line track","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var trackColor = lineProgress.trackColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(trackColor);\n// lineProgress.trackColor = trackColor;\n</code></pre></li> </ul> </li> <li>Stroke<ul> <li>Get     <pre><code>var trackStrokeColor = lineProgress.trackStrokeColor;\nvar trackStrokeThickness = lineProgress.trackStrokeThickness;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setTrackColor(color);\nlineProgress.setTrackStroke(lineWidth, color);\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#line-bar","title":"Line bar","text":"<ul> <li>Color<ul> <li>Get     <pre><code>var barColor = lineProgress.barColor;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setBarColor(barColor);\n// lineProgress.barColor = barColor;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-lineprogress/#horizontal-skew","title":"Horizontal skew","text":"<ul> <li>Get     <pre><code>var skewX = lineProgress.skewX;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setSkewX(skewX);\n// lineProgress.skewX = skewX;\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#right-to-left","title":"Right-to-left","text":"<ul> <li>Get     <pre><code>var rtl = lineProgress.rtl;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setRTL(rtl);\n// lineProgress.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>lineProgress.on('valuechange', function(newValue, oldValue, lineProgress){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = lineProgress.alpha;\n</code></pre></li> <li>Set     <pre><code>lineProgress.setAlpha(alpha);\n// lineProgress.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-lineprogress/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-lineprogress/#create-mask","title":"Create mask","text":"<pre><code>var mask = lineProgress.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-lineprogress/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-polygon/","title":"Polygon","text":""},{"location":"shape-polygon/#introduction","title":"Introduction","text":"<p>Polygon shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-polygon/#usage","title":"Usage","text":""},{"location":"shape-polygon/#create-shape-object","title":"Create shape object","text":"<pre><code>var polygon = scene.add.polygon(x, y, points, fillColor);\n// var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>points</code> : <ul> <li>An array of number : <code>[x0, y0, x1, y1, ...]</code></li> <li>An array of points : <code>[{x:x0, y:y0}, {x:x1, y:y1}, ...]</code></li> <li>A string : <code>'x0 y0 x1 y1 ...'</code></li> </ul> </li> </ul> <p>Note</p> <p>Shift given points to align position (0, 0)</p>"},{"location":"shape-polygon/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPolygon extends Phaser.GameObjects.Polygon {\nconstructor(scene, x, y, points, fillColor) {\nsuper(scene, x, y, points, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var polygon = new MyPolygon(scene, x, y, points, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-polygon/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = polygon.fillColor;\nvar alpha = polygon.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>polygon.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>polygon.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = polygon.strokeColor;\n</code></pre></li> <li>Set     <pre><code>polygon.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>polygon.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>polygon.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-polygon/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = polygon.alpha;\n</code></pre></li> <li>Set     <pre><code>polygon.setAlpha(alpha);\n// polygon.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-polygon/#smooth","title":"Smooth","text":"<p>Smooths the polygon over the number of iterations specified.</p> <pre><code>polygon.smooth(iterations);\n</code></pre>"},{"location":"shape-polygon/#set-points","title":"Set points","text":"<pre><code>polygon.setTo(points);\n</code></pre> <ul> <li><code>point</code> :<ul> <li>A string containing paired values separated by a single space : <code>'40 0 40 20 100 20 100 80 40 80 40 100 0 50'</code></li> <li>An array of Point objects : <code>[new Phaser.Point(x1, y1), ...]</code></li> <li>An array of objects with public x/y properties : <code>[obj1, obj2, ...]</code></li> <li>An array of paired numbers that represent point coordinates : <code>[x1,y1, x2,y2, ...]</code></li> <li>An array of arrays with two elements representing x/y coordinates : <code>[[x1, y1], [x2, y2], ...]</code></li> </ul> </li> </ul>"},{"location":"shape-polygon/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = polygon.displayWidth;\nvar height = polygon.displayHeight;\n</code></pre></li> <li>Set     <pre><code>polygon.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>polygon.displayWidth = width;\npolygon.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-polygon/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-polygon/#create-mask","title":"Create mask","text":"<pre><code>var mask = polygon.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-polygon/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-rectangle/","title":"Rectangle","text":""},{"location":"shape-rectangle/#introduction","title":"Introduction","text":"<p>Rectangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-rectangle/#usage","title":"Usage","text":""},{"location":"shape-rectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rectangle(x, y, width, height, fillColor);\n// var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-rectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRectangle extends Phaser.GameObjects.Rectangle {\nconstructor(scene, x, y, width, height, fillColor) {\nsuper(scene, x, y, width, height, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRectangle(scene, x, y, width, height, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);        </code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = rect.strokeColor;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>rect.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-rectangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.setAlpha(alpha);\n// rect.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = rect.displayWidth;\nvar height = rect.displayHeight;\n</code></pre></li> <li>Set     <pre><code>rect.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>rect.displayWidth = width;\nrect.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-rectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-rectangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = rect.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-rectangle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-roundrectangle/","title":"Round Rectangle","text":""},{"location":"shape-roundrectangle/#introduction","title":"Introduction","text":"<p>Round rectangle shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-roundrectangle/#live-demos","title":"Live demos","text":"<ul> <li>Round rectangle</li> </ul>"},{"location":"shape-roundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-roundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"shape-roundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexroundrectangleplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rexroundrectangleplugin.min.js', true);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import RoundRectanglePlugin from 'phaser3-rex-plugins/plugins/roundrectangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexRoundRectanglePlugin',\nplugin: RoundRectanglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add shape object     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import RoundRectangle from 'phaser3-rex-plugins/plugins/roundrectangle.js';\n</code></pre></li> <li>Add shape object     <pre><code>var rect = new RoundRectangle(scene, x, y, width, height, radius, fillColor, fillAlpha);\nscene.add.existing(rect);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre> <p>or</p> <pre><code>var rect = scene.add.rexRoundRectangle({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\nradius: 0,\n\ncolor: undefined,\nalpha: undefined,\n\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: 2\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> : <ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-roundrectangle/#deform","title":"Deform","text":"<ul> <li>Rectangle, set radius of 4 corners to <code>0</code>.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y,  width, height, 0, fillColor, fillAlpha);\n</code></pre></li> <li>Circle, set width and height to <code>undefined</code>.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, radius, fillColor, fillAlpha);\n</code></pre></li> <li>Ellipse, set width and height to <code>undefined</code>, and radiusX/radiusY.     <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {x: radiusX, y: radiusY}, fillColor, fillAlpha);\n</code></pre></li> <li>Rhombus, set width and height to <code>undefined</code>, and assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangle(x, y, undefined, undefined, {\nradius: radius,\niteration: 0\n}, fillColor, fillAlpha);\n</code></pre></li> <li>Octagon, assign iteration to <code>0</code> <pre><code>var rect = scene.add.rexRoundRectangle(x, y, width, height, {\nradius: radius,\niteration: 0\n}, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangle extends RexPlugins.GameObjects.RoundRectangle {\nconstructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, radius, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangle(scene, x, y, width, height, radius, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = rect.fillColor;\nvar alpha = rect.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>rect.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = rect.strokeColor;\n</code></pre></li> <li>Set     <pre><code>rect.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>rect.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>rect.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-roundrectangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = rect.alpha;\n</code></pre></li> <li>Set     <pre><code>rect.setAlpha(alpha);\n// rect.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = rect.width;\nvar height = rect.height;\n</code></pre></li> <li>Set     <pre><code>rect.setSize(width, height);\n</code></pre>     or     <pre><code>rect.width = width;\nrect.height = height;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = rect.displayWidth;\nvar height = rect.displayHeight;\n</code></pre></li> <li>Set     <pre><code>rect.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>rect.displayWidth = width;\nrect.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-roundrectangle/#radius","title":"Radius","text":"<ul> <li>Get     <pre><code>var radius = rect.radius;\nvar radiusTL = rect.radiusTL;\nvar radiusTR = rect.radiusTR;\nvar radiusBL = rect.radiusBL;\nvar radiusBR = rect.radiusBR;\n</code></pre>     or     <pre><code>var cornerRadius = rect.cornerRadius;\n</code></pre><ul> <li><code>radius</code> : Number, maximum radius of 4 corners.</li> <li><code>cornerRadius</code> : JSON object of 4 corners.     <pre><code>{\ntl: {x : radiusX, y: radiusY, convex : true},\ntr: {x : radiusX, y: radiusY, convex : true},\nbl: {x : radiusX, y: radiusY, convex : true},\nbr: {x : radiusX, y: radiusY, convex : true},\n}\n</code></pre></li> </ul> </li> <li>Set     <pre><code>rect.setRadius(value);\nrect.setRadiusTL(value);  // number, or {x,y}\nrect.setRadiusTR(value);  // number, or {x,y}\nrect.setRadiusBL(value);  // number, or {x,y}\nrect.setRadiusBR(value);  // number, or {x,y}\n</code></pre>     or     <pre><code>rect.radius = radius;\nrect.radiusTL = radius;  // number, or {x,y}\nrect.radiusTR = radius;  // number, or {x,y}\nrect.radiusBL = radius;  // number, or {x,y}\nrect.radiusBR = radius;  // number, or {x,y}\n</code></pre><ul> <li><code>radius</code> :<ul> <li>Number : 4 corners with the same radius.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     ```javascript     {         tl: {x : radiusX, y: radiusY},         tr: {x : radiusX, y: radiusY},         bl: {x : radiusX, y: radiusY},         br: {x : radiusX, y: radiusY},     }</li> </ul> </li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-roundrectangle/#iteration","title":"Iteration","text":"<ul> <li>Get     <pre><code>var iteration = rect.iteration;\n</code></pre></li> <li>Set     <pre><code>rect.setIteration(value);\n</code></pre>     or     <pre><code>rect.iteration = value;\n</code></pre></li> </ul> <p>Number of interpolation points in each round corner. Default value is <code>4</code>.</p> <ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul>"},{"location":"shape-roundrectangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-roundrectangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = rect.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-roundrectangle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-spinner/","title":"Spinner","text":""},{"location":"shape-spinner/#introduction","title":"Introduction","text":"<p>Loading animations on shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-spinner/#live-demos","title":"Live demos","text":"<ul> <li>Spinners</li> <li>Custom spinner</li> </ul>"},{"location":"shape-spinner/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-spinner/#install-plugin","title":"Install plugin","text":""},{"location":"shape-spinner/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexspinnerplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspinnerplugin.min.js\",\n\"rexSpinner\",\n\"rexSpinner\"\n);\n</code></pre></li> <li>Add spinner object   <pre><code>var audio = this.rexSpinner.add.audio(config);\nvar ball = this.rexSpinner.add.ball(config);\nvar bars = this.rexSpinner.add.bars(config);\nvar box = this.rexSpinner.add.box(config);\nvar clock = this.rexSpinner.add.clock(config);\nvar cube = this.rexSpinner.add.cube(config);\nvar dots = this.rexSpinner.add.dots(config);\nvar facebook = this.rexSpinner.add.facebook(config);\nvar grid = this.rexSpinner.add.grid(config);\nvar los = this.rexSpinner.add.los(config);\nvar orbit = this.rexSpinner.add.orbit(config);\nvar oval = this.rexSpinner.add.oval(config);\nvar pie = this.rexSpinner.add.pie(config);\nvar puff = this.rexSpinner.add.puff(config);\nvar radio = this.rexSpinner.add.radio(config);\nvar rings = this.rexSpinner.add.rings(config);\nvar spinner = this.rexSpinner.add.spinner(config);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SpinnerPlugin from \"phaser3-rex-plugins/templates/spinner/spinner-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexSpinner\",\nplugin: SpinnerPlugin,\nmapping: \"rexSpinner\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add spinner object   <pre><code>var audio = this.rexSpinner.add.audio(config);\nvar ball = this.rexSpinner.add.ball(config);\nvar bars = this.rexSpinner.add.bars(config);\nvar box = this.rexSpinner.add.box(config);\nvar clock = this.rexSpinner.add.clock(config);\nvar cube = this.rexSpinner.add.cube(config);\nvar dots = this.rexSpinner.add.dots(config);\nvar facebook = this.rexSpinner.add.facebook(config);\nvar grid = this.rexSpinner.add.grid(config);\nvar los = this.rexSpinner.add.los(config);\nvar orbit = this.rexSpinner.add.orbit(config);\nvar oval = this.rexSpinner.add.oval(config);\nvar pie = this.rexSpinner.add.pie(config);\nvar puff = this.rexSpinner.add.puff(config);\nvar radio = this.rexSpinner.add.radio(config);\nvar rings = this.rexSpinner.add.rings(config);\nvar spinner = this.rexSpinner.add.spinner(config);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { Audio, Ball, Bars, Box, Clock, Cube, Custom, Dots, Facebook, Grid, Los, Orbit, Oval, Puff, Radio, Rings, Spinner\n} from \"phaser3-rex-plugins/templates/spinner/spinner-components.js\";\n</code></pre></li> <li>Add spinner object   <pre><code>var spinner = new Audio(scene, config);\nscene.add.existing(spinner);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#add-spinner-object","title":"Add spinner object","text":"<pre><code>var spinner = scene.rexSpinner.add.audio({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// color: 0xffffff,\n\n// duration: 1000,\n// start: true,\n// delay: 0,\n// repeatDelay: 0,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>color</code> : Fill color, or stroke color. Default value is <code>0xffffff</code></li> <li><code>duration</code> : Duration of animation.</li> <li><code>start</code> : Start animation when object created.</li> <li><code>false</code> : Don't play animation at beginning.</li> <li><code>delay</code> : Delay time in ms before running.</li> <li><code>repeatDelay</code> : Delay time between 2 periods.</li> </ul>"},{"location":"shape-spinner/#play-animation","title":"Play animation","text":""},{"location":"shape-spinner/#start","title":"Start","text":"<ul> <li>Start playing, won't restart when playing     <pre><code>spinner.start();\n</code></pre></li> <li>Restart with new duration     <pre><code>spinner.start(duration);\n</code></pre></li> </ul>"},{"location":"shape-spinner/#pause","title":"Pause","text":"<pre><code>spinner.pause();\n</code></pre>"},{"location":"shape-spinner/#resume","title":"Resume","text":"<pre><code>spinner.resume();\n</code></pre>"},{"location":"shape-spinner/#stop","title":"Stop","text":"<pre><code>spinner.stop();\n</code></pre>"},{"location":"shape-spinner/#play-animation-manually","title":"Play animation manually","text":"<ol> <li>Set <code>start</code> to <code>false</code> in config</li> <li>Set progress manually     <pre><code>spinner.setValue(t);\n</code></pre>     or     <pre><code>spinner.value = t;\n</code></pre><ul> <li><code>t</code> : <code>0</code> ~ <code>1</code></li> </ul> </li> </ol>"},{"location":"shape-spinner/#is-running","title":"Is running","text":"<pre><code>var isRunning = spinner.isRunning;\n</code></pre>"},{"location":"shape-spinner/#color","title":"Color","text":"<ul> <li>Get     <pre><code>var color = spinner.color;\n</code></pre></li> <li>Set     <pre><code>spinner.setColor(color);\n</code></pre>     or     <pre><code>spinner.color = color;\n</code></pre><ul> <li><code>color</code> : Fill color, or stroke color, in number.</li> </ul> </li> </ul>"},{"location":"shape-spinner/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = spinner.alpha;\n</code></pre></li> <li>Set     <pre><code>spinner.setAlpha(alpha);\n// spinner.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#duration","title":"Duration","text":"<ul> <li>Get     <pre><code>var duration = spinner.duration;\n</code></pre></li> <li>Set, will apply to next animation playing.     <pre><code>spinner.setDuration(duration);\n</code></pre>     or     <pre><code>spinner.duration = duration;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#ease","title":"Ease","text":"<ul> <li>Get     <pre><code>var ease = spinner.ease;\n</code></pre></li> <li>Set, will apply to next animation playing.     <pre><code>spinner.setEasen(ease);\n</code></pre>     or     <pre><code>spinner.ease = ease;\n</code></pre></li> </ul>"},{"location":"shape-spinner/#custom-spinner","title":"Custom spinner","text":"<pre><code>var customSpinner = this.rexSpinner.add.custom({\n// x: 0,\n// y: 0,\n// width: 64,\n// height: 64,\n// color: 0xffffff,\n\n// duration: 1000,\n// start: true,\n\ncreate: {\n// shapeType: [name0, name1, ...],\n// shapeType: number,\n// shapeType: name,\n},\n\n// create: function() {\n// \n// },\n\nupdate: function() {\n\n},\n})\n</code></pre> <ul> <li><code>create</code> : Callback to create shapes<ul> <li>A plain object with <code>shapeType: name</code>, or <code>shapeType: number</code><ul> <li><code>shapeType</code> : <ul> <li><code>'arc'</code> : Create Arc shape.</li> <li><code>'circle'</code> : Create Circle shape.</li> <li><code>'ellipse'</code> : Create Ellipse shape.</li> <li><code>'line'</code> : Create Line shape.</li> <li><code>'lines'</code> : Create Lines shape.</li> <li><code>'rectangle'</code> : Create Rectangle shape.</li> <li><code>'roundRectangle'</code> : Create Round rectangle shape.</li> <li><code>'triangle'</code> : Create Triangle shape.</li> </ul> </li> <li><code>nameArray</code> : An array of unique string name for each shape.</li> <li><code>name</code> : An unique string name of this shape.</li> <li><code>number</code> : Amount of shapes to create.</li> </ul> </li> <li>A callback     <pre><code>function() {\n// this : This spinner game object\nvar shape = this.createShape(shapeType, name);\nthis.addShape(shape);\n}\n</code></pre><ul> <li><code>this.createShape(shapeType, name)</code> : Crate a shape instance, with an unique name.</li> <li><code>this.addShape(shape)</code> : Add this shape instance to this custom spinner.</li> </ul> </li> </ul> </li> <li><code>update</code> : Callback when porgressing     <pre><code>function() {\n// this : This spinner game object\nvar centerX = this.centerX;\nvar centerY = this.centerY;\nvar radius = this.radius;\nvar color = this.color;\nvar shapes = this.getShapes();\nvar shape = this.getShape(name);\nvar t = this.value;\n// ...\n}\n</code></pre><ul> <li><code>this.value</code> : Progress, <code>0</code>~<code>1</code>.</li> <li>Position : <ul> <li><code>this.centerX</code>, <code>this.centerY</code> : Center position of this spinner. The coordinate of top-left point is <code>(0,0)</code></li> <li><code>this.radius</code> : Minimun value of <code>this.centerX</code>, <code>this.centerY</code>, to draw shape at square.</li> </ul> </li> <li>Color :<ul> <li><code>this.color</code> : Color property of this spinner.</li> </ul> </li> <li>Shape instances : Change properties of shape instances.<ul> <li><code>this.getShapes()</code> : Return all shapes in an array.</li> <li><code>this.getShape(name)</code> : Return a shape by the unique string name.</li> </ul> </li> </ul> </li> </ul>"},{"location":"shape-spinner/#shape-class","title":"Shape class","text":"<p>See Shape class</p>"},{"location":"shape-spinner/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-spinner/#create-mask","title":"Create mask","text":"<pre><code>var mask = customSpinner.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-spinner/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-star/","title":"Star","text":""},{"location":"shape-star/#introduction","title":"Introduction","text":"<p>Star shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-star/#usage","title":"Usage","text":""},{"location":"shape-star/#create-shape-object","title":"Create shape object","text":"<pre><code>var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor);\n// var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha);\n</code></pre> <ul> <li><code>points</code> : The number of points on the star. Default is 5.</li> <li><code>innerRadius</code> : The inner radius of the star. Default is 32.</li> <li><code>outerRadius</code> : The outer radius of the star. Default is 64.</li> </ul>"},{"location":"shape-star/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStar extends Phaser.GameObjects.Star {\nconstructor(scene, x, y, points, innerRadius, outerRadius, fillColor) {\nsuper(scene, x, y, points, innerRadius, outerRadius, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var star = new MyStar(scene, x, y, points, innerRadius, outerRadius, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-star/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = star.fillColor;\nvar alpha = star.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>star.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>star.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = star.strokeColor;\n</code></pre></li> <li>Set     <pre><code>star.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>star.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>star.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-star/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = star.alpha;\n</code></pre></li> <li>Set     <pre><code>star.setAlpha(alpha);\n// star.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-star/#radius","title":"Radius","text":"<ul> <li>Inner radius<ul> <li>Get     <pre><code>var innerRadius = star.innerRadius;\n</code></pre></li> <li>Set     <pre><code>star.setInnerRadius(innerRadius);\n</code></pre>     or     <pre><code>star.innerRadius = innerRadius;\n</code></pre></li> </ul> </li> <li>Outer radius<ul> <li>Get     <pre><code>var outerRadius = star.outerRadius;\n</code></pre></li> <li>Set     <pre><code>star.setOuterRadius(outerRadius);\n</code></pre>     or     <pre><code>star.outerRadius = outerRadius;\n</code></pre></li> </ul> </li> <li>Points<ul> <li>Get     <pre><code>var points = star.points;\n</code></pre></li> <li>Set     <pre><code>star.setPoints(points);\n</code></pre>     or     <pre><code>star.points = points;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-star/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = star.displayWidth;\nvar height = star.displayHeight;\n</code></pre></li> <li>Set     <pre><code>star.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>star.displayWidth = width;\nstar.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-star/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-star/#create-mask","title":"Create mask","text":"<pre><code>var mask = star.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-star/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-toggleswitch/","title":"Toggle switch","text":""},{"location":"shape-toggleswitch/#introduction","title":"Introduction","text":"<p>Toggle-switch input.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-toggleswitch/#live-demos","title":"Live demos","text":"<ul> <li>Toggle-switch</li> </ul>"},{"location":"shape-toggleswitch/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-toggleswitch/#install-plugin","title":"Install plugin","text":""},{"location":"shape-toggleswitch/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoggleswitchplugin', 'https://raw.githubusercontent.com/rexrainbow/    phaser3-rex-notes/master/dist/rextoggleswitchplugin.min.js', true);\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>var toggleSwitch = scene.add.rexToggleSwitchShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ToggleSwitchPlugin from 'phaser3-rex-plugins/plugins/toggleswitch-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexToggleSwitchPlugin',\nplugin: ToggleSwitchPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>var toggleSwitch = scene.add.rexToggleSwitchShape(x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ToggleSwitch from 'phaser3-rex-plugins/plugins/toggleswitch.js';\n</code></pre></li> <li>Add toggle-switch input     <pre><code>var toggleswitch = new ToggleSwitch(scene, x, y, width, height, color, config);\nscene.add.existing(toggleSwitch);\n</code></pre></li> <li>Add toggle-switch shape (without click input)     <pre><code>// import ToggleSwitchShape from 'phaser3-rex-plugins/plugins/toggleswitchshape.js';\nvar toggleSwitch = new ToggleSwitchShape(scene, x, y, width, height, color, config);\nscene.add.existing(toggleSwitch);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#create-toggle-switch-input","title":"Create toggle-switch input","text":"<pre><code>var toggleSwitch = scene.add.rexToggleSwitch(x, y, width, height, color, config);\n</code></pre> <p>or</p> <pre><code>var toggleSwitch = scene.add.rexToggleSwitch({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\ncolor: 0x005cb2,\ntrackFillAlpha: 1,\nfalseValueTrackColor: undefined,\nfalseValueTrackFillAlpha: 1,\n\nthumbColor: 0xffffff,\nthumbAlpha: 1,\n\ntrackWidth: 0.9,\ntrackHeight: 0.5,\ntrackCornerRadius: (trackHeight * 0.5),\n\nthumbHeight: (trackHeight * 0.9),\nthumbWidth: (thumbHeight),\nthumbCornerRadius: (thumbHeight * 0.5),\n\nthumbLeft: 0.3,\nthumbRight: (1 - thumbLeft),\nrtl: false,\n\nanimationDuration: 150,\n\nvalue: false,\n\nclick: undefined,\n// click: {\n//     mode: 1,            // 0|'press'|1|'release'\n//     clickInterval: 100  // ms\n//     threshold: undefined\n// },\nreadOnly: false,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of toggleswitch.</li> <li>Track fill style<ul> <li><code>color</code>, <code>trackFillAlpha</code> : Track color and alpha when value is <code>true</code>.</li> <li><code>falseValueTrackColor</code>, <code>falseValueTrackFillAlpha</code> : Track color and alpha when value is <code>false</code>.<ul> <li>Default value of <code>falseValueTrackColor</code> is the grayscale of <code>color</code>.    </li> </ul> </li> </ul> </li> <li>Thumb fill style<ul> <li><code>thumbColor</code>, <code>thumbAlpha</code> : Thumb color and alpha</li> </ul> </li> <li>Track size<ul> <li><code>trackWidth</code> : Width ration of track. Default value is <code>0.9</code>.</li> <li><code>thumbWidth</code> : Height ratio of track. Default value is <code>0.5</code>.</li> <li><code>trackCornerRadius</code> : Ratio of track corner. Default value is half of <code>trackHeight</code>.</li> </ul> </li> <li>Thumb size<ul> <li><code>thumbWidth</code> : Width ration of thumb. Default value is equal to <code>thumbHeight</code>.</li> <li><code>thumbHeight</code> : Height ratio of thumb. Default value <code>trackHeight * 0.5</code>.</li> <li><code>thumbCornerRadius</code> : Ratio of thumb corner. Default value is half of <code>thumbHeight</code>.</li> </ul> </li> <li>Thumb position<ul> <li><code>thumbLeft</code> : Thumb position if value is <code>false</code>. Default value is <code>0.3</code>.</li> <li><code>thumbRight</code> : Thumb position if value is <code>true</code>. Default value is <code>1 - thumbLeft</code>.</li> <li><code>rtl</code> : Moving direction of thumb when when value changes from <code>false</code> to <code>true</code>.<ul> <li><code>false</code> : Thumb moves from left to right. Default behavior.</li> <li><code>true</code> : Thumb moves from right to left.</li> </ul> </li> </ul> </li> <li><code>animationDuration</code> : Duration of drawing path of checker.</li> <li><code>value</code> : Initial value.</li> <li><code>click</code> : Configuration of click input<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> <li><code>click.threshold</code> : Cancel clicking detecting when dragging distance is larger then this threshold.<ul> <li><code>undefined</code> : Ignore this feature. Default behavior. </li> </ul> </li> </ul> </li> <li><code>readOnly</code> : Set <code>ture</code> to disable input.</li> </ul>"},{"location":"shape-toggleswitch/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyToggleSwitch extends RexPlugins.GameObjects.ToggleSwitch {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var toggleSwitch = new MyToggleSwitch(scene, x, y, width, height, color, config);\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#value","title":"Value","text":"<ul> <li>Get     <pre><code>var value = toggleSwitch.value;\n// var value = toggleSwitch.value;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setValue(value);\n// toggleSwitch.setValue(value, duration);\n</code></pre>     or     <pre><code>toggleSwitch.value = value;\n</code></pre></li> <li>Toggle     <pre><code>toggleSwitch.toggleValue();\n// toggleSwitch.toggleValue(duration);\n</code></pre>     or     <pre><code>toggleSwitch.value = !toggleSwitch.value;\n// toggleSwitch.value = !toggleSwitch.value;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#read-only","title":"Read only","text":"<ul> <li>Get     <pre><code>var readOnly = toggleSwitch.readOnly;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setReadOnly();\n// toggleSwitch.setReadOnly(true);\n</code></pre>     or     <pre><code>toggleSwitch.readOnly = true;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-fill-style","title":"Track fill style","text":"<ul> <li>Get     <pre><code>var color = toggleSwitch.trackFillColor;\nvar alpha = toggleSwitch.trackFillAlpha;\n</code></pre> <pre><code>var color = toggleSwitch.falseValueTrackColor;\nvar alpha = toggleSwitch.falseValueTrackFillAlpha;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setTrackFillStyle(color, alpha);\n// toggleSwitch.trackFillColor = color;\n// toggleSwitch.trackFillAlpha = alpha;\n</code></pre> <pre><code>toggleSwitch.setFalseValueTrackFillStyle(color, alpha);\n// toggleSwitch.falseValueTrackColor = color;\n// toggleSwitch.falseValueTrackFillAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-fill-style","title":"Thumb fill style","text":"<ul> <li>Get     <pre><code>var color = toggleSwitch.thumbColor;\nvar alpha = toggleSwitch.thumbAlpha;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setThumbStyle(color, alpha);\n// toggleSwitch.thumbColor = color;\n// toggleSwitch.thumbAlpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#toggle-animation","title":"Toggle animation","text":"<ul> <li>Duration<ul> <li>Get     <pre><code>var duration = toggleSwitch.toggleAnimProgress;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setToggleAnimationDuration(duration);\ntoggleSwitch.toggleAnimProgress = duration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"shape-toggleswitch/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = toggleSwitch.width;\nvar height = toggleSwitch.height;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setSize(width, height);\n</code></pre>     or     <pre><code>toggleSwitch.width = width;\ntoggleSwitch.height = height;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = toggleSwitch.displayWidth;\nvar height = toggleSwitch.displayHeight;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>toggleSwitch.displayWidth = width;\ntoggleSwitch.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-size-ratio","title":"Track size ratio","text":"<ul> <li>Get     <pre><code>var trackWidth = toggleSwitch.trackWidth;\nvar trackHeight = toggleSwitch.trackHeight;\n</code></pre><ul> <li><code>trackWidth</code>, <code>trackHeight</code> : Size ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setTrackSize(trackWidth, trackHeight);\n// toggleSwitch.trackWidth = trackWidth;\n// toggleSwitch.trackHeight = trackHeight;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#track-corner-ratio","title":"Track corner ratio","text":"<ul> <li>Get     <pre><code>var trackRadius = toggleSwitch.trackRadius;\n</code></pre><ul> <li><code>trackRadius</code> : Corner ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setTrackRadius(trackRadius);\n// toggleSwitch.trackRadius = trackRadius;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-size-ratio","title":"Thumb size ratio","text":"<ul> <li>Get     <pre><code>var thumbWidth = toggleSwitch.thumbWidth;\nvar thumbHeight = toggleSwitch.thumbHeight;\n</code></pre><ul> <li><code>trackWidth</code>, <code>trackHeight</code> : Size ratio of thumb</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setThumbSize(thumbWidth, thumbHeight);\n// toggleSwitch.thumbWidth = thumbWidth;\n// toggleSwitch.thumbHeight = thumbHeight;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-corner-ratio","title":"Thumb corner ratio","text":"<ul> <li>Get     <pre><code>var thumbRadius = toggleSwitch.thumbRadius;\n</code></pre><ul> <li><code>thumbRadius</code> : Corner ratio of track</li> </ul> </li> <li>Set     <pre><code>toggleSwitch.setThumbRadius(thumbRadius);\n// toggleSwitch.thumbRadius = thumbRadius;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#thumb-position-ratio","title":"Thumb position ratio","text":"<ul> <li>Get     <pre><code>var thumbLeft = toggleSwitch.thumbLeftX;\nvar thumbRight = toggleSwitch.thumbRightX;\n</code></pre> <pre><code>var rtl = toggleSwitch.rtl;\n</code></pre></li> <li>Set     <pre><code>toggleSwitch.setThumbPosition(thumbLeft, thumbRight);\n// toggleSwitch.thumbLeftX = thumbLeft;\n// toggleSwitch.thumbRightX = thumbRight;\n</code></pre> <pre><code>toggleSwitch.setRTL(rtl);\n// toggleSwitch.rtl = rtl;\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#events","title":"Events","text":"<ul> <li>On value change     <pre><code>toggleSwitch.on('valuechange', function(value) {\n// value: checked\n})\n</code></pre></li> </ul>"},{"location":"shape-toggleswitch/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-toggleswitch/#create-mask","title":"Create mask","text":"<pre><code>var mask = toggleSwitch.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-toggleswitch/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-triangle/","title":"Triangle","text":""},{"location":"shape-triangle/#introduction","title":"Introduction","text":"<p>Triangle shape, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"shape-triangle/#usage","title":"Usage","text":""},{"location":"shape-triangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor);\n// var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha);\n</code></pre>"},{"location":"shape-triangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTriangle extends Phaser.GameObjects.Triangle {\nconstructor(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor) {\nsuper(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var triangle = new MyTriangle(scene, x, y, x1, y1, x2, y2, x3, y3, fillColor);\n</code></pre></li> </ul>"},{"location":"shape-triangle/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = triangle.fillColor;\nvar alpha = triangle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = triangle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>triangle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>triangle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-triangle/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = triangle.alpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setAlpha(alpha);\n// triangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-triangle/#set-vertices","title":"Set vertices","text":"<pre><code>triangle.setTo(x1, y1, x2, y2, x3, y3);\n</code></pre>"},{"location":"shape-triangle/#triangle-width","title":"Triangle width","text":"<pre><code>triangle.setLineWidth(startWidth, endWidth);\n</code></pre> <ul> <li><code>endWidth</code> : The end width of the triangle. Only used in WebGL.</li> </ul>"},{"location":"shape-triangle/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = triangle.displayWidth;\nvar height = triangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>triangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>triangle.displayWidth = width;\ntriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-triangle/#create-mask","title":"Create mask","text":"<pre><code>var mask = triangle.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-triangle/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shape-triangle2/","title":"Triangle 2","text":""},{"location":"shape-triangle2/#introduction","title":"Introduction","text":"<p>Trangle shape inside a rectangle bounds.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"shape-triangle2/#live-demos","title":"Live demos","text":"<ul> <li>Ease direction</li> <li>Rotate</li> </ul>"},{"location":"shape-triangle2/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shape-triangle2/#install-plugin","title":"Install plugin","text":""},{"location":"shape-triangle2/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextriangleplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextriangleplugin.min.js', true);\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TrianglePlugin from 'phaser3-rex-plugins/plugins/triangle-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTrianglePlugin',\nplugin: TrianglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Triangle from 'phaser3-rex-plugins/plugins/triangle.js';\n</code></pre></li> <li>Add triangle object     <pre><code>var triangle = new Triangle(scene, x, y, width, height, fillColor, fillAlpha);\nscene.add.existing(triangle);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#install-plugin_1","title":"Install plugin","text":"<p>Install plugin in configuration of game</p> <pre><code>var config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTrianglePlugin',\nplugin: TrianglePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre>"},{"location":"shape-triangle2/#create-instance","title":"Create instance","text":"<pre><code>var triangle = scene.add.rexTriangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre> <p>or </p> <pre><code>var triangle = scene.add.rexTriangle({\nx: 0,\ny: 0,\nwidth: 2,\nheight: 2,\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\narrowOnly: false,\n\ndirection: 0,\neaseDuration: 0,\npadding: 0,\n// padding: {\n//     left: 0,\n//     right: 0,\n//     top: 0,\n//     bottom: 0,\n// },\n\nradius: undefined,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Size of this object.</li> <li><code>arrowOnly</code> :<ul> <li><code>false</code> : Fill and stroke triangle shape. Default behavior.</li> <li><code>true</code> : Only stroke arrow of triangle shape.</li> </ul> </li> <li><code>direction</code> : Direction of triangle's arrow.<ul> <li><code>0</code>, or <code>'right'</code> : Arrow to right. Default value.</li> <li><code>1</code>, or <code>'down'</code> : Arrow to down.</li> <li><code>2</code>, or <code>'left'</code> : Arrow to left.</li> <li><code>3</code>, or <code>'up'</code> : Arrow to up.</li> </ul> </li> <li><code>easeDuration</code> : Ease duration when direction changed.<ul> <li><code>0</code> : No ease transform. Default value.</li> </ul> </li> <li><code>padding</code> : Space around triagnle.<ul> <li>A number. Default value is <code>0</code>.</li> <li>A plain object     <pre><code>{\nleft:0, right:0, top: 0, bottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>radius</code> : Put 3 vertices of trangle in a circle.<ul> <li><code>undefined</code> : Disable this mode. Default behavior.</li> <li><code>0</code>~<code>1</code> : Radius in ratio of min(half-width, half-height)</li> </ul> </li> </ul>"},{"location":"shape-triangle2/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTriangle extends Triangle {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var triangle = new MyTriangle(scene, x, y, width, height, fillColor, fillAlpha);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#color","title":"Color","text":"<ul> <li>Fill color<ul> <li>Get     <pre><code>var color = triangle.fillColor;\nvar alpha = triangle.fillAlpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setFillStyle(color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setFillStyle();\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get     <pre><code>var color = triangle.strokeColor;\n</code></pre></li> <li>Set     <pre><code>triangle.setStrokeStyle(lineWidth, color, alpha);\n</code></pre></li> <li>Clear     <pre><code>triangle.setStrokeStyle();\n</code></pre></li> </ul> </li> </ul> <p>No tint methods</p> <p>Uses <code>triangle.setFillStyle(color, alpha)</code> to change color.</p>"},{"location":"shape-triangle2/#alpha","title":"Alpha","text":"<ul> <li>Get     <pre><code>var alpha = triangle.alpha;\n</code></pre></li> <li>Set     <pre><code>triangle.setAlpha(alpha);\n// triangle.alpha = alpha;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#size","title":"Size","text":"<ul> <li>Get     <pre><code>var width = triangle.width;\nvar height = triangle.height;\n</code></pre></li> <li>Set     <pre><code>triangle.setSize(width, height);\n</code></pre>     or     <pre><code>triangle.width = width;\ntriangle.height = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#display-size","title":"Display size","text":"<ul> <li>Get     <pre><code>var width = triangle.displayWidth;\nvar height = triangle.displayHeight;\n</code></pre></li> <li>Set     <pre><code>triangle.setDisplaySize(width, height);\n</code></pre>     or     <pre><code>triangle.displayWidth = width;\ntriangle.displayHeight = height;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#direction","title":"Direction","text":"<ul> <li>Get     <pre><code>var direction = triangle.direction;\n</code></pre><ul> <li><code>0</code> : Arrow to right. Default value.</li> <li><code>1</code> : Arrow to down.</li> <li><code>2</code> : Arrow to left.</li> <li><code>3</code> : Arrow to up.</li> </ul> </li> <li>Set     <pre><code>triangle.setDirection(direction);\n// triangle.direction = direction;\n</code></pre>     or     <pre><code>triangle.setDirection(direction, easeDuration);\n</code></pre><ul> <li><code>direction</code> :<ul> <li><code>0</code>, or <code>'right'</code> : Arrow to right.</li> <li><code>1</code>, or <code>'down'</code> : Arrow to down.</li> <li><code>2</code>, or <code>'left'</code> : Arrow to left.</li> <li><code>3</code>, or <code>'up'</code> : Arrow to up.</li> </ul> </li> <li><code>easeDuration</code> : Override current ease-duration time.</li> </ul> </li> <li>Toggle     <pre><code>triangle.toggleDirection();\n// triangle.direction += 2;\n</code></pre>     or     <pre><code>triangle.toggleDirection(easeDuration);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var padding = triangle.padding;\n</code></pre><ul> <li><code>padding</code> :     <pre><code>{ left, right, top, bottom }\n</code></pre></li> </ul> </li> <li>Set     <pre><code>triangle.setPadding(padding);\n</code></pre>     or     <pre><code>triangle.setPadding({\nleft, right, top, bottom\n});\n</code></pre>     or     <pre><code>triangle.setPadding({\nx, y\n});\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#ease-duration","title":"Ease duration","text":"<ul> <li>Get     <pre><code>var easeDuration = triangle.easeDuration;\n</code></pre></li> <li>Set     <pre><code>triangle.setEaseDuration(easeDuration);\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#arrow-only","title":"Arrow only","text":"<ul> <li>Get    <pre><code>var arrowOnly = triangle.arrowOnly;\n</code></pre></li> <li>Set     <pre><code>triangle.setArrowOnly(enable);\n// triangle.arrowOnly = enable;\n</code></pre></li> </ul>"},{"location":"shape-triangle2/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"shape-triangle2/#create-mask","title":"Create mask","text":"<pre><code>var mask = triangle.createGeometryMask();\n</code></pre> <p>See mask</p>"},{"location":"shape-triangle2/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shatter-image/","title":"Image","text":""},{"location":"shatter-image/#introduction","title":"Introduction","text":"<p>Shatter image to triangle faces.</p> <p>Reference: Delaunay Triangulation</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"shatter-image/#live-demos","title":"Live demos","text":"<ul> <li>Shatter image</li> </ul>"},{"location":"shatter-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shatter-image/#install-plugin","title":"Install plugin","text":""},{"location":"shatter-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshatterimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshatterimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShatterImagePlugin from 'phaser3-rex-plugins/plugins/shatterimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShatterImagePlugin',\nplugin: ShatterImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ShatterImage } from 'phaser3-rex-plugins/plugins/shatterimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new ShatterImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shatter-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexShatterImage(x, y, texture, frame, {\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12\n// variation: 0.25,    \n});\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexShatterImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12,\n// variation: 0.25,\n\n});\n</code></pre> <ul> <li><code>ringRadiusList</code> :<ul> <li>A list of number. Default value is <code>[1 / 27, 3 / 27, 9 / 27]</code></li> <li>A callback to return a list of number     <pre><code>function(width, height) {\nreturn [1 / 27, 3 / 27, 9 / 27];\n}\n</code></pre></li> </ul> </li> </ul> <p>Add perspectiveimage from JSON</p> <pre><code>var perspectiveimage = scene.make.rexShatterImage({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// ringRadiusList: [1 / 27, 3 / 27, 9 / 27],\n// ringRadiusList: function(width, height) {\n//    return [1 / 27, 3 / 27, 9 / 27];\n// },\n\n// samplesPerRing: 12,\n// variation: 0.25,\n\n\nadd: true\n});\n</code></pre>"},{"location":"shatter-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShatterImage( extends ShatterImage( {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyShatterImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"shatter-image/#shatter-image","title":"Shatter image","text":"<pre><code>image.shatter(centerX, centerY);\n// image.shatter();\n</code></pre> <p>or</p> <pre><code>image.shatter(centerX, centerY, {\n// ringRadiusList:\n// samplesPerRing: \n// variation\n});\n</code></pre> <p>or</p> <pre><code>image.shatter({\n// centerX: \n// centerY: \n// ringRadiusList:\n// samplesPerRing: \n// variation\n});\n</code></pre> <ul> <li><code>centerX</code>, <code>centerY</code> : Center position of shatter.<ul> <li><code>undefined</code> : Default value is center of image.</li> </ul> </li> </ul> <p>Shatter image into triangle faces.</p>"},{"location":"shatter-image/#position-of-shatter-center","title":"Position of Shatter center","text":"<pre><code>var shatterCenter = image.shatterCenter; // {x, y}\n</code></pre>"},{"location":"shatter-image/#faces","title":"Faces","text":"<pre><code>var faces = image.faces;\n</code></pre> <p>Faces will be sorted nearby shatter-center to far away.</p>"},{"location":"shatter-image/#properties","title":"Properties","text":"<ul> <li>Alpha<ul> <li>Get     <pre><code>var alpha = face.alpha;\n</code></pre></li> <li>Set     <pre><code>face.alpha = alpha;\n</code></pre>     or     <pre><code>face.setAlpha(value);\n</code></pre></li> </ul> </li> <li>Tint color<ul> <li>Get     <pre><code>var color = face.tint;\n</code></pre></li> <li>Set     <pre><code>face.tint = color;\n</code></pre>     or     <pre><code>face.setTint(color);\n</code></pre></li> </ul> </li> <li>Angle<ul> <li>Get     <pre><code>var radians = face.rotation;\n// var degree = face.angle;\n</code></pre></li> <li>Set     <pre><code>face.rotation = radians;\n// face.angle = degree;\n</code></pre>     or     <pre><code>face.setRotation(radians);\n// face.setAngle(degree);\n</code></pre></li> </ul> </li> <li>Center position<ul> <li>Get     <pre><code>var x = face.x;\nvar y = face.y;\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> <li>Set     <pre><code>face.x = x;\nface.y = y;\n</code></pre>     or     <pre><code>face.translate(x, y);\n</code></pre><ul> <li><code>x</code> : 0(left) ~ 1(right)</li> <li><code>y</code> : 1(top) ~ 0(bottom)</li> </ul> </li> </ul> </li> </ul>"},{"location":"shatter-image/#update-properties","title":"Update properties","text":"<ul> <li>Start updating     <pre><code>image.startUpdate();\n</code></pre>     or     <pre><code>image.ignoreDirtyCache = true;\n</code></pre></li> <li>Stop updating     <pre><code>image.stopUpdate();\n</code></pre>     or     <pre><code>image.ignoreDirtyCache = false;\n</code></pre></li> </ul>"},{"location":"shatter-image/#tween-properties","title":"Tween properties","text":"<pre><code>image.startUpdate();\nscene.tweens.add({\ntargets: image.faces,\nalpha: 0,\nangle: function () { return -90 + Math.random() * 180; },\ny: '-=0.5',\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\ndelay: scene.tweens.stagger(20),\nrepeat: 0,            // -1: infinity\nyoyo: false,\nonComplete: function () {\nimage.stopUpdate()\n}\n});\n</code></pre>"},{"location":"shatter-image/#reset-image","title":"Reset image","text":"<p>Display original image with 2 faces.</p> <pre><code>image.resetImage();\n</code></pre>"},{"location":"shatter-image/#tint-color","title":"Tint color","text":"<ul> <li>Get    <pre><code>var color = image.tint;\n</code></pre></li> <li>Set     <pre><code>image.tint = color;\n</code></pre>     or     <pre><code>image.setTint(color);\n</code></pre></li> </ul>"},{"location":"shatter-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"shatter-image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"shatter-image/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"shatter-rendertexture/","title":"Render texture","text":""},{"location":"shatter-rendertexture/#introduction","title":"Introduction","text":"<p>Shatter render texture to triangle faces.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"shatter-rendertexture/#live-demos","title":"Live demos","text":"<ul> <li>RenderTexture</li> </ul>"},{"location":"shatter-rendertexture/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"shatter-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"shatter-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshatterimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshatterimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexShatterRenderTexture(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ShatterImagePlugin from 'phaser3-rex-plugins/plugins/shatterimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShatterImagePlugin',\nplugin: ShatterImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexShatterRenderTexturege(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ShatterRenderTexture } from 'phaser3-rex-plugins/plugins/shatterimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new ShatterRenderTexture(scene, x, y, width, height, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexShatterRenderTexturege(x, y, width, height, {\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexShatterRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n// gridWidth: 32,\n// girdHeight: 32\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexShatterRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\n// gridWidth: 32,\n// girdHeight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"shatter-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyShatterRenderTexturege extends ShatterRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyShatterRenderTexturege(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"shatter-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"shatter-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"shatter-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"shatter-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"shatter-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"shatter-rendertexture/#other-properties","title":"Other properties","text":"<p>See Shatter image game object, Mesh game object, game object</p>"},{"location":"shatter-rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"shatter-rendertexture/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"ship/","title":"Ship","text":""},{"location":"ship/#introduction","title":"Introduction","text":"<p>Move game object as a space ship by cursor keys.</p> <ul> <li>Author: Rex</li> <li>Arcade behavior of game object</li> </ul>"},{"location":"ship/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ship/#install-plugin","title":"Install plugin","text":""},{"location":"ship/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexshipplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexshipplugin.min.js', true);\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = scene.plugins.get('rexshipplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine and install plugin in configuration of game <pre><code>import ShipPlugin from 'phaser3-rex-plugins/plugins/ship-plugin.js';\nvar config = {\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexShip',\nplugin: ShipPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = scene.plugins.get('rexShip').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable arcade physics engine in configuration of game <pre><code>var config = {\n// ...\nphysics: {\ndefault: 'arcade',\narcade: {\n// debug: true\n}\n}\n}\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Import class     <pre><code>import Ship from 'phaser3-rex-plugins/plugins/ship.js';\n</code></pre></li> <li>Add ship behavior     <pre><code>var ship = new Ship(gameObject, config);\n</code></pre></li> </ul>"},{"location":"ship/#create-instance","title":"Create instance","text":"<pre><code>var ship = scene.plugins.get('rexShip').add(gameObject, {\n// maxSpeed: 200,\n// acceleration: 200,\n// drag: 0.99,\n// turnSpeed: 300,\n// wrap: true,\n// padding: 0,\n// enable: true,\n// cursorKeys: scene.input.keyboard.createCursorKeys()\n});\n</code></pre> <ul> <li>Movement<ul> <li><code>maxSpeed</code></li> <li><code>acceleration</code></li> <li><code>drag</code></li> </ul> </li> <li>Rotation<ul> <li><code>turnSpeed</code> : Angular velocity</li> </ul> </li> <li>Wrap<ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode. Default value is <code>true</code>.</li> <li><code>padding</code></li> </ul> </li> <li><code>enable</code> : set <code>false</code> to disable moving.</li> <li><code>cursorKeys</code> : CursorKey object, using keyboard's cursorKeys by default.</li> </ul>"},{"location":"ship/#set-max-speed","title":"Set max speed","text":"<pre><code>ship.setMaxSpeed(speed);\n</code></pre>"},{"location":"ship/#set-acceleration","title":"Set acceleration","text":"<pre><code>ship.setAcceleration(acc);\n</code></pre>"},{"location":"ship/#set-drag","title":"Set drag","text":"<pre><code>ship.setDrag(drag);\n</code></pre>"},{"location":"ship/#set-turn-speed","title":"Set turn speed","text":"<pre><code>ship.setTurnSpeed(angularVelocity);\n</code></pre>"},{"location":"ship/#set-wrap-mode","title":"Set wrap mode","text":"<pre><code>ship.setWrapMode(wrap, padding);\n</code></pre> <ul> <li><code>wrap</code> : Set <code>true</code> to enable wrap mode.</li> </ul>"},{"location":"skew-image/","title":"Image","text":""},{"location":"skew-image/#introduction","title":"Introduction","text":"<p>Skewable Image.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"skew-image/#live-demos","title":"Live demos","text":"<ul> <li>Skew image</li> </ul>"},{"location":"skew-image/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"skew-image/#install-plugin","title":"Install plugin","text":""},{"location":"skew-image/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SkewImage } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new SkewImage(scene, x, y, texture, frame);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"skew-image/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexSkewImage(x, y, texture, frame);\n</code></pre> <p>or </p> <pre><code>var image = scene.add.rexSkewImage({\n// x: 0,\n// y: 0,\nkey,\n// frame: null,\n});\n</code></pre> <p>Add quadimage from JSON</p> <pre><code>var quadimage = scene.make.rexSkewImage({\nx: 0,\ny: 0,\n\nkey: null,\nframe: null,\n\nadd: true\n});\n</code></pre>"},{"location":"skew-image/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySkewImage extends SkewImage {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MySkewImage(scene, x, y, texture, frame);\n</code></pre></li> </ul>"},{"location":"skew-image/#skew","title":"Skew","text":"<ul> <li>Set     <pre><code>image.setSkewX(skewXRad);\nimage.setSkewXDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkewY(skewXRad);\nimage.setSkewYDeg(skewXDeg);\n</code></pre> <pre><code>image.setSkew(skewXRad, skewYRad);\nimage.setSkewDeg(skewXDeg, skewYDeg);\n</code></pre> <pre><code>image.skewX = skewXRad;\nimage.skewXDeg = skewXDeg;\n</code></pre> <pre><code>image.skewY = skewYRad;\nimage.skewYDeg = skewYDeg;\n</code></pre></li> <li>Get     <pre><code>var skewXRad = image.skewX;\nvar skewXDeg = image.skewXDeg;\n</code></pre> <pre><code>var skewYRad = image.skewY;\nvar skewYDeg = image.skewYDeg;\n</code></pre></li> </ul>"},{"location":"skew-image/#other-properties","title":"Other properties","text":"<p>See Mesh game object, game object</p>"},{"location":"skew-image/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"skew-image/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"skew-rendertexture/","title":"Render texture","text":""},{"location":"skew-rendertexture/#introduction","title":"Introduction","text":"<p>Skewable render texture.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"skew-rendertexture/#live-demos","title":"Live demos","text":""},{"location":"skew-rendertexture/#usage","title":"Usage","text":""},{"location":"skew-rendertexture/#install-plugin","title":"Install plugin","text":""},{"location":"skew-rendertexture/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexSkewRenderTexture(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexQuadImagePlugin',\nplugin: QuadImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add render texture object     <pre><code>var image = scene.add.rexSkewRenderTexturege(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SkewRenderTexture } from 'phaser3-rex-plugins/plugins/quadimage.js';\n</code></pre></li> <li>Add render texture object     <pre><code>var image = new SkewRenderTexture(scene, x, y, width, height);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#create-instance","title":"Create instance","text":"<pre><code>var image = scene.add.rexSkewRenderTexturege(x, y, width, height);\n</code></pre> <p>or</p> <pre><code>var image = scene.add.rexSkewRenderTexturege({\n// x: 0,\n// y: 0,\n// width: 32,\n// height: 32,\n});\n</code></pre> <p>Add prespective render texture from JSON</p> <pre><code>var image = scene.make.rexSkewRenderTexturege({\nx: 0,\ny: 0,    width: 32,\nheight: 32,\n\nadd: true\n});\n</code></pre>"},{"location":"skew-rendertexture/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySkewRenderTexturege extends SkewRenderTexturege {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MySkewRenderTexturege(scene, x, y, width, height);\n</code></pre></li> </ul>"},{"location":"skew-rendertexture/#internal-render-texture","title":"Internal render texture","text":"<pre><code>var rt = image.rt;\n</code></pre> <ul> <li><code>rt</code> : Render texture</li> </ul>"},{"location":"skew-rendertexture/#paste-texture","title":"Paste texture","text":"<ul> <li>Paste game object     <pre><code>image.rt.draw(gameObject, x, y);\n// image.rt.draw(gameObject, x, y, alpha, tint);\n</code></pre></li> <li><code>gameObject</code> : a game object, or an array of game objects</li> <li>Paste game objects in a group <pre><code>image.rt.draw(group, x, y);\n// image.rt.draw(group, x, y, alpha, tint);\n</code></pre></li> <li>Paste game objects in a scene     <pre><code>image.rt.draw(scene.children, x, y);\n// image.rt.draw(scene.children, x, y, alpha, tint);\n</code></pre></li> <li>Paste texture     <pre><code>image.rt.draw(key, x, y);\n// image.rt.draw(key, x, y, alpha, tint);\n</code></pre>     or     <pre><code>image.rt.drawFrame(key, frame, x, y);\n// image.rt.drawFrame(key, frame, x, y, alpha, tint);\n</code></pre><ul> <li><code>key</code> : The key of the texture to be used, as stored in the Texture Manager.</li> </ul> </li> </ul>"},{"location":"skew-rendertexture/#erase","title":"Erase","text":"<pre><code>image.rt.erase(gameObject, x, y);\n</code></pre> <ul> <li><code>gameObject</code> : a game object, or an array of game objects</li> </ul>"},{"location":"skew-rendertexture/#clear","title":"Clear","text":"<pre><code>image.rt.clear();\n</code></pre>"},{"location":"skew-rendertexture/#fill","title":"Fill","text":"<pre><code>image.rt.fill(rgb, alpha);\n// image.rt.fill(rgb, alpha, x, y, width, height);\n</code></pre>"},{"location":"skew-rendertexture/#other-properties","title":"Other properties","text":"<p>See Skew image game object, Mesh game object, game object</p>"},{"location":"skew-rendertexture/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"skew-rendertexture/#shader-effects","title":"Shader effects","text":"<p>Support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"slider/","title":"Slider","text":""},{"location":"slider/#introduction","title":"Introduction","text":"<p>Drag thumb on a slider bar.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"slider/#live-demos","title":"Live demos","text":"<ul> <li>Slider</li> <li>Color picker</li> </ul>"},{"location":"slider/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"slider/#install-plugin","title":"Install plugin","text":""},{"location":"slider/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexsliderplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsliderplugin.min.js', true);\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = scene.plugins.get('rexsliderplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import SliderPlugin from 'phaser3-rex-plugins/plugins/slider-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexSlider',\nplugin: SliderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = scene.plugins.get('rexSlider').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Slider from 'phaser3-rex-plugins/plugins/slider.js';\n</code></pre></li> <li>Add slider behavior     <pre><code>var slider = new Slider(gameObject, config);\n</code></pre></li> </ul>"},{"location":"slider/#create-instance","title":"Create instance","text":"<pre><code>var slider = scene.plugins.get('rexSlider').add(gameObject, {\n// endPoints: [\n//     {x:0, y:0},\n//     {x:0, y:0}\n// ],\n// value: 0,\n// enable: true,\n\n// valuechangeCallback: null,\n// valuechangeCallbackScope: null\n});\n</code></pre> <ul> <li><code>endPoints</code> : An array of 2 end-points (<code>[{x,y}, {x,y}]</code>)</li> <li><code>value</code> : Initial value between 0 to 1</li> <li><code>enable</code> : Set true to drag thumb</li> <li><code>valuechangeCallback</code> , <code>valuechangeCallbackScope</code> : Bind this callback to <code>valuechange</code> event</li> </ul>"},{"location":"slider/#set-end-points","title":"Set end-points","text":"<pre><code>slider.setEndPoints(p0x, p0y, p1x, p1y);\n// slider.setEndPoints(p0, p1); // p0, p1: {x, y}\n// slider.setEndPoints(points); // points: [p0, p1]\n</code></pre>"},{"location":"slider/#get-value","title":"Get value","text":"<pre><code>var value = slider.value;          // value: between 0 to 1\n// var value = slider.getValue();  // value: between 0 to 1\n// var value = slider.getValue(min, max);  // value: between min to max\n</code></pre>"},{"location":"slider/#set-value","title":"Set value","text":"<pre><code>slider.value = newValue;       // newValue: between 0 to 1\n// slider.setValue(newValue);  // newValue: between 0 to 1\n// slider.setValue(newValue, min, max);  // newValue: between min to max\n</code></pre> <pre><code>slider.addValue(inc);  // inc: between 0 to 1\n// slider.addValue(inc, min, max);  // inc: between min to max\n</code></pre> <p>Fires <code>valuechange</code> event if new value is not equal to current value.</p>"},{"location":"slider/#events","title":"Events","text":"<ul> <li>Value changed     <pre><code>slider.on('valuechange', function(newValue, prevValue){ /* ... */ });\n</code></pre><ul> <li>newValue: between 0 to 1</li> <li>prevValue: between 0 to 1</li> </ul> </li> </ul>"},{"location":"slider/#drag","title":"Drag","text":""},{"location":"slider/#drag-enable","title":"Drag enable","text":"<ul> <li>Get     <pre><code>var enable = slider.enable;\n</code></pre></li> <li>Set     <pre><code>slider.setEnable(enable);  // enable: true, or false\nslider.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>slider.toggleEnable();\n</code></pre></li> </ul>"},{"location":"slider/#is-dragging","title":"Is dragging","text":"<pre><code>var isDragging = slider.isDragging;\n</code></pre>"},{"location":"snap/","title":"Snap","text":""},{"location":"snap/#introduction","title":"Introduction","text":"<p>Snap a value to nearest grid slice, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"snap/#usage","title":"Usage","text":""},{"location":"snap/#round","title":"Round","text":"<pre><code>var out = Phaser.Math.Snap.To(value, gap);\n// var out = Phaser.Math.Snap.To(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>10</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>15</code></li> </ul>"},{"location":"snap/#ceil","title":"Ceil","text":"<pre><code>var out = Phaser.Math.Snap.Ceil(value, gap);\n// var out = Phaser.Math.Snap.Ceil(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>15</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>15</code></li> </ul>"},{"location":"snap/#floor","title":"Floor","text":"<pre><code>var out = Phaser.Math.Snap.Floor(value, gap);\n// var out = Phaser.Math.Snap.Floor(value, gap, start);\n</code></pre> <p>Example: set <code>gap</code> to <code>5</code></p> <ul> <li>Set <code>value</code> to <code>12</code>, return <code>10</code></li> <li>Set <code>value</code> to <code>14</code>, return <code>10</code></li> </ul>"},{"location":"snapshot/","title":"Snapshot","text":""},{"location":"snapshot/#introduction","title":"Introduction","text":"<p>Get snapshot image, built-in methods of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"snapshot/#usage","title":"Usage","text":""},{"location":"snapshot/#get-snapshot-image","title":"Get snapshot image","text":"<ul> <li>Whole canvas     <pre><code>game.renderer.snapshot(callback);\n// game.renderer.snapshot(callback, type, encoderOptions);\n</code></pre></li> <li>A rectangle area     <pre><code>game.renderer.snapshotArea(x, y, width, height, callback);\n// game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions);\n</code></pre><ul> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> : Top-left position and size based on game viewport. (not the world)</li> </ul> </li> <li>A pixel     <pre><code>game.renderer.snapshotPixel(x, y, callback);\n</code></pre></li> </ul> <p>Parameters:</p> <ul> <li><code>type</code> : <code>'image/png'</code></li> <li><code>encoderOptions</code> : <code>0.92</code></li> <li><code>callback</code> :     <pre><code>function(image){ /* ... */};\n</code></pre><ul> <li><code>image</code> : Image element</li> </ul> </li> </ul>"},{"location":"sprite/","title":"Sprite","text":""},{"location":"sprite/#introduction","title":"Introduction","text":"<p>Display of both static and animated images, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"sprite/#usage","title":"Usage","text":""},{"location":"sprite/#load-texture","title":"Load texture","text":"<p>Texture for static image</p> <pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"sprite/#load-atlas","title":"Load atlas","text":"<p>Atlas for animation images</p> <pre><code>scene.load.atlas(key, textureURL, atlasURL);\n</code></pre> <p>Reference: load atlas</p>"},{"location":"sprite/#add-sprite-object","title":"Add sprite object","text":"<pre><code>var sprite = scene.add.sprite(x, y, key);\n// var sprite = scene.add.sprite(x, y, key, frame);\n</code></pre> <p>Add sprite from JSON</p> <pre><code>var sprite = scene.make.sprite({\nx: 0,\ny: 0,\nkey: '',\n// frame: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n\n// anims: {\n// key: ,\n// repeat: ,\n// ...\n// },\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre> <ul> <li><code>key</code> :<ul> <li>A string</li> <li>An array of string to pick one element at random</li> </ul> </li> <li><code>x</code>, <code>y</code>, <code>scale.x</code>, <code>scale.y</code> :<ul> <li>A number</li> <li>A callback to get return value     <pre><code>function() { return 0; }\n</code></pre></li> <li>Random integer between min and max     <pre><code>{ randInt: [min, max] }\n</code></pre></li> <li>Random float between min and max     <pre><code>{ randFloat: [min, max] }\n</code></pre></li> </ul> </li> </ul>"},{"location":"sprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySprite extends Phaser.GameObjects.Sprite {\nconstructor(scene, x, y, texture, frame) {\nsuper(scene, x, y, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var sprite = new MySprite(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"sprite/#texture","title":"Texture","text":"<p>See game object - texture</p>"},{"location":"sprite/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"sprite/#create-mask","title":"Create mask","text":"<pre><code>var mask = sprite.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"sprite/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"sprite/#animation","title":"Animation","text":""},{"location":"sprite/#create-animation","title":"Create animation","text":"<ul> <li>Global animation for all sprites     <pre><code>scene.anims.create(config);\n</code></pre></li> <li>Private animation for this sprite     <pre><code>sprite.anims.create(config);\n</code></pre></li> </ul> <p><code>config</code> : See Add animation section.</p>"},{"location":"sprite/#create-aseprite-animation","title":"Create Aseprite animation","text":"<ul> <li>Global Aseprite animation for all sprites     <pre><code>scene.anims.createFromAseprite(key, tags);\n</code></pre></li> <li>Private Aseprite animation for this sprite     <pre><code>sprite.anims.createFromAseprite(key, tags);\n</code></pre></li> </ul>"},{"location":"sprite/#remove-animation","title":"Remove animation","text":"<ul> <li>Remove from global animation manager     <pre><code>scene.anims.remove(key);\n</code></pre>     or     <pre><code>sprite.anims.globalRemove(key);\n</code></pre></li> <li>Remove from private animation state     <pre><code>sprite.anims.remove(key);\n</code></pre></li> </ul>"},{"location":"sprite/#get-animation","title":"Get animation","text":"<ul> <li>Get global animation object <pre><code>var anim = scene.anims.get(key);\n</code></pre></li> <li>Get private animation object <pre><code>var anim = sprite.anims.get(key);\n</code></pre></li> </ul>"},{"location":"sprite/#has-animation","title":"Has animation","text":"<ul> <li>Has global animation object     <pre><code>var hasAnim = scene.anims.exists(key);\n</code></pre></li> <li>Get private animation object     <pre><code>var hasAnim = sprite.anims.exists(key);\n</code></pre></li> </ul>"},{"location":"sprite/#play-animation","title":"Play animation","text":"<ul> <li>Play     <pre><code>sprite.play(key);\n// sprite.play(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config<ul> <li>String key of animation</li> <li>Animation config, to override default config     <pre><code>{\nkey,\nframeRate,\nduration,\ndelay,\nrepeat,\nrepeatDelay,\nyoyo,\nshowOnStart,\nhideOnComplete,\nstartFrame,\ntimeScale\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Play in reverse     <pre><code>sprite.playReverse(key);\n// sprite.playReverse(key, ignoreIfPlaying);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after delay     <pre><code>sprite.playAfterDelay(key, delay);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Play after repeat     <pre><code>sprite.playAfterRepeat(key, repeatCount);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"sprite/#chain","title":"Chain","text":"<ul> <li>Chain next animation     <pre><code>sprite.chain(key);\n</code></pre><ul> <li><code>key</code> : Animation key string, or animation config</li> </ul> </li> <li>Chain next and next animation     <pre><code>sprite.chain(key0).chain(key1);\n</code></pre><ul> <li><code>key0</code>, <code>key1</code> : Animation key string, or animation config</li> </ul> </li> </ul>"},{"location":"sprite/#stop","title":"Stop","text":"<ul> <li>Immediately stop     <pre><code>sprite.stop();\n</code></pre></li> <li>Stop after delay     <pre><code>sprite.stopAfterDelay(delay);\n</code></pre></li> <li>Stop at frame     <pre><code>sprite.stopOnFrame(frame);\n</code></pre><ul> <li><code>frame</code> : Frame object in current animation.     <pre><code>var currentAnim = sprite.anims.currentAnim;\nvar frame = currentAnim.getFrameAt(index);\n</code></pre></li> </ul> </li> <li>Stop after repeat     <pre><code>sprite.stopAfterRepeat(repeatCount);\n</code></pre></li> </ul>"},{"location":"sprite/#restart","title":"Restart","text":"<pre><code>sprite.anims.restart();\n// sprite.anims.restart(includeDelay, resetRepeats);\n</code></pre>"},{"location":"sprite/#properties","title":"Properties","text":"<ul> <li>Has started     <pre><code>var hasStarted = sprite.anims.hasStarted;\n</code></pre></li> <li>Is playing     <pre><code>var isPlaying = sprite.anims.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = sprite.anims.isPaused;\n</code></pre></li> <li>Total frames count     <pre><code>var frameCount = sprite.anims.getTotalFrames();\n</code></pre></li> <li>Delay     <pre><code>var delay = sprite.anims.delay;\n</code></pre></li> <li>Repeat<ul> <li>Total repeat count     <pre><code>var repeatCount = sprite.anims.repeat;\n</code></pre></li> <li>Repeat counter     <pre><code>var repeatCount = sprite.anims.repeatCounter;\n</code></pre></li> <li>Repeat delay     <pre><code>var repeatDelay = sprite.anims.repeatDelay;\n</code></pre></li> <li>Yoyo     <pre><code>var repeatDelay = sprite.anims.yoyo;\n</code></pre></li> </ul> </li> <li>Current animation key     <pre><code>var key = sprite.anims.getName();\n</code></pre><ul> <li><code>key</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current frame name     <pre><code>var frameName = sprite.anims.getFrameName();\n</code></pre><ul> <li><code>frameName</code> : Return <code>''</code> if not playing any animation.</li> </ul> </li> <li>Current animation     <pre><code>var currentAnim = sprite.anims.currentAnim;\n</code></pre></li> <li>Current frame     <pre><code>var currentFrame = sprite.anims.currentFrame;\n</code></pre></li> </ul>"},{"location":"sprite/#events","title":"Events","text":"<ul> <li>On start     <pre><code>sprite.on('animationstart', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationstart-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On restart     <pre><code>sprite.on('animationrestart', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationrestart-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On complete     <pre><code>sprite.on('animationcomplete', function(currentAnim, currentFramee, sprite){});\n</code></pre> <pre><code>sprite.on('animationcomplete-' + key, function(currentAnim, currentFramee, sprite){});\n</code></pre></li> <li>On stop     <pre><code>sprite.on('animationstop', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationstop-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On update     <pre><code>sprite.on('animationupdate', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationupdate-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> <li>On repeat     <pre><code>sprite.on('animationrepeat', function(currentAnim, currentFrame, sprite){});\n</code></pre> <pre><code>sprite.on('animationrepeat-' + key, function(currentAnim, currentFrame, sprite){});\n</code></pre></li> </ul>"},{"location":"statemanager/","title":"State manager","text":""},{"location":"statemanager/#introduction","title":"Introduction","text":"<p>Another version of Finite state machine.</p> <ul> <li>Author: Rex</li> <li>Object</li> </ul>"},{"location":"statemanager/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"statemanager/#install-plugin","title":"Install plugin","text":""},{"location":"statemanager/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexstatemanagerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexstatemanagerplugin.min.js', true);\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = scene.plugins.get('rexstatemanagerplugin').add(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import StateManagerPlugin from 'phaser3-rex-plugins/plugins/statemanager-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexStateManager',\nplugin: StateManagerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = scene.plugins.get('rexStateManager').add(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import StateManager from 'phaser3-rex-plugins/plugins/statemanager.js';\n</code></pre></li> <li>Add StateManager object     <pre><code>var states = new StateManager(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#create-instance","title":"Create instance","text":"<pre><code>var states = scene.plugins.get('rexStateManager').add({\neventEmitter: undefined\n});\n</code></pre> <ul> <li><code>eventEmitter</code><ul> <li><code>undefined</code> : Create a private event emitter, default value.</li> <li><code>false</code> : Don't add any event emitter, i.e. no event will be fired.</li> <li>Event emitter object : Fire event through this event emitter.</li> </ul> </li> </ul>"},{"location":"statemanager/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStates extends StateManager {\nconstructor(config) {\nsuper(config);\n\nthis.addStates({\nA: {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n});\n}\n}\n</code></pre></li> <li>Create instance     <pre><code>var states = new MyStates(config);\n</code></pre></li> </ul>"},{"location":"statemanager/#add-new-state","title":"Add new state","text":"<p><pre><code>states.addState(name, {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n})\n</code></pre> <pre><code>states.addState({\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n})\n</code></pre></p> <p>or</p> <p><pre><code>states.addStates({\n'A' : {\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n})\n</code></pre> <pre><code>states.addStates([\n{\nname: 'A',\nnext: 'B',  // function() { return 'B'; }\nenter: function() {},\nexit: function() {}\n},\n// ...\n]);\n</code></pre></p>"},{"location":"statemanager/#read-state","title":"Read state","text":"<ul> <li>Current state     <pre><code>var curState = state.state;\n</code></pre></li> <li>Previous state     <pre><code>var preState = state.prevState;\n</code></pre></li> </ul>"},{"location":"statemanager/#start-at-state","title":"Start at state","text":"<p>Set new state without triggering any state-changing callbacks or events.</p> <pre><code>state.start(newState);\n</code></pre>"},{"location":"statemanager/#next-state","title":"Next state","text":"<pre><code>graph TB\n\nnext[\"states.next()\"] --&gt; next_A[\"stateA.next()&lt;br&gt;return 'B'\"]\n\nnext_A --&gt; eventStateChange[\"states.emit('statechange', states)&lt;br&gt;states.prevState -&gt; states.state\"]\n\nsubgraph State changing\n\neventStateChange --&gt; exit_A[\"stateA.exit()\"]\nexit_A --&gt; eventExitA[\"states.emit('exit_A', states)\"]\n\neventExitA --&gt; enter_B[\"stateB.enter()\"]\nenter_B --&gt; eventEnterB[\"states.emit('enter_B', states)\"]\n\nsubgraph Exit\nexit_A\neventExitA\nend\n\nsubgraph Enter\nenter_B\neventEnterB\nend\n\nend\n\ngoto[\"states.goto('B')\"] --&gt; eventStateChange\n\nsubgraph Request\n\nsubgraph Next\nnext\nnext_A\nend\n\nsubgraph Goto\ngoto\nend\n\nend</code></pre>"},{"location":"statemanager/#request","title":"Request","text":"<ul> <li>Get next state by callback     <pre><code>states.next();    // nextState = stateA.next()    \n</code></pre></li> <li>Goto state     <pre><code>states.goto(nextState);\n// states.state = nextState;\n</code></pre></li> </ul>"},{"location":"statemanager/#state-changing","title":"State-changing","text":"<p>These callbacks or events will be triggered if state is changing.</p> <p>For example, state is changing from 'A' to 'B'.</p> <ol> <li>event <code>statechange</code> <pre><code>states.on('statechange', function(states) {\nconsole.log( states.prevState + '-&gt;' + states.state );\n});\n</code></pre></li> <li>callback <code>stateA.exit</code></li> <li>event <code>exit_A</code> <pre><code>states.on('exit_A', function(states) {\n/*...*/\n});\n</code></pre></li> <li>callback <code>stateB.enter</code></li> <li>event <code>enter_B</code> <pre><code>states.on('enter_B', function(states) {\n/*...*/\n});\n</code></pre></li> </ol>"},{"location":"statemanager/#enable","title":"Enable","text":"<pre><code>states.setEnable();\n// states.setEnable(false); // disable\n</code></pre> <p>or</p> <pre><code>states.toggleEnable();\n</code></pre> <p><code>states.next()</code> and <code>states.goto()</code> will be ignored if disabled.</p>"},{"location":"statemanager/#update","title":"Update","text":"<ul> <li>Start     <pre><code>states.startUpdate();\nstates.startPreUpdate();\nstates.startPostUpdate();\n// Assume that `scene` is assigned in config of constructor\n</code></pre>     or     <pre><code>states.startUpdate(scene);\nstates.startPreUpdate(scene);\nstates.startPostUpdate(scene);\n</code></pre><ul> <li><code>scene</code> : Scene object</li> </ul> </li> <li>Stop     <pre><code>states.stopUpdate();\nstates.stopPreUpdate();\nstates.stopPostUpdate();\n</code></pre></li> <li>Get scene     <pre><code>var scene = states.getScene();\n// var scene = states._scene;\n</code></pre></li> </ul>"},{"location":"statemanager/#remove-state","title":"Remove state","text":"<ul> <li>Remve a state     <pre><code>states.removeState(stateName);\n</code></pre></li> <li>Remve all states     <pre><code>states.removeAllStates();\n</code></pre></li> </ul>"},{"location":"step/","title":"Step","text":""},{"location":"step/#introduction","title":"Introduction","text":"<p>Interpolate points between previous position and current position with fixed step length.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"step/#live-demos","title":"Live demos","text":"<ul> <li>Step</li> </ul>"},{"location":"step/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"step/#install-plugin","title":"Install plugin","text":""},{"location":"step/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexstepplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexstepplugin.min.js', true);\n</code></pre></li> <li>Add step behavior     <pre><code>var step = scene.plugins.get('rexstepplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import StepPlugin from 'phaser3-rex-plugins/plugins/step-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexStep',\nplugin: StepPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add move-to behavior     <pre><code>var step = scene.plugins.get('rexStep').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Step from 'phaser3-rex-plugins/plugins/step.js';\n</code></pre></li> <li>Add move-to behavior     <pre><code>var step = new Step(gameObject, config);\n</code></pre></li> </ul>"},{"location":"step/#create-instance","title":"Create instance","text":"<pre><code>var step = scene.plugins.get('rexStep').add(gameObject, {\n// enable: true,\n// stepLength: 5,    \n});\n</code></pre> <ul> <li><code>enable</code> : Set <code>true</code> to fire <code>step</code> event for each interpolate point.</li> <li><code>stepLength</code> : Fixed length between each interpolate point.</li> </ul>"},{"location":"step/#enable","title":"Enable","text":"<ul> <li>Enable (default)     <pre><code>step.setEnable();\n</code></pre>     or     <pre><code>step.enable = true;\n</code></pre></li> <li>Disable     <pre><code>step.setEnable(false);\n</code></pre>     or     <pre><code>step.enable = false;\n</code></pre></li> </ul>"},{"location":"step/#set-step-length","title":"Set step length","text":"<pre><code>step.setStepLength(stepLength);\n// step.stepLength = stepLength;\n</code></pre>"},{"location":"step/#events","title":"Events","text":"<ul> <li>On each interpolate point     <pre><code>step.on('step', function(gameObject, step, x, y){\n\n}, scope);\n</code></pre><ul> <li>Invoke <code>step.cancelStep()</code> to cancel interpolation.</li> </ul> </li> <li>On interpolate points between previous position and current position     <pre><code>step.on('steps', function(gameObject, step, points){\n\n}, scope);\n</code></pre><ul> <li><code>points</code> : Array of point <code>{x, y}</code></li> </ul> </li> </ul>"},{"location":"structs-list/","title":"List","text":""},{"location":"structs-list/#introduction","title":"Introduction","text":"<p>An ordered list, built-in data structure of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"structs-list/#usage","title":"Usage","text":""},{"location":"structs-list/#create-instance","title":"Create instance","text":"<pre><code>var list = new Phaser.Structs.List();\n</code></pre>"},{"location":"structs-list/#add-child","title":"Add child","text":"<pre><code>list.add(child);\n</code></pre> <pre><code>list.addAt(child, index);\n</code></pre>"},{"location":"structs-list/#exist","title":"Exist","text":"<pre><code>var hasChild = list.exists(child);\n</code></pre>"},{"location":"structs-list/#get-child","title":"Get child","text":"<pre><code>var firstChild = list.first;\nvar nextChild = list.next;\nvar prevChild = list.previous;\nvar lastChild = list.last;\n</code></pre> <pre><code>var child = list.getByName(name);\n</code></pre> <pre><code>var child = list.getRandom(startIndex, length);\n</code></pre> <pre><code>var child = list.getFirst(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var child = list.getAll(property, value, startIndex, endIndex);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre> <pre><code>var child = list.count(property, value);\n// value: the value to test the property against. Must pass a strict (`===`) comparison check.\n</code></pre>"},{"location":"structs-list/#get-children","title":"Get children","text":"<pre><code>var children = list.list;\n</code></pre>"},{"location":"structs-list/#sort-children","title":"Sort children","text":"<ul> <li>Sort by property     <pre><code>list.sort(property);\n// list.sort(property, handler);\n</code></pre><ul> <li><code>property</code> : The property to lexically sort by.</li> <li><code>handler</code> :     <pre><code>function (childA, childB) {\nreturn 0; // 0, 1, -1\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"structs-list/#remove-child","title":"Remove child","text":"<pre><code>list.remove(child);\n</code></pre> <pre><code>list.removeAt(index);\n</code></pre> <pre><code>list.removeBetween(startIndex, endIndex);\n</code></pre> <pre><code>list.removeAll();\n</code></pre>"},{"location":"structs-list/#order-of-child","title":"Order of child","text":"<pre><code>list.moveTo(child, index);\n</code></pre> <pre><code>list.bringToTop(child);\n</code></pre> <pre><code>list.sendToBack(child);\n</code></pre> <pre><code>list.moveUp(child);\n</code></pre> <pre><code>list.moveDown(child);\n</code></pre> <pre><code>list.moveAbove(child1, child2);  // Move child1 above child2\n</code></pre> <pre><code>list.moveBelow(child1, child2);  // Move child1 below child2\n</code></pre> <pre><code>list.swap(child1, child2);\n</code></pre> <pre><code>list.reverse();\n</code></pre> <pre><code>list.shuffle();\n</code></pre>"},{"location":"structs-list/#replace-child","title":"Replace child","text":"<pre><code>list.replace(oldChild, newChild);\n</code></pre>"},{"location":"structs-list/#set-properties","title":"Set properties","text":"<pre><code>list.setAll(property, value, startIndex, endIndex);\n</code></pre>"},{"location":"structs-list/#for-each-child","title":"For each child","text":"<ul> <li>Iterate current children list     <pre><code>list.each(callback);\n// list.each(callback, context);\n// list.iterate(callback, context, arg0, arg1, ...);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(child, arg0, arg1, ...) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"structs-list/#children-counts","title":"Children counts","text":"<pre><code>var size = list.length;\n</code></pre>"},{"location":"structs-set/","title":"Set","text":""},{"location":"structs-set/#introduction","title":"Introduction","text":"<p>A collection of unique elements, built-in data structure of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"structs-set/#usage","title":"Usage","text":""},{"location":"structs-set/#create-instance","title":"Create instance","text":"<pre><code>var set = new Phaser.Structs.Set();\n</code></pre> <p>or</p> <pre><code>var set = new Phaser.Structs.Set(elements);\n</code></pre>"},{"location":"structs-set/#add-an-element","title":"Add an element","text":"<pre><code>set.set(element);\n</code></pre>"},{"location":"structs-set/#remove-an-element","title":"Remove an element","text":"<pre><code>set.delete(element);\n</code></pre>"},{"location":"structs-set/#remove-all-elements","title":"Remove all elements","text":"<pre><code>set.clear();\n</code></pre>"},{"location":"structs-set/#has-element","title":"Has element","text":"<pre><code>set.contains(element);\n</code></pre>"},{"location":"structs-set/#get-elements","title":"Get elements","text":"<pre><code>var elements = set.entries;\n</code></pre> <p>or get a shallow copy of elements</p> <pre><code>var elements = set.getArray();\n</code></pre>"},{"location":"structs-set/#element-counts","title":"Element counts","text":"<pre><code>var size = set.size;\n</code></pre>"},{"location":"structs-set/#for-each-element","title":"For each element","text":"<ul> <li>For when you know this Set will be modified during the iteration.     <pre><code>set.each(function(element, index) {\n// return false;  // return false to cancel iteration\n}, scope)\n</code></pre></li> <li>For when you absolutely know this Set won't be modified during the iteration.     <pre><code>set.iterate(function(element, index) {\n// return false;  // return false to cancel iteration\n}, scope)\n</code></pre></li> </ul>"},{"location":"structs-set/#set-operations","title":"Set operations","text":"<ul> <li>C = A | B    <pre><code>var setC = setA.union(setB);\n</code></pre></li> <li>C = A &amp; B    <pre><code>var setC = setA.intersect(setB);\n</code></pre></li> <li>C = A - B    <pre><code>var setC = setA.difference(setB);\n</code></pre></li> </ul>"},{"location":"tagplayer/","title":"Tag player","text":""},{"location":"tagplayer/#introduction","title":"Introduction","text":"<p>Text commands to control sprites, texts, sound effect or backgroun music.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tagplayer/#live-demos","title":"Live demos","text":"<ul> <li>Sprite</li> <li>Textbox</li> <li>Custom game object</li> <li>Viewport-coordinate</li> </ul>"},{"location":"tagplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tagplayer/#install-plugin","title":"Install plugin","text":""},{"location":"tagplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextagplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextagplayerplugin.min.js', true);\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = scene.plugins.get('rextagplayerplugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TagPlayerPlugin from 'phaser3-rex-plugins/plugins/tagplayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTagPlayerPlugin',\nplugin: TagPlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = scene.plugins.get('rexTagPlayerPlugin').add(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TagPlayer from 'phaser3-rex-plugins/plugins/tagplayer.js';\n</code></pre></li> <li>Add tag-player object     <pre><code>var tagPlayer = new TagPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#create-instance","title":"Create instance","text":"<pre><code>var tagPlayer = scene.plugins.get('rexTagPlayerPlugin').add(scene, {\nparser: {\ndelimiters: '[]',\ncomment: '//',\n// translateTagNameCallback: undefined,\n}\n\nsprites: {\n// createGameObject: 'sprite',\n// fade: 500,  \n// fade: {mode: 'tint', time: 500},\n// viewportCoordinate: false,\n// symbols: undefined,  // { key:value }\n}, // sprites: false,\n\ntexts: {\n// createGameObject: undefined,        \n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n// viewportCoordinate: false,\n// symbols: undefined,  // { key:value }\n}\n// texts: false,\n\nsounds: {\nbgm: {\ninitial: undefinied,\nloop: true,\nfade: 500\n},\nbgm2: {\ninitial: undefinied,\nloop: true,\nfade: 500\n}\n},\n\nclickTarget: scene,\n});\n</code></pre> <ul> <li><code>parser</code> : Configuration of parser.<ul> <li><code>parser.delimiters</code> : Delimiters of tag.<ul> <li>A single string with 2 characters. Default value is <code>'[]'</code>.</li> <li>A array with 2 strings. e.x. <code>['[[',']]']</code>.</li> </ul> </li> <li><code>parser.comment</code> : Start word of a comment line. Default value is <code>'//'</code>.<ul> <li><code>null</code>, or <code>false</code> : No comment line.</li> </ul> </li> <li><code>parser.translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>sprites</code> : Configuration of sprites.<ul> <li><code>sprites.createGameObject</code> : <ul> <li><code>'sprite'</code> : Create sprite game object. Default behavior.</li> <li><code>'image'</code> : Create image game object.</li> <li>Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[sprite.name=a,b,c]</code> </li> </ul> </li> </ul> </li> <li><code>sprites.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>sprite.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>sprite.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>sprites.viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>sprites.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> <li><code>false</code>, <code>null</code> : No sprite manager</li> </ul> </li> <li><code>texts</code> : Configuration of texts.<ul> <li><code>texts.createGameObject</code> : <ul> <li><code>undefined</code>, or <code>'text'</code> : Create text game object. Default behavior.</li> <li>Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[text.name=a,b,c]</code> </li> </ul> </li> </ul> </li> <li><code>texts.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a text game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>texts.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>texts.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>texts.viewportCoordinate</code> : Apply viewportCoordinate behavior to text game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>texts.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> <li><code>false</code>, <code>null</code> : No text manager</li> </ul> </li> <li><code>sounds</code> : Configuration of sound effect, or background music.<ul> <li><code>sounds.bgm.initial</code>, <code>sounds.bgm2.initial</code> : Initial music instance created by <code>scene.sound.add(key)</code> before starting playing content.<ul> <li><code>undefined</code> : No initial music instance, default value.</li> </ul> </li> <li><code>sounds.bgm.loop</code>, <code>sounds.bgm2.loop</code> :<ul> <li><code>true</code> : Loop background music, default behavior.</li> <li><code>false</code> : Play background music once.</li> </ul> </li> <li><code>sounds.bgm.fade</code>, <code>sounds.bgm2.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when starting or stopping a background music.</li> <li>A number : Fade-in or fade-out (cross-fade) when starting or stopping a background music. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>clickTarget</code> : Click target.<ul> <li><code>scene</code> : Any pointer down on this scene. Default target.</li> </ul> </li> </ul>"},{"location":"tagplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTagPlayer extends TagPlayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tagPlayer = new MyTagPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tagplayer/#game-object-manager","title":"Game object manager","text":"<pre><code>tagPlayer.addGameObjectManager({\nname: goType,\ncreateGameObject: function(scene, ...) {\nreturn gameObject\n},\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\n// symbols: undefined,  // { key:value },\n})\n</code></pre> <ul> <li><code>name</code> : Name of this game object manager, a string.</li> <li><code>createGameObject</code> : Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[goType.name=a,b,c]</code> </li> </ul> </li> <li><code>fade</code> : Tint-fade (if game object has <code>tint</code> property) or alpha-fade game object when creating or destroying a game object.<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>false</code> : Do nothing, default behavior.</li> <li><code>true</code>, or an object :<ul> <li><code>viewport</code> : <ul> <li><code>undefined</code> : Rectangle of display area under main camera of current scene. Default value.</li> <li>A rectangle</li> </ul> </li> </ul> </li> </ul> </li> <li><code>symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul>"},{"location":"tagplayer/#built-in-commands","title":"Built-in commands","text":"<p><code>goType</code> : <code>name</code> parameter in config of <code>tagPlayer.addGameObjectManager</code> method</p> <ul> <li>Add game object : <code>[goType.name=a,b,c]</code><ul> <li>Tint-fade-in, or alpha-fade-in if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove game object : <code>[/goType.name]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all game objects : <code>[/goType]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[goType.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[goType.name.x=value]</code>, <code>[goType.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[goType.name.prop.easeMode=value,duration]\n[goType.name.prop.easeMode=value,duration,repeat]\n[goType.name.prop.easeMode=value,duration,easeFunction,repeat]\n[goType.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Wait ease task of game object's number property : <code>[wait=goType.name.prop]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a game objects are destroyed : <code>[wait=goType.name]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all game objects are destroyed : <code>[wait=goType]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in game object's data manager set to <code>true</code>/<code>false</code> : <code>[wait=goType.name.dataKey]</code>/<code>[wait=goType.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>tagPlayer.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagplayer/#execute-commands","title":"Execute commands","text":"<pre><code>tagPlayer.play(commands);\n</code></pre> <p>or</p> <pre><code>tagPlayer.playPromise(commands)\n.then(function(){\n// Typing content complete\n})\n</code></pre>"},{"location":"tagplayer/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>tagPlayer.pause();\n</code></pre></li> <li>Pause until event     <pre><code>tagPlayer.pauseUntilEvent(eventEmitter, eventName);\n</code></pre></li> <li>Is paused (not playing)     <pre><code>var isPaused = !tagPlayer.isPlaying;\n</code></pre></li> </ul> <p>Invoke this method during tag-start,tag-end, or content events to suspend parsing.</p>"},{"location":"tagplayer/#resume","title":"Resume","text":"<pre><code>tagPlayer.resume();\n</code></pre>"},{"location":"tagplayer/#time-scale","title":"Time scale","text":"<p>Time scale of typing, typing animation, sprite animation and easing of sprite's properties.</p> <ul> <li>Get     <pre><code>var timeScale = tagPlayer.timeScale;\n</code></pre></li> <li>Set     <pre><code>tagPlayer.setTimeScale(timeScale);    </code></pre> <pre><code>tagPlayer.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"tagplayer/#events","title":"Events","text":"<ul> <li>On typing content complete     <pre><code>tagPlayer.on('complete', function() {\n\n})\n</code></pre></li> </ul>"},{"location":"tagplayer/#tags-of-content","title":"Tags of content","text":""},{"location":"tagplayer/#sprite","title":"Sprite","text":"<ul> <li>Add sprite : <code>[sprite.name=textureKey,frameKey]</code><ul> <li>Tint-fade-in if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove sprite : <code>[/sprite.name]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all sprites : <code>[/sprite]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[sprite.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[sprite.name.x=value]</code>, <code>[sprite.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.prop.easeMode=value,duration]\n[sprite.name.prop.easeMode=value,duration,repeat]\n[sprite.name.prop.easeMode=value,duration,easeFunction,repeat]\n[sprite.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Set texture : <code>[sprite.name.texture=textureKey,frameKey]</code></li> <li>Play animation : <code>[sprite.name.play=animationKey]</code>, or <code>[sprite.name.play=animationKey0,animationKey1,...]</code><ul> <li>Can play animation without adding sprite first.</li> </ul> </li> <li>Stop animation : <code>[/sprite.name.play]</code>, or <code>[sprite.name.stop]</code></li> <li>Pause animation : <code>[sprite.name.pause]</code></li> </ul>"},{"location":"tagplayer/#text","title":"Text","text":"<ul> <li>Add text : <code>[text.name]</code><ul> <li>Tint-fade-in if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove text : <code>[/text.name]</code><ul> <li>Tint-fade-out if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all texts : <code>[/text]</code><ul> <li>Tint-fade-out if <code>text.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[text.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[text.name.x=value]</code>, <code>[text.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.prop.easeMode=value,duration]\n[sprite.name.prop.easeMode=value,duration,repeat]\n[sprite.name.prop.easeMode=value,duration,easeFunction,repeat]\n[sprite.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Set text     <pre><code>[text.name.text]\ncontent\\\\n\nnewline\\\\n\nnewline\n</code></pre></li> <li>Typing text     <pre><code>[text.name.typing]\n// [text.name.typing=speed]\ncontent\\\\n\nnewline\\\\n\nnewline\n</code></pre></li> </ul>"},{"location":"tagplayer/#sound-effect","title":"Sound effect","text":"<ul> <li>Play : <code>[se=key]</code>, <code>[se2=key]</code><ul> <li>Sound effect will be destroyed when complete</li> </ul> </li> <li>Play with fade in volume : <code>[se=key,1000]</code>, <code>[se2=key,1000]</code></li> <li>Fade in volume : <code>[se.fadein=1000]</code>, <code>[se2.fadein=1000]</code></li> <li>Fade out volume : <code>[se.fadeout=1000]</code>, <code>[se2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[se.fadeout=1000,stop]</code>, <code>[se2.fadeout=1000,stop]</code></li> <li>Set volume : <code>[se.volume=1]</code>, <code>[se2.volume=1]</code></li> </ul>"},{"location":"tagplayer/#background-music","title":"Background music","text":"<ul> <li>Play, stop : <code>[bgm=key]</code>, <code>[/bgm]</code>, <code>[bgm2=key]</code>, <code>[/bgm2]</code><ul> <li>Previous background music will be stopped and destroyed.</li> <li>Cross fade to next background music if <code>sounds.bgm.fade</code>/<code>sounds.bgm2.fade</code> is not <code>0</code></li> </ul> </li> <li>Play with fade in volume : <code>[bgm=key,1000]</code>, <code>[bgm2=key,1000]</code></li> <li>Pause, resume : <code>[bgm.pause]</code>, <code>[/bgm.pause]</code>, <code>[bgm2.pause]</code>, <code>[/bgm2.pause]</code></li> <li>Fade in volume : <code>[bgm.fadein=1000]</code>, <code>[bgm2.fadein=1000]</code></li> <li>Fade out volume : <code>[bgm.fadeout=1000]</code>, <code>[bgm2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[bgm.fadeout=1000,stop]</code>, <code>[bgm2.fadeout=1000,stop]</code></li> <li>Cross fade to another background music : <code>[bgm.cross=key,10000]</code>, <code>[bgm2.cross=key,10000]</code></li> <li>Set volume : <code>[bgm.volume=1]</code>, <code>[bgm2.volume=1]</code></li> <li>Mute : <code>[bgm.mute]</code>, <code>[bgm2.mute]</code>, <code>[bgm.unmute]</code>, <code>[bgm2.unmute]</code></li> </ul>"},{"location":"tagplayer/#camera","title":"Camera","text":"<ul> <li>Fade-in effect : <code>[camera.fadein]</code>, <code>[camera.fadein=1000]</code>, or <code>[camera.fadein=duration,red,green,blue]</code></li> <li>Fade-out effect : <code>[camera.fadeout]</code>, <code>[camera.fadeout=1000]</code>, or <code>[camera.fadeout=duration,red,green,blue]</code></li> <li>Flash effect : <code>[camera.flash]</code>, <code>[camera.flash=1000]</code>, or <code>[camera.flash=duration,red,green,blue]</code></li> <li>Shake effect : <code>[camera.shake]</code>, <code>[camera.shake=1000]</code>, or <code>[camera.shake=duration,intensity]</code></li> <li>Zoom<ul> <li>Set zoom : <code>[camera.zoom=2]</code></li> <li>Zoom to : <code>[camera.zoom.to=1,1000]</code>, or <code>[camera.zoom.to=zoomValue,duration,Cubic]</code></li> </ul> </li> <li>Rotate<ul> <li>Set angle : <code>[camera.rotate=90]</code>, angle in degrees</li> <li>Rotate to : <code>[camera.rotate.to=0,1000]</code>, or <code>[camera.rotate.to=deg,duration,Cubic]</code>, angle in degrees</li> </ul> </li> <li>Scroll<ul> <li>Scroll x,y : <code>[camera.scroll=0,200]</code></li> <li>Scroll x,y to : <code>[camera.scroll.to=0,200,1000]</code>, or <code>[camera.rotate.to=x,y,duration,Cubic]</code></li> </ul> </li> </ul>"},{"location":"tagplayer/#wait-conditions","title":"Wait conditions","text":"<ul> <li>Wait click : <code>[wait=click]</code>, <code>[click]</code><ul> <li>Also fire event <code>'wait.click'</code> <pre><code> tagPlayer.on('wait.click', function() {\n})\n</code></pre></li> </ul> </li> <li>Wait key-down : <code>[wait=enter]</code>, <code>[wait=space]</code>, ....<ul> <li>Also fire event <code>'wait.keydown'</code> <pre><code> tagPlayer.on('wait.keydown', function(keyName) {\n})\n</code></pre></li> </ul> </li> <li>Wait time : <code>[wait=1000]</code><ul> <li>Also fire event <code>'wait.time'</code> <pre><code> tagPlayer.on('wait.time', function(time) {\n})\n</code></pre></li> </ul> </li> <li>Wait sound effect : <code>[wait=se]</code>, <code>[wait=se2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> tagPlayer.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait background music : <code>[wait=bgm]</code>, <code>[wait=bgm2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> tagPlayer.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait camera effect : <code>[wait=camera.fadein]</code>, <code>[wait=camera.fadeout]</code>, <code>[wait=camera.flash]</code>, <code>[wait=camera.shake]</code>, <code>[wait=camera.zoom]</code>, <code>[wait=camera.rotate]</code>, <code>[wait=camera.scroll]</code><ul> <li>Also fire event <code>'wait.camera'</code> <pre><code> tagPlayer.on('wait.camera', function(effectName) {\n// effectName : 'camera.fadein', 'camera.fadeout', 'camera.flash', 'camera.shake', 'camera.zoom', 'camera.rotate', 'camera.scroll'\n})\n</code></pre></li> </ul> </li> <li>Wait ease task of sprite's property : <code>[wait=sprite.name.prop]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a sprite are destroyed : <code>[wait=sprite.name]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all sprites are destroyed : <code>[wait=sprite]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in sprite's data manager set to <code>true</code>/<code>false</code> : <code>[wait=sprite.name.dataKey]</code>/<code>[wait=sprite.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code>tagPlayer.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait callback : <code>[wait]</code>, or <code>[wait=xxx]</code> (<code>xxx</code> is any string which not been used in above case)<ul> <li>Fire event <code>'wait'</code> <pre><code>tagPlayer.on('wait', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> <li>Fire event <code>'wait.xxx'</code> <pre><code>tagPlayer.on('wait.xxx', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> </ul> </li> <li>Combine conditions : <code>[wait=cond0|cond1|...]</code><ul> <li>Wait click, or enter key down : <code>[wait=click|enter]</code></li> <li>Wait click, enter key down, or 100ms : <code>[wait=click|enter|1000]</code></li> </ul> </li> </ul>"},{"location":"tagplayer/#custom-tag","title":"Custom tag","text":"<p>Assume that adding a custom tag : <code>[custom=10,20][/custom]</code></p> <ul> <li>On parse/execute a <code>+custom</code> tag, will add a custom command child      <pre><code>tagPlayer.on('+custom', function(parser, a, b) {\n// console.log('Parse +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters after <code>=</code></li> <li>Set content callback, will invoke this callback when getting a content      <pre><code>var callback = function(content) {\n// ...\n}\ntagPlayer.setContentCallback(callback, scope);\n</code></pre></li> </ul> </li> <li>On parse/execute a <code>-custom</code> tag, will add a custom command child      <pre><code>tagPlayer.on('-custom', function(parser) {\n// console.log('Parse -custom tag')\n})\n</code></pre><ul> <li>Clear content callback     <pre><code>tagPlayer.setContentCallback();\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagplayer/#content","title":"Content","text":"<p>These lines will be skipped :</p> <ul> <li>Empty line, which only has space characters.</li> <li>Comment line, start with <code>'//'</code>.</li> </ul> <p>New line symbol <code>'\\n'</code> will be removed, use <code>\\\\n</code> to insert a new line character.</p> <p>Content will pass to one of these callback/event</p> <ol> <li>Set content callback     <pre><code>tagPlayer.setContentCallback(callback, scope);\n</code></pre><ul> <li>Clear content callback     <pre><code>tagPlayer.setContentCallback();\n</code></pre></li> </ul> </li> <li>On parse/execute a content, after a <code>[custom]</code> tag.     <pre><code>tagPlayer.on('custom#content', function(content) {   })\n</code></pre></li> <li>On parse/execute a content, after any tag.     <pre><code>tagPlayer.on('content', function(content) {   })\n</code></pre></li> </ol>"},{"location":"tagplayer/#game-objects","title":"Game objects","text":"<ul> <li>Get game object by name     <pre><code>var gameObject = tagPlayer.getGameObject(goType, name);\n</code></pre></li> <li>Get all game objects of a game object manager     <pre><code>var gameObjects = tagPlayer.getGameObject(goType);\n</code></pre><ul> <li><code>gameObjects</code> : <code>{name: gameObject}</code></li> </ul> </li> <li>Add existed game object into game object manager     <pre><code>tagPlayer.addGameObject(goType, name, gameObject);\n</code></pre></li> </ul>"},{"location":"tagplayer/#data","title":"Data","text":"<ul> <li>Get     <pre><code>var value = tagPlayer.getData(key);\nvar values = tagPlayer.getData(keys); // keys: an array of keys\nvar value = tagPlayer.data.values[key];\n</code></pre></li> <li>Set     <pre><code>tagPlayer.setData(key, value);\ntagPlayer.incData(key, value);    tagPlayer.setData(obj); // obj: {key0:value0, key1:value1, ...}\ntagPlayer.data.values[key] = value;\ntagPlayer.data.values[key] += inc;\n</code></pre>     or     <pre><code>tagPlayer.toggleData(key);\n</code></pre></li> <li>Enable     <pre><code>tagPlayer.setDataEnabled();\n</code></pre></li> <li>Events : <ul> <li>Set data evant     <pre><code>tagPlayer.on('setdata', function(tagPlayer, key, value){ /* ... */ });\n</code></pre></li> <li>Change data event     <pre><code>tagPlayer.on('changedata', function(tagPlayer, key, value, previousValue){ /* ... */ });\n</code></pre> <pre><code>tagPlayer.on('changedata-' + key, function(tagPlayer, value, previousValue){ /* ... */ });\n</code></pre></li> </ul> </li> </ul> <p>See data manager</p> <p>Note</p> <p>Ensure data manager is created before binding any data-changed events.</p>"},{"location":"tagtext/","title":"Tag Text","text":""},{"location":"tagtext/#introduction","title":"Introduction","text":"<p>Displays text with multi-color, font face, or font size with tags.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"tagtext/#live-demos","title":"Live demos","text":"<ul> <li>Tag text</li> </ul>"},{"location":"tagtext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tagtext/#install-plugin","title":"Install plugin","text":""},{"location":"tagtext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextagtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextagtextplugin.min.js', true);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexTagText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"tagtext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TagTextPlugin from 'phaser3-rex-plugins/plugins/tagtext-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTagTextPlugin',\nplugin: TagTextPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.add.rexTagText(x, y, content, config);\n</code></pre></li> </ul>"},{"location":"tagtext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TagText from 'phaser3-rex-plugins/plugins/tagtext.js';\n</code></pre></li> <li>Add text object     <pre><code>var txt = new TagText(scene, x, y, content, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"tagtext/#add-text-object","title":"Add text object","text":"<pre><code>var tags = {\ntag0: {\ncolor: 'red'\n},\ntag1: {\ncolor: 'blue'\n}\n};\nvar txt = scene.add.rexTagText(x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', {tags:tags});\n// var txt = scene.add.rexTagText(x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags });\n</code></pre> <ul> <li><code>tags</code> : <code>{tagName:tag}</code>, see Properties of tag.</li> </ul> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\nbackgroundColor2: null,\nbackgroundHorizontalGradient: true,\nbackgroundStrokeColor: null,\nbackgroundStrokeLineWidth: 2,\n\nbackgroundCornerRadius: 0,\n// 0   : no round corner, \n// &gt; 0 : convex round corner\n// &lt; 0 : concave round corner\n\nbackgroundCornerIteration: null, color: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nunderline: {\ncolor: '#000',\nthickness: 0,\noffset: 0\n},\nstrikethrough: {\ncolor: '#000',\nthickness: 0,\noffset: 0\n},    // align: 'left',  // Equal to halign\nhalign: 'left', // 'left'|'center'|'right'\nvalign: 'top',  // 'top'|'center'|'bottom'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nlineSpacing: 0,\ntestString: '|M\u00c9qgy',\nwrap: {\nmode: 'none'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: null\n},\n// rtl: false,\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// images: {\n//    key: { y:-8 }\n// }\n\ntags: {\n//tag0: {\n//  color: 'red'\n//},\n//tag1: {\n//  color: 'blue'\n//}\n}\n}\n</code></pre> <pre><code>var txt = scene.add.rexTagText({\nx: 0,\ny: 0,\ntext: '',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\ntags: {}\n}\n})\n</code></pre> <p>or</p> <pre><code>var txt = scene.make.rexTagText({\nx: 100,\ny: 100,\npadding: {\nleft: 64,\nright: 16,\ntop: 20,\nbottom: 40\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',\nbackgroundColor: '#ff00ff',\ntags: {}\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre> <ul> <li>Alignment<ul> <li><code>halign</code>, or <code>align</code> : Horizontal alignment.<ul> <li><code>left</code>, <code>center</code>, <code>right</code></li> </ul> </li> <li><code>valign</code> : Vertical alignment.<ul> <li><code>top</code>, <code>center</code>, <code>bottom</code></li> </ul> </li> </ul> </li> <li><code>images</code> : See Image</li> </ul>"},{"location":"tagtext/#properties-of-tag","title":"Properties of tag","text":"<pre><code>{\nfontFamily: 'Courier',   // or 'family', 'font-family'\nfontSize: '16px',        // or 'size', 'font-size'\nfontStyle: 'bold italic',// or 'style', 'font-style'\ncolor: 'red',            // or 'font-color'\nstroke: {\ncolor: 'blue',\nthickness: 1\n},\nshadow: {\ncolor: 'black',\noffsetX: 2,\noffsetY: 2,\nblur: 2\n},\nunderline: {            // or 'u'\ncolor: 'blue',\nthickness: 3,\noffset: -1\n},\nstrikethrough: {        // or 's'\ncolor: 'red',\nthickness: 3,\noffset: -1\n},    y: 0,\nimg: textureKey,\narea: areaKey,\n}\n</code></pre>"},{"location":"tagtext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends TagText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, '&lt;class=\"tag0\"&gt;h&lt;/class&gt;ello', {tags:tags});\n</code></pre></li> </ul>"},{"location":"tagtext/#add-tag","title":"Add tag","text":"<ul> <li>Add a tag     <pre><code>txt.addTag(name, prop);\n</code></pre><ul> <li><code>name</code> : Tag name.</li> <li><code>prop</code> : See Properties of tag</li> </ul> </li> <li>Add tags     <pre><code>txt.addTags({\nname: prop\n});\n</code></pre></li> </ul>"},{"location":"tagtext/#wrap","title":"Wrap","text":"<ul> <li>Wrap by word or character.     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwrap: {\nmode: 'word'     // 0|'none'|1|'word'|2|'char'|'character'\nwidth: 300\n}\n}\n});\n</code></pre></li> <li>Wrap mode<ul> <li>Get     <pre><code>var mode = txt.style.wrapMode;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapMode(mode);\n</code></pre><ul> <li><code>'none'</code>, or <code>0</code> : No wrap</li> <li><code>'word'</code>, or <code>1</code> : Word wrap</li> <li><code>'character'</code>, or <code>2</code> : Character wrap</li> </ul> </li> </ul> </li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wrapWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setWrapWidth(width);\n// txt.setWordWrapWidth(width);\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagtext/#content","title":"Content","text":"<ul> <li>Get source text     <pre><code>var curContent = txt.text;\n</code></pre></li> <li>Get plain text     <pre><code>var plainText = txt.getPlainText();\n</code></pre></li> <li>Set     <pre><code>txt.setText('&lt;class=\"name1\"&gt;wor&lt;/class&gt;ld');\n// txt.text = '&lt;class=\"name1\"&gt;wor&lt;/class&gt;ld';\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"tagtext/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);  // font: {fontFamily, fontSize, fontStyle}\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"tagtext/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre></li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre></li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Underline color, thickness<ul> <li>Get     <pre><code>var color = txt.style.underlineColor;\nvar thickness = txt.style.underlineThickness;\nvar offset = txt.style.underlineOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setUnderline(color, thickness, ofset);\ntxt.setUnderlineColor(color);\ntxt.setUnderlineThinkness(thickness);\ntxt.setUnderlineOffset(ofset);\n</code></pre></li> </ul> </li> <li>Strikethrough color, thickness<ul> <li>Get     <pre><code>var color = txt.style.strikethroughColor;\nvar thickness = txt.style.strikethroughThickness;\nvar offset = txt.style.strikethroughOffset;\n</code></pre></li> <li>Set     <pre><code>txt.setStrikethrough(color, thickness, ofset);\ntxt.setStrikethroughColor(color);\ntxt.setStrikethroughThinkness(thickness);\ntxt.setStrikethroughOffset(ofset);\n</code></pre></li> </ul> </li> <li>Background<ul> <li>Color, or gradient color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\nvar color2 = txt.style.backgroundColor2;\nvar isHorizontalGradient = txt.style.backgroundHorizontalGradient;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n// txt.setBackgroundColor(color, color2, isHorizontalGradient);\n</code></pre></li> </ul> </li> <li>Stroke color<ul> <li>Get    <pre><code>var color = txt.style.backgroundStrokeColor;\nvar lineWidth = txt.style.backgroundStrokeLineWidth;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundStrokeColor(color, lineWidth);\n</code></pre></li> </ul> </li> <li>Round rectangle<ul> <li>Get     <pre><code>var radius = txt.style.backgroundCornerRadius;\nvar iteration = txt.style.backgroundCornerIteration;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundCornerRadius(radius);\n// txt.setBackgroundCornerRadius(radius, iteration);\n</code></pre><ul> <li><code>radius</code> :<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : <ul> <li><code>undefined</code> : Round rectangle</li> <li><code>0</code> : Octagon</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre></li> </ul> </li> </ul>"},{"location":"tagtext/#image","title":"Image","text":"<ul> <li>Uses texture key as image key by default.</li> <li>Add image render information     <pre><code>txt.addImage(imgKey, {\nkey: textureKey,\nframe: frameName,\nwidth: undefined,\nheight: undefined,\ny: 0,\nleft: 0,\nright: 0\n});\n</code></pre><ul> <li><code>imgKey</code> : Image key used in text content, i.e. <code>[img=imgKey]</code>.</li> <li><code>key</code> : Texture key.</li> <li><code>frame</code> : Frame name.</li> <li><code>width</code> : Render width, set <code>undefined</code> to use the cut width of frame.</li> <li><code>height</code> : Render height, set <code>undefined</code> to use the cut height of frame.</li> <li><code>y</code> : Extra offset y.</li> <li><code>left</code> : Left padding space.</li> <li><code>Right</code> : Right padding space.</li> </ul> </li> <li>Add some image render informations     <pre><code>txt.addImage(data);\n</code></pre><ul> <li><code>data</code> : <code>{imgKey, config}</code></li> </ul> </li> </ul>"},{"location":"tagtext/#hit-area-of-words","title":"Hit area of words","text":""},{"location":"tagtext/#hitting-events","title":"Hitting events","text":"<ul> <li>Pointer down     <pre><code>txt.on('areadown', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areadown-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> <li>Pointer up     <pre><code>txt.on('areaup', function(key, pointer, localX, localY, event){\n\n}, scope)\n</code></pre>     or     <pre><code>txt.on('areaup-' + key, function(pointer, localX, localY, event){\n\n}, scope)\n</code></pre></li> </ul>"},{"location":"tagtext/#draw-hit-areas","title":"Draw hit-areas","text":"<pre><code>txt.drawAreaBounds(graphics, color);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul>"},{"location":"tagtext/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"tagtext/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"tagtext/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"tagtext/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"tagtext/#left-margin-of-text","title":"Left margin of text","text":"<pre><code>var leftMargin = txt.measureTextMargins(testString).left;\n</code></pre> <ul> <li><code>testString</code> : Measure left margin of this text.</li> </ul>"},{"location":"tagtext/#shift-start-position-of-text","title":"Shift start position of text","text":"<pre><code>txt.setXOffset(value);\n</code></pre>"},{"location":"tagtext/#resolution","title":"Resolution","text":"<ul> <li>Get     <pre><code>var resolution = txt.style.resolution;\n</code></pre></li> <li>Set     <pre><code>txt.setResolution(resolution);\n</code></pre></li> </ul>"},{"location":"tagtext/#inline-style","title":"Inline style","text":"<p>Define style inline text.</p> <ul> <li><code>&lt;style='color:red'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='size:30px'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='y:-12;size:20px'&gt;Some text&lt;/style&gt;</code></li> <li><code>&lt;style='stroke:blue 1px'&gt;Some text&lt;/style&gt;</code> (color thickness)</li> <li><code>&lt;style='shadow:blue 2px 2px 2px'&gt;Some text&lt;/style&gt;</code> (color offsetX offsetY blur)</li> <li><code>&lt;style='underline:blue 3px -1px'&gt;Some text&lt;/style&gt;</code> (color thickness offset)</li> <li><code>&lt;style='strikethrough:blue 3px -1px'&gt;Some text&lt;/style&gt;</code> (color thickness offset)</li> </ul> <p>Or mix them</p> <ul> <li><code>&lt;style='color:red;size:30px'&gt;Some text&lt;/style&gt;</code></li> </ul>"},{"location":"tagtext/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.setTestString(text);\n</code></pre>"},{"location":"tagtext/#save-texture","title":"Save texture","text":"<pre><code>txt.generateTexture(key);\n// txt.generateTexture(key, x, y, width, height);\n</code></pre>"},{"location":"tagtext/#rtl","title":"RTL","text":"<ul> <li>Set <code>rtl</code> in style config when creating this text game object</li> <li>Change <code>rtl</code> during runtime     <pre><code>txt.setRTL(rtl).setText(newContent);\n</code></pre><ul> <li>Invoke <code>setRTL</code> method before setting new content.</li> </ul> </li> </ul>"},{"location":"tagtext/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"tagtext/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"tagtext/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"tcrp-player/","title":"Player","text":""},{"location":"tcrp-player/#introduction","title":"Introduction","text":"<p>Player of T ime-C ommand-R ecorder-P layer, to run commands on time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tcrp-player/#live-demos","title":"Live demos","text":"<ul> <li>Replay drawing</li> </ul>"},{"location":"tcrp-player/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tcrp-player/#install-plugin","title":"Install plugin","text":""},{"location":"tcrp-player/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rextcrpplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/tcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/tcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var player = new TCRP.Player(scene, config);\n</code></pre></li> </ul>"},{"location":"tcrp-player/#create-instance","title":"Create instance","text":"<pre><code>var player = scene.plugins.get('rexTCRP').addPlayer(scene, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// dtMode: 0,          // 'abs'|'absolute'|0|'inc'|'increment'|1\n// commands: [],       // [[time, command], [time, command], ...]\n// timeScale: 1,\n// scope: undefined\n});\n</code></pre> <ul> <li><code>scene</code> : A scene object, or a game object.</li> <li><code>timeUnit</code> : see next section</li> <li><code>dtMode</code> : see next section</li> <li><code>commands</code> : see next section</li> <li><code>timeScale</code></li> </ul>"},{"location":"tcrp-player/#load-commands","title":"Load commands","text":"<pre><code>player.load(commands, scope, {\n// timeUnit: 0,        // 'ms'|0|'s'|'sec'|1\n// dtMode: 0           // 'abs'|'absolute'|0|'inc'|'increment'|1\n});\n</code></pre> <ul> <li>Commands : see also Run commands <pre><code>[\n[time, command],\n[time, command],\n...\n]\n</code></pre><ul> <li>Format of each row :     <pre><code>[time, fnName, param0, param1, ...]\n// [time, callback, param0, param1, ...]\n</code></pre> <pre><code>[time, [fnName, param0, param1, ...]]\n// [time, [callback, param0, param1, ...]]\n</code></pre> <pre><code>[time, [command0, command1, ...]]\n</code></pre></li> </ul> </li> <li>timeUnit: time-unit of time<ul> <li><code>'ms'</code>, or <code>0</code> : time in millisecond</li> <li><code>'s'</code>, <code>'sec'</code>, or 1 : time in second</li> </ul> </li> <li>dtMode: mode of counting time<ul> <li><code>'abs'</code>, <code>'absolute'</code>, or <code>0</code> : timeout = time</li> <li><code>'inc'</code>, <code>'increment'</code>, <code>1</code> : timeout = time + previous-time</li> </ul> </li> </ul>"},{"location":"tcrp-player/#start-playing","title":"Start playing","text":"<pre><code>player.start();\n// player.start(startAt);  // Start-at time in ms\n</code></pre>"},{"location":"tcrp-player/#events","title":"Events","text":"<ul> <li>Start     <pre><code>player.on('start', function(scene, player){});\n</code></pre></li> <li>Pause     <pre><code>player.on('pause', function(scene, player){});\n</code></pre></li> <li>Resume     <pre><code>player.on('resume', function(scene, player){});\n</code></pre></li> <li>Stop     <pre><code>player.on('stop', function(scene, player){});\n</code></pre></li> <li>Complete     <pre><code>player.on('complete', function(scene, player){});\n</code></pre></li> <li>Run command     <pre><code>player.on('runcommand', function(commands, scope){});\n</code></pre></li> </ul>"},{"location":"tcrp-player/#pause-resume-stop-playing","title":"Pause, Resume, stop playing","text":"<pre><code>player.pause();\nplayer.resume();\nplayer.stop();\n</code></pre>"},{"location":"tcrp-player/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>player.seek(time);   // Elapsed time in ms\n</code></pre>"},{"location":"tcrp-player/#seek-to-next-command","title":"Seek to next command","text":"<pre><code>player.seekToNext();\n</code></pre> <p>Seek to time of next command.</p>"},{"location":"tcrp-player/#state-of-player","title":"State of player","text":"<pre><code>var isPlaying = player.isPlaying;\nvar completed = player.completed;\nvar now = player.now;\n</code></pre>"},{"location":"tcrp-player/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>player.setTimeScale(value);\n// player.timeScale = value;\n</code></pre></li> <li>Get     <pre><code>var timeScale = player.timeScale;\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/","title":"Recoder","text":""},{"location":"tcrp-recoder/#introduction","title":"Introduction","text":"<p>Recorder of T ime-C ommand-R ecorder-P layer, to store commands with time.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"tcrp-recoder/#live-demos","title":"Live demos","text":"<ul> <li>Replay drawing</li> </ul>"},{"location":"tcrp-recoder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tcrp-recoder/#install-plugin","title":"Install plugin","text":""},{"location":"tcrp-recoder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextcrpplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextcrpplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rextcrpplugin').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TCRPPlugin from 'phaser3-rex-plugins/plugins/tcrp-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTCRP',\nplugin: TCRPPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TCRP from 'phaser3-rex-plugins/plugins/tcrp.js';\n</code></pre></li> <li>Create instance     <pre><code>var recorder = new TCRP.Recorder(scene);\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#create-instance","title":"Create instance","text":"<pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(scene);\n</code></pre> <ul> <li>Destroy when scene stopped</li> </ul> <p>or</p> <pre><code>var recorder = scene.plugins.get('rexTCRP').addRecorder(gameObject);\n</code></pre> <ul> <li>Destroy when game object destroyed</li> </ul>"},{"location":"tcrp-recoder/#start-recording","title":"Start recording","text":"<pre><code>recorder.start();\n// recorder.start(startAt);  // start-at time in ms\n</code></pre>"},{"location":"tcrp-recoder/#push-commands","title":"Push commands","text":"<pre><code>recorder.addCommand([fnName, param0, param1, ...]);\n// recorder.addCommand([command0, command1, ...]);\n// recorder.addCommand([fnName, param0, param1, ...], offset);  // time-offset in ms\n</code></pre> <p>See also Run commands</p>"},{"location":"tcrp-recoder/#get-commands","title":"Get commands","text":"<pre><code>var commands = recorder.getCommands();        // Get a shallow copy of commands\n// var commands = recorder.getCommands(true); // Get reference of commands\n</code></pre> <p>Format of return commands:</p> <pre><code>[\n[time, [command]],\n[time, [command0,command1]],\n...\n]\n</code></pre>"},{"location":"tcrp-recoder/#clear-commands","title":"Clear commands","text":"<pre><code>recorder.clear();\n</code></pre>"},{"location":"tcrp-recoder/#pause-resume-stop-recording","title":"Pause, Resume, stop recording","text":"<pre><code>recorder.pause();\nrecorder.resume();\nrecorder.stop();\n</code></pre>"},{"location":"tcrp-recoder/#seek-elapsed-time","title":"Seek elapsed time","text":"<pre><code>recorder.seek(time);   // elapsed time in ms\n</code></pre>"},{"location":"tcrp-recoder/#state-of-recorder","title":"State of recorder","text":"<pre><code>var isRecording = recorder.isRecording;\nvar now = recorder.now;\n</code></pre>"},{"location":"tcrp-recoder/#time-scale","title":"Time-scale","text":"<ul> <li>Set     <pre><code>recorder.setTimeScale(value);\n// recorder.timeScale = value;\n</code></pre></li> <li>Get     <pre><code>var timeScale = recorder.timeScale;\n</code></pre></li> </ul>"},{"location":"tcrp-recoder/#events","title":"Events","text":"<ul> <li>Start     <pre><code>recorder.on('start', function(scene, recorder){});\n</code></pre></li> <li>Pause     <pre><code>recorder.on('pause', function(scene, recorder){});\n</code></pre></li> <li>Resume     <pre><code>recorder.on('resume', function(scene, recorder){});\n</code></pre></li> <li>Stop     <pre><code>recorder.on('stop', function(scene, recorder){});\n</code></pre></li> </ul>"},{"location":"text/","title":"Text","text":""},{"location":"text/#introduction","title":"Introduction","text":"<p>Drawing text on canvas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"text/#usage","title":"Usage","text":""},{"location":"text/#add-text-object","title":"Add text object","text":"<pre><code>var txt = scene.add.text(x, y, 'hello');\n// var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });\n</code></pre> <p>Default style</p> <pre><code>{\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nrtl: false,\ntestString: '|M\u00c9qgy',\nwordWrap: {\nwidth: null,\ncallback: null,\ncallbackScope: null,\nuseAdvancedWrap: false\n},\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n}\n</code></pre> <p>Add text from JSON</p> <pre><code>var txt = scene.make.text({\nx: 100,\ny: 100,\npadding: {\nleft: 64,\nright: 16,\ntop: 20,\nbottom: 40\n//x: 32,    // 32px padding on the left/right\n//y: 16     // 16px padding on the top/bottom\n},\ntext: 'Text\\nGame Object\\nCreated from config',\nstyle: {\nfontSize: '64px',\nfontFamily: 'Arial',\ncolor: '#ffffff',\nalign: 'center',  // 'left'|'center'|'right'|'justify'\nbackgroundColor: '#ff00ff'\n},\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"text/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyText extends Phaser.GameObjects.Text {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyText(scene, x, y, 'hello');\n</code></pre></li> </ul>"},{"location":"text/#word-wrap","title":"Word wrap","text":"<ul> <li>Wrap by width     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 100,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: { x: 0.5, y: 0.5 },\nstyle: {\nfont: 'bold 25px Arial',\nfill: 'white',\nwordWrap: { width: 300 }\n},\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre></li> <li>Wrap by callback     <pre><code>var txt = scene.make.text({\nx: 400,\ny: 300,\ntext: 'The sky above the port was the color of television, tuned to a dead channel.',\norigin: 0.5,\nstyle: {\nfont: 'bold 30px Arial',\nfill: 'white',\nwordWrap: { callback: wordWrap, scope: this }\n},\n// origin: {x: 0.5, y: 0.5},\n});\n\nfunction wordWrap (text, textObject)\n{\n// First parameter will be the string that needs to be wrapped\n// Second parameter will be the Text game object that is being wrapped currently\n\n// This wrap just puts each word on a separate line, but you could inject your own\n// language-specific logic here.\nvar words = text.split(' ');\n\n// You can return either an array of individual lines or a string with line breaks (e.g. \\n) in\n// the correct place.\nreturn words;\n}\n</code></pre></li> <li>Wrap width<ul> <li>Get     <pre><code>var width = txt.style.wordWrapWidth;\nvar useAdvancedWrap = txt.style.wordWrapUseAdvanced;\n</code></pre></li> <li>Set     <pre><code>txt.setWordWrapWidth(width);\n// txt.setWordWrapWidth(width, useAdvancedWrap);\n</code></pre></li> </ul> </li> <li>Wrap callback<ul> <li>Get     <pre><code>var callback = txt.style.wordWrapCallback;\nvar scope = txt.style.wordWrapCallbackScope;\n</code></pre></li> <li>Set     <pre><code>txt.setWordWrapCallback(callback, scope);\n</code></pre></li> </ul> </li> </ul>"},{"location":"text/#content","title":"Content","text":"<ul> <li>Get     <pre><code>var content = txt.text;\n</code></pre></li> <li>Set     <pre><code>txt.setText(text);\n// txt.text = text;\n</code></pre></li> <li>Append     <pre><code>txt.appendText(text);\n// txt.text += '\\n' + text;\n</code></pre>     or     <pre><code>txt.appendText(text, false);\n// txt.text += text;\n</code></pre></li> </ul>"},{"location":"text/#set-style","title":"Set style","text":"<pre><code>txt.setStyle(style);\ntxt.setFont(font);\ntxt.setFontFamily(family);\ntxt.setFontSize(size);\ntxt.setFontStyle(style);\n</code></pre>"},{"location":"text/#set-align","title":"Set align","text":"<pre><code>txt.setAlign(align);\n</code></pre> <ul> <li><code>align</code> : <code>'left'</code>, <code>'center'</code>, <code>'right'</code>, <code>'justify'</code></li> </ul>"},{"location":"text/#color","title":"Color","text":"<ul> <li>Text color<ul> <li>Get     <pre><code>var color = txt.style.color;\n</code></pre></li> <li>Set     <pre><code>txt.setColor(color);\n</code></pre>     or     <pre><code>txt.setFill(color);\n</code></pre></li> </ul> </li> <li>Stroke color, thickness<ul> <li>Get     <pre><code>var color = txt.style.stroke;\nvar thickness = txt.style.strokeThickness;\n</code></pre></li> <li>Set     <pre><code>txt.setStroke(color, thickness);\n</code></pre></li> <li>Clear     <pre><code>txt.setStroke();\n</code></pre></li> </ul> </li> <li>Background color<ul> <li>Get     <pre><code>var color = txt.style.backgroundColor;\n</code></pre></li> <li>Set     <pre><code>txt.setBackgroundColor(color);\n</code></pre></li> </ul> </li> <li>Shadow<ul> <li>Get     <pre><code>var color = txt.style.shadowColor;\nvar offsetX = txt.style.shadowOffsetX;\nvar offsetY = txt.style.shadowOffsetY;\nvar blur = txt.style.shadowBlur;\nvar stroke = txt.style.shadowStroke;\nvar enabled = txt.style.shadowFill;\n</code></pre></li> <li>Set     <pre><code>txt.setShadow(x, y, color, blur, shadowStroke, shadowFill);\ntxt.setShadowOffset(x, y);\ntxt.setShadowColor(color);\ntxt.setShadowBlur(blur);\ntxt.setShadowStroke(enabled);\ntxt.setShadowFill(enabled);\n</code></pre></li> </ul> </li> </ul>"},{"location":"text/#line-spacing","title":"Line spacing","text":"<p>This value is added to the height of the font when calculating the overall line height.</p> <ul> <li>Get    <pre><code>var lineSpacing = txt.style.lineSpacing;\n</code></pre></li> <li>Set    <pre><code>txt.setLineSpacing(value);\n</code></pre></li> </ul>"},{"location":"text/#padding","title":"Padding","text":"<ul> <li>Get     <pre><code>var left = txt.padding.left;\nvar top = txt.padding.top;\nvar right = txt.padding.right;\nvar bottom = txt.padding.bottom;\n</code></pre></li> <li>Set     <pre><code>txt.setPadding(left, top, right, bottom);\n// txt.setPadding(padding); // padding: {left, top, right, bottom}\n</code></pre></li> </ul>"},{"location":"text/#max-lines","title":"Max lines","text":"<ul> <li>Get     <pre><code>var maxLines = txt.style.maxLines;\n</code></pre></li> <li>Set     <pre><code>txt.setMaxLines(max);\n</code></pre></li> </ul>"},{"location":"text/#fixed-size","title":"Fixed size","text":"<ul> <li>Get     <pre><code>var width = txt.style.fixedWidth;\nvar height = txt.style.fixedHeight;\n</code></pre></li> <li>Set     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> </ul>"},{"location":"text/#test-string","title":"Test string","text":"<p>Set the test string to use when measuring the font.</p> <pre><code>txt.style.setTestString(text);\n</code></pre>"},{"location":"text/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"text/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"text/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"textedit/","title":"Edit","text":""},{"location":"textedit/#introduction","title":"Introduction","text":"<p>Create an input text object above a text object to edit string content.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"textedit/#live-demos","title":"Live demos","text":"<ul> <li>Text edit</li> <li>Text area</li> <li>Number edit</li> <li>With rexui-Label</li> </ul>"},{"location":"textedit/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textedit/#install-plugin","title":"Install plugin","text":""},{"location":"textedit/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextexteditplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexteditplugin.min.js', true);\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = scene.plugins.get('rextexteditplugin').add(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = scene.plugins.get('rextexteditplugin').edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextEditPlugin from 'phaser3-rex-plugins/plugins/textedit-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextEdit',\nplugin: TextEditPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = scene.plugins.get('rexTextEdit').add(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = scene.plugins.get('rexTextEdit').edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { TextEdit, Edit } from 'phaser3-rex-plugins/plugins/textedit.js';\n</code></pre></li> <li>Open editor<ul> <li>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.     <pre><code>var editor = new TextEdit(textGameObject, config);\n</code></pre></li> <li>Open editor directly     <pre><code>var editor = Edit(textGameObject, config);\n</code></pre></li> </ul> </li> </ul>"},{"location":"textedit/#open-text-editor","title":"Open text editor","text":"<p>Open editor directly.</p> <pre><code>var editor = scene.plugins.get('rexTextEdit').edit(textObject, {\n// inputType: 'text',   // 'text'|'password'|'textarea'|...\n// type: 'text',    // 'text'|'password'|'textarea'|...\n\n// enterClose: true,\n// selectAll: false,\n\n// onOpen: undefined,\n// onTextChanged: undefined,\n// onClose: undefined,\n\n// text: '',\n});\n// var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose);\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, or tag text object.</li> <li><code>config</code> : <ul> <li><code>config.inputType</code>, or <code>config.type</code> : <ul> <li><code>'text'</code> (default), or </li> <li><code>'password'</code></li> <li><code>'number'</code></li> </ul> </li> <li><code>config.onOpen</code> : Callback invoked when input text is created.     <pre><code>function (textObject) {\n}\n</code></pre></li> <li><code>config.onTextChanged</code> : Callback invoked when input text changed.     <pre><code>function (textObject, text) {\ntextObject.text = text;\n}\n</code></pre></li> <li><code>config.onClose</code> : Callback invoked when input text is closed. This parameter is valid only when <code>onClose</code> parameter is not given.     <pre><code>function (textObject) {\n}\n</code></pre></li> <li><code>enterClose</code> : <ul> <li><code>true</code> : Close input text when enter-key was pressed. Default value is <code>true</code> if <code>inputType</code> is not <code>'textarea'</code>.</li> <li><code>false</code> : If <code>inputType</code> is set to <code>'textarea'</code>, default value will be <code>false</code>.</li> </ul> </li> <li><code>config.selectAll</code> : Set <code>true</code> to select all text.</li> <li><code>config.text</code> : Initial string content. Default is the string content of textObject.</li> <li>More configuration parameters...</li> </ul> </li> <li><code>onClose</code> : Callback invoked when input text is closed.     <pre><code>var callback = function(textObject) {\n}\n</code></pre></li> </ul> <p>Create a text editor (input element) above text object.</p> <ul> <li>Size, font size, font family, font color, background color of text editor will be equal to text object.</li> <li>Text object will be invisible when text editor is opened.</li> <li>Store reference of text editor at <code>textObject._editor</code>.</li> <li>Text editor will be closed when <ul> <li>Press enter key and <code>enterClose</code> is set, or</li> <li>Touch outside of editor, or</li> <li>Open another text editor, or</li> <li>Call <code>editor.close()</code></li> </ul> </li> </ul> <p>Limitation of text game object</p> <p>Don't assign height property of text game object. Because that text input element does not have vertical align setting, text will always align to middle/center.</p>"},{"location":"textedit/#create-instance","title":"Create instance","text":"<p>Add text-edit behavior, will open editor under <code>'pointerdown'</code> event.</p> <pre><code>var editor = scene.plugins.get('rexTextEdit').add(textGameObject, {\n// type: 'text',   //'text','password','number'\n// enterClose: true,\n// selectAll: false,\n\n// onOpen: undefined,\n// onTextChanged: undefined,\n// onClose: undefined,\n\n// text: '',\n});\n</code></pre>"},{"location":"textedit/#open-editor","title":"Open editor","text":"<pre><code>editor.open(config);\n// editor.open(config, onClose);\n</code></pre> <ul> <li><code>config</code><ul> <li><code>config.type</code> : <ul> <li><code>text</code> (default), or </li> <li><code>password</code></li> </ul> </li> <li><code>config.text</code> : Initial string content.</li> <li><code>config.onTextChanged</code> : Callback invoked when input text changed.     <pre><code>function (textObject, text) {\ntextObject.text = text;\n}\n</code></pre></li> <li>More configuration parameters...</li> </ul> </li> <li><code>onClose</code> : Callback invoked when text editor is closed.     <pre><code>var callback = function(textObject) {\n}\n</code></pre></li> </ul> <p>Create a text editor (input element) above text object.</p> <ul> <li>Size, font size, font family, font color, background color of text editor will be equal to text object.</li> <li>Text object will be invisible when text editor is opened.</li> </ul>"},{"location":"textedit/#is-opened","title":"Is opened","text":"<pre><code>var isOpened = editor.isOpened;\n</code></pre>"},{"location":"textedit/#close-editor","title":"Close editor","text":"<pre><code>editor.close();\n</code></pre> <p>Text editor will be closed when </p> <ul> <li>Press enter key, or</li> <li>Touch outside of editor, or</li> <li>Open another text editor, or</li> <li>Call <code>editor.close()</code></li> </ul>"},{"location":"textedit/#get-dom","title":"Get DOM","text":"<pre><code>var inputText = editor.inputText.node;\n</code></pre>"},{"location":"textedit/#bypass-key-input","title":"Bypass key input","text":"<p>See InputText/Bypass key input</p>"},{"location":"textedit/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"textpage/","title":"Page","text":""},{"location":"textpage/#introduction","title":"Introduction","text":"<p>Display text page by page on text object, bbcode text object, or tag text object.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"textpage/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text + page + typing</li> </ul>"},{"location":"textpage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textpage/#install-plugin","title":"Install plugin","text":""},{"location":"textpage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextextpageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextextpageplugin.min.js', true);\n</code></pre></li> <li>Add page behavior     <pre><code>var page = scene.plugins.get('rextextpageplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextPagePlugin from 'phaser3-rex-plugins/plugins/textpage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextPage',\nplugin: TextPagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add page behavior     <pre><code>var page = scene.plugins.get('rexTextPage').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextPage from 'phaser3-rex-plugins/plugins/textpage.js';\n</code></pre></li> <li>Add page behavior     <pre><code>var page = new TextPage(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"textpage/#create-instance","title":"Create instance","text":"<pre><code>var page = scene.plugins.get('rexTextPage').add(textGameObject, {\n// text: '',              // content in string or array\n// maxLines: undefined,\n// pageBreak: '\\f\\n',\n});\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>text</code> : content in string or array, optional</li> <li><code>maxLines</code> : Max lines of a page.<ul> <li><code>undefined</code> : Default value. For Text object, bbcode text object, tag text object<ul> <li>Use style property <code>maxLines</code>.</li> <li>Count number of lines if it has <code>fixedHeight</code> setting.</li> </ul> </li> <li>A number : Max lines of a page, for bitmap text object</li> </ul> </li> <li><code>pageBreak</code> : Symbol of page-break. Default value is <code>'\\f\\n'</code>. String after this page-break symbol will be placed to a new page. </li> </ul>"},{"location":"textpage/#set-content","title":"Set content","text":"<ul> <li>Set content     <pre><code>page.setText(content);\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Can insert <code>pageBreak</code> symbol.</li> </ul> </li> <li>Append content     <pre><code>page.appendText(content);\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Can insert <code>pageBreak</code> symbol.</li> </ul> </li> <li>Clear content     <pre><code>page.clearText()\n</code></pre></li> <li>Append page     <pre><code>page.appendPage(content);   // content in string or array\n</code></pre><ul> <li><code>content</code> : String, number, or string array. Don't insert <code>pageBreak</code> symbol.</li> </ul> </li> </ul>"},{"location":"textpage/#show-page","title":"Show page","text":"<ul> <li>Display current page     <pre><code>page.showPage();\n</code></pre></li> <li>Display next page     <pre><code>page.showNextPage();\n</code></pre></li> <li>Display previous page     <pre><code>page.showPreviousPage();\n</code></pre></li> <li>Display first page     <pre><code>page.showFirstPage();\n</code></pre></li> <li>Display last page     <pre><code>page.showLastPage();\n</code></pre></li> <li>Display page by index     <pre><code>page.showPage(index);\n</code></pre></li> </ul> <p>Note</p> <p>Initial page index is <code>-1</code>, so user could call <code>page.showNextPage()</code> to display first page.</p>"},{"location":"textpage/#get-lines-of-page","title":"Get lines of page","text":"<ul> <li>Get lines of current page     <pre><code>var lines = page.getPage();\n</code></pre></li> <li>Get lines of next page     <pre><code>var lines = page.getNextPage();\n</code></pre></li> <li>Get lines of previous page     <pre><code>var lines = page.getPreviousPage();\n</code></pre></li> <li>Get lines of first page     <pre><code>var lines = page.getFirstPage();\n</code></pre></li> <li>Get lines of last page     <pre><code>var lines = page.getLastPage();\n</code></pre></li> <li>Get lines of page by index     <pre><code>var lines = page.getPage(index);\n</code></pre></li> </ul>"},{"location":"textpage/#other-properties","title":"Other properties","text":"<ul> <li>Is last page     <pre><code>var isLastPage = page.isLastPage;\n</code></pre></li> <li>Is first page     <pre><code>var isLastPage = page.isFirstPage;\n</code></pre></li> <li>Current page index     <pre><code>var pageIndex = page.pageIndex;\n</code></pre></li> <li>Number of pages     <pre><code>var pageIndex = page.pageCount;\n</code></pre></li> </ul>"},{"location":"textplayer/","title":"Text player","text":""},{"location":"textplayer/#introduction","title":"Introduction","text":"<p>Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"textplayer/#live-demos","title":"Live demos","text":"<ul> <li>Play</li> <li>Sprite control</li> <li>Show page</li> <li>Fast typing</li> <li>Custom game object</li> <li>Fade out page</li> <li>Choices</li> </ul>"},{"location":"textplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"textplayer/#install-plugin","title":"Install plugin","text":""},{"location":"textplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextextplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextextplayerplugin.min.js', true);\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = scene.add.rexTextPlayer(config);\n</code></pre></li> </ul>"},{"location":"textplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextPlayerPlugin from 'phaser3-rex-plugins/plugins/textplayer-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextPlayerPlugin',\nplugin: TextPlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = scene.add.rexTextPlayer(config);\n</code></pre></li> </ul>"},{"location":"textplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextPlayer from 'phaser3-rex-plugins/plugins/textplayer.js';\n</code></pre></li> <li>Add text-player object     <pre><code>var txt = new TextPlayer(scene, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"textplayer/#create-instance","title":"Create instance","text":"<pre><code>var txt = scene.add.rexTextPlayer({\nx: 0, y: 0,\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\noffsetX: 0,\noffsetY: 0,\nleftSpace: 0,\nrightSpace: 0,\n},\n\nparser: {\ndelimiters: '[]',\ncomment: '//',\n// translateTagNameCallback: undefined,\n}\n\nwrap: {\ncallback: undefined, // Default wrapping callback is dynamicText.runWordWrap()\nlineHeight:\n// maxLines: \npadding: { top: 0, left: 0, right: 0, bottom: 0 },\nletterSpacing: 0,\nhAlign: 0, // 0|'left'|1|'center'|2|'right'\nvAlign: 0, // 0|'top'|1|'center'|2|'bottom'\ncharWrap: false\n},\n\ntyping: {\nspeed: 250,\nonTypingStart: function (children) {\nfor (var i = 0, cnt = children.length; i &lt; cnt; i++) {\nchildren[i].setVisible(false);\n}\n},  // Default: set all children invisible\nanimation: undefined,  // Default: no typing animation, only invoke onStart callback\nanimation: {\nduration: 1000,\nyoyo: false,\nonStart: function(child) {\nchild.setVisible();\n},\nonProgress: function(child, t) {\n\n},\nonComplete: function(child) {\n\n}\n},\n\n// skipSpace: false,\n\n// minSizeEnable: false,\n\nfadeOutPage: undefined,  // Default: no fade-out-page animation\nfadeOutPage: function(children) {\nreturn eventEmitter;\nreturn promise;\n},\n\n},\n\nimages: {\n// key: {width, height}\n// key: {key, frame, width, height}\n},\n\nsprites: {\n// createCallback: 'sprite',\n// createCallback: function(scene, ...) { return gameObject; },\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() },\n\n}, sounds: {\nbgm: {\ninitial: undefinied,\nloop: true,\nfade: 500\n},\nbgm2: {\ninitial: undefinied,\nloop: true,\nfade: 500\n}\n},\n\nclickTarget: this,  // This text player    \nnextPageInput: null,\n// ignoreNextPageInput: false,\n\ntext: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this text-player game object.</li> <li><code>width</code> : Fixed width.<ul> <li>A number : Width of this text-player game object. <ul> <li>Wrap-width is <code>width - padding.left - padding.right</code>.</li> </ul> </li> <li><code>undefined</code> : Width of this text-player game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>height</code> : Fixed height.<ul> <li>A number : Height of this text-player game object. </li> <li><code>undefined</code> : Height of this text-player game object will be set after invoked <code>runWordWrap</code> method.</li> </ul> </li> <li><code>padding</code> : Padding of bounds.<ul> <li>A number </li> <li><code>padding.left</code>, <code>padding.right</code>, <code>padding.top</code>, <code>padding.bottom</code></li> </ul> </li> <li><code>background</code> : Properties of background round-rectangle.<ul> <li><code>background.color</code> : Fill color.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>background.color2</code> : Gradient fill color.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>background.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>background.stroke</code> : Stroke color.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>background.strokeThickness</code> : Line width of stroke.</li> <li><code>background.cornerRadius</code> : Corner-radius of round rectangle.<ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner    </li> </ul> </li> <li><code>background.cornerIteration</code> : Iteration of corner-radius.<ul> <li><code>null</code> : Draw corner-radius via arc directly.</li> <li>A number : Draw corner-radius via lines</li> </ul> </li> </ul> </li> <li><code>innerBounds</code> : Properties of inner-bounds.<ul> <li><code>innerBounds.color</code> : Fill color.<ul> <li><code>null</code> : No filling.</li> </ul> </li> <li><code>innerBounds.color2</code> : Gradient fill color.<ul> <li><code>null</code> : No gradient filling.</li> </ul> </li> <li><code>innerBounds.horizontalGradient</code> : Horizontal or vertical gradient filling.<ul> <li><code>true</code> : Horizontal gradient filling.</li> <li><code>false</code> : Vertical gradient filling.</li> </ul> </li> <li><code>innerBounds.stroke</code> : Stroke color.<ul> <li><code>null</code> : No stroke.</li> </ul> </li> <li><code>innerBounds.strokeThickness</code> : Line width of stroke.</li> </ul> </li> <li><code>style</code> : Initial text-style.<ul> <li><code>style.bold</code> : Bold</li> <li><code>style.italic</code> : Italic</li> <li><code>style.fontSize</code> : Font size</li> <li><code>style.fontFamily</code> : Font family</li> <li><code>style.color</code> : Fill color</li> <li><code>style.stroke</code> : Stroke color</li> <li><code>style.strokeThickness</code> : Line width of stroke.</li> <li><code>style.shadowColor</code> : Shadow color.<ul> <li><code>null</code> : No shadow.</li> </ul> </li> <li><code>style.shadowOffsetX</code> : OffsetX of shadow.</li> <li><code>style.shadowOffsetY</code> : OffsetY of shadow.</li> <li><code>style.shadowBlur</code> : Blur of shadow.</li> <li><code>style.offsetX</code> : OffsetX.</li> <li><code>style.offsetY</code> : OffsetY.</li> <li><code>style.leftSpace</code> : Extra space between this character and previous character.</li> <li><code>style.rightSpace</code> : Extra space between this character and next character.</li> <li><code>style.align</code> : Override default line-alignment setting.<ul> <li><code>0</code>, <code>'left'</code>, <code>'top'</code> : Align remainder lines to left/top.</li> <li><code>1</code>, <code>'center'</code> : Align remainder lines to center.</li> <li><code>2</code>, <code>'right'</code>, <code>'bottom'</code> : Align remainder lines to right/bottom.</li> <li><code>undefined</code> : Use default line-alignment setting.</li> </ul> </li> </ul> </li> <li><code>wrap</code> : Default configuration Horizontal/Vertical wrapping.</li> <li><code>typing</code> :<ul> <li><code>typing.speed</code> : Default typing speed of each character.</li> <li><code>typing.onTypingStart</code> : Callback when typing start. Default is to set all children to invisible.     <pre><code>function (children) {\nfor (var i = 0, cnt = children.length; i &lt; cnt; i++) {\nchildren[i].setVisible(false);\n}\n</code></pre><ul> <li><code>children</code> : Array of child.</li> </ul> </li> <li><code>typing.animation</code> : Configuration of typing animation<ul> <li><code>undefined</code> : No typing animation, default behavior</li> </ul> </li> <li><code>typing.animation.duration</code> : Duration of typing animation.</li> <li><code>typing.animation.yoyo</code> :<ul> <li><code>false</code> : Mapping progress <code>t</code> to <code>0</code> - <code>1</code>. Default behavior.</li> <li><code>true</code> : Mapping progress <code>t</code> to <code>0</code> - <code>1</code> - <code>0</code>.</li> </ul> </li> <li><code>typing.animation.onStart</code> : Callback when typing start of a character. Default is to set this child to visible.     <pre><code>function(child) { child.setVisible(); }\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.animation.onProgress</code> : Callback when progress typing animation.      <pre><code>function(child, t) {\n}\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.animation.onComplete</code> : Callback when typing animation complete.      <pre><code>function(child) {\n}\n</code></pre><ul> <li>child</li> </ul> </li> <li><code>typing.skipSpace</code> :<ul> <li><code>false</code> : Will have delay when typing space character. Default behavior.</li> <li><code>true</code> : Typing space character immediately.</li> </ul> </li> <li><code>typing.minSizeEnable</code> : <ul> <li><code>true</code> : Resize to minimun size for showing all visible characters.</li> <li><code>false</code> : Won't resize during typing. Default behavior.</li> </ul> </li> <li><code>typing.fadeOutPage</code> : Callback to fade-out characters of previous page.<ul> <li><code>undefined</code> : Default value, no fade-out-page animation.</li> <li>Callback     <pre><code>function(characters) {\nreturn tween;  // eventEmitter\nreturn promise;\n}\n</code></pre><ul> <li><code>characters</code> : Fade out targets.</li> <li>Return value could be tween object (event emitter), or promise object.<ul> <li>Tween object : Wait until <code>'complete'</code> event triggering.</li> <li>Promise object : Wait until promoise resolving.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>parser</code> : Configuration of parser.<ul> <li><code>parser.delimiters</code> : Delimiters of tag. Default value is <code>'[]'</code>.</li> <li><code>parser.comment</code> : Start word of a comment line. Default value is <code>'//'</code>.<ul> <li><code>null</code>, or <code>false</code> : No comment line.</li> </ul> </li> <li><code>parser.translateTagNameCallback</code> : Callback to translate tag-name<ul> <li><code>undefined</code> : Use original tag-name. Default behavior.</li> <li>A function, return new tag name.     <pre><code>function(tagName) {\nreturn newTagName;\n}\n</code></pre></li> </ul> </li> </ul> </li> <li><code>images</code> : Configuration of images.</li> <li><code>sprites</code> : Configuration of sprites.<ul> <li><code>sprites.createCallback</code> : <ul> <li><code>'sprite'</code> : Create sprite game object. Default behavior.</li> <li><code>'image'</code> : Create image game object.</li> <li>Callback to return a game object     <pre><code>function(scene, textureKey, frameName) {\n// return scene.add.sprite(0, 0, textureKey, frameName);\n}\n</code></pre></li> </ul> </li> <li><code>sprites.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a sprite.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>sprite.fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>sprite.fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>sprites.viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>true</code> : Attach <code>vpx</code>, <code>vpy</code>, <code>vp</code> to sprite game object.<ul> <li><code>vpx</code>, <code>vpy</code> : Number between <code>0</code>~<code>1</code>. Proportion of viewport.</li> <li><code>vp</code> : Viewport in rectangle</li> </ul> </li> <li><code>false</code> : Do nothing, default behavior.</li> </ul> </li> <li><code>sprites.symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul> </li> <li><code>sounds</code> : Configuration of sound effect, or background music.<ul> <li><code>sounds.bgm.initial</code>, <code>sounds.bgm2.initial</code> : Initial music instance created by <code>scene.sound.add(key)</code> before starting playing content.<ul> <li><code>undefined</code> : No initial music instance, default value.</li> </ul> </li> <li><code>sounds.bgm.loop</code>, <code>sounds.bgm2.loop</code> :<ul> <li><code>true</code> : Loop background music, default behavior.</li> <li><code>false</code> : Play background music once.</li> </ul> </li> <li><code>sounds.bgm.fade</code>, <code>sounds.bgm2.fade</code> :<ul> <li><code>0</code> : No fade-in or fade-out when starting or stopping a background music.</li> <li>A number : Fade-in or fade-out (cross-fade) when starting or stopping a background music. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>nextPageInput</code> : Wait condition to type next page<ul> <li><code>null</code>, or <code>false</code> : Stop tying next page. Default behavior<ul> <li>Typing next manually via <code>txt.typingNextPage()</code>.</li> </ul> </li> <li><code>'click'</code> : Wait click.</li> <li><code>'click|2000'</code> : Wait one of condition: click, or 2000ms.</li> <li><code>'click|enter|2000'</code> : Wait one of condition: click, enter key down, or 2000ms.</li> <li>A function callback :      <pre><code>function(callback) {\n// Invoke `callback()` to continue typing\n}\n</code></pre></li> </ul> </li> <li><code>clickTarget</code> : Click target, default is text player itself.<ul> <li><code>scene</code> : Any pointer down on this scene.</li> </ul> </li> <li><code>ignoreNextPageInput</code> : Set <code>true</code> to continue typing next page without any waiting.</li> <li><code>text</code> : Content of text to play.</li> </ul> <p>or</p> <pre><code>var txt = scene.add.rexTextPlayer(x, y, width, height, config);\n</code></pre> <p>or</p> <pre><code>var txt = scene.add.rexTextPlayer(x, y, config);\n</code></pre> <p>Add textplayer from JSON</p> <pre><code>var txt = scene.make.rexTextPlayer({\nx: 0,\ny: 0,\n\n// origin: {x: 0.5, y: 0.5},\n// fill: null,\n\nadd: true\n});\n</code></pre>"},{"location":"textplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextPlayer extends TextPlayer {\nconstructor(scene, x, y, config) {\nsuper(scene, x, y, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyTextPlayer(scene, x, y, config);\n</code></pre></li> </ul>"},{"location":"textplayer/#game-object-manager","title":"Game object manager","text":"<pre><code>txt.addGameObjectManager({\nname: goType,\ncreateGameObject: function(scene, ...) {\nreturn gameObject\n},\n\n// fade: 500,\n// fade: {mode: 'tint', time: 500},\n\n// viewportCoordinate: false,\n// viewportCoordinate: { viewport: new Phaser.Geom.Rectangle() }\n\n// symbols: undefined,  // { key:value },\n})\n</code></pre> <ul> <li><code>name</code> : Name of this game object manager, a string.</li> <li><code>createGameObject</code> : Callback to return a game object           <pre><code>function(scene, a, b, c) {\n// return gameObject;\n}\n</code></pre><ul> <li><code>a</code>, <code>b</code>, <code>c</code> : Parameters pass from <code>[goType.name=a,b,c]</code> </li> </ul> </li> <li><code>fade</code> : Tint-fade (if game object has <code>tint</code> property) or alpha-fade game object when creating or destroying a game object.<ul> <li><code>0</code> : No fade-in or fade-out when adding or removing a game object.</li> <li>A number : Duration of fading. Default value is <code>500</code>.</li> <li>A plain object contains <code>mode</code>, <code>time</code><ul> <li><code>fade.mode</code> : Fade mode<ul> <li><code>'tint'</code>, or <code>0</code> : Fade-in or fade-out via <code>tint</code> property.</li> <li><code>'alpha'</code>, or <code>1</code> : Fade-in or fade-out via <code>alpha</code> property. </li> <li><code>'revealUp'</code>, or <code>2</code> : Reveal up for fade-in.</li> <li><code>'revealDown'</code>, or <code>3</code> : Reveal down for fade-in.</li> <li><code>'revealLeft'</code>, or <code>4</code> : Reveal left for fade-in.</li> <li><code>'revealRight'</code>, or <code>5</code> : Reveal right for fade-in.</li> </ul> </li> <li><code>fade.time</code> : Duration of fading. Default value is <code>500</code>.</li> </ul> </li> </ul> </li> <li><code>viewportCoordinate</code> : Apply viewportCoordinate behavior to sprite game object.<ul> <li><code>false</code> : Do nothing, default behavior.</li> <li><code>true</code>, or an object :<ul> <li><code>viewport</code> : <ul> <li><code>undefined</code> : Rectangle of display area under main camera of current scene. Default value.</li> <li>A rectangle</li> </ul> </li> </ul> </li> </ul> </li> <li><code>symbols</code> : Convert string value to number value when Set or Ease property of game object.    <ul> <li>A plain object contains string key and number value.</li> </ul> </li> </ul>"},{"location":"textplayer/#built-in-commands","title":"Built-in commands","text":"<p><code>goType</code> : <code>name</code> parameter in config of <code>txt.addGameObjectManager</code> method</p> <ul> <li>Add game object : <code>[goType.name=a,b,c]</code><ul> <li>Tint-fade-in, or alpha-fade-in if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove game object : <code>[/goType.name]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all game objects : <code>[/goType]</code><ul> <li>Tint-fade-out, or alpha-fade-out if <code>fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[goType.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[goType.name.x=value]</code>, <code>[goType.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[goType.name.prop.easeMode=value,duration]\n[goType.name.prop.easeMode=value,duration,repeat]\n[goType.name.prop.easeMode=value,duration,easeFunction,repeat]\n[goType.name.prop.easeMode=value]\n</code></pre><ul> <li><code>prop</code> : Any number property of this sprite.</li> <li><code>easeMode</code> : One of these modes<ul> <li><code>to</code>, <code>toLeft</code>, <code>toRight</code>, <code>toUp</code>, <code>toDown</code></li> <li><code>yoyo</code>, <code>yoyoLeft</code>, <code>yoyoRight</code>, <code>yoyoUp</code>, <code>yoyoDown</code></li> <li><code>from</code>, <code>fromLeft</code>, <code>fromRight</code>, <code>fromUp</code>, <code>fromDown</code> </li> </ul> </li> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Wait ease task of game object's number property : <code>[wait=goType.name.prop]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait a game objects are destroyed : <code>[wait=goType.name]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n// prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait all game objects are destroyed : <code>[wait=goType]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait boolean data in game object's data manager set to <code>true</code>/<code>false</code> : <code>[wait=goType.name.dataKey]</code>/<code>[wait=goType.name.!dataKey]</code><ul> <li>Also fire event <code>'wait.' + goType</code> <pre><code>txt.on('wait.' + goType, function(name, prop) {\n})\n</code></pre></li> </ul> </li> </ul>"},{"location":"textplayer/#typing-content","title":"Typing content","text":"<pre><code>txt.play(content);\n</code></pre> <p>or</p> <pre><code>txt.playPromise(content)\n.then(function(){\n// Typing content complete\n})\n</code></pre>"},{"location":"textplayer/#show-current-page","title":"Show current page","text":"<pre><code>txt.showPage();\n</code></pre> <ul> <li>Set typing speed to <code>0</code>.</li> <li>Set animation progress to <code>1</code>.</li> <li>Skip all waiting events.</li> <li>Stop current sound effects, and ignore remainder sound effects.</li> </ul>"},{"location":"textplayer/#typing-next-page","title":"Typing next page","text":"<pre><code>txt.typingNextPage();\n</code></pre> <ul> <li>Set <code>nextPageInput</code> to <code>null</code>, or <code>false</code> in config.</li> </ul>"},{"location":"textplayer/#ignore-next-page-input","title":"Ignore next page input","text":"<ul> <li>Ignore next page input     <pre><code>txt.setIgnoreNextPageInput();\n</code></pre></li> <li>Rollback waiting next page input     <pre><code>txt.setIgnoreNextPageInput(false);\n</code></pre></li> </ul>"},{"location":"textplayer/#pause","title":"Pause","text":"<ul> <li>Pause typing and typing animation     <pre><code>txt.pause();\n</code></pre></li> <li>Pause typing only     <pre><code>txt.pauseTyping();\n</code></pre></li> </ul>"},{"location":"textplayer/#resume","title":"Resume","text":"<ul> <li>Resume typing and typing animation     <pre><code>txt.resume();\n</code></pre></li> </ul>"},{"location":"textplayer/#typing-speed","title":"Typing speed","text":"<ul> <li>Get<ul> <li>Default typing speed     <pre><code>var speed = txt.defaultTypingSpeed;\n</code></pre></li> <li>Current typing speed     <pre><code>var speed = txt.typingSpeed;\n</code></pre></li> </ul> </li> <li>Set<ul> <li>Default typing speed     <pre><code>txt.setDefaultTypingSpeed(speed);\n</code></pre> <pre><code>txt.defaultTypingSpeed = speed;\n</code></pre></li> <li>Current typing speed     <pre><code>txt.setTypingSpeed(speed);\n// txt.setTypingSpeed();    // Set speed to default speed\n</code></pre> <pre><code>txt.typingSpeed = speed;\n</code></pre></li> </ul> </li> </ul>"},{"location":"textplayer/#time-scale","title":"Time scale","text":"<p>Time scale of typing, typing animation, sprite animation and easing of sprite's properties.</p> <ul> <li>Get     <pre><code>var timeScale = txt.timeScale;\n</code></pre></li> <li>Set     <pre><code>txt.setTimeScale(timeScale);    </code></pre> <pre><code>txt.timeScale = timeScale;\n</code></pre></li> </ul>"},{"location":"textplayer/#status","title":"Status","text":"<ul> <li>Is playing : After <code>txt.play(content)</code>, before typing all pages completed     <pre><code>var isPlaying = txt.isPlaying\n</code></pre></li> <li>Is page typing : After <code>txt.play(content)</code>, or <code>txt.typingNextPage()</code>, before page typing completed     <pre><code>var isPageTyping = txt.isPageTYyping;\n</code></pre></li> </ul>"},{"location":"textplayer/#events","title":"Events","text":"<ul> <li>On typing content complete     <pre><code>txt.on('complete', function() {\n\n})\n</code></pre></li> <li>On typing a character or an image     <pre><code>txt.on('typing', function(child) {\nif (child.type === 'text') {\nvar character = child.text;\n} else {\nvar textureLey = child.key;\nvar frameKey = child.frame;\n}\n})\n</code></pre></li> <li>On typing a page start     <pre><code>txt.on('page.start', function() {\n\n})\n</code></pre></li> <li>On typing a page complete     <pre><code>txt.on('page.complete', function() {\n\n})\n</code></pre></li> </ul>"},{"location":"textplayer/#tags-of-content","title":"Tags of content","text":""},{"location":"textplayer/#content","title":"Content","text":"<p>These lines will be skipped :</p> <ul> <li>Empty line, which only has space characters.</li> <li>Comment line, start with <code>'//'</code>.</li> </ul> <p>New line symbol <code>'\\n'</code> will be removed, use <code>[r]</code> to insert a new line character.</p>"},{"location":"textplayer/#content-output-switch","title":"Content output switch","text":"<ul> <li>Turn off content output : <code>[content.off]</code></li> <li>Turn on content output : <code>[content.on]</code></li> </ul>"},{"location":"textplayer/#content-output-enable","title":"Content output enable","text":"<ul> <li>Content won't output if <code>parser.setContentOutputEnable(false)</code> under custom tag events<ul> <li>Fire <code>'parser.+custom#content'</code> event if conent is ignored now     <pre><code>txt.on('parser.+custom#content', function(parser, content) {\n\n})\n</code></pre></li> </ul> </li> <li>Invoke <code>parser.setContentOutputEnable()</code> to turn on content output back.</li> </ul>"},{"location":"textplayer/#text-style","title":"Text style","text":"<ul> <li>Font color : <code>[color=red]content[/color]</code>, <code>[color=#FF0000]content[/color]</code></li> <li>Font size : <code>[size=24]content[/size]</code></li> <li>Bold : <code>[b]content[/b]</code></li> <li>Italic : <code>[i]content[/i]</code></li> <li>Stroke : <code>[stroke]content[/stroke]</code>, <code>[stroke=red]content[/stroke]</code><ul> <li><code>strokeThickness</code> is set in config</li> </ul> </li> <li>Shadow : <code>[shadow]content[/shadow]</code>, <code>[shadow=red]content[/shadow]</code><ul> <li><code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code> are set in config</li> </ul> </li> <li>Character offset Y : <code>[y=-8]c[/y]ontent</code></li> <li>Character offset X : <code>[x=10]c[/x]ontent</code></li> <li>Left space : <code>[left=10]c[/left]ontent</code></li> <li>Right space : <code>conten[right=10]t[/right]</code></li> <li>Line-align : <code>[align=left]</code>, <code>[align=center]</code>, <code>[align=right]</code></li> </ul>"},{"location":"textplayer/#new-line","title":"New line","text":"<ul> <li>New line : <code>[r]</code><ul> <li>New line via <code>\\n</code> will be ignored.</li> </ul> </li> </ul>"},{"location":"textplayer/#page-break","title":"Page break","text":"<ul> <li><code>[pagebreak]</code>, or <code>[pb]</code> : Put remainder characters to next page. </li> </ul>"},{"location":"textplayer/#image","title":"Image","text":"<p><code>[img=key]</code></p>"},{"location":"textplayer/#render-size","title":"Render size","text":"<ul> <li>Set render size In config     <pre><code>{\nimages: {\n// key: {width, height},\n// key: {key, frame, width, height}\n}\n}\n</code></pre></li> <li>Set render size by method     <pre><code>txt.addImage({\n// key: {width, height},\n// key: {key, frame, width, height}\n})\n</code></pre></li> <li>Use origin render size by default</li> </ul>"},{"location":"textplayer/#space","title":"Space","text":"<p><code>[space=width]</code></p>"},{"location":"textplayer/#typing-speed_1","title":"Typing speed","text":"<ul> <li>No typing : <code>[speed=0]</code></li> <li>Set speed : <code>[speed=1000]</code></li> <li>Back to default speed : <code>[/speed]</code></li> </ul>"},{"location":"textplayer/#sprite","title":"Sprite","text":"<ul> <li>Add sprite : <code>[sprite.name=textureKey,frameKey]</code><ul> <li>Tint-fade-in if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove sprite : <code>[/sprite.name]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Remove all sprites : <code>[/sprite]</code><ul> <li>Tint-fade-out if <code>sprite.fade</code> is not <code>0</code></li> </ul> </li> <li>Call method : <code>[sprite.name.methodName=value0,value1,value2]</code></li> <li>Set property : <code>[sprite.name.x=value]</code>, <code>[sprite.name.alpha=value]</code>, ....</li> <li>Ease property :      <pre><code>[sprite.name.x.to=value,duration]\n</code></pre> <pre><code>[sprite.name.x.to=value,duration,repeat]\n</code></pre> <pre><code>[sprite.name.x.to=value,duration,easeFunction,repeat]\n</code></pre> <pre><code>[sprite.name.x.to=value]\n</code></pre><ul> <li><code>duration</code> : Default value is <code>1000</code></li> <li><code>easeFunction</code> : Default value is <code>'Linear'</code></li> <li><code>repeat</code> : Default value is <code>0</code></li> </ul> </li> <li>Yoyo ease property :      <pre><code>[sprite.name.x.yoyo=value,duration]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value,duration,repeat]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value,duration,easeFunction,repeat]\n</code></pre> <pre><code>[sprite.name.x.yoyo=value]\n</code></pre></li> <li>Set texture : <code>[sprite.name.texture=textureKey,frameKey]</code></li> <li>Play animation : <code>[sprite.name.play=animationKey]</code>, or <code>[sprite.name.play=animationKey0,animationKey1,...]</code><ul> <li>Can play animation without adding sprite first.</li> </ul> </li> <li>Stop animation : <code>[/sprite.name.play]</code>, or <code>[sprite.name.stop]</code></li> <li>Pause animation : <code>[sprite.name.pause]</code></li> </ul>"},{"location":"textplayer/#sound-effect","title":"Sound effect","text":"<ul> <li>Play : <code>[se=key]</code>, <code>[se2=key]</code><ul> <li>Sound effect will be destroyed when complete</li> </ul> </li> <li>Play with fade in volume : <code>[se=key,1000]</code>, <code>[se2=key,1000]</code></li> <li>Fade in volume : <code>[se.fadein=1000]</code>, <code>[se2.fadein=1000]</code></li> <li>Fade out volume : <code>[se.fadeout=1000]</code>, <code>[se2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[se.fadeout=1000,stop]</code>, <code>[se2.fadeout=1000,stop]</code></li> <li>Set volume : <code>[se.volume=1]</code>, <code>[se2.volume=1]</code></li> </ul>"},{"location":"textplayer/#background-music","title":"Background music","text":"<ul> <li>Play, stop : <code>[bgm=key]</code>, <code>[/bgm]</code>, [bgm2=key]<code>,</code>[/bgm2]`<ul> <li>Previous background music will be stopped and destroyed.</li> <li>Cross fade to next background music if <code>sounds.bgm.fade</code>/<code>sounds.bgm2.fade</code> is not <code>0</code></li> </ul> </li> <li>Play with fade in volume : <code>[bgm=key,1000]</code>, <code>[bgm2=key,1000]</code></li> <li>Pause, resume : <code>[bgm.pause]</code>, <code>[/bgm.pause]</code>, <code>[bgm2.pause]</code>, <code>[/bgm2.pause]</code></li> <li>Fade in volume : <code>[bgm.fadein=1000]</code>, <code>[bgm2.fadein=1000]</code></li> <li>Fade out volume : <code>[bgm.fadeout=1000]</code>, <code>[bgm2.fadeout=1000]</code></li> <li>Fade out volume then stop : <code>[bgm.fadeout=1000,stop]</code>, <code>[bgm2.fadeout=1000,stop]</code></li> <li>Cross fade to another background music : <code>[bgm.cross=key,10000]</code>, <code>[bgm2.cross=key,10000]</code></li> <li>Set volume : <code>[bgm.volume=1]</code>, <code>[bgm2.volume=1]</code></li> <li>Mute : <code>[bgm.mute]</code>, <code>[bgm2.mute]</code>, <code>[bgm.unmute]</code>, <code>[bgm2.unmute]</code></li> </ul>"},{"location":"textplayer/#camera","title":"Camera","text":"<ul> <li>Fade-in effect : <code>[camera.fadein]</code>, <code>[camera.fadein=1000]</code>, or <code>[camera.fadein=duration,red,green,blue]</code></li> <li>Fade-out effect : <code>[camera.fadeout]</code>, <code>[camera.fadeout=1000]</code>, or <code>[camera.fadeout=duration,red,green,blue]</code></li> <li>Flash effect : <code>[camera.flash]</code>, <code>[camera.flash=1000]</code>, or <code>[camera.flash=duration,red,green,blue]</code></li> <li>Shake effect : <code>[camera.shake]</code>, <code>[camera.shake=1000]</code>, or <code>[camera.shake=duration,intensity]</code></li> <li>Zoom<ul> <li>Set zoom : <code>[camera.zoom=2]</code></li> <li>Zoom to : <code>[camera.zoom.to=1,1000]</code>, or <code>[camera.zoom.to=zoomValue,duration,Cubic]</code></li> </ul> </li> <li>Rotate<ul> <li>Set angle : <code>[camera.rotate=90]</code>, angle in degrees</li> <li>Rotate to : <code>[camera.rotate.to=0,1000]</code>, or <code>[camera.rotate.to=deg,duration,Cubic]</code>, angle in degrees</li> </ul> </li> <li>Scroll<ul> <li>Scroll x,y : <code>[camera.scroll=0,200]</code></li> <li>Scroll x,y to : <code>[camera.scroll.to=0,200,1000]</code>, or <code>[camera.rotate.to=x,y,duration,Cubic]</code></li> </ul> </li> </ul>"},{"location":"textplayer/#wait-conditions","title":"Wait conditions","text":"<ul> <li>Wait click : <code>[wait=click]</code>, <code>[click]</code><ul> <li>Also fire event <code>'wait.click'</code> <pre><code> txt.on('wait.click', function() {\n})\n</code></pre></li> </ul> </li> <li>Wait key-down : <code>[wait=enter]</code>, <code>[wait=space]</code>, ....<ul> <li>Also fire event <code>'wait.keydown'</code> <pre><code> txt.on('wait.keydown', function(keyName) {\n})\n</code></pre></li> </ul> </li> <li>Wait time : <code>[wait=1000]</code><ul> <li>Also fire event <code>'wait.time'</code> <pre><code> txt.on('wait.time', function(time) {\n})\n</code></pre></li> </ul> </li> <li>Wait sound effect : <code>[wait=se]</code>, <code>[wait=se2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> txt.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait background music : <code>[wait=bgm]</code>, <code>[wait=bgm2]</code><ul> <li>Also fire event <code>'wait.music'</code> <pre><code> txt.on('wait.music', function(music) {\n// var key = music.key;\n})\n</code></pre></li> </ul> </li> <li>Wait camera effect : <code>[wait=camera.fadein]</code>, <code>[wait=camera.fadeout]</code>, <code>[wait=camera.flash]</code>, <code>[wait=camera.shake]</code>, <code>[wait=camera.zoom]</code>, <code>[wait=camera.rotate]</code>, <code>[wait=camera.scroll]</code><ul> <li>Also fire event <code>'wait.camera'</code> <pre><code> txt.on('wait.camera', function(effectName) {\n// effectName : 'camera.fadein', 'camera.fadeout', 'camera.flash', 'camera.shake', 'camera.zoom', 'camera.rotate', 'camera.scroll'\n})\n</code></pre></li> </ul> </li> <li>Wait ease task of sprite's property : <code>[wait=sprite.name.prop]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code> txt.on('wait.sprite', function(name, prop) {\n})\n</code></pre></li> </ul> </li> <li>Wait all sprites are destroyed : <code>[wait=sprite]</code><ul> <li>Also fire event <code>'wait.sprite'</code> <pre><code> txt.on('wait.sprite', function(name, prop) {\n// name and prop parameter are `undefined` here\n})\n</code></pre></li> </ul> </li> <li>Wait callback : <code>[wait]</code>, or <code>[wait=xxx]</code> (<code>xxx</code> is any string which not been used in above case)<ul> <li>Fire event <code>'wait'</code> <pre><code>txt.on('wait', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> <li>Fire event <code>'wait.xxx'</code> <pre><code>txt.on('wait.xxx', function(callback) {\n// Invoke `callback()` to continue typing\n})\n</code></pre></li> </ul> </li> <li>Combine conditions : <code>[wait=cond0|cond1|...]</code><ul> <li>Wait click, or enter key down : <code>[wait=click|enter]</code></li> <li>Wait click, enter key down, or 100ms : <code>[wait=click|enter|1000]</code></li> </ul> </li> </ul>"},{"location":"textplayer/#custom-tag","title":"Custom tag","text":"<p>Assume that adding a custom tag : <code>[custom=10,20][/custom]</code></p> <ul> <li>On parse a <code>+custom</code> tag, will add a custom command child      <pre><code>txt.on('parser.+custom', function(parser, a, b, params) {\n// console.log('Parse +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters after <code>=</code></li> <li><code>params</code> : Arguments array used when executing <code>+custom</code>. Equal to <code>[a, b]</code> in this case.</li> <li>Disable content after this start tag     <pre><code>parser.setContentOutputEnable(false);\n</code></pre></li> </ul> </li> <li>On execute a <code>+custom</code> command child     <pre><code>txt.on('tag.+custom', function(a, b) {\n// console.log('Execute +custom tag:', a, b)\n})\n</code></pre><ul> <li><code>a</code>, <code>b</code>, ... : Parameters passed from <code>params</code> in <code>'parser.+custom'</code> event.</li> </ul> </li> <li>On parse a <code>-custom</code> tag, will add a custom command child      <pre><code>txt.on('parser.-custom', function(parser, params) {\n// console.log('Parse -custom tag')\n})\n</code></pre><ul> <li><code>params</code> : Arguments array used when executing <code>-custom</code>. Equal to <code>[]</code> in this case.</li> <li>Enable content after this start tag     <pre><code>parser.setContentOutputEnable(true);\n</code></pre></li> </ul> </li> <li>On execute a <code>-custom</code> command child     <pre><code>txt.on('tag.-custom', function(...params) {\n// console.log('Execute -custom tag')\n})\n</code></pre><ul> <li><code>params</code> : Parameters passed from <code>params</code> in <code>'parser.-custom'</code> event.</li> </ul> </li> </ul>"},{"location":"textplayer/#size","title":"Size","text":"<ul> <li>Resize canvas size     <pre><code>txt.setCanvasSize(width, height)\n</code></pre></li> <li>Reisze text wrapping size and canvas size.     <pre><code>txt.setSize(width, height);\n</code></pre>     or     <pre><code>txt.setFixedSize(width, height);\n</code></pre></li> <li>Resize to minimun size to show all visible characters.     <pre><code>txt.setToMinSize();\n</code></pre></li> </ul>"},{"location":"textplayer/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"textplayer/#create-mask","title":"Create mask","text":"<pre><code>var mask = txt.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"textplayer/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"texttranslation/","title":"Translation","text":""},{"location":"texttranslation/#introduction","title":"Introduction","text":"<p>Apply translated string (i18next) to text object, bbcode text object, tag text object, bitmap text object, or label game object</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"texttranslation/#live-demos","title":"Live demos","text":"<ul> <li>Inline resources</li> <li>External resources</li> <li>External yaml resource</li> </ul>"},{"location":"texttranslation/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"texttranslation/#install-plugin","title":"Install plugin","text":""},{"location":"texttranslation/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in scene's config     <pre><code>class Demo extends Phaser.Scene {\nconstructor() {\nsuper({\nkey: 'Scnee',\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rextexttranslationplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttranslationplugin.min.js',\nstart: true,\nmapping: 'translation'  // Add text-translation plugin to `scene.translation`\n}]\n},\n// ...\n});\n}\n// ...\n}\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>scene.plugins.get('rextexttranslationplugin').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre></li> <li>Add translation behavior     <pre><code>var translation = scene.plugins.get('rextexttranslationplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextTranslationPlugin from 'phaser3-rex-plugins/plugins/texttranslation-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextTranslation',\nplugin: TextTranslationPlugin,\nstart: true,\nmapping: 'translation'  // Add text-translation plugin to `scene.translation`\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>scene.plugins.get('rexTextTranslation').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre></li> <li>Add translation behavior     <pre><code>var translation = scene.plugins.get('rexTextTranslation').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins, i18next, i18next-http-backend from npm     <pre><code>npm i phaser3-rex-plugins\nnpm i i18next\nnpm i i18next-http-backend\n</code></pre></li> <li>Import class     <pre><code>import TextTranslationBehavior from 'phaser3-rex-plugins/plugins/texttranslation.js';\nimport i18next from 'i18next';\nimport Backend from 'i18next-http-backend';\nimport Awaitloader from 'phaser3-rex-plugins/plugins/awaitloader.js';\n</code></pre></li> <li>Initialize i18next during preload stage     <pre><code>Awaitloader.call(scene.load, function (successCallback, failureCallback) {\ni18next\n.use(Backend)\n.init({\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n}, successCallback);\n})\nTextTranslationBehavior.setI18Next(i18next);\n</code></pre><ul> <li><code>Awaitloader</code> : Using Awaitloader to load external resource.</li> <li><code>Backend</code> : <code>i18next-http-backend</code> module can be used to load external resource. </li> <li><code>TextTranslationBehavior.setI18Next(i18next)</code> : Pass <code>i18next</code> to TextTranslationBehavior.<ul> <li><code>TextTranslationBehavior.setI18Next</code> is a static method.    </li> </ul> </li> </ul> </li> <li>Add translation behavior     <pre><code>var translation = new TextTranslationBehavior(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttranslation/#initialize-i18next","title":"Initialize i18next","text":"<pre><code>scene.plugins.get('rexTextTranslation').initI18Next(scene, {\nlng: 'dev',\nns: 'translation',\n\n// resources: {\n//     'dev': {\n//         'translation': {\n//             key: value,  \n//         }\n//     }\n// }\n\n// debug: true,\n\n// backend: {\n//     loadPath: '',\n//     parse: function(data) { return JSON.parse(data); }\n// },\n})\n</code></pre> <p>or</p> <pre><code>i18next\n.use(Backend)\n.init(config, onComplete);\n</code></pre> <ul> <li><code>lng</code> : Language to use. Will fallback to <code>'dev'</code>.</li> <li><code>ns</code> : String or array of namespaces to load. Default value is <code>'translation'</code>.</li> <li><code>debug</code> : Logs info level to console output. Helps finding issues with loading not working. Default value is <code>false</code>.</li> <li><code>resources</code> : Resources to initialize with.</li> <li><code>backend.loadPath</code> : Path where resources get loaded from, or a function returning a path.     <pre><code>function(lngs, namespaces) { return customPath; }\n</code></pre></li> <li><code>backend.parse</code> : Parse data after it has been fetched. Optional.     <pre><code>function(data) { return JSON.parse(data); }\n</code></pre></li> </ul> <p>See also Configuration Options, and Backend Options</p>"},{"location":"texttranslation/#create-instance","title":"Create instance","text":"<pre><code>var translation = scene.plugins.get('rexTextTranslation').add(textGameObject, {\n// translationKey: '',\n// interpolation: {},\n\n// updateText: true,\n\n// setText: function(gameObject, text) { \n//     gameObject.setText(text); \n// }\n});\n</code></pre> <ul> <li><code>textObject</code> : text object, bbcode text object, tag text object, bitmap text object, or label game object</li> <li><code>translationKey</code> : Key in translation resource. See Essentials</li> <li><code>interpolation</code> : Integrating dynamic values into translation result. See Interpolation</li> <li><code>updateText</code> : <ul> <li><code>true</code> : Update text object via <code>translationKey</code>, and <code>interpolation</code>. Default behavior.</li> <li><code>false</code> : Don't update text object now.</li> </ul> </li> <li><code>setText</code> : Callback invoked when updating text object. Default value is     <pre><code>function(gameObject, text) {\ngameObject.setText(text);\n}\n</code></pre></li> </ul>"},{"location":"texttranslation/#set-translation-key","title":"Set translation key","text":"<pre><code>translation\n.setTranslationKey(key)\n.updateText()\n</code></pre>"},{"location":"texttranslation/#set-interpolation","title":"Set interpolation","text":"<ul> <li>Assign interpolation object     <pre><code>translation\n.setInterpolation(object)\n.updateText()\n</code></pre></li> <li>Update current interpolation object     <pre><code>translation\n.updateInterpolation(key, value)\n.updateText()\n</code></pre>     or     <pre><code>translation\n.updateInterpolation(object)\n.updateText()\n</code></pre></li> </ul>"},{"location":"texttranslation/#update-text","title":"Update text","text":"<p>Update text object via <code>translationKey</code>, and <code>interpolation</code>.</p> <pre><code>translation.updateText()\n</code></pre>"},{"location":"texttranslation/#change-language","title":"Change language","text":"<pre><code>scene.plugins.get('rexTextTranslation').changeLanguage(language);\n// scene.plugins.get('rexTextTranslation').changeLanguage(language, onComplete);\n</code></pre> <p>or</p> <pre><code>i18next.changeLanguage(language, onComplete);\n</code></pre> <p>All translation behavior will update text object after changing language.</p>"},{"location":"texttranslation/#set-default-namespace","title":"Set default namespace","text":"<pre><code>scene.plugins.get('rexTextTranslation').setDefaultNamespace(namespace);\n</code></pre> <p>or</p> <pre><code>i18next.setDefaultNamespace(namespace);\n</code></pre>"},{"location":"texttranslation/#translate-string","title":"Translate string","text":"<pre><code>var result = scene.plugins.get('rexTextTranslation').t(translationKey, interpolation);\n</code></pre> <p>or</p> <pre><code>var result = i18next.t(translationKey, interpolation);\n</code></pre>"},{"location":"texttranslation/#events","title":"Events","text":"<ul> <li>On language changed, triggered by <code>changeLanguage</code> method.     <pre><code>scene.plugins.get('rexTextTranslation').on('languageChanged', function (lng) {\n});\n</code></pre>     or     <pre><code>i18next.on('languageChanged', function (lng) {\n});\n</code></pre></li> </ul>"},{"location":"texttyping/","title":"Typing","text":""},{"location":"texttyping/#introduction","title":"Introduction","text":"<p>Typing text on text object, bbcode text object, or tag text object.</p> <ul> <li>Author: Rex</li> <li>Behavior of text object</li> </ul>"},{"location":"texttyping/#live-demos","title":"Live demos","text":"<ul> <li>BBCode text + page + typing</li> <li>Text wrap enable</li> <li>TextBox, see text-box.</li> </ul>"},{"location":"texttyping/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"texttyping/#install-plugin","title":"Install plugin","text":""},{"location":"texttyping/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextexttypingplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttypingplugin.min.js', true);\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = scene.plugins.get('rextexttypingplugin').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TextTypingPlugin from 'phaser3-rex-plugins/plugins/texttyping-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTextTyping',\nplugin: TextTypingPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = scene.plugins.get('rexTextTyping').add(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TextTyping from 'phaser3-rex-plugins/plugins/texttyping.js';\n</code></pre></li> <li>Add typing behavior     <pre><code>var typing = new TextTyping(textGameObject, config);\n</code></pre></li> </ul>"},{"location":"texttyping/#create-instance","title":"Create instance","text":"<pre><code>var typing = scene.plugins.get('rexTextTyping').add(textGameObject, {\n// wrap: false,\n// speed: 333,       // typing speed in ms\n// typeMode: 0,      //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle'\n// setTextCallback: function(text, isLastChar, insertIdx){ return text; }  // callback before set-text\n// setTextCallbackScope: null,   \n});\n</code></pre> <ul> <li><code>textObject</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>wrap</code> : <ul> <li><code>false</code> : Don't insert <code>\\n</code>, default behavior.</li> <li><code>true</code> : Insert <code>\\n</code> to wrap content according to style of text, to prevent typing jittering.</li> </ul> </li> <li><code>speed</code> : Typing speed in ms, default value is <code>333</code>.</li> <li><code>typeMode</code> :<ul> <li><code>'left-to-right'</code>, or <code>0</code> : Typing characters from left to right.</li> <li><code>'right-to-left'</code>, or <code>1</code> : Typing characters from right to left.</li> <li><code>'middle-to-sides'</code>, or <code>2</code> : Typing characters from middle to sides.</li> <li><code>'sides-to-middle'</code>, or <code>3</code> : Typing characters from sides to middle.</li> </ul> </li> <li><code>setTextCallback</code> : Callback befor set-text, to decorate display text.     <pre><code>function(text, isLastChar, insertIdx) { return text; }\n</code></pre></li> <li><code>setTextCallbackScope</code> : Scope of setTextCallback function.</li> </ul>"},{"location":"texttyping/#start-typing","title":"Start typing","text":"<pre><code>typing.start(text);\n// typing.start(text, speed); \n</code></pre> <ul> <li><code>text</code> : Typing content string.</li> <li><code>speed</code> : Typing speed in ms.</li> </ul>"},{"location":"texttyping/#typing-more-text","title":"Typing more text","text":"<pre><code>typing.appendText(text);\n</code></pre>"},{"location":"texttyping/#stop-typing","title":"Stop typing","text":"<pre><code>typing.stop();\n// typing.stop(true);;  // stop and show all text\n</code></pre>"},{"location":"texttyping/#pauseresume-typing","title":"Pause/Resume typing","text":"<ul> <li>Pause typing     <pre><code>typing.pause();\n</code></pre></li> <li>Resume typing     <pre><code>typing.resume();\n</code></pre></li> </ul>"},{"location":"texttyping/#set-typing-speed","title":"Set typing speed","text":"<pre><code>typing.setTypingSpeed(speed);  // speed in ms\n// typing.speed = speed;\n</code></pre> <p>Set speed in <code>typing</code> event or setTextCallback to change typing speed of remaining text.</p>"},{"location":"texttyping/#set-typing-mode","title":"Set typing mode","text":"<pre><code>typing.setTypeMode(mode);\n</code></pre> <ul> <li>typeMode :<ul> <li><code>'left-to-right'</code>, or <code>0</code> : typing characters from left to right.</li> <li><code>'right-to-left'</code>, or <code>1</code> : typing characters from right to left.</li> <li><code>'middle-to-sides'</code>, or <code>2</code> : typing characters from middle to sides, optional.</li> <li><code>'sides-to-middle'</code>, or <code>3</code> : typing characters from sides to middle.</li> </ul> </li> </ul>"},{"location":"texttyping/#events","title":"Events","text":"<ul> <li>On changing content of text game object :     <pre><code>typing.on('type', function(){\n\n});\n</code></pre></li> <li>On typing a character     <pre><code>typing.on('typechar', function(char){\n\n});\n</code></pre></li> <li>On typing completed :     <pre><code>typing.on('complete', function(typing, txt){});\n</code></pre></li> </ul>"},{"location":"texttyping/#status","title":"Status","text":"<ul> <li>Is typing     <pre><code>var isTyping = typing.isTyping;\n</code></pre></li> </ul>"},{"location":"textures/","title":"Textures","text":""},{"location":"textures/#introduction","title":"Introduction","text":"<p>Textures cache, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"textures/#usage","title":"Usage","text":""},{"location":"textures/#image-texture","title":"Image texture","text":"<ul> <li>Load image texture     <pre><code>scene.load.image(key, url);\n</code></pre>     Reference: Loader</li> <li>Load image texture via base64 string     <pre><code>scene.textures.addBase64(key, data)\n</code></pre></li> <li>Get image texture     <pre><code>var texture = scene.textures.get(key);\nvar image = texture.getSourceImage();\n// var width = image.width;\n// var height = image.height;\n</code></pre></li> <li>Get image texture from frame object     <pre><code>var texture = scene.textures.get(frameObject);\n</code></pre></li> </ul>"},{"location":"textures/#get-pixel","title":"Get pixel","text":"<pre><code>var color = scene.textures.getPixel(x, y, key);\n// var color = scene.textures.getPixel(x, y, key, frame);\n</code></pre> <p>Properties of <code>color</code></p> <ul> <li><code>r</code> : 0 ~ 255</li> <li><code>g</code> : 0 ~ 255</li> <li><code>b</code> : 0 ~ 255</li> <li><code>a</code> : 0 ~ 255</li> <li><code>color</code> : color integer</li> </ul> <pre><code>var alpha = scene.textures.getPixelAlpha(x, y, key);\n// var alpha = scene.textures.getPixelAlpha(x, y, key, frame);\n</code></pre> <p>alpha : 0 ~ 255</p> <p>Return <code>null</code> if the coordinates were out of bounds.</p>"},{"location":"textures/#generate-texture-from-array","title":"Generate texture from array","text":"<pre><code>var config = {\ndata: data,\n// 3x3:\n// [ '...',\n//   '...',\n//   '...' ]\npixelWidth: 1,    // pixel width of each data\npixelHeight: 1,   // pixel height of each data\npreRender: null,  // callback, function(canvas, ctx) {}\npostRender: null, // callback, function(canvas, ctx) {}\n\ncanvas: null,  // create a canvas if null\nresizeCanvas: true,\nclearCanvas: true\n};\nvar texture = scene.textures.generate(key, config);\n</code></pre>"},{"location":"textures/#has-key","title":"Has key","text":"<pre><code>var hasKey = scene.textures.exists(key);\n</code></pre>"},{"location":"textures/#remove-texture","title":"Remove texture","text":"<p>Remove texture stored in texture cache.</p> <pre><code>scene.textures.remove(key);\n</code></pre>"},{"location":"textures/#get-base64","title":"Get base64","text":"<pre><code>var s = scene.textures.getBase64(key);  // type= 'image/png', encoderOptions= 0.92\n// var s = scene.textures.getBase64(key, frame, type, encoderOptions);\n</code></pre>"},{"location":"textures/#texture","title":"Texture","text":""},{"location":"textures/#get-texture","title":"Get texture","text":"<pre><code>var texture = scene.textures.get(key);\n</code></pre>"},{"location":"textures/#has-frame","title":"Has frame","text":"<pre><code>var hasFrame = texture.has(frameName);\n</code></pre>"},{"location":"textures/#add-frame","title":"Add frame","text":"<pre><code>var frame = texture.add(frameName, sourceIndex, x, y, width, height);\n</code></pre> <ul> <li><code>key</code> : Texture key.</li> <li><code>frameName</code> : The name of this Frame. The name is unique within the Texture.</li> <li><code>sourceIndex</code> : The index of the TextureSource that this Frame is a part of.</li> <li><code>x</code>, <code>y</code> : The x/y coordinate of the top-left of this Frame.</li> <li><code>width</code>, <code>height</code> : The width/height of this Frame.</li> </ul>"},{"location":"textures/#remove-frame","title":"Remove frame","text":"<pre><code>var removed = texture.remove(frameName);\n</code></pre>"},{"location":"textures/#default-textures","title":"Default textures","text":"<ul> <li>Default : <code>'__DEFAULT'</code></li> <li>Missing : <code>'__MISSING'</code></li> <li>4x4 white : <code>'__WHITE'</code></li> </ul>"},{"location":"textures/#get-key-list-of-all-textures","title":"Get key list of all textures","text":"<pre><code>var keys = scene.textures.getTextureKeys();\n</code></pre>"},{"location":"textures/#frame-object","title":"Frame object","text":""},{"location":"textures/#get-frame","title":"Get frame","text":"<pre><code>var frame = scene.textures.getFrame(key, frame);\n</code></pre>"},{"location":"textures/#properties","title":"Properties","text":"<ul> <li><code>frame.source.image</code> : Image of texture source.</li> <li><code>frame.cutX</code> : X position within the source image to cut from.</li> <li><code>frame.cutY</code> : Y position within the source image to cut from.</li> <li><code>frame.cutWidth</code> : The width of the area in the source image to cut.</li> <li><code>frame.cutHeight</code> : The height of the area in the source image to cut.</li> </ul>"},{"location":"textures/#add-atlas","title":"Add atlas","text":"<pre><code>scene.textures.addAtlas(key, HTMLImageElement, data);\n// scene.textures.addAtlas(key, HTMLImageElement, data, dataSource);\n</code></pre> <ul> <li><code>key</code> : The unique string-based key of the Texture.</li> <li><code>HTMLImageElement</code> : HTML Image element/s.</li> <li><code>data</code> : The Texture Atlas data/s.     <pre><code>{\nframes: [\n{\n// Location of frame image\nframe: {\nx, y, w, h\n},\n\n// trimmed\ntrimmed:\nsourceSize: {\nw, h\n},\nspriteSourceSize: {\nx, y, w, h\n},\n\nrotated:\n\n// Custom origin\nanchor: pivot: {\nx, y\n},\n\n// Other custom properties of this frame ...\n}\n],\n\n// Other custom properties of this texture ...\n}\n</code></pre></li> <li><code>dataSource</code> : An optional data Image element (normal map).</li> </ul> <p>or</p> <pre><code>scene.textures.addAtlas(undefined, texture, data);\n// scene.textures.addAtlas(undefined, texture, data, dataSource);\n</code></pre> <ul> <li><code>texture</code> : Phaser Texture.</li> </ul>"},{"location":"textures/#add-sprite-sheet","title":"Add sprite sheet","text":"<pre><code>scene.textures.addSpriteSheet(key, HTMLImageElement, config);\n// scene.textures.addAtlas(key, HTMLImageElement, config, dataSource);\n</code></pre> <ul> <li><code>key</code> : The unique string-based key of the Texture.</li> <li><code>HTMLImageElement</code> : HTML Image element/s.</li> <li><code>config</code> : The configuration object for this Sprite Sheet.     <pre><code>{\nframeWidth: ,\nframeHeight: ,\nstartFrame: 0,\nendFrame: -1,\nmargin: 0,\nspacing: 0\n}\n</code></pre></li> <li><code>dataSource</code> : An optional data Image element (normal map).</li> </ul> <p>or</p> <pre><code>scene.textures.addSpriteSheet(undefined, texture, config);\n// scene.textures.addSpriteSheet(undefined, texture, config, dataSource);\n</code></pre> <ul> <li><code>texture</code> : Phaser Texture.</li> </ul>"},{"location":"textures/#events","title":"Events","text":"<ul> <li>Texture manager is ready     <pre><code>scene.textures.on('ready', function() {\n\n})\n</code></pre></li> <li>Add texture     <pre><code>scene.textures.on('addtexture', function(key) {\n\n})\n</code></pre>     or     <pre><code>scene.textures.on('addtexture-' + key, function() {\n\n})\n</code></pre></li> <li>Error when adding texture     <pre><code>scene.textures.on('onerror', function(key) {\n\n})\n</code></pre></li> <li>Remove texture     <pre><code>scene.textures.on('removetexture', function(key) {\n\n})\n</code></pre>     or     <pre><code>scene.textures.on('removetexture-' + key, function() {\n\n})\n</code></pre></li> </ul>"},{"location":"tiledmapdata/","title":"Tiled map data","text":""},{"location":"tiledmapdata/#introduction","title":"Introduction","text":"<p>Parses a Tiled JSON object into a new MapData object.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tiledmapdata/#usage","title":"Usage","text":"<pre><code>var mapData = Phaser.Tilemaps.Parsers.Tiled.ParseJSONTiled(name, json, insertNull);\n</code></pre> <ul> <li><code>name</code> : The name of the tilemap, used to set the name on the MapData.</li> <li><code>json</code> : The Tiled JSON object.</li> <li><code>insertNull</code> : Controls how empty tiles, tiles with an index of <code>-1</code>.<ul> <li><code>true</code> : Empty locations will get a value of <code>null</code>.</li> <li><code>false</code> : Empty location will get a Tile object with an index of <code>-1</code>.</li> </ul> </li> </ul>"},{"location":"tiledmapdata/#map-data","title":"Map data","text":""},{"location":"tiledmapdata/#map-type","title":"Map type","text":"<pre><code>var mapType = mapData.orientation;\n</code></pre> <ul> <li><code>mapType</code> : <code>orthogonal</code>, <code>isometric</code>, <code>hexagonal</code></li> </ul>"},{"location":"tiledmapdata/#map-size","title":"Map size","text":"<ul> <li>Grid size     <pre><code>var mapWidth = mapData.width;\nvar mapHeight = mapData.height;\n</code></pre></li> <li>Pixel size     <pre><code>var mapWidth = mapData.widthInPixels;\nvar mapHeight = mapData.heightInPixels;\n</code></pre></li> </ul>"},{"location":"tiledmapdata/#tile-size","title":"Tile size","text":"<pre><code>var tileWidth = mapData.tileWidth;\nvar tileHeight = mapData.tileHeight;\n</code></pre>"},{"location":"tiledmapdata/#layer","title":"Layer","text":"<pre><code>var layers = mapData.layers;\n</code></pre> <pre><code>mapData.layers.forEach(function(layer){\nvar name = layer.name;\n\n\nvar alpha = layer.alpha;\nvar visible = layer.visible;\n\nvar x = layer.x;\nvar y = layer.y;\nvar width = layer.width;\nvar height = layer.height;\nvar data = layer.data;\n\nlayer.data.forEach(function(gid, index){\nvar tileX = index % width;\nvar tileY = Math.floor(index / width);\nif (gid === -1) { // Empty\n\n} else {\n\n}\n})\n})\n</code></pre>"},{"location":"tilemap/","title":"Tile map","text":""},{"location":"tilemap/#introduction","title":"Introduction","text":"<p>Display of tiles map, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tilemap/#usage","title":"Usage","text":""},{"location":"tilemap/#hierarchy","title":"Hierarchy","text":"<pre><code>graph TB\n\ntilemap --&gt; layerA[\"layerA&lt;br&gt;(Game object)\"]\ntilemap --&gt; layerB\n\nlayerA --&gt; tilesA[\"tiles&lt;br&gt;(layer.data[x][y])\"]\nlayerB --&gt; tilesB[\"tiles\"]</code></pre> <ul> <li><code>map</code> : A container for Tilemap data.</li> <li><code>layer</code> : A Game Object that renders LayerData from a map when used in combination with one or more tileset.</li> <li><code>tiles</code> : A 2d array of Tile object<ul> <li>Tile : A lightweight data representation, store position information without factoring in scroll, layer scale or layer position.</li> </ul> </li> <li><code>tileset</code> : Image and tileData of some kind of tiles.</li> </ul>"},{"location":"tilemap/#load-tile-map","title":"Load tile map","text":"<pre><code>scene.load.tilemapTiledJSON(key, url);   // JSON\nscene.load.tilemapCSV(key, url);         // CSV\n</code></pre>"},{"location":"tilemap/#add-tile-map-object","title":"Add tile map object","text":"<ol> <li>Create <code>map</code><ul> <li>Create map from tiled     <pre><code>var map = scene.add.tilemap(key);\n</code></pre>     or     <pre><code>var map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16\n});\n</code></pre><ul> <li>Support ORTHOGONAL, ISOMETRIC, STAGGERED, HEXAGONAL map</li> </ul> </li> <li>Create map from 2d array     <pre><code>var map = this.make.tilemap({\n// data: tileIdxArray,  // [ [], [], ... ]\ntileWidth: 32,\ntileHeight: 32,\nwidth: 10,\nheight: 10,\n});\n</code></pre><ul> <li>Only support ORTHOGONAL map</li> </ul> </li> <li>Create map from csv     <pre><code>var map = this.make.tilemap({\nkey: 'map',     // csv file\ntileWidth: 32,\ntileHeight: 32,\n});\n</code></pre><ul> <li>Only support ORTHOGONAL map</li> </ul> </li> </ul> </li> <li>Add <code>tileset</code> image     <pre><code>var tileset = map.addTilesetImage(tilesetName, key); // key: texture key\n// var tileset = map.addTilesetImage(tilesetName);  // key = tilesetName\n// var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid, tileOffset);\n</code></pre><ul> <li><code>key</code> : The key of the Phaser.Cache image used for this tileset.<ul> <li><code>undefined</code> , <code>null</code> : Use <code>tilesetName</code> as default value.</li> </ul> </li> <li><code>tileWidth</code> , <code>tileHeight</code> : The width/height of the tile (in pixels) in the Tileset Image.<ul> <li><code>undefined</code> : Default to the map's <code>tileWidth</code>/<code>tileHeight</code>.</li> </ul> </li> <li><code>tileMargin</code> : The margin around the tiles in the sheet (in pixels).<ul> <li><code>undefined</code> : Default to <code>0</code></li> </ul> </li> <li><code>tileSpacing</code> The spacing between each the tile in the sheet (in pixels).<ul> <li><code>undefined</code> : Default to <code>0</code> </li> </ul> </li> <li><code>gid</code> : If adding multiple tilesets to a blank map, specify the starting GID this set will use here.</li> <li><code>tileOffset</code> : <code>{x, y}</code> Tile texture drawing offset.</li> </ul> </li> <li>Create <code>layer</code><ul> <li>Create existed layer     <pre><code>var layer = map.createLayer(layerID, tileset);\n// var layer = map.createLayer(layerID, tileset, x, y);\n</code></pre><ul> <li><code>tileset</code> : The tileset, or an array of tilesets.<ul> <li>A string, or an array of string.</li> <li>A tileset object, or an array of tileset objects.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Offset in pixels. Default is <code>0</code>/<code>0</code>.</li> </ul> </li> <li>Create a new and empty layer     <pre><code>var layer = map.createBlankLayer(layerID, tileset);\n// var layer = map.createBlankLayer(layerID, tileset, x, y, width, height, tileWidth, tileHeight); // x, y : offset in pixels\n</code></pre><ul> <li><code>layerID</code> : The name of this layer. Must be unique within the map.</li> <li><code>tileset</code> : The tileset, or an array of tilesets.<ul> <li>A string, or an array of string.</li> <li>A tileset object, or an array of tileset objects.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Offset in pixels. Default is <code>0</code>/<code>0</code>.</li> <li><code>width</code>, <code>height</code> : The width/height of the layer in tiles. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>tileWidth</code>, <code>tileHeight</code> : The width/height of the tiles the layer uses for calculations. Default is map's tileWidth/tileHeight.</li> </ul> </li> </ul> </li> <li>Create game objects (optional)<ul> <li>Create game objects by Object-ID/Object-GID/Object-Name     <pre><code>var sprites = map.createFromObjects(layerName, {\n// gid: 26,\n// name: 'bonus',\n// id: 9,\n\n// classType: Sprite,\n// ignoreTileset\n// scene,\n// container: null,\n// key: null,\n// frame: null\n}, useTileset);\n</code></pre>     or     <pre><code>var sprites = map.createFromObjects(layerName, configArray, useTileset);\n</code></pre><ul> <li>One of filter<ul> <li><code>gid</code> : Object GID.</li> <li><code>id</code> : Object ID.</li> <li><code>name</code> : Object Name.</li> </ul> </li> <li><code>classType</code> : Class of game object, default is Sprite.</li> <li><code>ignoreTileset</code> : </li> <li><code>scene</code> : A Scene reference, passed to the Game Objects constructors. Default is map's scene.</li> <li><code>container</code> : Optional Container to which the Game Objects are added.</li> <li><code>key</code>, <code>frame</code> : Optional key of a Texture to be used.</li> </ul> </li> <li>Create game objects by tile     <pre><code>var sprites = map.createFromTiles(indexes, replacements, spriteConfig);\n// var sprites = map.createFromTiles(indexes, replacements, spriteConfig, scene, camera, layer);\n</code></pre><ul> <li><code>indexes</code> : The tile index, or array of indexes</li> <li><code>replacements</code> :<ul> <li><code>null</code> : Leave the tiles unchanged</li> <li>Array of indexes : One-to-one mapping <code>indexes</code> to <code>replacements</code>.</li> </ul> </li> <li><code>spriteConfig</code> : The config object to pass into the Sprite creator (i.e. <code>scene.make.sprite</code>).</li> <li><code>scene</code> : The Scene to create the Sprites within.</li> <li><code>camera</code> : The Camera to use when determining the world XY.</li> <li><code>layer</code> : The Tilemap Layer to act upon.</li> </ul> </li> </ul> </li> </ol>"},{"location":"tilemap/#map","title":"Map","text":""},{"location":"tilemap/#map-size","title":"Map size","text":"<pre><code>var mapWidth = map.width;\nvar mapHeight = map.height;\n</code></pre>"},{"location":"tilemap/#tile-size","title":"Tile size","text":"<ul> <li>Set     <pre><code>map.setBaseTileSize(tileWidth, tileHeight);\n</code></pre></li> <li>Get     <pre><code>var tileWidth = map.tileWidth;\nvar tileHeight = map.tileHeight;\n</code></pre></li> </ul>"},{"location":"tilemap/#tileworld-position","title":"Tile/world position","text":"<ul> <li>World position -&gt; Tile position     <pre><code>var tileXY = map.worldToTileXY(worldX, worldY);\n// var out = map.worldToTileXY(worldX, worldY, snapToFloor, out, camera, layer);\n</code></pre></li> <li>Tile position -&gt; World position     <pre><code>var worldXY = map.tileToWorldXY(tileX, tileY);\n// var out = map.tileToWorldXY(tileX, tileY, out, camera, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#tile-at-world-xy","title":"Tile at world XY","text":"<pre><code>var hasTile = map.hasTileAtWorldXY(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer);\n</code></pre>"},{"location":"tilemap/#draw-on-graphics","title":"Draw on graphics","text":"<pre><code>map.renderDebug(graphics);\n</code></pre> <p>or</p> <pre><code>map.renderDebug(graphics, {\ntileColor: new Phaser.Display.Color(105, 210, 231, 150),         // null\ncollidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // null\nfaceColor: new Phaser.Display.Color(40, 39, 37, 150)             // null\n});\n</code></pre> <p>or</p> <pre><code>map.renderDebug(graphics, styleConfig, layer);\n</code></pre> <ul> <li><code>graphics</code> : Graphics game object.</li> </ul>"},{"location":"tilemap/#layer","title":"Layer","text":"<p>A Game Object that renders LayerData from a map when used in combination with one or more tileset.</p>"},{"location":"tilemap/#get-layer","title":"Get layer","text":"<ul> <li>Get layer instance     <pre><code>var layer = map.getLayer(name);\n</code></pre></li> <li>Set current layer of map     <pre><code>map.setLayer(layer);  // layer name, layer index\n</code></pre>     or     <pre><code>map.layer = layer;\n</code></pre></li> </ul>"},{"location":"tilemap/#render-pipeline","title":"Render pipeline","text":"<pre><code>layer.setPipeline(pipelineName);\n</code></pre> <pre><code>layer.setPostPipeline(pipelineName);\n</code></pre> <p>See Render pipeline section of Game object.</p>"},{"location":"tilemap/#render-order","title":"Render order","text":"<pre><code>layer.setRenderOrder(renderOrder);\n</code></pre> <ul> <li><code>renderOrder</code><ul> <li><code>0</code>, or <code>'right-down'</code></li> <li><code>1</code>, or <code>'left-down'</code></li> <li><code>2</code>, or <code>'right-up'</code></li> <li><code>3</code>, or <code>'left-up'</code></li> </ul> </li> </ul>"},{"location":"tilemap/#fill-tiles","title":"Fill tiles","text":"<ul> <li>Fill current layer     <pre><code>map.fill(index);  // Fill all grids\n</code></pre>     or     <pre><code>map.fill(index, tileX, tileY, width, height);\n</code></pre></li> <li>Fill layer     <pre><code>layer.fill(index);  // Fill all grids\n</code></pre>     or     <pre><code>layer.fill(index, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#randomize","title":"Randomize","text":"<ul> <li>Randomize current layer     <pre><code>map.randomize(); // Randomize all grids\n</code></pre>     or     <pre><code>map.randomize(tileX, tileY, width, height, indexes);\n</code></pre><ul> <li><code>indexes</code> An array of tile indexes.<ul> <li><code>-1</code> : Empty tile.</li> </ul> </li> </ul> </li> <li>Weight randomize current layer     <pre><code>map.weightedRandomize(\n{\n{ index: 0, weight: 4 },\n{ index: [0, 1], weight: 4 }\n},\ntileX, tileY, width, height);\n</code></pre></li> <li>Randomize layer     <pre><code>layer.randomize();  // Randomize all grids\n</code></pre>     or     <pre><code>layer.randomize(tileX, tileY, width, height, indexes);\n</code></pre><ul> <li><code>indexes</code> An array of tile indexes.</li> </ul> </li> <li>Weight randomize layer     <pre><code>layer.weightedRandomize(\n{\n{ index: 0, weight: 4 },\n{ index: [0, 1], weight: 4 }\n},\ntileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#copy-tiles","title":"Copy tiles","text":"<ul> <li>Copy current layer     <pre><code>map.copy(srcTileX, srcTileY, width, height, destTileX, destTileY);\n</code></pre></li> <li>Copy layer     <pre><code>map.copy(srcTileX, srcTileY, width, height, destTileX, destTileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.copy(srcTileX, srcTileY, width, height, destTileX, destTileY, recalculateFaces);\n</code></pre></li> </ul>"},{"location":"tilemap/#put-tile-at","title":"Put tile at","text":"<ul> <li>Put on current layer     <pre><code>map.putTileAt(tile, tileX, tileY);\n</code></pre><ul> <li><code>tile</code> :<ul> <li>Tile index</li> <li>Tile object :      <pre><code>var tile = map.getTileAt(tileX, tileY);\n</code></pre>     or     <pre><code>var tile = map.getTileAtWorldXY(worldX, worldY);\n</code></pre></li> </ul> </li> </ul> </li> <li>Put on layer     <pre><code>map.putTileAt(tile, tileX, tileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.putTileAt(tile, tileX, tileY, recalculateFaces);\n</code></pre><ul> <li><code>tile</code> : Tile index, or tile object.</li> </ul> </li> </ul>"},{"location":"tilemap/#put-tiles-at","title":"Put tiles at","text":"<ul> <li>Put on current layer     <pre><code>map.putTilesAt(tilesArray, tileX, tileY);  // tilesArray: 1d/2d array of Tile object or tile index\n</code></pre><ul> <li><code>tilesArray</code> : 1d/2d array of tile objects or tile indexes</li> </ul> </li> <li>Put on layer     <pre><code>map.putTilesAt(tilesArray, tileX, tileY, recalculateFaces, layer);\n</code></pre>     or     <pre><code>layer.putTilesAt(tilesArray, tileX, tileY, recalculateFaces);\n</code></pre><ul> <li><code>tilesArray</code> : 1d/2d array of tile objects or tile indexes</li> </ul> </li> </ul>"},{"location":"tilemap/#replace-tiles","title":"Replace tiles","text":"<ul> <li>Replace on current layer    <pre><code>map.replaceByIndex(findIndex, newIndex); // Search on all grids\n</code></pre>    or    <pre><code>map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height);\n</code></pre></li> <li>Replace on layer    <pre><code>map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer);\n</code></pre>    or    <pre><code>layer.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#swap-tiles","title":"Swap tiles","text":"<ul> <li>Swap on current layer     <pre><code>map.swapByIndex(indexA, indexB);\n</code></pre>     or     <pre><code>map.swapByIndex(indexA, indexB, tileX, tileY, width, height);\n</code></pre></li> <li>Swap on layer     <pre><code>map.swapByIndex(indexA, indexB, tileX, tileY, width, height, layer);\n</code></pre>     or     <pre><code>layer.swapByIndex(indexA, indexB, tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#shuffle-tiles","title":"Shuffle tiles","text":"<ul> <li>Shuffle on current layer     <pre><code>map.shuffle();\n</code></pre>     or     <pre><code>map.shuffle(tileX, tileY, width, height);\n</code></pre></li> <li>Shuffle on layer     <pre><code>map.shuffle(tileX, tileY, width, height, layer);\n</code></pre>     or     <pre><code>layer.shuffle(tileX, tileY, width, height);\n</code></pre></li> </ul>"},{"location":"tilemap/#shader-effects","title":"Shader effects","text":"<p>`layer`` support postFX effects</p> <p>Note</p> <p>No preFX effect support</p>"},{"location":"tilemap/#tile","title":"Tile","text":""},{"location":"tilemap/#get-tile","title":"Get tile","text":"<pre><code>var tile = map.getTileAt(tileX, tileY);\n// var tile = map.getTileAtWorldXY(worldX, worldY);\n</code></pre> <p>or</p> <pre><code>var tile = map.getTileAt(tileX, tileY, true, layer);  // Return a Tile object with an index of -1 for empty tile\n// var tile = map.getTileAtWorldXY(worldX, worldY, true, camera, layer);\n</code></pre> <ul> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tile</code> : A tile, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-a-rectangle-area","title":"Get tiles within a rectangle area","text":"<pre><code>var tiles = map.getTilesWithin(tileX, tileY, width, height);\n</code></pre> <p>or</p> <pre><code>var tiles = map.getTilesWithin(tileX, tileY, width, height, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, layer);\n</code></pre> <ul> <li><code>tileX</code> , <code>tileY</code> : The left/top most tile index (in tile coordinates) to use as the origin of the area. Default is <code>0</code>/<code>0</code>.</li> <li><code>width</code> , <code>height</code> : How many tiles wide/tall from the <code>tileX</code>/<code>tileY</code> index the area will be. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tiles</code> : An array of Tiles, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-world-xy","title":"Get tiles within world XY","text":"<pre><code>var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height);\n</code></pre> <p>or</p> <pre><code>var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height,  {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, camera, layer);\n</code></pre> <ul> <li><code>worldX</code> , <code>worldY</code> : The world x/y coordinate for the top-left of the area.</li> <li><code>width</code> , <code>height</code> : The width/height of the area. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>camera</code> : The Camera to use when factoring in which tiles to return. Default is main camera.</li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> <li><code>tiles</code> : An array of Tiles, or <code>null</code> if <code>layer</code> is invalid.</li> </ul>"},{"location":"tilemap/#get-tiles-within-shape","title":"Get tiles within shape","text":"<pre><code>vat tiles = map.getTilesWithinShape(shape);\n</code></pre> <p>or</p> <pre><code>vat tiles = map.getTilesWithinShape(shape, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, camera, layer);\n</code></pre> <p>Shape:</p> <ul> <li><code>new Phaser.Geom.Rectangle(x0, y0, width, height)</code></li> <li><code>new Phaser.Geom.Line(x0, y0, x1, y1)</code></li> <li><code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li><code>new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2)</code></li> </ul>"},{"location":"tilemap/#for-each-tile-in-layer","title":"For each tile in layer","text":"<pre><code>map.forEachTile(function(tile, index, tileArray) { /* ... */ }, context);\n</code></pre> <p>or</p> <pre><code>map.forEachTile(function(tile, index, tileArray) { /* ... */ }, context,\ntileX, tileY, width, height, {\n// isNotEmpty: false,\n// isColliding: false,\n// hasInterestingFace: false\n}, layer);\n</code></pre> <ul> <li><code>tileX</code> , <code>tileY</code> : The left/top most tile index (in tile coordinates) to use as the origin of the area to search.</li> <li><code>width</code> , <code>height</code> : How many tiles wide/tall from the <code>tileX</code>/<code>tileY</code> index the area will be. Default is <code>map.width</code>/<code>map.height</code>.</li> <li><code>filteringOptions</code> : Optional filters to apply when getting the tiles.<ul> <li><code>isNotEmpty</code> :  If <code>true</code>, only return tiles that don't have <code>-1</code> for an index.</li> <li><code>isColliding</code> : If <code>true</code>, only return tiles that collide on at least one side.</li> <li><code>hasInterestingFace</code> : If <code>true</code>, only return tiles that have at least one interesting face.</li> </ul> </li> <li><code>layer</code> : The tile layer to use. Default is current layer (<code>map.setLayer(layer)</code>)</li> </ul>"},{"location":"tilemap/#tile-index","title":"Tile index","text":"<ul> <li>Get index     <pre><code>var index = tile.index;\n</code></pre></li> <li>Copy index     <pre><code>tile.index = index;\n</code></pre></li> <li>Copy    <pre><code>tile.copy(tileSrc);\n</code></pre>    Copies the tile data &amp; properties from the given tile to this tile. This copies everything except for position and interesting faces.</li> </ul>"},{"location":"tilemap/#tile-position","title":"Tile position","text":"<pre><code>var x = tile.x;\nvar y = tile.y;\n</code></pre>"},{"location":"tilemap/#tile-corners","title":"Tile corners","text":"<pre><code>var points = map.getTileCorners(tileX, tileY, camera, layer);\n</code></pre> <ul> <li><code>points</code> : Array of vector2 corresponding to the world XY location of each tile corner.</li> </ul>"},{"location":"tilemap/#alpha","title":"Alpha","text":"<ul> <li>Set     <pre><code>tile.setAlpha(value);\n</code></pre>     or     <pre><code>tile.alpha = value;\n</code></pre></li> <li>Get     <pre><code>var alpha = tile.alpha;\n</code></pre></li> </ul>"},{"location":"tilemap/#visible","title":"Visible","text":"<ul> <li>Set     <pre><code>tile.setVisible(visible);\n</code></pre>     or     <pre><code>tile.visible = visible;\n</code></pre></li> <li>Get     <pre><code>var visible = visible;\n</code></pre></li> </ul>"},{"location":"tilemap/#flip","title":"Flip","text":"<ul> <li>Set     <pre><code>tile.setFlipX(flipX);\ntile.setFlipY(flipY);\n</code></pre>     or     <pre><code>tile.flipX = flipX;\ntile.flipY = flipY;\n</code></pre></li> <li>Toggle     <pre><code>tile.toggleFlipX();\ntile.toggleFlipY();\n</code></pre>     or     <pre><code>tile.flipX = !tile.flipX;\ntile.flipY = !tile.flipY;\n</code></pre></li> <li>Reset     <pre><code>tile.resetFlip();\n</code></pre>     or     <pre><code>tile.flipX = false;\ntile.flipY = false;\n</code></pre></li> <li>Get     <pre><code>var flipX = tile.flipX;\nvar flipY = tile.flipY;\n</code></pre></li> </ul>"},{"location":"tilemap/#bounds","title":"Bounds","text":"<ul> <li>Bounds rectangle <pre><code>var bounds = tile.getBounds();\n// var out = tile.getBounds(camera, out);\n</code></pre></li> <li>Left     <pre><code>var left = tile.getLeft();\n// var left = tile.getLeft(camera);\n</code></pre></li> <li>Right     <pre><code>var right = tile.getRight();\n// var right = tile.getRight(camera);\n</code></pre></li> <li>CenterX     <pre><code>var centerX = tile.getCenterX();\n// var centerX = tile.getCenterX(camera);\n</code></pre></li> <li>Top     <pre><code>var top = tile.getTop();\n// var top = tile.getTop(camera);\n</code></pre></li> <li>Bottom     <pre><code>var bottom = tile.getBottom();\n// var bottom = tile.getBottom(camera);\n</code></pre></li> <li>CenterY     <pre><code>var centerY = tile.getCenterY();\n// var centerY = tile.getCenterY(camera);\n</code></pre></li> </ul>"},{"location":"tilemap/#properties","title":"Properties","text":"<pre><code>var properties = tile.properties;  // object or null\nvar value = properties[key];\n</code></pre> <pre><code>tile.properties[key] = value;\n</code></pre>"},{"location":"tilemap/#collision","title":"Collision","text":""},{"location":"tilemap/#enable-collision","title":"Enable collision","text":"<ul> <li>Enable collision by tile index     <pre><code>map.setCollision(index);\n// map.setCollision(index, true, recalculateFaces, updateLayer);\n</code></pre><ul> <li><code>index</code> : Tile index, or an array of tile indexes.</li> </ul> </li> <li>Enable collision by tile index in a range     <pre><code>map.setCollisionBetween(start, stop);\n// map.setCollisionBetween(start, stop, true, recalculateFaces, layer);\n</code></pre><ul> <li><code>start</code> , <code>stop</code> :  The first/last index of the tile.</li> </ul> </li> <li>Enable collision excluded tile indexes     <pre><code>map.setCollisionByExclusion(indexes);\n// map.setCollisionByExclusion(indexes, true, recalculateFaces, layer);\n</code></pre><ul> <li><code>index</code> : An array of tile indexes.</li> </ul> </li> <li>Enable collision by properties matching<ul> <li>Enable collision if value of tile property 'key' is equal to 'value'     <pre><code>map.setCollisionByProperty({key:value});\n// map.setCollisionByProperty({key:value}, true, recalculateFaces, layer);\n</code></pre></li> <li>Enable collision if value of tile property 'key' is equal to 'value0', or 'value1'     <pre><code>map.setCollisionByProperty({key:[value0, value1]});\n// map.setCollisionByProperty({key:[value0, value1]}, true, recalculateFaces, layer);\n</code></pre></li> </ul> </li> <li>Enable collision by collision group <pre><code>map.setCollisionFromCollisionGroup();\n// map.setCollisionFromCollisionGroup(true, recalculateFaces, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#disable-collision","title":"Disable collision","text":"<ul> <li>Disable collision by tile index     <pre><code>map.setCollision(index, false);\n// map.setCollision(index, false, recalculateFaces, layer);\n</code></pre><ul> <li><code>index</code> : Tile index, or an array of tile indexes.</li> </ul> </li> <li>Disable collision by tile index in a range     <pre><code>map.setCollisionBetween(start, stop, false);\n// map.setCollisionBetween(start, stop, false, recalculateFaces, layer);\n</code></pre><ul> <li><code>start</code> , <code>stop</code> :  The first/last index of the tile.</li> </ul> </li> <li>Disable collision by properties matching<ul> <li>Disable collision if value of tile property 'key' is equal to 'value'     <pre><code>map.setCollisionByProperty({key:value}, false);\n// map.setCollisionByProperty({key:value}, false, recalculateFaces, layer);\n</code></pre></li> <li>Disable collision if value of tile property 'key' is equal to 'value0', or 'value1'     <pre><code>map.setCollisionByProperty({key:[value0, value1]}, false);\n// map.setCollisionByProperty({key:[value0, value1]}, false, recalculateFaces, layer);\n</code></pre></li> </ul> </li> <li>Disable collision by collision group <pre><code>map.setCollisionFromCollisionGroup(false);\n// map.setCollisionFromCollisionGroup(false, recalculateFaces, layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#get-collision-group","title":"Get collision group","text":"<pre><code>var collisionGroup = tile.getCollisionGroup();\n</code></pre> <p>or</p> <pre><code>var collisionGroup = tileset.getTileCollisionGroup(tile.index); // array of collision shapes, or null\n</code></pre> <p>Types of collision shape (<code>collisionGroup.objects[i]</code>)</p> <ul> <li><code>object.rectangle</code> :     <pre><code>{\nrectangle: true,\nx, y,\nwidth, height\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Offset position related top-left of tile.     <pre><code>var worldX = tile.getLeft() + object.x;\nvar worldY = tile.getTop() + object.y;\n</code></pre></li> <li><code>width</code>, <code>height</code> : Width/height of rectangle area in pixels.</li> </ul> </li> <li><code>object.ellipse</code> :     <pre><code>{\nellipse: true,\nx, y,\nwidth, height\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Offset position related top-left of tile.     <pre><code>var centerX = tile.getLeft() + object.x + (object.width / 2);\nvar centerY = tile.getTop() + object.y + (object.height / 2);\n</code></pre></li> <li><code>width</code>, <code>height</code> : Width/height of ellipse area in pixels.</li> </ul> </li> <li><code>object.polygon</code> :     <pre><code>{\nx, y,\npolygon: [{x,y}, {x,y}, ...]\n}\n</code></pre><ul> <li>Each point :     <pre><code>{\nx: tile.getLeft() + object.x + polygon[i].x,\ny: tile.getTop() + object.y + polygon[i].y\n}\n</code></pre></li> </ul> </li> <li><code>object.polyline</code> :     <pre><code>{\nx, y,\npolyline: [{x,y}, {x,y}, ...]\n}\n</code></pre><ul> <li>Each point :     <pre><code>{\nx: tile.getLeft() + object.x + polyline[i].x,\ny: tile.getTop() + object.y + polyline[i].y\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"tilemap/#arcade-collision","title":"Arcade collision","text":"<pre><code>scene.physics.add.collider(arcadeGO, layer);\n</code></pre> <p>or, in update stage:</p> <pre><code>scene.physics.world.collide(arcadeGO, layer);\n</code></pre> <p>See Collision section of Arcade-world.</p>"},{"location":"tilemap/#matter-collision","title":"Matter collision","text":"<ul> <li>Any colliding tiles will be given a Matter body.     <pre><code>scene.matter.world.convertTilemapLayer(layer);\n</code></pre></li> </ul>"},{"location":"tilemap/#tileset","title":"Tileset","text":""},{"location":"tilemap/#get-tileset","title":"Get tileset","text":"<pre><code>var tileset = map.getTileset(name);\n</code></pre>"},{"location":"tilemap/#change-texture-of-tileset","title":"Change texture of tileset","text":"<pre><code>var texture = scene.sys.textures.get(key);\ntileset.setImage(texture);\n</code></pre>"},{"location":"tilesprite/","title":"Tile sprite","text":""},{"location":"tilesprite/#introduction","title":"Introduction","text":"<p>Display of repeating texture, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tilesprite/#usage","title":"Usage","text":""},{"location":"tilesprite/#load-texture","title":"Load texture","text":"<pre><code>scene.load.image(key, url);\n</code></pre> <p>Reference: load image</p>"},{"location":"tilesprite/#add-tile-sprite-object","title":"Add tile sprite object","text":"<pre><code>var image = scene.add.tileSprite(x, y, width, height, textureKey);\n</code></pre> <p>Add tile sprite from JSON</p> <pre><code>var image = scene.make.tileSprite({\nx: 0,\ny: 0,\nwidth: 512,\nheight: 512,\nkey: '',\n\n// angle: 0,\n// alpha: 1\n// flipX: true,\n// flipY: true,\n// scale : {\n//    x: 1,\n//    y: 1\n//},\n// origin: {x: 0.5, y: 0.5},\n\nadd: true\n});\n</code></pre>"},{"location":"tilesprite/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTileSprite extends Phaser.GameObjects.TileSprite {\nconstructor(scene, x, y, width, height, texture, frame) {\nsuper(scene, x, y, width, height, texture, frame);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyTileSprite(scene, x, y, key);\n</code></pre></li> </ul>"},{"location":"tilesprite/#properties-of-tiles","title":"Properties of tiles","text":"<ul> <li>Position     <pre><code>image.setTilePosition(x, y);\n</code></pre>     or     <pre><code>image.tilePositionX = x;\nimage.tilePositionY = y;\n</code></pre></li> <li>Scale     <pre><code>image.setTileScale(scaleX, scaleY);\n</code></pre>     or     <pre><code>image.tileScaleX = scaleX;\nimage.tileScaleY = scaleY;\n</code></pre></li> </ul>"},{"location":"tilesprite/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"tilesprite/#create-mask","title":"Create mask","text":"<pre><code>var mask = image.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"tilesprite/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"timeline/","title":"Timeline","text":""},{"location":"timeline/#introduction","title":"Introduction","text":"<p>Schedule events to happen at specific times in the future, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"timeline/#usage","title":"Usage","text":""},{"location":"timeline/#create-timeline","title":"Create timeline","text":"<pre><code>var timeline = scene.add.timeline([    {\nat: 0,\nin:\nfrom:\n\nset: {\nkey: value,\n},\n\ntween: {\ntargets: gameObject,\nalpha: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n},\n\nrun(target){ },\n\nsound: '',\n\nevent: '',\n\n// target: this,\n\n// once: false,\n// stop: false,\n},\n\n// ...\n])\n</code></pre> <ul> <li>Time<ul> <li><code>at</code> : Absolute delay time after starting in ms.</li> <li><code>in</code> : Absolute delay time after current time in ms.</li> <li><code>from</code> : Relative delay time after previous event in ms</li> </ul> </li> <li>Actions :<ul> <li><code>set</code> : A key-value object of properties to set on the <code>target</code>.</li> <li><code>tween</code> : tween config</li> <li><code>run</code> : A function which will be called when the Event fires.     <pre><code>function(target) {\n\n}\n</code></pre></li> <li><code>sound</code> : <ul> <li>A string : A key from the Sound Manager to play</li> <li>A config object for a sound to play when the Event fires.      <pre><code>{\nkey,\nconfig\n}\n</code></pre><ul> <li><code>key</code> : The key of the sound to play</li> <li><code>config</code> : config of playing sound</li> </ul> </li> </ul> </li> <li><code>event</code> : String-based event name to emit when the Event fires. The event is emitted from the Timeline instance.     <pre><code>timeline.on(eventName);\n</code></pre></li> <li><code>target</code> : The scope (<code>this</code> object) with which to invoke the <code>run</code>.</li> </ul> </li> <li>Control<ul> <li><code>once</code> : If set, the Event will be removed from the Timeline when it fires.</li> <li><code>stop</code> : If set, the Timeline will stop and enter a complete state when this Event fires, even if there are other events after it.</li> </ul> </li> </ul> <p>The Timeline always starts paused.</p>"},{"location":"timeline/#start","title":"Start","text":"<pre><code>timeline.play();\n</code></pre> <p>Restart</p> <pre><code>timeline.play(true);\n</code></pre>"},{"location":"timeline/#stop","title":"Stop","text":"<pre><code>timeline.stop();\n</code></pre>"},{"location":"timeline/#pause-resume","title":"Pause / Resume","text":"<pre><code>timeline.pause();\n// timeline.paused = true;\n</code></pre> <pre><code>timeline.resume();\n// timeline.paused = false;\n</code></pre>"},{"location":"timeline/#is-playing","title":"Is playing","text":"<p>Timeline is currently playing, not paused or not complete.</p> <pre><code>var isPlaying = timeline.isPlaying()\n</code></pre>"},{"location":"timeline/#add-event","title":"Add event","text":"<pre><code>timeline.add(config);\n</code></pre> <p>or</p> <pre><code>timeline.add([config0, config1, ...]);\n</code></pre>"},{"location":"timeline/#clear-all-events","title":"Clear all events","text":"<pre><code>timeline.clear();\n</code></pre>"},{"location":"timeline/#destroy","title":"Destroy","text":"<p>Also remove updating.</p> <pre><code>timeline.destroy();\n</code></pre>"},{"location":"timer/","title":"Timer","text":""},{"location":"timer/#introduction","title":"Introduction","text":"<p>Execute callback when time-out, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"timer/#usage","title":"Usage","text":""},{"location":"timer/#start-timer","title":"Start timer","text":"<ul> <li>Looped timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\n//args: [],\ncallbackScope: thisArg,\nloop: true\n});\n</code></pre></li> <li>Repeat timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\n//args: [],\ncallbackScope: thisArg,\nrepeat: 4\n});\n</code></pre></li> <li>Oneshot timer     <pre><code>var timer = scene.time.delayedCall(delay, callback, args, scope);  // delay in ms\n</code></pre></li> <li>All properties of timer     <pre><code>var timer = scene.time.addEvent({\ndelay: 500,                // ms\ncallback: callback,\nargs: [],\ncallbackScope: thisArg,\nloop: false,\nrepeat: 0,\nstartAt: 0,\ntimeScale: 1,\npaused: false\n});\n</code></pre></li> <li>Reuse timer     <pre><code>timer.reset({\ndelay: 500,                // ms\ncallback: callback,\nargs: [],\ncallbackScope: thisArg,\nloop: false,\nrepeat: 0,\nstartAt: 0,\ntimeScale: 1,\npaused: false\n})\nscene.time.addEvent(timer);\n</code></pre></li> </ul> <p>Note</p> <p>Throw error message if <code>delay : 0</code> with (<code>repeat &gt; 0</code> or <code>loop: true</code>)</p>"},{"location":"timer/#pauseresume","title":"Pause/resume","text":"<ul> <li>Pause timer     <pre><code>timer.paused = true;\n</code></pre></li> <li>Resume timer     <pre><code>timer.paused = false;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = timer.paused;\n</code></pre></li> </ul>"},{"location":"timer/#stop","title":"Stop","text":"<ul> <li>Stop a running timer     <pre><code>timer.remove();\n</code></pre></li> <li>Remove from timeline's all internal lists, for timer re-using     <pre><code>scene.time.removeEvent(timer);\n</code></pre></li> </ul>"},{"location":"timer/#time-scale","title":"Time scale","text":"<ul> <li>Set     <pre><code>timer.timeScale = 2;\n</code></pre></li> <li>Get     <pre><code>var timeScale = timer.timeScale;\n</code></pre></li> </ul>"},{"location":"timer/#other-properties","title":"Other properties","text":"<ul> <li>Get elapsed time     <pre><code>var elapsed = timer.getElapsed();   // ms\nvar elapsed = timer.getElapsedSeconds(); // sec\n// var elapsed = timer.elapsed;  // ms\n</code></pre></li> <li>Get remaining time     <pre><code>var remaining = timer.getRemaining();   // ms\nvar remaining = timer.getRemainingSeconds(); // sec\n// var remaining = timer.getOverallRemaining();   // ms\n// var remaining = timer.getOverallRemainingSeconds(); // sec\n</code></pre></li> <li>Get repeat count     <pre><code>var repeat = timer.getRepeatCount();\n</code></pre></li> <li>Gets the progress of the current iteration     <pre><code>var progress = timer.getProgress();  // elapsed / delay\n</code></pre></li> <li>Gets the progress of the timer overall, factoring in repeats.     <pre><code>var progress = timer.getOverallProgress();  // totalElapsed / totalDuration\n</code></pre></li> <li>Get delay time     <pre><code>var delay = timer.delay;   // ms\n</code></pre></li> </ul>"},{"location":"tintrgb/","title":"TintRGB","text":""},{"location":"tintrgb/#introduction","title":"Introduction","text":"<p>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties to a game object.</p> <p>Note</p> <p>This behavior will override default <code>tint</code> property</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"tintrgb/#live-demos","title":"Live demos","text":"<ul> <li>Fade</li> <li>Yellow to green</li> </ul>"},{"location":"tintrgb/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"tintrgb/#install-plugin","title":"Install plugin","text":""},{"location":"tintrgb/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextintrgbplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextintrgbplugin.min.js', true);\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>scene.plugins.get('rextintrgbplugin').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TintRGBPlugin from 'phaser3-rex-plugins/plugins/tintrgb-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTintRGB',\nplugin: TintRGBPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>scene.plugins.get('rexTintRGB').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddTintRGBProperties from 'phaser3-rex-plugins/plugins/tintrgb.js';\n</code></pre></li> <li>Attach <code>tintR</code>, <code>tintG</code>, <code>tintB</code>, and <code>tintGray</code> properties.     <pre><code>AddTintRGBProperties(gameObject, tintRGB);\ngameObject.tintGray = 128;\n</code></pre></li> </ul>"},{"location":"tintrgb/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexTintRGB').add(gameObject, tintRGB);\ngameObject.tintGray = 128;\n// gameObject.tintR = 128;\n// gameObject.tintG = 128;\n// gameObject.tintB = 128;\n</code></pre> <ul> <li><code>tintRGB</code> : Initial tintRGB value in <code>0xRRGGBB</code>.</li> <li><code>tintR</code> : color R of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintG</code> : color G of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintB</code> : color B of tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.</li> <li><code>tintGray</code> :\u3000Gray tint, <code>0</code>~<code>255</code>. Default is <code>255</code>.<ul> <li>Set <code>gameObject.tintGray</code> is equal to set <code>tintR</code>, <code>tintG</code>, <code>tintB</code> with the same value.</li> </ul> </li> </ul>"},{"location":"tintrgb/#fade","title":"Fade","text":"<pre><code>scene.tweens.add({\ntargets: gameObject,\ntintR: 0,\ntintG: 0,\ntintB: 0,\n// tintGray: 0,\nduration: 3000\n})\n</code></pre>"},{"location":"tools/","title":"Tools","text":""},{"location":"tools/#texture-atlas","title":"Texture atlas","text":""},{"location":"tools/#texture-packer","title":"Texture-packer","text":"<p>Texture-packer</p>"},{"location":"tools/#free-texture-packer","title":"Free texture packer","text":"<p>Free texture packer, Web app</p>"},{"location":"tools/#leshy-spritesheet-tool","title":"Leshy SpriteSheet Tool","text":"<p>Leshy SpriteSheet Tool</p> <p>Export to JSON-TP-Hash</p>"},{"location":"tools/#aseprite","title":"Aseprite","text":"<p>Aseprite</p> <ol> <li>Go to \"File - Export Sprite Sheet\"</li> <li>On the Layout tab:</li> <li>Set the \"Sheet type\" to \"Packed\"</li> <li>Set the \"Constraints\" to \"None\"</li> <li>Check the \"Merge Duplicates\" checkbox</li> <li>On the Sprite tab:<ol> <li>Set \"Layers\" to \"Visible layers\"</li> <li>Set \"Frames\" to \"All frames\", unless you only wish to export a sub-set of tags</li> </ol> </li> <li>On the Borders tab:<ol> <li>Check the \"Trim Sprite\" and \"Trim Cells\" options</li> <li>Ensure \"Border Padding\", \"Spacing\" and \"Inner Padding\" are all &gt; 0 (1 is usually enough)    </li> </ol> </li> <li>On the Output tab:<ol> <li>Check \"Output File\", give your image a name and make sure you choose \"png files\" as the file type</li> <li>Check \"JSON Data\" and give your json file a name</li> <li>The JSON Data type can be either a Hash or Array, Phaser doesn't mind.</li> <li>Make sure \"Tags\" is checked in the Meta options</li> <li>In the \"Item Filename\" input box, make sure it says just \"{frame}\" and nothing more.</li> </ol> </li> <li>Click export</li> </ol> <p>Tested with Aseprite 1.2.25</p>"},{"location":"tools/#atlas-packer","title":"Atlas-packer","text":"<ul> <li>gammafp/Atlas-packer</li> </ul>"},{"location":"tools/#animation","title":"Animation","text":"<ul> <li>gammafp/Animator</li> </ul>"},{"location":"tools/#bitmap-font","title":"Bitmap font","text":"<ul> <li>SnowB BMF</li> <li>71squared-glyphdesigner</li> <li>Bitmap Font Generator</li> <li>TTF to PNG</li> </ul>"},{"location":"touchevents/","title":"Touch events","text":""},{"location":"touchevents/#introduction","title":"Introduction","text":"<p>Built-in touch/mouse events of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul> <p>Note</p> <p>No touch input event fired in preload stage.</p>"},{"location":"touchevents/#usage","title":"Usage","text":""},{"location":"touchevents/#quick-start","title":"Quick start","text":"<ul> <li>Is touching     <pre><code>var pointer = scene.input.activePointer;\nif (pointer.isDown) {\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}\n</code></pre></li> <li>On any touching start     <pre><code>scene.input.on('pointerdown', function(pointer){\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}, scope);\n</code></pre></li> <li>On any touching end     <pre><code>scene.input.on('pointerup', function(pointer){\nvar touchX = pointer.x;\nvar touchY = pointer.y;\n// ...\n}, scope);\n</code></pre></li> <li>On touch game object start     <pre><code>gameObject.setInteractive().on('pointerdown', function(pointer, localX, localY, event){\n// ...\n}, scope);\n</code></pre></li> <li>On touch game object end     <pre><code>gameObject.setInteractive().on('pointerup', function(pointer, localX, localY, event){\n// ...\n}, scope);\n</code></pre></li> <li>Drag game object     <pre><code>gameObject\n.setInteractive({ draggable: true })\n.on('dragstart', function(pointer, dragX, dragY){\n// ...\n}, scope);\n.on('drag', function(pointer, dragX, dragY){\ngameObject.setPosition(dragX, dragY);\n}, scope);\n.on('dragend', function(pointer, dragX, dragY, dropped){\n// ...\n}, scope);\n</code></pre></li> </ul> <p>Reference : Properties of point</p>"},{"location":"touchevents/#register-interactive","title":"Register interactive","text":"<p>Call <code>gameObject.setInteractive(...)</code> to register touch input of Game Object before listening touching events.</p> <ul> <li>Set hit area from width &amp; height (rectangle) of the texture     <pre><code>gameObject.setInteractive();\n</code></pre></li> <li>Set hit area from game object     <pre><code>gameObject.setInteractive(shape, callback);\n</code></pre><ul> <li>Circle<ul> <li>shape : <code>new Phaser.Geom.Circle(x, y, radius)</code></li> <li>callback : <code>Phaser.Geom.Circle.Contains</code></li> </ul> </li> <li>Ellipse<ul> <li>shape : <code>new Phaser.Geom.Ellipse(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Ellipse.Contains</code></li> </ul> </li> <li>Rectangle<ul> <li>shape : <code>new Phaser.Geom.Rectangle(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Rectangle.Contains</code></li> </ul> </li> <li>Triangle<ul> <li>shape : <code>new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3)</code></li> <li>callback : <code>Phaser.Geom.Triangle.Contains</code></li> </ul> </li> <li>Polygon<ul> <li>shape : <code>new Phaser.Geom.Polygon(points)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Hexagon<ul> <li>shape : <code>new Phaser.Geom.rexHexagon(x, y, size, type)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Rhombus<ul> <li>shape : <code>new Phaser.Geom.rexRhombus(x, y, width, height)</code></li> <li>callback : <code>Phaser.Geom.Polygon.Contains</code></li> </ul> </li> <li>Note: <code>x</code>, <code>y</code> relate to the top-left of the gameObject.</li> </ul> </li> <li>Set hit area from input plugin     <pre><code>scene.input.setHitArea(gameObjects, shape, callback);\n</code></pre><ul> <li>Circle     <pre><code>scene.input.setHitAreaCircle(gameObjects, x, y, radius);\n// scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains\n</code></pre></li> <li>Ellipse     <pre><code>scene.input.setHitAreaEllipse(gameObjects, x, y, width, height);\n// scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains\n</code></pre></li> <li>Rectangle     <pre><code>scene.input.setHitAreaRectangle(gameObjects, x, y, width, height);\n// scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains\n</code></pre></li> <li>Triangle     <pre><code>scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3);\n// scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains\n</code></pre></li> <li>Note: <code>x</code>, <code>y</code> relate to the top-left of the gameObject.</li> </ul> </li> <li>Set interactive configuration     <pre><code>gameObject.setInteractive({\nhitArea: shape,\nhitAreaCallback: callback,\nhitAreaDebug: shape,\ndraggable: false,\ndropZone: false,\nuseHandCursor: false,\ncursor: CSSString,\npixelPerfect: false,\nalphaTolerance: 1\n});\n</code></pre><ul> <li>Hit area<ul> <li>shape</li> <li>Pixel alpha<ul> <li><code>pixelPerfect</code> : <code>true</code></li> <li><code>alphaTolerance</code> : <code>1</code> (0-255)</li> </ul> </li> <li>Custom hit-testing function<ul> <li><code>hitAreaCallback</code> <pre><code>function(shape, x, y, gameObject) {\nreturn hit;  // true/false\n}\n</code></pre><ul> <li><code>shape</code> : Hit area object</li> <li><code>x</code>, <code>y</code> : Local position of texture.</li> <li><code>gameObject</code> : Game object.</li> </ul> </li> </ul> </li> <li><code>hitAreaDebug</code> : Debug shape.</li> </ul> </li> <li>Dragging<ul> <li><code>draggable</code> : <code>true</code></li> </ul> </li> <li>Drop zone<ul> <li><code>dropZone</code> : <code>true</code></li> </ul> </li> <li>Cursor<ul> <li><code>cursor</code> : CSS string</li> <li><code>useHandCursor</code> : <code>true</code></li> </ul> </li> </ul> </li> </ul> <p>Pixel perfect hit-testing</p> <p>This is an expensive process, should only be enabled on Game Objects that really need it.</p>"},{"location":"touchevents/#disable-interactive","title":"Disable interactive","text":"<ul> <li>Disable temporary     <pre><code>gameObject.disableInteractive();\n</code></pre></li> <li>Remove interaction     <pre><code>gameObject.removeInteractive();\n</code></pre></li> </ul>"},{"location":"touchevents/#top-only","title":"Top only","text":"<p>When set to <code>true</code> this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to <code>false</code> it will emit events from all Game Objects below a Pointer, not just the top one.</p> <ul> <li>Get     <pre><code>var topOnly = scene.input.topOnly;\n</code></pre></li> <li>Set     <pre><code>scene.input.topOnly = topOnly;\nscene.input.setTopOnly(topOnly);\n</code></pre></li> </ul> <p>Each scene can has its own <code>scene.input.topOnly</code> setting.</p>"},{"location":"touchevents/#touch-events","title":"Touch events","text":"<p>Trigger these events from top scene to bottom scene.</p> <ol> <li>Events on touched Game object     <pre><code>gameObject.on('pointerdown', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerup', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointermove', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerover', function(pointer, localX, localY, event){ /* ... */ }, scope);\ngameObject.on('pointerout', function(pointer, event){ /* ... */ }, scope);\n</code></pre><ul> <li>Cancel remaining touched events     <pre><code>function(pointer, localX, localY, event) {\nevent.stopPropagation();\n}\n</code></pre></li> </ul> </li> <li>Event on input plugin for each touched Game object     <pre><code>scene.input.on('gameobjectdown', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectup', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectmove', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectover', function(pointer, gameObject, event){ /* ... */ }, scope);\nscene.input.on('gameobjectout', function(pointer, gameObject, event){ /* ... */ }, scope);\n</code></pre><ul> <li>Cancel remaining touched events     <pre><code>function(pointer, gameObject, event) {\nevent.stopPropagation();\n}\n</code></pre></li> </ul> </li> <li>Events to get all touched Game Objects     <pre><code>scene.input.on('pointerdown', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerdownoutside', function(pointer){ /* ... */ }, scope);\nscene.input.on('pointerup', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerupoutside', function(pointer){ /* ... */ }, scope);\nscene.input.on('pointermove', function(pointer, currentlyOver){ /* ... */ }, scope);\nscene.input.on('pointerover', function(pointer, justOver){ /* ... */ }, scope);\nscene.input.on('pointerout', function(pointer, justOut){ /* ... */ }, scope);\nscene.input.on('gameout', function(timeStamp, domEvent){ /* ... */ }, scope);\nscene.input.on('gameover', function(timeStamp, domEvent){ /* ... */ }, scope);\n</code></pre></li> </ol>"},{"location":"touchevents/#game-canvas","title":"Game canvas","text":"<pre><code>scene.input.on('gameout', function(timeStamp, event){ /* ... */ }, scope);\nscene.input.on('gameover', function(timeStamp, event){ /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#dragging","title":"Dragging","text":""},{"location":"touchevents/#enable-dragging","title":"Enable dragging","text":"<ul> <li>Enable dragging when registering interactive <pre><code>gameObject.setInteractive({ draggable: true });\n</code></pre></li> <li>Enable dragging and add it to dragging detecting list after registered interactive     <pre><code>scene.input.setDraggable(gameObject);\n</code></pre></li> <li>Enable dragging     <pre><code>gameObject.input.draggable = true;\n</code></pre></li> </ul>"},{"location":"touchevents/#disable-dragging","title":"Disable dragging","text":"<ul> <li>Remove Game Object from dragging detecting list     <pre><code>scene.input.setDraggable(gameObject, false);\n</code></pre></li> <li>Disable dragging but keep it in dragging detecting list     <pre><code>gameObject.input.draggable = false;\n</code></pre></li> </ul>"},{"location":"touchevents/#dragging-events","title":"Dragging events","text":"<pre><code>gameObject.on('dragstart', function(pointer, dragX, dragY){ /* ... */ }, scope);\ngameObject.on('drag', function(pointer, dragX, dragY){ /* ... */ }, scope);\ngameObject.on('dragend', function(pointer, dragX, dragY, dropped){ /* ... */ }, scope);\n</code></pre> <pre><code>scene.input.on('dragstart', function(pointer, gameObject){ /* ... */ }, scope);\nscene.input.on('drag', function(pointer, gameObject, dragX, dragY){ /* ... */ }, scope);\nscene.input.on('dragend', function(pointer, gameObject, dropped){ /* ... */ }, scope);\n</code></pre> <ul> <li><code>dropped</code> : <code>'dragend'</code> and also <code>'drop'</code>.</li> </ul>"},{"location":"touchevents/#dragging-properties","title":"Dragging properties","text":"<pre><code>scene.input.dragDistanceThreshold = 16;\nscene.input.dragTimeThreshold = 500;\n</code></pre>"},{"location":"touchevents/#drop-zone","title":"Drop zone","text":""},{"location":"touchevents/#enable-drop-zone","title":"Enable drop zone","text":"<ul> <li>Enable dropping when registering interactive <pre><code>gameObject.setInteractive({ dropZone: true });\n</code></pre></li> <li>Enable dropping after registered interactive     <pre><code>gameObject.input.dropZone = true;\n</code></pre></li> </ul>"},{"location":"touchevents/#disable-drop-zone","title":"Disable drop zone","text":"<pre><code>gameObject.input.dropZone = false;\n</code></pre>"},{"location":"touchevents/#dropping-events","title":"Dropping events","text":"<pre><code>gameObject.on('drop', function(pointer, target){ /* ... */ }, scope);\n\ngameObject.on('dragenter', function(pointer, target){ /* ... */ }, scope);\ngameObject.on('dragover', function(pointer, target){ /* ... */ }, scope);\ngameObject.on('dragleave', function(pointer, target){ /* ... */ }, scope);\n</code></pre> <pre><code>scene.input.on('drop', function(pointer, gameObject, target){ /* ... */ }, scope);\n\nscene.input.on('dragenter', function(pointer, gameObject, target){ /* ... */ }, scope);\nscene.input.on('dragover', function(pointer, gameObject, target){ /* ... */ }, scope);\nscene.input.on('dragleave', function(pointer, gameObject, target){ /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#first-event-of-all","title":"First event of all","text":"<pre><code>scene.input.on('preupdate', function() { /* ... */ }, scope);\n</code></pre>"},{"location":"touchevents/#single-touch","title":"Single touch","text":""},{"location":"touchevents/#pointer","title":"Pointer","text":"<pre><code>var pointer = scene.input.activePointer;\n</code></pre>"},{"location":"touchevents/#multi-touch","title":"Multi-touch","text":""},{"location":"touchevents/#amount-of-active-pointers","title":"Amount of active pointers","text":"<p>Set amount of active pointers in game configuration</p> <pre><code>var config = {\n// ...\ninput: {\nactivePointers: 1,\n// ...\n}\n};\nvar game = new Phaser.Game(config);\n</code></pre> <p>Or add pointers in run-time.</p> <pre><code>scene.input.addPointer(num);  // total points = num + 1\n</code></pre>"},{"location":"touchevents/#pointers","title":"Pointers","text":"<ul> <li>pointer 1 ~ 10     <pre><code>var pointer = scene.input.pointer1;\n// ...\nvar pointer = scene.input.pointer10;\n</code></pre></li> <li>pointer n     <pre><code>var pointer = scene.input.manager.pointers[n];\n</code></pre></li> <li>Amount of total pointers     <pre><code>var amount = scene.input.manager.pointersTotal;\n</code></pre><ul> <li><code>1</code> in desktop</li> <li><code>2</code> in touch device. (<code>0</code> for mouse, <code>1</code> for 1 touch pointer)</li> </ul> </li> </ul>"},{"location":"touchevents/#pointer_1","title":"Pointer","text":"<ul> <li>Position<ul> <li>Current touching<ul> <li>Position in screen : <code>pointer.x</code> , <code>pointer.y</code></li> <li>Position in camera :<ul> <li>Single camera :     <pre><code>var worldX = pointer.worldX;\nvar worldY = pointer.worldY;\n</code></pre></li> <li>Multiple cameras :     <pre><code>var worldXY = pointer.positionToCamera(camera);  // worldXY: {x, y}\n// var worldXY = pointer.positionToCamera(camera, worldXY);\nvar worldX = worldXY.x;\nvar worldY = worldXY.y;\n</code></pre></li> </ul> </li> <li>Position of previous moving : <code>pointer.prevPosition.x</code> , <code>pointer.prevPosition.y</code><ul> <li>Updating when pointer-down, potiner-move, or pointer-up.</li> </ul> </li> <li>Interpolated position :     <pre><code>var points = pointer.getInterpolatedPosition(step);\n// var out = pointer.getInterpolatedPosition(step, out);\n</code></pre></li> </ul> </li> <li>Drag<ul> <li>Touching start : <code>pointer.downX</code>, <code>pointer.downY</code></li> <li>Touching end : <code>pointer.upX</code>, <code>pointer.upY</code></li> <li>Drag distance between pointer-down to latest pointer : <code>pointer.getDistance()</code><ul> <li>Horizontal drag distance : <code>pointer.getDistanceX()</code></li> <li>Vertical drag distance : <code>pointer.getDistanceY()</code></li> </ul> </li> <li>Drag angle : <code>pointer.getAngle()</code></li> </ul> </li> </ul> </li> <li>Time<ul> <li>Touching start : <code>pointer.downTime</code></li> <li>Touching end : <code>pointer.upTime</code></li> <li>Drag : <code>pointer.getDuration()</code></li> </ul> </li> <li>Touch state<ul> <li>Is touching/any button down :  <code>pointer.isDown</code></li> <li>Is primary button down : <code>pointer.primaryDown</code></li> </ul> </li> <li>Button state : <code>pointer.button</code><ul> <li>On Touch devices the value is always <code>0</code>.</li> </ul> </li> <li>Button down<ul> <li>No button down : <code>pointer.noButtonDown()</code></li> <li>Is primary (left) button down : <code>pointer.leftButtonDown()</code></li> <li>Is secondary (right) button down : <code>pointer.rightButtonDown()</code></li> <li>Is middle (mouse wheel) button down : <code>pointer.middleButtonDown()</code></li> <li>Is back button down : <code>pointer.backButtonDown()</code></li> <li>Is forward button down : <code>pointer.forwardButtonDown()</code></li> </ul> </li> <li>Button released<ul> <li>Is primary (left) button released : <code>pointer.leftButtonReleased()</code></li> <li>Is secondary (right) button released : <code>pointer.rightButtonReleased()</code></li> <li>Is middle (mouse wheel) button released : <code>pointer.middleButtonReleased()</code></li> <li>Is back button released : <code>pointer.backButtonReleased()</code></li> <li>Is forward button released : <code>pointer.forwardButtonReleased()</code></li> </ul> </li> <li>Index in <code>scene.input.manager.pointers</code> : <code>pointer.id</code></li> <li>Motion<ul> <li>Angle: <code>pointer.angle</code></li> <li>Distance: <code>pointer.distance</code></li> <li>Velocity: <code>pointer.velocity</code><ul> <li><code>pointer.velocity.x</code>, <code>`pointer.velocity.y</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"touchevents/#input-object","title":"Input object","text":"<ul> <li><code>gameObject.input</code> : Game object's input object.</li> <li><code>gameObject.input.localX</code>, <code>gameObject.input.localY</code> : Pointer to local position of texture.</li> <li><code>gameObject.input.dragStartX</code>, <code>gameObject.input.dragStartY</code> : The x/y coordinate of the Game Object    that owns this Interactive Object when the drag started.</li> <li><code>gameObject.input.dragStartXGlobal</code>, <code>gameObject.input.dragStartYGlobal</code> : The x/y coordinate that    the Pointer started dragging this Interactive Object from.</li> <li><code>gameObject.input.dragX</code>, <code>gameObject.input.dragY</code> : The x/y coordinate that this Interactive Object    is currently being dragged to.</li> </ul>"},{"location":"touchevents/#smooth","title":"Smooth","text":"<p>Get touch position from interpolation of previous touch position and current touch position.</p> <pre><code>Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor))\n</code></pre> <ol> <li>Set smooth factor. In game configuration <pre><code>var config = {\n// ....\ninput: {\nsmoothFactor: 0\n}\n}\n</code></pre></li> <li>Get touch position     <pre><code>var x = pointer.x;\nvar y = pointer.y;\nvar worldX = pointer.worldX;\nvar worldY = pointer.worldY;\n</code></pre></li> </ol>"},{"location":"touchevents/#debug","title":"Debug","text":"<ul> <li>Enable, draw shape of (shape) hit area.     <pre><code>scene.input.enableDebug(gameObject);\n// scene.input.enableDebug(gameObject, color);\n</code></pre></li> <li>Disable     <pre><code>scene.input.removeDebug(gameObject);\n</code></pre></li> <li>Get debug shape game object     <pre><code>var shape = gameObject.input.hitAreaDebug;\n</code></pre></li> </ul>"},{"location":"touchevents/#poll-rate","title":"Poll rate","text":"<ul> <li>Poll when touches moved, or updated. Default behavior.     <pre><code>scene.input.setPollOnMove();\n</code></pre></li> <li>Poll every tick.     <pre><code>scene.input.setPollAlways();\n</code></pre></li> <li>Set poll rate.     <pre><code>scene.input.setPollRate(rate);\n</code></pre></li> </ul>"},{"location":"toucheventstop/","title":"Touch event stop","text":""},{"location":"toucheventstop/#introduction","title":"Introduction","text":"<p>Stop touch events propagation.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"toucheventstop/#live-demos","title":"Live demos","text":"<ul> <li>Stop touch events</li> </ul>"},{"location":"toucheventstop/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"toucheventstop/#install-plugin","title":"Install plugin","text":""},{"location":"toucheventstop/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextoucheventstopplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextoucheventstopplugin.min.js', true);\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = scene.plugins.get('rextoucheventstopplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TouchEventStopPlugin from 'phaser3-rex-plugins/plugins/toucheventstop-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTouchEventStop',\nplugin: TouchEventStopPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = scene.plugins.get('rexTouchEventStop').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import TouchEventStop from 'phaser3-rex-plugins/plugins/toucheventstop.js';\n</code></pre></li> <li>Add touch-event-stop behavior     <pre><code>var touchEventStop = newe TouchEventStop(gameObject, config);\n</code></pre></li> </ul>"},{"location":"toucheventstop/#create-instance","title":"Create instance","text":"<pre><code>var touchEventStop = scene.plugins.get('rexTouchEventStop').add(gameObject, {\n// hitAreaMode: 0,    // 0|1|'default'|'fullWindow'\n// enable: true\n});\n</code></pre> <ul> <li><code>hitAreaMode</code> : Mode of hit-area<ul> <li><code>0</code>, or <code>'default'</code> : Set hit-area to size of game object, only touch events on this game object will be stopped..</li> <li><code>1</code>, or <code>'fullWindow'</code> : Set hit-area to whole window, all touch events will be stopped.</li> </ul> </li> <li><code>enable</code> : Set <code>false</code> to disable touch-event-stop behavior.</li> </ul>"},{"location":"toucheventstop/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = touchEventStop.enable;  // enable: true, or false\n</code></pre></li> <li>Set     <pre><code>touchEventStop.setEnable(enable);  // enable: true, or false\n// touchEventStop.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>touchEventStop.toggleEnable();\n</code></pre></li> </ul>"},{"location":"touchstate/","title":"Touch state","text":""},{"location":"touchstate/#introduction","title":"Introduction","text":"<p>Store current touch input properties.</p> <ul> <li>Author: Rex</li> <li>Behavior of game object</li> </ul>"},{"location":"touchstate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"touchstate/#install-plugin","title":"Install plugin","text":""},{"location":"touchstate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextouchstateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextouchstateplugin.min.js', true);\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = scene.plugins.get('rextouchstateplugin').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TouchStatePlugin from 'phaser3-rex-plugins/plugins/touchstate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTouchState',\nplugin: TouchStatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = scene.plugins.get('rexTouchState').add(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TouchState from 'phaser3-rex-plugins/plugins/touchstate.js';\n</code></pre></li> <li>Add touch-state behavior     <pre><code>var touchState = new TouchState(gameObject, config);\n</code></pre></li> </ul>"},{"location":"touchstate/#create-instance","title":"Create instance","text":"<pre><code>var touchState = scene.plugins.get('rexTouchState').add(gameObject, {\n// enable: true,\n});\n</code></pre> <ul> <li><code>enable</code> : Can touch.</li> </ul>"},{"location":"touchstate/#properties","title":"Properties","text":"<ul> <li>Is pointer down, is pointer up     <pre><code>var isDown = touchState.isDown;\nvar isUp = touchState.isUp;\n</code></pre></li> <li>Is in touching     <pre><code>var isInTouching = touchState.isInTouching;\n</code></pre></li> <li>Pointer in local position     <pre><code>var localX = touchState.localX;\nvar localY = touchState.localY;\n</code></pre></li> <li>Drag speed     <pre><code>var speed = touchState.speed;\nvar speedX =  touchState.speedX;\nvar speedY =  touchState.speedY;\n</code></pre> <pre><code>var dx = touchState.dx;\nvar dy = touchState.dy;\nvar dt = touchState.dt;    </code></pre></li> </ul>"},{"location":"touchstate/#events","title":"Events","text":"<ul> <li>Touch start (pointer down)     <pre><code>touchState.on('touchstart', function (touchState, gameObject, pointer, localX, localY, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Touch end (pointer up)     <pre><code>touchState.on('touchend', function (touchState, gameObject, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Touch move (pointer move)     <pre><code>touchState.on('touchmove', function (touchState, gameObject, pointer, localX, localY, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"touchstate/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enabled = touchState.enable;  // enabled: true, or false\n</code></pre></li> <li>Set     <pre><code>touchState.setEnable(enabled);  // enabled: true, or false\n// touchState.enable = enabled;\n</code></pre></li> <li>Toggle     <pre><code>touchState.toggleEnable();\n</code></pre></li> </ul>"},{"location":"transitionimage/","title":"Transition image","text":""},{"location":"transitionimage/#introduction","title":"Introduction","text":"<p>Transit texture to another one. A containerLite game object with 2 image game objects.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"transitionimage/#live-demos","title":"Live demos","text":"<ul> <li>Ease property of current/next image<ul> <li>Cross-fade</li> <li>Scale</li> <li>Slide</li> </ul> </li> <li>Apply shader effect to current/next image, then ease property this shader effect.<ul> <li>Split</li> <li>Dissolve</li> </ul> </li> <li>Grid cut current/next image to cell images, then ease property of cell images<ul> <li>Grid cut</li> <li>3 columns</li> </ul> </li> <li>Morph custom mask game object<ul> <li>Pie mask</li> </ul> </li> <li>Transition modes</li> </ul>"},{"location":"transitionimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"transitionimage/#install-plugin","title":"Install plugin","text":""},{"location":"transitionimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextransitionimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextransitionimageplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TransitionImagePlugin from 'phaser3-rex-plugins/plugins/transitionimage-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTransitionImagePlugin',\nplugin: TransitionImagePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TransitionImage from 'phaser3-rex-plugins/plugins/transitionimage.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new TransitionImage(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"transitionimage/#create-instance","title":"Create instance","text":"<p><pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, {\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,    \n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre> or</p> <pre><code>var image = scene.add.rexTransitionImage(x, y, texture, frame, {\n// x: 0,\n// y: 0,\n// key: \n// frame: \n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,    \n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre> <ul> <li><code>dir</code> : Transition direction.<ul> <li><code>0</code>, or <code>'out'</code> : Transit current texture/image out.</li> <li><code>1</code>, or <code>'in'</code> : Transit next texture/image in.</li> </ul> </li> <li><code>onStart</code>, <code>onStartScope</code> : Callback and scope of transition-start. See Set transition callbacks</li> <li><code>onProgress</code>, <code>onProgressScope</code> : Callback and scope of transition-progress. See Set transition callbacks</li> <li><code>onComplete</code>, <code>onCompleteScope</code> : Callback and scope of transition-complete. See Set transition callbacks</li> <li><code>duration</code> : Duration of transition.</li> <li><code>ease</code> : Ease function of transition-progress.</li> <li><code>mask</code> : Mask game object.<ul> <li><code>true</code> : Default graphics game object.</li> <li>Any shape game object, or custom shape, custom progress game object.</li> </ul> </li> </ul> <p>If <code>onStart</code>, <code>onProgress</code> and <code>onComplete</code> are all <code>undefined</code>, it will use cross-fade as default transition callbacks.</p> <p>Add transitionimage from JSON</p> <pre><code>var image = scene.make.rexTransitionImage({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"transitionimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTransitionImage extends TransitionImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var transitionimage = new MyTransitionImage(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimage/#transit","title":"Transit","text":"<pre><code>image\n// .setTransitionDirection(dir)\n// .setTransitionStartCallback(onStart, onStartScope)\n// .setTransitionProgressCallback(onProgress, onProgressScope)\n// .setTransitionCompleteCallback(onComplete, onCompleteScope)\n// .setDuration(duration)\n// .setEaseFunction(ease)\n// .setMaskEnable(enable)\n.transit(texture, frame)\n</code></pre> <p>or</p> <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n})\n</code></pre> <ul> <li><code>mask</code> : Mask game object.<ul> <li><code>true</code> : Default graphics game object. Also apply this mask to current and next textures/images</li> <li>Any shape game object, or custom shape, custom progress game object.<ul> <li>Apply mask to current texture :      <pre><code>image.setCurrentImageMaskEnable();\n// image.setCurrentImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to next texture :      <pre><code>image.setNextImageMaskEnable();\n// image.setNextImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to both current and next trextures :     <pre><code>image.setMaskEnable();\n// image.setMaskEnable(enable, invertAlpha);\n</code></pre></li> </ul> </li> </ul> </li> </ul> <p>Fire <code>'complete'</code> event when transition completed.</p>"},{"location":"transitionimage/#register-transtion-mode","title":"Register transtion mode","text":"<ul> <li>Register transtion mode     <pre><code>image.addTransitionMode(modeName, {\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n});\n</code></pre></li> <li>Trnasit by transition mode     <pre><code>image.transit(texture, frame, modeName);\n// image.transit(texture, frame, modeNames);\n</code></pre>     or     <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n\nmode: modeName, // or modeName\n// dir: 0,\n// onStart: function(parent, currentImage, nextImage, t) { },\n// onStartScope: undefined,\n// onProgress: function(parent, currentImage, nextImage, t) { },\n// onProgressScope: undefined,\n// onComplete: function(parent, currentImage, nextImage, t) { },\n// onCompleteScope: undefined,\n// duration: 1000,\n// ease: 'Linear',\n// mask: undefined,\n})\n</code></pre><ul> <li>Can override configuration of transition mode</li> <li><code>modeName</code> : A string, or an array of string to pick a random mode.</li> </ul> </li> <li>Current transition mode     <pre><code>var modeName = image.currentTransitionMode;\n</code></pre></li> </ul>"},{"location":"transitionimage/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"transitionimage/#transition-callbacks","title":"Transition callbacks","text":"<ul> <li>Set transition direction     <pre><code>image.setTransitionDirection(dir);\n</code></pre><ul> <li><code>0</code>, or <code>'out'</code> : Transit current texture out.</li> <li><code>1</code>, or <code>'in'</code> : Transit next texture in.</li> </ul> </li> <li>Set transition-start callback     <pre><code>image.setTransitionStartCallback(onStart, onStartScope)\n</code></pre><ul> <li><code>onStart</code> <pre><code>function(parent, currentImage, nextImage, t) { }\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.</li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. It is <code>0</code> in this case.</li> </ul> </li> </ul> </li> <li>Set transition-progress callback     <pre><code>image.setTransitionProgressCallback(onProgress, onProgressScope)\n</code></pre><ul> <li><code>onProgress</code> <pre><code>function(parent, currentImage, nextImage, t) { // parent.setChildLocalAlpha(currentImage, 1 - t);\n// parent.setChildLocalScale(currentImage, 1 - t);\n// parent.setChildLocalPosition(currentImage, x, 0);\n}\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.<ul> <li>Set alpha of currentImage, or nextImage by <code>parent.setChildLocalAlpha(currentImage, alpha)</code>.</li> <li>Set scale of currentImage, or nextImage by <code>parent.setChildLocalScale(currentImage, scale)</code>.</li> <li>Set position of currentImage, or nextImage by <code>parent.setChildLocalScale(currentImage, x, y)</code>.        </li> </ul> </li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. <code>0</code>~<code>1</code>.</li> </ul> </li> </ul> </li> <li>Set transition-complete callback     <pre><code>image.setTransitionCompleteCallback(onComplete, onCompleteScope)\n</code></pre><ul> <li><code>onComplete</code> <pre><code>function(parent, currentImage, nextImage, t) { }\n</code></pre><ul> <li><code>parent</code> : Transition image game object, extends from ContainerLite</li> <li><code>currentImage</code> : Image game object to display current texture.</li> <li><code>nextImage</code> : Image game object to display next texture.</li> <li><code>t</code> : Progress percentage. It is <code>1</code> in this case.</li> </ul> </li> </ul> </li> </ul>"},{"location":"transitionimage/#transition-duration","title":"Transition duration","text":"<ul> <li>Set     <pre><code>image.setDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = image.duration;\n</code></pre></li> </ul>"},{"location":"transitionimage/#ease-function","title":"Ease function","text":"<ul> <li>Set     <pre><code>image.setEaseFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function of transition-progress.</li> </ul> </li> <li>Get     <pre><code>var ease = image.easeFunction;\n</code></pre></li> </ul>"},{"location":"transitionimage/#mask","title":"Mask","text":"<ul> <li>Apply mask to current texture :      <pre><code>image.setCurrentImageMaskEnable();\n// image.setCurrentImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to next texture :      <pre><code>image.setNextImageMaskEnable();\n// image.setNextImageMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Apply mask to both current and next trextures :     <pre><code>image.setMaskEnable();\n// image.setMaskEnable(enable, invertAlpha);\n</code></pre></li> <li>Assign default mask game object     <pre><code>image.setMaskGameObject(true);\n</code></pre></li> <li>Assign custom mask game object     <pre><code>image.setMaskGameObject(maskGameObject);\n</code></pre><ul> <li><code>maskGameObject</code> : A graphics game object, or any shape game objects, custom-progress shape game object</li> </ul> </li> </ul>"},{"location":"transitionimage/#grid-cut","title":"Grid cut","text":"<p>Grid cut texture to cells.</p> <ul> <li>Grid cut current texture :     <pre><code>var cellImageGameObjects = image.gridCutCurrentImage(columns, rows);\n</code></pre><ul> <li><code>cellImageGameObjects</code> : Array of cell game objects.</li> </ul> </li> <li>Grid cut next texture :     <pre><code>var cellImageGameObjects = image.gridCutNextImage(columns, rows);\n</code></pre><ul> <li><code>cellImageGameObjects</code> : Array of cell game objects.</li> </ul> </li> <li>Get cut cell image game objects, after cutting.     <pre><code>var cellImageGameObjects = image.getCellImages();\n</code></pre></li> <li>Apply mask to cell images     <pre><code>image.setCellImagesMaskEnable();\n// image.setCellImagesMaskEnable(enable, invertAlpha);\n</code></pre></li> </ul> <p>Cut cell image game objects will be set to invisible after transition complete.</p>"},{"location":"transitionimage/#pauseresume","title":"Pause/Resume","text":"<pre><code>image.pause();\n</code></pre> <pre><code>image.resume();\n</code></pre>"},{"location":"transitionimage/#stop","title":"Stop","text":"<pre><code>image.stop();\n</code></pre> <p>Also will fire <code>'complete'</code> event.</p>"},{"location":"transitionimage/#events","title":"Events","text":"<ul> <li>On complete    <pre><code>image.on('complete', function(){\n})\n</code></pre></li> </ul>"},{"location":"transitionimage/#flip","title":"Flip","text":"<ul> <li>Flip     <pre><code>image.flipX(value);\nimage.flipY(value);\nimage.flip(x, y);\n</code></pre></li> <li>Toggle     <pre><code>image.toggleFlipX();\nimage.toggleFlipY();\n</code></pre></li> </ul>"},{"location":"transitionimage/#use-cases","title":"Use cases","text":"<ul> <li>Ease property of current/next image.<ul> <li>Scale</li> <li>Slide, apply mask to current/next image.</li> </ul> </li> <li>Apply shader effect to current/next image, then ease property this shader effect.<ul> <li>Dissolve</li> <li>Split</li> </ul> </li> <li>Grid cut current/next image to cell images, then ease property of cell images<ul> <li>Grid cut</li> <li>Three-columns, apply mask to cell images.</li> </ul> </li> <li>Morph custom mask game object<ul> <li>Pie-mask, mask current/next image by a custom-progress game object.</li> </ul> </li> </ul>"},{"location":"transitionimage/#internal-image-game-object","title":"Internal image game object","text":"<ul> <li>Current, next image game object     <pre><code>var curentImageGO = image.currentImage;\nvar nextImageGO = image.nextImage;\n</code></pre></li> <li>Front, back image game object     <pre><code>var frontImageGO = image.frontImage;\nvar backImageGO = image.backImage;\n</code></pre></li> </ul>"},{"location":"transitionimage/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"transitionimage/#shader-effects","title":"Shader effects","text":"<p>Internal image game objects (<code>image.currentImage</code>, <code>image.nextImage</code>) support preFX and postFX effects</p>"},{"location":"transitionimagepack/","title":"Transition image pack","text":""},{"location":"transitionimagepack/#introduction","title":"Introduction","text":"<p>Transit texture to another one, with some pre-build effects, extended from TransitionImage</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"transitionimagepack/#live-demos","title":"Live demos","text":"<ul> <li>Effect list</li> <li>Slide modes</li> <li>Fade modes</li> <li>Mask modes</li> <li>Shader effect modes</li> </ul>"},{"location":"transitionimagepack/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"transitionimagepack/#install-plugin","title":"Install plugin","text":""},{"location":"transitionimagepack/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rextransitionimagpackplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextransitionimagpackplugin.min.js', true);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import TransitionImagePackPlugin from 'phaser3-rex-plugins/templates/transitionimagepack/transitionimagepack-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexTransitionImagePackPlugin',\nplugin: TransitionImagePackPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import TransitionImagePack from 'phaser3-rex-plugins/templates/transitionimagepack/TransitionImagePack.js';\n</code></pre></li> <li>Add image object     <pre><code>var image = new TransitionImagePack(scene, x, y, texture, frame, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#create-instance","title":"Create instance","text":"<p><pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, {   // duration: 1000,\n});\n</code></pre> or</p> <pre><code>var image = scene.add.rexTransitionImagePack(x, y, texture, frame, {\n// x: 0,\n// y: 0,\n// key: \n// frame: \n// duration: 1000,\n});\n</code></pre> <ul> <li><code>duration</code> : Duration of transition.</li> </ul> <p>Add transitionimage from JSON</p> <pre><code>var image = scene.make.rexTransitionImagePack({\nx: 0,\ny: 0,\nkey: null,\nframe: null,\n\n// duration: 1000,\n\n// origin: {x: 0.5, y: 0.5},\nadd: true\n});\n</code></pre>"},{"location":"transitionimagepack/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTransitionImagePack extends TransitionImagePack {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var transitionimage = new MyTransitionImagePack(scene, x, y, texture, frame, config);\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#transit","title":"Transit","text":"<pre><code>image\n// .setDuration(duration)\n// .setEaseFunction(ease)\n.transit(texture, frame, modeName)\n</code></pre> <p>or</p> <pre><code>image.transit({\nkey: undefined,\n// frame: undefined,\n// duration: 1000,\n// ease: 'Linear',\nmode: modeName\n})\n</code></pre> <ul> <li><code>duration</code> : Override default <code>duration</code> setting.</li> <li><code>ease</code> : Override default <code>ease</code> setting.</li> <li><code>mode</code> : Pre-build effects<ul> <li>Fade effects : <ul> <li><code>'fade'</code> : Tint old image to black, then tint new image from black to origin color.</li> <li><code>'crossFade'</code> : Ease alpha of old image from 1 to 0, and ease alpha of new image from 0 to 1 at the same time.</li> </ul> </li> <li>Slide effects : <code>'slideLeft'</code>, <code>'slideRight'</code>, <code>'slideUp'</code>, <code>'slideDown'</code>,    <code>'slideAwayLeft'</code>, <code>'slideAwayRight'</code>, <code>'slideAwayUp'</code>, <code>'slideAwayDown'</code>,    <code>'pushLeft'</code>, <code>'pushRight'</code>, <code>'pushUp'</code>, <code>'pushDown'</code>.</li> <li>Zoom(scale) effects : <code>'zoomOut'</code>, <code>'zoomIn'</code>, <code>'zoomInOut'</code>.</li> <li>Mask effects : <code>'wipeLeft'</code>, <code>'wipeRight'</code>, <code>'wipeUp'</code>, <code>'wipeDown'</code>,   <code>'irisOut'</code>, <code>'irisIn'</code>,  <code>'irisInOut'</code>, <code>'pieOut'</code>, <code>'pieIn'</code>, <code>'pieInOut'</code>,    <code>'blinds'</code>, <code>'squares'</code>, <code>'diamonds'</code>, <code>'circles'</code>, <code>'curtain'</code>.</li> <li>Shader effects : <code>'pixellate'</code>, <code>'dissolve'</code>,    <code>'revealLeft'</code>, <code>'revealRight'</code>, <code>'revealUp'</code>, <code>'revealDown'</code></li> </ul> </li> </ul>"},{"location":"transitionimagepack/#current-texture","title":"Current texture","text":"<pre><code>var textureKey = image.texture.key;\nvar frameName = image.frame.name;\n</code></pre>"},{"location":"transitionimagepack/#transition-duration","title":"Transition duration","text":"<ul> <li>Set     <pre><code>image.setDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = image.duration;\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#ease-function","title":"Ease function","text":"<ul> <li>Set     <pre><code>image.setEaseFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function of transition-progress.</li> </ul> </li> <li>Get     <pre><code>var ease = image.easeFunction;\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#pauseresume","title":"Pause/Resume","text":"<pre><code>image.pause();\n</code></pre> <pre><code>image.resume();\n</code></pre>"},{"location":"transitionimagepack/#stop","title":"Stop","text":"<pre><code>image.stop();\n</code></pre> <p>Also will fire <code>'complete'</code> event.</p>"},{"location":"transitionimagepack/#events","title":"Events","text":"<ul> <li>On complete    <pre><code>image.on('complete', function(){\n})\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#flip","title":"Flip","text":"<ul> <li>Flip     <pre><code>image.flipX(value);\nimage.flipY(value);\nimage.flip(x, y);\n</code></pre></li> <li>Toggle     <pre><code>image.toggleFlipX();\nimage.toggleFlipY();\n</code></pre></li> </ul>"},{"location":"transitionimagepack/#other-properties","title":"Other properties","text":"<p>See transition image object, game object</p>"},{"location":"tween-timeline/","title":"Timeline","text":""},{"location":"tween-timeline/#introduction","title":"Introduction","text":"<p>Chain a series of tween tasks, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tween-timeline/#usage","title":"Usage","text":""},{"location":"tween-timeline/#create-timeline-then-chain-tween-tasks","title":"Create timeline, then chain tween tasks","text":"<ol> <li>Create timeline     <pre><code>var timeline = scene.tweens.createTimeline();\n</code></pre></li> <li>Add tween task configuration     <pre><code>timeline.add({\ntargets: gameObject,\nx: 400,               // '+=100'\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\n// offset: '-=500',   // starts 500ms before previous tween ends\n})\n</code></pre><ul> <li><code>offset</code> : Start this tween task with a time offset.<ul> <li>A number : Absolute offsets, start this tween task after timeline start.</li> <li>A string, <code>'-=n'</code> : Relative offsets, start this tween task before previous tween ends.</li> </ul> </li> </ul> </li> <li>Start tween tasks     <pre><code>timeline.play();\n</code></pre></li> </ol>"},{"location":"tween-timeline/#create-timeline-included-tween-tasks","title":"Create timeline, included tween tasks","text":"<pre><code>var timeline = scene.tweens.timeline({\ntargets: gameObject,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\neaseParams:\n\nduration: 1000,\ndelay: 0,\nloop: 0,\nhold: 0,\nrepeat: 0,\nloopDelay: 0,\ncompleteDelay: 0,\nyoyo: false,\n\npaused: false,\nuseFrames: false,\nflipX: false,\nflipY: false,\n\n\ntweens: [\n{\ntargets: gameObject,\nx: 400,               // '+=100'\n// ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\n// duration: 1000,\n// repeat: 0,            // -1: infinity\n// yoyo: false,\n// offset: '-=500',   // starts 500ms before previous tween ends\n},\n// ...\n],\n\n\ncallbackScope: timeline,\n\nonStart: function () {},\nonStartScope: onStartParams: [],\n\nonUpdate: function () {},\nonUpdateScope:\nonUpdateParams: [],\n\nonLoop: function () {},\nonLoopScope:\nonLoopParams: [],\n\nonYoyo: function () {},\nonYoyoScope:\nonYoyoParams: [],\n\nonComplete: function () {},\nonCompleteScope:\nonCompleteParams: [],\n\ntotalDuration: 0,\n\n});\n</code></pre>"},{"location":"tween/","title":"Tween task","text":""},{"location":"tween/#introduction","title":"Introduction","text":"<p>Change properties by tween equations, built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"tween/#usage","title":"Usage","text":""},{"location":"tween/#create-tween-task","title":"Create tween task","text":"<pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\nx: 1,\n// x: '+=1',\n// x: '-=1',\n// x: '*=1',\n// x: '/=1',\n// x: 'random(0.25, 0.75)',\n// x: 'int(10, 100)',\n// x: [100, 300, 200, 600],\n// x: { from: 0, to: 1 },\n// x: { start: 0, to: 1 },  \n// x: { start: value0, from: value1, to: value2 },  \n// x: {\n//      getActive: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },\n//      getStart: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },\n//      getEnd: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; }\n// },\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\n\n// interpolation: null,\n});\n</code></pre> <ul> <li><code>key: value2</code> : Tween to <code>value2</code>.</li> <li><code>key: '+=deltaValue'</code> : Tween to current value + deltaValue<ul> <li>Support these expressions : <code>key: '+=deltaValue'</code>, <code>key: '-=deltaValue'</code>, <code>key: '*=deltaValue'</code>, <code>key: '/=deltaValue'</code></li> </ul> </li> <li><code>key: 'random(10, 100)'</code> : Tween to a random float value.</li> <li><code>key: 'int(10, 100)'</code> : Tween to a random int value.</li> <li><code>key: [100, 300, 200, 600]</code> : Use <code>interpolation</code> to determine the value.</li> <li><code>key: { from: value1, to: value2 }</code> : Set the property to <code>value11</code> when tween started after delay, then tween to <code>value2</code>.</li> <li><code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)   </li> <li><code>key: { start: value0, to: value2 }</code> : Set the property to <code>value0</code> immediately, then tween to <code>value2</code>.<ul> <li><code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)  </li> </ul> </li> <li><code>key: { start: value0, from: value1, to: value2 }</code> : Set the property to <code>value0</code> immediately, then set to <code>value1</code> when tween started after delay, then tween to <code>value2</code>.<ul> <li><code>value0</code>, <code>value1</code>, <code>value2</code> : A number, string, or callback(<code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code>)  </li> </ul> </li> <li><code>key: function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code><ul> <li><code>target</code> :\u3000The tween target.</li> <li><code>key</code> : The target property.</li> <li><code>value</code> : The current value of the target property.</li> <li><code>targetIndex</code> : The index of the target within the Tween.</li> <li><code>totalTargets</code> : The total number of targets in this Tween.</li> <li><code>tween</code> : The Tween that invoked this callback.</li> </ul> </li> <li><code>key: { getActive:callback, getStart:callback, getEnd:callback}</code><ul> <li><code>callback</code> : <code>function(target, key, value, targetIndex, totalTargets, tween)  { return newValue; }</code></li> </ul> </li> </ul> <p>or</p> <pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\npaused: false,\ncallbackScope: tween,\n\n// timming/callback of each state\nonStart: function () {},\nonStartParams: [],\n\n// initial delay\ndelay: 0,  // function(target, targetKey, value, targetIndex, totalTargets, tween) { },\n\n// tween duration\nduration: 1000,\nease: 'Linear',\neaseParams: null,\n\nonActive: function () {},\nonUpdate: function (tween, target, key, current, previous, param) {},\nonUpdateParams: [],\n\n// delay between tween and yoyo\nhold: 0,\nyoyo: false,  // true to tween backward\nflipX: false,\nflipY: false,\nonYoyo: function (tween, target, key, current, previous, param) {},\nonYoyoParams: [],\n\n// repeat count (-1: infinite)\nrepeat: 0,\nonRepeat: function (tween, target, key, current, previous, param) {},\nonRepeatParams: [],\n// delay to next pass\nrepeatDelay: 0,\n\n// loop count (-1: infinite)\nloop: 0,\nonLoop: function () {},\nonLoopParams: [],\n// delay to next loop\nloopDelay: 0,\n\n// delay to onComplete callback\ncompleteDelay: 0,\nonComplete: function () {},\nonCompleteParams: [],\n// timming/callback of each state\n\nonStop: function () {}, onPause: function () {}, onResume: function () {}, // properties:\nx: '+=600',        // start from current value\ny: 500,\nrotation: ...\nangle: ...\nalpha: ...\n// ...\n\n// or\nprops: {\nx: { value: '+=600', duration: 3000, ease: 'Power2' },\ny: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }\n},\n\n// or\nprops: {\nx: {\nduration: 400,\nyoyo: true,\nrepeat: 8,\nease: 'Sine.easeInOut',\nvalue: {\ngetActive: function (target, key, value, targetIndex, totalTargets, tween)\n{\nreturn value;\n},\ngetStart: function (target, key, value, targetIndex, totalTargets, tween)\n{\nreturn value + 30;\n},\ngetEnd: function (target, key, value, targetIndex, totalTargets, tween)\n{\ndestX -= 30;\nreturn destX;\n}\n}\n},\n....\n},\n\npersist: false,\n\ninterpolation: null,\ninterpolationData: null,\n\n});\n</code></pre> <ul> <li><code>targets</code> : The targets the tween is updating.</li> <li><code>delay</code> : The time the tween will wait before it first starts<ul> <li>A number, for all targets</li> <li>A callback function, built via stagger builder :<ul> <li>From <code>0</code> to <code>endValue</code> : <ul> <li><code>scene.tweens.stagger(endValue)</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code> : <ul> <li><code>scene.tweens.stagger([startValue, endValue])</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific ease function : <ul> <li><code>scene.tweens.stagger(endValue, {ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, with specific ease function : <ul> <li><code>scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific start index :<ul> <li><code>scene.tweens.stagger(endValue, {from: 'last'})</code></li> <li><code>scene.tweens.stagger(endValue, {from: 'center'})</code></li> <li><code>scene.tweens.stagger(endValue, {from: index})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, , with specific start index :<ul> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'last'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'center'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {from: index})</code></li> </ul> </li> <li>From <code>0</code> to <code>endValue</code>, with specific ease function, with specific start index : <ul> <li><code>scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'})</code></li> </ul> </li> <li>From <code>startValue</code> to <code>endValue</code>, with specific ease function , with specific start index :<ul> <li><code>scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'})</code></li> </ul> </li> <li>Grid mode. From <code>0</code> to <code>endValue</code>.<ul> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], })</code></li> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'})</code></li> <li><code>scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'})</code></li> </ul> </li> <li>Grid mode. From <code>startValue</code> to <code>endValue</code>.<ul> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], })</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'})</code></li> <li><code>scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'})</code></li> </ul> </li> </ul> </li> </ul> </li> <li><code>duration</code> : The duration of the tween</li> <li><code>ease</code> : The ease function used by the tween</li> <li><code>easeParams</code> : The parameters to go with the ease function (if any)</li> <li><code>hold</code> : The time the tween will pause before running a yoyo</li> <li><code>repeat</code> : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once)</li> <li><code>repeatDelay</code> : The time the tween will pause for before starting a repeat. The tween holds in the start state.</li> <li><code>yoyo</code> : boolean - Does the tween reverse itself (yoyo) when it reaches the end?</li> <li><code>flipX</code> : flip X the GameObject on tween end</li> <li><code>flipY</code> : flip Y the GameObject on tween end</li> <li><code>offset</code> : Used when the Tween is part of a Timeline</li> <li><code>completeDelay</code> : The time the tween will wait before the onComplete event is dispatched once it has     completed</li> <li><code>loop</code> : <code>-1</code> for an infinite loop</li> <li><code>loopDelay</code></li> <li><code>paused</code> : Does the tween start in a paused state, or playing?</li> <li><code>props</code> : The properties being tweened by the tween</li> <li><code>onActive</code> : Tween becomes active within the Tween Manager.     <pre><code>function(tween, target) { }\n</code></pre></li> <li><code>onStart</code> : A tween starts.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onUpdate</code> : Callback which fired when tween task updated     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onComplete</code> : Tween completes or is stopped.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onYoyo</code> : A function to call each time the tween yoyos. Called once per property per target.     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onLoop</code> : A function to call each time the tween loops.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onRepeat</code> : A function to call each time the tween repeats. Called once per property per target.     <pre><code>function(tween, target, key, current, previous, param) { }\n</code></pre></li> <li><code>onStop</code> : A function to call when the tween is stopped.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onPause</code> : A function to call when the tween is paused.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>onResume</code> : A function to call when the tween is resumed after being paused.     <pre><code>function(tween, targets) { }\n</code></pre></li> <li><code>persist</code> : Will the Tween be automatically destroyed on completion, or retained for future playback?</li> <li><code>interpolation</code> : The interpolation function to use if the <code>value</code> given is an array of numbers.<ul> <li><code>'linear'</code>, <code>'bezier'</code>, <code>'catmull'</code> (or <code>'catmullrom'</code>)</li> </ul> </li> </ul> <p>Note</p> <p>Tween task will not manipulate any property that begins with an underscore.</p>"},{"location":"tween/#ease-equations","title":"Ease equations","text":"<ul> <li><code>Power0</code> : Linear</li> <li><code>Power1</code> : Quadratic.Out</li> <li><code>Power2</code> : Cubic.Out</li> <li><code>Power3</code> : Quartic.Out</li> <li><code>Power4</code> : Quintic.Out</li> <li><code>Linear</code></li> <li><code>Quad</code> : Quadratic.Out</li> <li><code>Cubic</code> : Cubic.Out</li> <li><code>Quart</code> : Quartic.Out</li> <li><code>Quint</code> : Quintic.Out</li> <li><code>Sine</code> : Sine.Out</li> <li><code>Expo</code> : Expo.Out</li> <li><code>Circ</code> : Circular.Out</li> <li><code>Elastic</code> : Elastic.Out</li> <li><code>Back</code> : Back.Out</li> <li><code>Bounce</code> : Bounce.Out</li> <li><code>Stepped</code></li> <li><code>Quad.easeIn</code></li> <li><code>Cubic.easeIn</code></li> <li><code>Quart.easeIn</code></li> <li><code>Quint.easeIn</code></li> <li><code>Sine.easeIn</code></li> <li><code>Expo.easeIn</code></li> <li><code>Circ.easeIn</code></li> <li><code>Back.easeIn</code></li> <li><code>Bounce.easeIn</code></li> <li><code>Quad.easeOut</code></li> <li><code>Cubic.easeOut</code></li> <li><code>Quart.easeOut</code></li> <li><code>Quint.easeOut</code></li> <li><code>Sine.easeOut</code></li> <li><code>Expo.easeOut</code></li> <li><code>Circ.easeOut</code></li> <li><code>Back.easeOut</code></li> <li><code>Bounce.easeOut</code></li> <li><code>Quad.easeInOut</code></li> <li><code>Cubic.easeInOut</code></li> <li><code>Quart.easeInOut</code></li> <li><code>Quint.easeInOut</code></li> <li><code>Sine.easeInOut</code></li> <li><code>Expo.easeInOut</code></li> <li><code>Circ.easeInOut</code></li> <li><code>Back.easeInOut</code></li> <li><code>Bounce.easeInOut</code></li> </ul> <p>Demo</p>"},{"location":"tween/#pause-resume-task","title":"Pause / Resume task","text":"<pre><code>tween.pause();\n</code></pre> <pre><code>tween.resume();\n</code></pre>"},{"location":"tween/#stop-task","title":"Stop task","text":"<pre><code>tween.stop();\n</code></pre>"},{"location":"tween/#play-task","title":"Play task","text":"<pre><code>tween.play();\n</code></pre>"},{"location":"tween/#restart-task","title":"Restart task","text":"<pre><code>tween.restart();\n</code></pre>"},{"location":"tween/#seek","title":"Seek","text":"<pre><code>tween.seek(amount);\n// tween.seek(amount, delta, emit);\n</code></pre> <ul> <li><code>amount</code> : The number of milliseconds to seek into the Tween from the beginning.</li> <li><code>delta</code> : The size of each step when seeking through the Tween. Default value is <code>16.6</code> (1000/60)</li> <li><code>emit</code> : While seeking, should the Tween emit any of its events or callbacks? The default is <code>false</code>.</li> </ul>"},{"location":"tween/#remove-task","title":"Remove task","text":"<p>Removes this Tween from the TweenManager</p> <pre><code>tween.remove();\n</code></pre>"},{"location":"tween/#destroy-task","title":"Destroy task","text":"<p>Free tween task from memory</p> <pre><code>tween.destroy();\n</code></pre> <p>Note</p> <p>A Tween that has been destroyed cannot ever be played or used again.</p>"},{"location":"tween/#get-tweens","title":"Get tweens","text":"<ul> <li>Tweens of a target     <pre><code>var tweens = scene.tweens.getTweensOf(target);\n// var tweens = scene.tweens.getTweensOf(target, includePending);\n</code></pre><ul> <li><code>tweens</code> : Array of tweens, or timelines.</li> <li><code>includePending</code> : Set <code>true</code> to search pending tweens.</li> </ul> </li> <li>All tweens     <pre><code>var tweens = scene.tweens.getTweens();\n</code></pre></li> </ul>"},{"location":"tween/#destroy-task-of-a-target","title":"Destroy task of a target","text":"<pre><code>scene.tweens.killTweensOf(target);\n</code></pre> <ul> <li><code>target</code> : The target to kill the tweens of. Provide an array to use multiple targets.</li> </ul>"},{"location":"tween/#time-scale","title":"Time-scale","text":"<pre><code>tween.setTimeScale(v);\n// tween.timeScale = timescale;\n</code></pre> <pre><code>var timeScale = tween.getTimeScale();\n// var timeScale = tween.timeScale;\n</code></pre>"},{"location":"tween/#global-time-scale","title":"Global time-scale","text":"<pre><code>var timeScale = scene.tweens.timeScale;\n</code></pre> <pre><code>scene.tweens.timeScale = timescale;\n</code></pre>"},{"location":"tween/#events","title":"Events","text":"<ul> <li>Tween becomes active within the Tween Manager.     <pre><code>tween.on('active', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>Tween completes or is stopped.     <pre><code>tween.on('complete', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween loops, after any loop delay expires.     <pre><code>tween.on('loop', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween property repeats, after any repeat delay expires.     <pre><code>tween.on('repeat', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween starts.     <pre><code>tween.on('start', function(tween, targets){\n\n}, scope);\n</code></pre></li> <li>A tween property updates.     <pre><code>tween.on('update', function(tween, key, target, current, previous){\n\n}, scope);\n</code></pre><ul> <li><code>tween</code> : A reference to the Tween instance that emitted the event.</li> <li><code>key</code> : The property that was updated, i.e. <code>x</code> or <code>scale</code>.</li> <li><code>target</code> : The target object that was updated. Usually a Game Object, but can be of any type.</li> <li><code>current</code> : The current value of the property that was tweened.</li> <li><code>previous</code> : The previous value of the property that was tweened, prior to this update.</li> </ul> </li> <li>A tween property pause.     <pre><code>tween.on('pause', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween property resume.     <pre><code>tween.on('resume', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween property yoyos.     <pre><code>tween.on('yoyo', function(tween, key, target){\n\n}, scope);\n</code></pre></li> <li>A tween stopped.     <pre><code>tween.on('stop', function(tween, targets){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"tween/#set-callbacks","title":"Set callbacks","text":"<pre><code>tween.setCallback(type, callback, param);\n</code></pre> <ul> <li><code>type</code> : <ul> <li><code>'onActive'</code> : When the Tween is first created it moves to an 'active' state when added to the Tween Manager. 'Active' does not mean 'playing'.</li> <li><code>'onStart'</code> : When the Tween starts playing after a delayed or paused state. This will happen at the same time as <code>onActive</code> if the tween has no delay and isn't paused.</li> <li><code>'onLoop'</code> : When a Tween loops, if it has been set to do so. This happens after the <code>loopDelay</code> expires, if set.</li> <li><code>'onComplete'</code> : When the Tween finishes playback fully. Never invoked if the Tween is set to repeat infinitely.</li> <li><code>'onStop'</code> : Invoked only if the <code>Tween.stop</code> method is called.</li> <li><code>'onPause'</code> : Invoked only if the <code>Tween.pause</code> method is called. Not invoked if the Tween Manager is paused.</li> <li><code>'onResume'</code> : Invoked only if the <code>Tween.resume</code> method is called. Not invoked if the Tween Manager is resumed.</li> <li><code>'onYoyo'</code> : When a TweenData starts a yoyo. This happens after the <code>hold</code> delay expires, if set.</li> <li><code>'onRepeat'</code> : When a TweenData repeats playback. This happens after the <code>repeatDelay</code> expires, if set.</li> <li><code>'onUpdate'</code> : When a TweenData updates a property on a source target during playback.</li> </ul> </li> <li><code>callback</code> :<ul> <li><code>'onRepeat'</code>, <code>'onUpdate'</code>, <code>'onYoyo'</code> <pre><code>function(tween, targets, key, current, previous, param) {\n\n}\n</code></pre></li> <li><code>'onActive'</code>, <code>'onLoop'</code>, <code>'onPause'</code>, <code>'onResume'</code>, <code>'onComplete'</code>, <code>'onStart'</code>, <code>'onStop'</code>,      <pre><code>function(tween, targets, param) {\n\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"tween/#state","title":"State","text":"<ul> <li>Is playing     <pre><code>var isPlaying = tween.isPlaying();\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = tween.isPaused();\n</code></pre></li> <li>Is actively and not just in a delayed state     <pre><code>var hasStarted = tween.hasStarted;\n</code></pre></li> </ul>"},{"location":"tween/#custom-ease-function","title":"Custom ease function","text":"<pre><code>var tween = scene.tweens.add({\ntargets: gameObject,\n// ...\nease: function (t) {  // t: 0~1\nreturn value;     // value: 0~1\n},\n// ...\n});\n</code></pre>"},{"location":"tween/#has-target","title":"Has target","text":"<pre><code>var hasTarget = tween.hasTarget(gameObject);\n</code></pre>"},{"location":"tween/#tween-value","title":"Tween value","text":"<ul> <li>Create tween task     <pre><code>var tween = scene.tweens.addCounter({\nfrom: 0,\nto: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false,\nonUpdate(tween, targets, key, current, previous, param) {\n// var value = current;\n// var value = tween.getValue();\n}\n});\n</code></pre><ul> <li>More config parameters...</li> </ul> </li> <li>Get value     <pre><code>var value = tween.getValue();\n</code></pre></li> </ul>"},{"location":"tween/#chain","title":"Chain","text":""},{"location":"tween/#create-chain","title":"Create chain","text":"<pre><code>var chain = scene.tweens.chain({\ntargets: null,\ntweens: [\n{\n// targets: gameObject,\nalpha: 1,            ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n},        // ...\n],\n\ndelay: 0,\ncompleteDelay: 0,\nloop: 0,  // repeat: 0,\nrepeatDelay: 0,\npaused: false,\npersist: true,\n// callbackScope: this,\n})\n</code></pre> <ul> <li><code>targets</code>, or <code>tweenConfig.targets</code></li> <li><code>tweens</code> : Array of tween config</li> </ul>"},{"location":"tween/#pause-resume-chain","title":"Pause / Resume chain","text":"<pre><code>chain.pause();\n</code></pre> <pre><code>chain.resume();\n</code></pre>"},{"location":"tween/#restart-chain","title":"Restart chain","text":"<pre><code>chain.restart();\n</code></pre>"},{"location":"tween/#add-tween-task","title":"Add tween task","text":"<pre><code>chain.add({\ntargets: gameObject,\nalpha: 1,\nease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'\nduration: 1000,\nrepeat: 0,            // -1: infinity\nyoyo: false\n})\n</code></pre> <p>or</p> <pre><code>chain.add([tweenConfig0, tweenConfig1, ...]);\n</code></pre>"},{"location":"tween/#remove-tween-task","title":"Remove tween task","text":"<pre><code>chain.remove(tweenTask);\n</code></pre>"},{"location":"tween/#has-target_1","title":"Has target","text":"<pre><code>var hasTarget = chain.hasTarget(gameObject);\n</code></pre>"},{"location":"tween/#flow-chart","title":"Flow chart","text":"<pre><code>graph TB\n\nStart((Start)) --&gt; CallbackOnStart\nCallbackOnStart&gt;\"Callback: onStart\"] --&gt; ActiveDelay((\"delay\"))\nActiveDelay --&gt; DurationForward\n\nDurationForward((\"Tween forward&lt;br&gt;Callback: onUpdate&lt;br&gt;(duration)\")) --&gt; Hold[\"hold\"]\nHold((hold)) --&gt; IsYoyo{Is yoyo}\nIsYoyo --&gt; |Yes| CallbackOnYoyo&gt;\"Callback: onYoyo\"]\nCallbackOnYoyo --&gt; DurationBackward((\"Tween backword&lt;br&gt;Callback: onUpdate&lt;br&gt;(duration)\"))\nDurationBackward --&gt; IsRepeat{\"Repeat count &gt; 0\"}\nIsYoyo --&gt; |No| IsRepeat\nIsRepeat --&gt; |Yes| CallbackOnRepeat&gt;\"Callback: onRepeat\"]\nCallbackOnRepeat --&gt; RepeatDelay((\"repeatDelay\"))\nRepeatDelay --&gt; DurationForward\n\nIsRepeat --&gt; |No| IsLoop{\"Loop count &gt; 0\"}\n\nIsLoop --&gt; |Yes| CallbackOnLoop\nCallbackOnLoop&gt;\"Callback: onLoop\"] --&gt; LoopDelay((\"loopDelay\"))\nLoopDelay --&gt; DurationForward\n\nIsLoop --&gt; |No| CompleteDelay\nCompleteDelay((\"completeDelay\")) --&gt; CallbackOnComplete&gt;\"Callback: onComplete\"]\nCallbackOnComplete --&gt; End((End))</code></pre>"},{"location":"tween/#tween-data","title":"Tween data","text":"<ul> <li><code>tween.data</code> : An array of TweenData objects, each containing a unique property and target being tweened.<ul> <li><code>tween.data[i].key</code> : The property of the target to tween.</li> <li><code>tween.data[i].start</code>, <code>tween.data[i].end</code>, <code>tween.data[i].current</code> : Ease Value Data.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/","title":"Badge label","text":""},{"location":"ui-badgelabel/#introduction","title":"Introduction","text":"<p>A container with badges above a main item.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-badgelabel/#live-demos","title":"Live demos","text":"<ul> <li>Badge</li> </ul>"},{"location":"ui-badgelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-badgelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-badgelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = scene.rexUI.add.badgeLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = scene.rexUI.add.badgeLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { BadgeLabel } from 'phaser3-rex-plugins/templates/ui/uiComponents.js';\n</code></pre></li> <li>Add badge-label object     <pre><code>var badgeLabel = new BadgeLabel(scene, config);\nscene.add.existing(badgeLabel);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#add-badgelabel-object","title":"Add badgeLabel object","text":"<pre><code>var badgeLabel = scene.rexUI.add.badgeLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\nmain: mainItemGameObject,\n\nleftTop: leftTopBadgeGameObject,\ncenterTop: centerTopBadgeGameObject,\nrightTop: rightTopBadgeGameObject,\nleftCenter: leftCenterBadgeGameObject,\ncenter: centerBadgeGameObject,\nrightCenter: rightCenterBadgeGameObject,\nleftBottom: leftBottomBadgeGameObject,\ncenterBottom: centerBottomBadgeGameObject,\nrightBottom: rightBottomBadgeGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly.    </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of badgeLabel.</li> <li><code>main</code> : Game object of main item, optional.</li> <li><code>leftTop</code> : Badge game object at leftTop side, optional.</li> <li><code>centerTop</code> : Badge game object at centerTop side, optional.</li> <li><code>rightTop</code> : Badge game object at rightTop side, optional.</li> <li><code>leftCenter</code> : Badge game object at leftCenter side, optional.</li> <li><code>center</code> : Badge game object at center side, optional.</li> <li><code>rightCenter</code> : Badge game object at rightCenter side, optional.</li> <li><code>leftBottom</code> : Badge game object at leftBottom side, optional.</li> <li><code>centerBottom</code> : Badge game object at centerBottom side, optional.</li> <li><code>rightBottom</code> : Badge game object at rightBottom side, optional.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.<ul> <li>Positive number : Indent badge game objects inside background.</li> <li>Negative number : Exceed badge game objects out of background.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyBadgeLabel extends RexPlugins.UI.BadgeLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var badgeLabel = new MyBadgeLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-badgelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>badgeLabel.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-badgelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = badgeLabel.getElement('background');\n</code></pre></li> <li>Main item game object     <pre><code>var item = badgeLabel.getElement('main');\n</code></pre></li> <li>LeftTop badge game object     <pre><code>var badge = badgeLabel.getElement('leftTop');\n</code></pre></li> <li>CenterTop badge game object     <pre><code>var badge = badgeLabel.getElement('centerTop');\n</code></pre></li> <li>RightTop badge game object     <pre><code>var badge = badgeLabel.getElement('rightTop');\n</code></pre></li> <li>LeftCenter badge game object     <pre><code>var badge = badgeLabel.getElement('leftCenter');\n</code></pre></li> <li>Center badge game object     <pre><code>var badge = badgeLabel.getElement('center');\n</code></pre></li> <li>RightCenter badge game object     <pre><code>var badge = badgeLabel.getElement('rightCenter');\n</code></pre></li> <li>LeftBottom badge game object     <pre><code>var badge = badgeLabel.getElement('leftBottom');\n</code></pre></li> <li>CenterBottom badge game object     <pre><code>var badge = badgeLabel.getElement('centerBottom');\n</code></pre></li> <li>RightBottom badge game object     <pre><code>var badge = badgeLabel.getElement('rightBottom');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = badgeLabel.getElement('#' + name);\n// var gameObject = badgeLabel.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = badgeLabel.getByName(name);\n// var gameObject = badgeLabel.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-badgelabel/#other-properties","title":"Other properties","text":"<p>See overlap sizer object, base sizer object, container-lite.</p>"},{"location":"ui-basesizer/","title":"Base sizer","text":""},{"location":"ui-basesizer/#introduction","title":"Introduction","text":"<p>Base class of all ui plugins.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"ui-basesizer/#usage","title":"Usage","text":""},{"location":"ui-basesizer/#background","title":"Background","text":"<pre><code>sizer.addBackground(gameObject);\n// sizer.addBackground(gameObject, key);\n// sizer.addBackground(gameObject, paddingConfig, key);\n</code></pre> <ul> <li><code>gameObject</code> : Background game object will be resized after <code>sizer.layout()</code> method.<ul> <li>Round rectangle game object     <pre><code>var gameObject = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);\n</code></pre></li> <li>Nine-slice game object     <pre><code>var gameObject = scene.add.nineslice(x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);\n</code></pre>     or     <pre><code>var gameObject = scene.make.nineslice({\nkey: key, frame: frameName,\nleftWidth: 0, rightWidth: 0,\ntopHeight: 0, bottomHeight: 0\n});\n</code></pre></li> <li>Nine-patch game object     <pre><code>var gameObject = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);\n</code></pre></li> <li>Custom game object which has <code>resize(width, height)</code> method.<ul> <li>Display width, display height will be changed if this background game object does not have <code>resize</code> method.</li> </ul> </li> </ul> </li> <li><code>paddingConfig</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>key</code> : A string key. Get background game object back via     <pre><code>var child = sizer.getElement(key);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#remove-background","title":"Remove background","text":"<ul> <li>Remove background child     <pre><code>sizer.removeBackground(gameObject);\n</code></pre></li> <li>Remove background child and destroy it     <pre><code>sizer.removeBackground(gameObject, true);\n</code></pre></li> <li>Remove all background children     <pre><code>sizer.removeAllBackgrounds();\n</code></pre></li> <li>Remove all background children and destroy them     <pre><code>sizer.removeAllBackgrounds(true);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#depth-of-background","title":"Depth of background","text":"<p>Send this background child to bottom of sizer.</p> <pre><code>sizer.sendChildToBack(gameObject);\n</code></pre>"},{"location":"ui-basesizer/#minimum-size","title":"Minimum size","text":"<ul> <li>Get     <pre><code>var minWidth = sizer.minWidth;\nvar minHeight = sizer.minHeight;\n</code></pre></li> <li>Set     <pre><code>sizer.setMinSize(width, height);\n</code></pre>     or     <pre><code>sizer.setMinWidth(width);\nsizer.setMinHeight(height);\n</code></pre></li> </ul> <p>Resize top-most sizer</p> <pre><code>sizer.setMinSize(width, height).layout()\n</code></pre>"},{"location":"ui-basesizer/#dirty","title":"Dirty","text":"<p>Don't layout this sizer if <code>sizer.dirty</code> is <code>false</code>. i.e. Size of this sizer won't be changed, but won't layout children neither.</p> <p>Default value is <code>true</code>.</p> <ul> <li>Get     <pre><code>var dirty = sizer.dirty;\n</code></pre></li> <li>Set     <pre><code>sizer.setDirty();\n// sizer.setDirty(true);\n</code></pre>     or     <pre><code>sizer.dirty = true;\n</code></pre></li> <li>Clear     <pre><code>sizer.setDirty(false);\n</code></pre>     or     <pre><code>sizer.dirty = false;\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#bounds-of-sizer","title":"Bounds of sizer","text":"<ul> <li>Get     <pre><code>var leftBound = sizer.left;\nvar rightBound = sizer.right;\nvar topBound = sizer.top;\nvar bottomBound = sizer.bottom;\nvar centerX = sizer.centerX;\nvar centerY = sizer.centerY;\n</code></pre></li> <li>Set     <pre><code>sizer.left = leftBound;\nsizer.right = rightBound;\nsizer.top = topBound;\nsizer.bottom = bottomBound;\nsizer.centerX = centerXBound;\nsizer.centerY = centerYBound;\n</code></pre>     or     <pre><code>sizer.alignLeft(leftBound);\nsizer.alignRight(rightBound);\nsizer.alignTop(topBound);\nsizer.alignBottom(bottomBound);\nsizer.alignCenterX(centerXBound);\nsizer.alignCenterY(centerYBound);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#size-of-sizer","title":"Size of sizer","text":"<ul> <li>Size     <pre><code>var width = sizer.width;\nvar height = sizer.height;\n</code></pre></li> <li>Display size     <pre><code>var displayWidth = sizer.displayWidth;\nvar displayHeight = sizer.displayHeight;\n</code></pre></li> <li>Inner size     <pre><code>var innerWidth = sizer.innerWidth;\nvar innerHeight = sizer.innerHeight;\n</code></pre></li> <li>Minimum size     <pre><code>var minWidth = sizer.minWidth;\nvar minHeight = sizer.minHeight;\n</code></pre></li> <li>Minimum inner size     <pre><code>var minInnerWidth = sizer.minInnerWidth;\nvar minInnerHeight = sizer.minInnerHeight;\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#push-into-bounds","title":"Push into bounds","text":"<p>Align sizer to bound if overlapping it.</p> <pre><code>sizer.pushIntoBounds();\n</code></pre> <p>or</p> <pre><code>sizer.pushIntoBounds(bounds);\n</code></pre> <ul> <li><code>bounds</code> : Bounds in rectangle object.</li> </ul>"},{"location":"ui-basesizer/#scale","title":"Scale","text":"<ul> <li>Scale up from <code>0</code> to current scale of game object.<ul> <li>Pop-up width and height     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUp(duration);\n\n// sizer.popUp(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUpPromise(duration)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Pop-up width only     <pre><code>sizer\n//.setScaleX(scaleX)\n.popUp(duration, 'x');\n\n// sizer.popUp(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleX(scaleX)\n.popUpPromise(duration, 'x')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Pop-up height only     <pre><code>sizer\n//.setScaleY(scaleY)\n.popUp(duration, 'y');\n\n// sizer.popUp(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleY(scaleY)\n.popUpPromise(duration, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Pop-up via config     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUp({\nduration: undefined,\norientation: undefined,\nease: undefined,\n})\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.popUpPromise(config)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>orientation</code> : <code>undefined</code>, <code>x</code>, or <code>y</code></li> </ul> </li> </ul> </li> <li>Scale-down destroy<ul> <li>Scale-down width and height     <pre><code>sizer.scaleDownDestroy(duration);\n// sizer.scaleDownDestroy(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li>Scale-down width only     <pre><code>sizer.scaleDownDestroy(duration, 'x');\n// sizer.scaleDownDestroy(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration, 'x');\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down height only     <pre><code>sizer.scaleDownDestroy(duration, 'y');\n// sizer.scaleDownDestroy(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownDestroyPromise(duration, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> </ul> </li> <li>Scale-down without destroy<ul> <li>Scale-down width and height     <pre><code>sizer.scaleDown(duration);\n// sizer.scaleDown(duration, undefined, ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, undefined, ease)\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down width only     <pre><code>sizer.scaleDowny(duration, 'x');\n// sizer.scaleDowny(duration, 'x', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, 'x', ease)\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale-down height only     <pre><code>sizer.scaleDown(duration, 'y');\n// sizer.scaleDown(duration, 'y', ease);\n</code></pre>     or     <pre><code>sizer.scaleDownPromise(duration, 'y', ease)\n.then(function() {\n// ....\n})\n</code></pre></li> </ul> </li> <li>Scale up/down, then scale back (yoyo)<ul> <li>Scale up/down, then scale back width and height     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyo(duration, peakValue);\n\n// sizer.scaleYoyo(duration, peakValue, repeat, undefined, ease);\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyoPromise(duration, peakValue, repeat)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>peakValue</code> : Scale to this peak value, then scale back</li> <li><code>repeat</code> : Yoyo repeat, default value is <code>0</code>.</li> <li><code>ease</code> : Ease function, default is <code>'Cubic'</code>.</li> </ul> </li> <li>Scale up/down, then scale back width only     <pre><code>sizer\n//.setScaleX(scaleX)\n.scaleYoyo(duration, peakValue, 0, 'x');\n\n// sizer.popUp(duration, peakValue, repeat, 'x', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleX(scaleX)\n.scaleYoyoPromise(duration, peakValue, repeat, 'x')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale up/down, then scale back height only     <pre><code>sizer\n//.setScaleY(scaleY)\n.scaleYoyo(duration, peakValue, 0, 'y');\n\n// sizer.popUp(duration, peakValue, repeat, 'y', ease);\n</code></pre>     or     <pre><code>sizer\n//.setScaleY(scaleY)\n.scaleYoyoPromise(duration, peakValue, repeat, 'y')\n.then(function() {\n// ....\n})\n</code></pre></li> <li>Scale up/down via config     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyo({\nduration: undefined,\npeakValue: 1.2,\nrepeat: 0,\norientation: undefined,\nease: undefined,\n})\n</code></pre>     or     <pre><code>sizer\n//.setScale(scaleX, scaleY)\n.scaleYoyoPromise(config)\n.then(function() {\n// ....\n})\n</code></pre><ul> <li><code>orientation</code> : <code>undefined</code>, <code>x</code>, or <code>y</code></li> </ul> </li> </ul> </li> <li>Events<ul> <li>Pop-up complete     <pre><code>sizer.on('popup.complete', function(sizer) { });\n</code></pre></li> <li>Scale-down, scale-down destroy complete     <pre><code>sizer.on('scaledown.complete', function(sizer) { });\n</code></pre></li> <li>Scale up/down, then scale back (yoyo)     <pre><code>sizer.on('scaleyoyo.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#fade","title":"Fade","text":"<ul> <li>Fade-in     <pre><code>sizer.fadeIn(duration);\n</code></pre>     or     <pre><code>sizer.fadeIn(duration, endAlpha);\n</code></pre>     or     <pre><code>sizer.fadeIn(duration, {start:0, end:1});\n</code></pre>     or     <pre><code>sizer.fadeInPromise(duration, endAlpha)\n.then(function(){\n// ...\n})\n</code></pre>     or     <pre><code>sizer.fadeInPromise(duration, {start:0, end:1})\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Fade-out destroy     <pre><code>sizer.fadeOutDestroy(duration);\n</code></pre>     or     <pre><code>sizer.fadeOutDestroyPromise(duration)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Fade-out without destroy     <pre><code>sizer.fadeOut(duration);\n</code></pre>     or     <pre><code>sizer.fadeOutPromise(duration)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Events<ul> <li>Fade-in complete     <pre><code>sizer.on('fadein.complete', function(sizer) { });\n</code></pre></li> <li>Fade-out, fade-out destroy complete     <pre><code>sizer.on('fadeout.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#ease-move","title":"Ease move","text":"<ul> <li>Move from     <pre><code>sizer.moveFrom(duration, x, y);\n// sizer.moveFrom(duration, x, y, ease);\n// sizer.moveFrom({x, y, duration, ease});\n// sizer.moveFrom({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveFromPromise(duration, x, y, ease)\n// .moveFromPromise({x, y, duration, ease})\n// .moveFromPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre><ul> <li><code>x</code>, <code>y</code> : Start position.<ul> <li>Number : Start position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Current position x/y.</li> </ul> </li> <li><code>speed</code> : Get <code>duration</code> according to <code>speed</code> and distance between current sizer position to <code>{x, y}</code></li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> </ul> </li> <li>Move-from destroy     <pre><code>sizer.moveFromDestroy(duration, x, y);\n// sizer.moveFrom(duration, x, y, ease);\n// sizer.moveFrom({x, y, duration, ease});\n// sizer.moveFrom({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveFromDestroyPromise(duration, x, y, ease)\n// .moveFromDestroyPromise({x, y, duration, ease})\n// .moveFromDestroyPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre></li> <li>Move to     <pre><code>sizer.moveTo(duration, x, y);\n// sizer.moveTo(duration, x, y, ease);\n// sizer.moveTo({x, y, duration, ease});\n// sizer.moveTo({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveToPromise(duration, x, y, ease)\n// .moveToPromise({x, y, duration, ease})\n// .moveToPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre><ul> <li><code>x</code>, <code>y</code> : End position.<ul> <li>Number : End position x/y.</li> <li>String(<code>+=300</code>) : Related position of current position x/y.</li> <li><code>undefined</code> : Current position x/y.</li> </ul> </li> <li><code>speed</code> : Get <code>duration</code> according to <code>speed</code> and distance between current sizer position to <code>{x, y}</code></li> <li><code>ease</code> : <code>'Linear'</code>, <code>'Cubic'</code>, <code>'Elastic'</code>, <code>'Bounce'</code>, <code>'Back'</code> ...</li> </ul> </li> <li>Move-to destroy     <pre><code>sizer.moveToDestroy(duration, x, y);\n// sizer.moveTo(duration, x, y, ease);\n// sizer.moveTo({x, y, duration, ease});\n// sizer.moveTo({x, y, speed, ease});\n</code></pre>     or     <pre><code>sizer\n.moveToDestroyPromise(duration, x, y, ease)\n// .moveToDestroyPromise({x, y, duration, ease})\n// .moveToDestroyPromise({x, y, speed, ease})\n.then(function(){\n// ...\n})    </code></pre></li> <li>Move-stop     <pre><code>sizer.moveStop();\n// sizer.moveStop(true);  // Set to end position\n</code></pre></li> <li>Events<ul> <li>Move-from complete     <pre><code>sizer.on('movefrom.complete', function(sizer) { });\n</code></pre></li> <li>Move-to complete     <pre><code>sizer.on('moveto.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#shake","title":"Shake","text":"<ul> <li>Start     <pre><code>sizer.shake(duration);\n// sizer.shake(duration, magnitude);\n</code></pre>     or     <pre><code>sizer.shakePromise(duration, magnitude)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Events<ul> <li>Shake complete     <pre><code>sizer.on('shake.complete', function(sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#ease-data","title":"Ease data","text":"<ul> <li>Start     <pre><code>sizer.easeDataTo(key, value, duration);\n// sizer.easeDataTo(key, value, duration, ease);\n// sizer.easeDataTo({ key, value, duration, ease });\n// sizer.easeDataTo({ key, value, speed, ease });\n</code></pre>     or     <pre><code>sizer.easeDataToPromise(key, value, duration, ease)\n.then(function(){\n// ...\n})\n</code></pre></li> <li>Stop     <pre><code>sizer.stopEaseData(key);           // Set to end value\n// sizer.stopEaseData(key, false); // Stop at current value\n</code></pre>     or     <pre><code>sizer.stopAllEaseData();           // Set to end value\n// sizer.stopAllEaseData(false);   // Stop at current value\n</code></pre></li> <li>Events<ul> <li>Easing complete     <pre><code>sizer.on('easedata.' + key + '.complete', function(sizer) { });\n</code></pre> <pre><code>sizer.on('easedata.complete', function(key, sizer) { });\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#modal","title":"Modal","text":"<ol> <li>Assign <code>sizer.onCreateModalBehavior</code> callback, or register events to close modal sizer directly.<ul> <li>onCreateModalBehavior :      <pre><code>sizer.onCreateModalBehavior = function(sizer, config) {\n// ...\nsizer.modalClose(data);\n}\n</code></pre><ul> <li><code>config</code> : Passed from <code>sizer.modal(config)</code></li> </ul> </li> <li>Close modal sizer     <pre><code>sizer.modalClose(data);\n</code></pre></li> </ul> </li> <li>Pop this modal sizer     <pre><code>sizer.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true\n});\n// sizer.modal(config, onClose);\n</code></pre>     or     <pre><code>sizer\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre><ul> <li><code>config</code> : See Modal behavior</li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {      }\n</code></pre><ul> <li><code>data</code> : Object passed from <code>sizer.modalClose(data)</code>.</li> </ul> </li> </ul> </li> </ol>"},{"location":"ui-basesizer/#set-properties-of-child","title":"Set properties of child","text":"<pre><code>sizer.setChildPosition(child, x, y);\nsizer.setChildRotation(child, rotation);\nsizer.setChildScale(child, scaleX, scaleY);\nsizer.setChildDisplaySize(child, width, height);\nsizer.setChildVisible(child, visible);\nsizer.setChildAlpha(child, alpha);\n</code></pre>"},{"location":"ui-basesizer/#depth","title":"Depth","text":"<ul> <li>Get depth of sizer     <pre><code>var depth = sizer.depth;\n</code></pre></li> <li>Set depth of sizer     <pre><code>sizer.setDepth(value, true);\n// sizer.depth = depth;\n</code></pre></li> <li>Set depth of sizer and all children     <pre><code>sizer.setDepth(value);\n</code></pre></li> <li>Bring this sizer and its children to top     <pre><code>sizer.bringToTop();\n</code></pre></li> <li>Swap depth with another sizer     <pre><code>sizerA.swapDepth(sizerB);\n</code></pre></li> <li>Increase of sizer and all children     <pre><code>sizer.incDepth(value);\n</code></pre></li> <li>Move game object below this sizer and all children     <pre><code>sizer.moveDepthBelow(gameObject);\n</code></pre></li> <li>Move game object above this sizer and all children     <pre><code>sizer.moveDepthAbove(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Set scroll factor to children    <pre><code>sizer.setScrollFactor(x, y);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#change-origin","title":"Change origin","text":"<pre><code>sizer.changeOrigin(originX, originY);\n</code></pre> <p>This method also will reset all local state of children.</p>"},{"location":"ui-basesizer/#destroy","title":"Destroy","text":"<pre><code>sizer.destroy();\n</code></pre>"},{"location":"ui-basesizer/#drag-top-most-sizer","title":"Drag top-most sizer","text":"<ul> <li>Draggable child<ul> <li>Enable     <pre><code>sizer.setDraggable(child);\n// sizer.setDraggable(child, true)\n</code></pre>     or     <pre><code>sizer.setDraggable(elementName);\n// sizer.setDraggable(elementName, true)\n</code></pre></li> <li>Disable     <pre><code>sizer.setDraggable(child, false);\n</code></pre>     or     <pre><code>sizer.setDraggable(elementName, false);\n</code></pre></li> </ul> </li> <li>Draggable sizer object<ul> <li>Enable     <pre><code>sizer.setDraggable();\n// sizer.setDraggable(true);\n</code></pre></li> <li>Disalbe     <pre><code>sizer.setDraggable(false);\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-basesizer/#click","title":"Click","text":"<ul> <li>Add click event     <pre><code>sizer.onClick(callback, scope);\n// sizer.onClick(callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See Button</li> <li><code>callback</code> :     <pre><code>function(button, gameObject, pointer, event) {\n\n}\n</code></pre><ul> <li><code>button</code> : Button behavior.</li> </ul> </li> </ul> </li> <li>Turn off click event     <pre><code>sizer.offClick(callback, scope);\n</code></pre></li> <li>Enable click event     <pre><code>sizer.enableClick();\n</code></pre></li> <li>Disable click event     <pre><code>sizer.disableClick();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var click = scene.rexUI.add.click(sizer, config);\nclick.on('click', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#click-child","title":"Click child","text":"<ul> <li>Add click event     <pre><code>sizer.onClick(child, callback, scope);\n// sizer.onClick(child, callback, scope, config);\n</code></pre></li> <li>Turn off click event     <pre><code>sizer.offClick(child, callback, scope);\n</code></pre></li> <li>Enable click event     <pre><code>sizer.enableClick(child);\n</code></pre></li> <li>Disable click event     <pre><code>sizer.disableClick(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#click-outside","title":"Click outside","text":"<ul> <li>Add click-outside event     <pre><code>sizer.onClickOutside(callback, scope);\n// sizer.onClickOutside(callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See ClickOutside</li> <li><code>callback</code> :     <pre><code>function(clickOutside, gameObject, pointer) {\n\n}\n</code></pre><ul> <li><code>clickOutside</code> : ClickOutside behavior.</li> </ul> </li> </ul> </li> <li>Turn off click-outside event     <pre><code>sizer.offClickOutside(callback, scope);\n</code></pre></li> <li>Enable click-outside event     <pre><code>sizer.enableClickOutside();\n</code></pre></li> <li>Disable click-outside event     <pre><code>sizer.disableClickOutside();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var clickOutside = scene.rexUI.add.clickOutside(sizer, config);\nclickOutside.on('clickoutside', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#click-outside-of-child","title":"Click outside of child","text":"<ul> <li>Add click-outside event     <pre><code>sizer.onClickOutside(child, callback, scope);\n// sizer.onClickOutside(child, callback, scope, config);\n</code></pre><ul> <li><code>config</code> : See ClickOutside</li> <li><code>callback</code> :     <pre><code>function(clickOutside, gameObject, pointer) {\n\n}\n</code></pre><ul> <li><code>clickOutside</code> : ClickOutside behavior.</li> </ul> </li> </ul> </li> <li>Turn off click-outside event     <pre><code>sizer.offClickOutside(child, callback, scope);\n</code></pre></li> <li>Enable click-outside event     <pre><code>sizer.enableClickOutside(child);\n</code></pre></li> <li>Disable click-outside event     <pre><code>sizer.disableClickOutside(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#is-pointer-in-bounds","title":"Is pointer in bounds","text":"<ul> <li>Is current sizer clicking     <pre><code>var isClicked = sizer.isPointerInBounds();\n</code></pre></li> <li>Is a child clicking     <pre><code>var isClicked = sizer.isPointerInBounds(child);\n</code></pre>     or     <pre><code>var isClicked = sizer.isPointerInBounds(elementName);\n</code></pre><ul> <li><code>child</code> : Game object of child</li> <li><code>elementName</code> : Element name for retrieveing child game object.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#in-touching","title":"In touching","text":"<p>Invoke callbeack if pointer is inside hitarea every tick.</p> <ul> <li>Add in-touching event     <pre><code>sizer.onTouching(callback, scope);\n// sizer.onTouching(callback, scope, config);\n</code></pre></li> <li>Turn off in-touching event     <pre><code>sizer.offTouching(callback, scope);\n</code></pre></li> <li>Add touching-end event     <pre><code>sizer.onTouchingEnd(callback, scope);\n// sizer.onTouchingEnd(callback, scope, config);\n</code></pre></li> <li>Turn off touching-end event     <pre><code>sizer.offTouchingEnd(callback, scope);\n</code></pre></li> <li>Enable in-touching event     <pre><code>sizer.enableTouching();\n</code></pre></li> <li>Disable in-touching event     <pre><code>sizer.disableTouching();\n</code></pre></li> </ul> <p>Equal to </p> <pre><code>var inTouching = scene.rexUI.add.inTouching(sizer, config);\ninTouching.on('intouch', callback, scope);\n</code></pre>"},{"location":"ui-basesizer/#in-touching-child","title":"In touching child","text":"<ul> <li>Add in-touching event     <pre><code>sizer.onTouching(child, callback, scope);\n// sizer.onClick(child, callback, scope, config);\n</code></pre></li> <li>Turn off in-touching event     <pre><code>sizer.offTouching(child, callback, scope);\n</code></pre></li> <li>Enable in-touching event     <pre><code>sizer.enableTouching(child);\n</code></pre></li> <li>Disable in-touching event     <pre><code>sizer.disableTouching(child);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#set-children-interactive","title":"Set children interactive","text":"<p>Applies click, tap, press, swipe behaviors on this sizer, to detect input events of children.</p> <pre><code>sizer.setChildrenInteractive({\n// down: undefined,\n// up: undefined,\n// over: undefined,\n\n// click: {mode: 'release', clickInterval: 100},\n\n// press: {time: 251, threshold: 9},\n\n// tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, \n//       taps: undefined, minTaps: undefined, maxTaps: undefined,},\n\n// swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},\n\n// inputEventPrefix: 'child.',\n})\n</code></pre> <ul> <li><code>down</code> :<ul> <li><code>false</code> : Don't fire (pointer-) down events</li> </ul> </li> <li><code>up</code> :<ul> <li><code>false</code> : Don't fire (pointer-) up events</li> </ul> </li> <li><code>over</code> :<ul> <li><code>false</code> : Don't fire (pointer-) over/out events</li> </ul> </li> <li><code>click</code> : Configuration of Button behavior.<ul> <li><code>false</code> : Don't install Button behavior.</li> </ul> </li> <li><code>press</code> : Configuration of Press behavior.<ul> <li><code>false</code> : Don't install Press behavior.</li> </ul> </li> <li><code>tap</code> : Configuration of Tap behavior.<ul> <li><code>false</code> : Don't install Tap behavior.</li> </ul> </li> <li><code>swipe</code> : Configuration of Swipe behavior.<ul> <li><code>false</code> : Don't install Swipe behavior.</li> </ul> </li> <li><code>inputEventPrefix</code> : Prefix string of each event, default is <code>'child.'</code>.</li> </ul> <p>Note</p> <p>Input behaviors are installed to this Sizer game object, not each child. And it assumes that all children are not overlapped. Use Button if user needs to enable/disable input behaviors of each child individually.</p>"},{"location":"ui-basesizer/#events","title":"Events","text":"<ul> <li>Pointer-down     <pre><code>sizer.on('child.down', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-up     <pre><code>sizer.on('child.up', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-over     <pre><code>sizer.on('child.over', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out     <pre><code>sizer.on('child.out', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Click     <pre><code>sizer.on('child.click', function(child, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>child</code> : Triggered child game object.</li> <li><code>pointer</code> : Pointer object.    </li> </ul> </li> <li>Press     <pre><code>sizer.on('child.pressstart', function(child, pointer) { // ...\n}, scope);\n</code></pre> <pre><code>sizer.on('child.pressend', function(child, pointer) { // ...\n}, scope);\n</code></pre></li> <li>Tap     <pre><code>sizer.on(tapEventName, function(child, pointer) { // ...\n}, scope);\n</code></pre><ul> <li><code>tapEventName</code> :  <code>'child.1tap'</code>, <code>'child.2tap'</code>, <code>'child.3tap'</code>, etc ...</li> </ul> </li> <li>Swipe     <pre><code>sizer.on(swipeEventName, function(child, pointer) { // ...\n}, scope);\n</code></pre><ul> <li><code>swipeEventName</code> :  <code>'child.swipeleft'</code>, <code>'child.swiperight'</code>, <code>'child.swipeup'</code>, <code>'child.swipedown'</code>.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#pin-game-object","title":"Pin game object","text":"<pre><code>sizer.pin(gameObject);\n</code></pre> <p>Note</p> <p>Method <code>sizer.add</code> is override in each sizer class usually.</p>"},{"location":"ui-basesizer/#un-pin-game-object","title":"Un-pin game object","text":"<p><pre><code>sizer.unpin(child);\n// sizer.unpin(child, destroyChild);\n</code></pre> - <code>destroyChild</code> : Set true to destroy child. Default is <code>false</code>.</p> <p>Note</p> <p>Method <code>sizer.remove</code> is override in each sizer class usually.</p>"},{"location":"ui-basesizer/#draw-bounds","title":"Draw bounds","text":"<ul> <li>Draw bounds of shown game object on a graphics game object     <pre><code>sizer.drawBounds(graphics);\n// sizer.drawBounds(graphics, color);\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code></li> </ul> </li> <li>Draw bounds of shown game object, and display name of child     <pre><code>sizer.drawBounds(graphics, {\n// color: 0xffffff,\n// lineWidth: 2,\n\n// name: false, \n// name: true, \n// name: {\n//     createTextCallback: function(scene) {\n//         return scene.add.text(0, 0, '');\n//     },\n//     createTextCallbackScope: undefined,\n//     align: 'left-top'\n// }\n});\n</code></pre><ul> <li><code>graphics</code> : Graphics game object</li> <li><code>color</code> : Default value is <code>0xffffff</code>.</li> <li><code>lineWidth</code> : Default value is <code>1</code>.</li> <li><code>name</code> :<ul> <li><code>false</code> : Don't display child name, default value</li> <li><code>true</code> : Display child name with default text game object, aligned at left-top of child bounds.</li> <li>Plain object : <ul> <li><code>name.createTextCallback</code> : Callback of creating customized text game object for child name     <pre><code>function(scene, child, childBoundsRect) {\n// return scene.add.text(0, 0, ''); \n}\n</code></pre></li> <li><code>name.createTextCallbackScope</code> : Callback scope of <code>name.createTextCallback</code>, default is <code>undefined</code></li> <li><code>name.align</code> : <ul> <li><code>'left-top'</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> : Align text game object at left-top. Default value</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align text game object at center</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align text game object at left-center</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align text game object at right-center</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game text object at top-center</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game text object at bottom-center</li> <li><code>'left-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_LEFT</code> : Align text game object at left-bottom</li> <li><code>'right-top'</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align text game object at right-top</li> <li><code>'right-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_RIGHT</code> : Align text game object at right-bottom</li> </ul> </li> </ul> </li> </ul> </li> <li>Text game objects of these children's name will be attached on graphics game object, <code>graphics.clear()</code>, or <code>graphics.destroy()</code> will also destroy these text game objects</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#hide","title":"Hide","text":"<ul> <li>Set invisible, won't layout it     <pre><code>sizer.hide();\n</code></pre>     or     <pre><code>sizer.hide(gameObject);\n</code></pre></li> <li>Set visible, will layout it     <pre><code>sizer.show();\n</code></pre>     or     <pre><code>sizer.show(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#padding","title":"Padding","text":"<ul> <li>Set inner padding, will indent children position.<ul> <li>Set inner padding via config     <pre><code>sizer.setInnerPadding({\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n});\n</code></pre></li> <li>Set inner padding via single number     <pre><code>sizer.setInnerPadding(value);\n</code></pre></li> <li>Set specific inner padding     <pre><code>sizer.setInnerPadding(key, value);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get inner padding<ul> <li>Get inner padding values     <pre><code>var innerPadding = sizer.getInnerPadding();\n</code></pre></li> <li>Get specific inner padding     <pre><code>var value = sizer.getInnerPadding(key);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Set outer padding, which is equal to <code>padding</code> parameter when adding this sizer to parent sizer.<ul> <li>Set outer padding via config     <pre><code>sizer.setOuterPadding({\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n});\n</code></pre></li> <li>Set outer padding via single number     <pre><code>sizer.setOuterPadding(value);\n</code></pre></li> <li>Set specific outer padding     <pre><code>sizer.setOuterPadding(key, value);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get outer padding<ul> <li>Get outer padding values     <pre><code>var outerPadding = sizer.getOuterPadding();\n</code></pre></li> <li>Get specific outer padding     <pre><code>var value = sizer.getOuterPadding(key);\n</code></pre><ul> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Set outer padding of child, which is equal to <code>padding</code> parameter when adding this sizer to parent sizer.<ul> <li>Set outer padding via config     <pre><code>sizer.setChildOuterPadding(\nchild,\n{\nleft: leftPadding, right: rightPadding,\ntop: topPadding,\nbottom: bottomPadding\n}\n);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Set outer padding via single number     <pre><code>sizer.setChildOuterPadding(child, value);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Set specific outer padding     <pre><code>sizer.setChildOuterPadding(child, key, value);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> <li>Get outer padding of child<ul> <li>Get outer padding values     <pre><code>var outerPadding = sizer.getChildOuterPadding(child);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> </ul> </li> <li>Get specific outer padding     <pre><code>var value = sizer.getChildOuterPadding(child, key);\n</code></pre><ul> <li><code>child</code> : A string key or game object.</li> <li><code>key</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-basesizer/#anchor","title":"Anchor","text":"<pre><code>sizer.setAnchor({\n// left: '0%+0',\n// right: '0%+0',\n// centerX: '0%+0',\n// x: '0%+0',\n\n// top: '0%+0',\n// bottom: '0%+0',\n// centerY: '0%+0',\n// y: '0%+0'\n})\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: 0~100<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code></li> </ul> </li> </ul> <p>For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center :</p> <pre><code>{\nleft: 'left+10',\ncenterY: 'center'\n}\n</code></pre>"},{"location":"ui-basesizer/#get-child","title":"Get child","text":"<ul> <li>Get child by specific key<ol> <li>Add child     <pre><code>sizer.addChildrenMap(key, child);\n</code></pre><ul> <li>Remove children map :     <pre><code>sizer.removeChildrenMap(key);\n</code></pre>     or     <pre><code>sizer.removeChildrenMap(child);\n</code></pre></li> </ul> </li> <li>Get child     <pre><code>var child = sizer.getElement(key);\n</code></pre></li> </ol> </li> <li>Get child by name     <pre><code>var child = sizer.getByName(name);\n// var child = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.    </li> </ul> </li> </ul>"},{"location":"ui-basesizer/#get-parent","title":"Get parent","text":"<ul> <li>Get parent sizer     <pre><code>var parentSizer = sizer.getParentSizer();\n</code></pre></li> <li>Get ancestor sizer matched given name     <pre><code>var parentSizer = sizer.getParentSizer(name);\n</code></pre></li> <li>Get topmost sizer     <pre><code>var topmostSizer = sizer.getTopmostSizer();\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#has-parentchild","title":"Has parent/child","text":"<ul> <li>Has parent     <pre><code>var hasParent = sizer.hasParentSizer(parentGameObject);\n</code></pre></li> <li>Has child     <pre><code>var hasChild = sizer.hasParentSizer(childGameObject);\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#is-in-touching","title":"Is in touching","text":"<ul> <li>Is this sizer in touching?     <pre><code>var isTouching = sizer.isInTouching();\n</code></pre></li> <li>Is child of this sizer in touching?     <pre><code>var isTouching = sizer.isInTouching(child);\n</code></pre>     or     <pre><code>var isTouching = sizer.isInTouching(childKey);\n</code></pre><ul> <li><code>child</code> : Child game object.</li> <li><code>childKey</code> : Get child game object back via <code>sizer.getElement(childKey)</code>. See also sizer.addChildrenMap(key, child)</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#change-properties-of-child","title":"Change properties of child","text":"<ul> <li>Set property of child from sizer</li> <li>Set property of child, then reset local state of child</li> <li>Tween local state of child</li> </ul>"},{"location":"ui-basesizer/#add-to-container","title":"Add to container","text":"<ul> <li>Add to built-in container <pre><code>p3Container.add(sizer);\n</code></pre>     or     <pre><code>sizer.addToContainer(p3Container);\n</code></pre><ul> <li><code>container</code> : Container game object.</li> </ul> </li> <li>Add to Layer <pre><code>sizer.addToLayer(layer);\n</code></pre><ul> <li><code>layer</code> : Layer game object.</li> </ul> </li> </ul> <p>Note</p> <p><code>container.add(sizer)</code>, or <code>layer.add(sizer)</code> won't add children of sizer.</p>"},{"location":"ui-basesizer/#layer","title":"Layer","text":"<p>A sizer can have a layer.  Current children and new children will draw on this layer, instead of display list of scene.</p> <ul> <li>Enable layer. Do nothing if layer is existed.     <pre><code>sizer.enableLayer();\n</code></pre></li> <li>Get layer game object. Will enable layer if layer is not existed.     <pre><code>var layer = sizer.getLayer();\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#shader-effects","title":"Shader effects","text":"<p>Apply post-fx pipeline on layer of sizer.</p>"},{"location":"ui-basesizer/#snapshot","title":"Snapshot","text":"<ul> <li>Draw all visible children on a render-texture.     <pre><code>var renderTexture = container.snapshot({\nrenderTexture: undefined,\npadding: 0\n});\n</code></pre><ul> <li><code>renderTexture</code> : Draw on this render-texture<ul> <li><code>undefined</code> : Create a new render-texture</li> </ul> </li> <li><code>padding</code> : <ul> <li><code>0</code> : No extra padding space. Default value.</li> <li>A number : Add extra padding space around this render-texture.</li> </ul> </li> </ul> </li> <li>Draw all visible children on a texture     <pre><code>container.snapshot({\npadding: 0,\nsaveTexture: textureKey\n});\n</code></pre><ul> <li><code>saveTexture</code> : Save render result to texture manager.</li> </ul> </li> </ul>"},{"location":"ui-basesizer/#events_1","title":"Events","text":""},{"location":"ui-basesizer/#dragging","title":"Dragging","text":"<ul> <li>Fire <code>'sizer.drag'</code> on top-most sizer when dragging <pre><code>topmostSizer.on('sizer.drag', function(pointer, dragX, dragY) {\n\n})\n</code></pre></li> <li>Fire <code>'sizer.dragstart'</code> on top-most sizer when dragging start.     <pre><code>topmostSizer.on('sizer.dragstart', function(pointer, dragX, dragY) {\n\n})\n</code></pre></li> <li>Fire <code>'sizer.dragend'</code> on top-most sizer when dragging dragend.     <pre><code>topmostSizer.on('sizer.dragend', function(pointer, dragX, dragY, dropped) {\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#layout-children","title":"Layout children","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.postlayout'</code> event to all children after layout.     <pre><code>child.on('sizer.postlayout', function(child, sizer){\nvar prevState = sizer.getChildPrevState(child);\n})\n</code></pre><ul> <li><code>prevState</code> : Properties before layout.<ul> <li><code>prevState.x</code>, <code>prevState.y</code> : Child position before layout.</li> <li><code>prevState.width</code>, <code>prevState.height</code>,    <code>prevState.displayWidth</code>, <code>prevState.displayHeight</code>,    <code>prevState.scaleX</code>, <code>prevState.scaleY</code> : Child size before layout.</li> </ul> </li> </ul> </li> <li>Fire <code>'postlayout'</code> event.     <pre><code>sizer.on('postlayout', function(children, sizer) {\nfor(var i=0, cnt=children.length; i&lt;cnt; i++) {\nvar prevState = sizer.getChildPrevState(children[i]);\n// ...\n}\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#remove-child","title":"Remove child","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.remove'</code> event to removed without destroyed child.     <pre><code>child.on('sizer.remove', function(child, sizer){\n\n})\n</code></pre></li> <li>Fire <code>'remove'</code> event.     <pre><code>sizer.on('remove', function(child, sizer){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#add-child","title":"Add child","text":"<p>Note</p> <p>Enable sizer events by set <code>sizerEvents</code> to <code>true</code> in config.</p> <ul> <li>Fire <code>'sizer.add'</code> event to added child.     <pre><code>child.on('sizer.add', function(child, sizer){\n\n})\n</code></pre></li> <li>Fire <code>'add'</code> event.     <pre><code>sizer.on('add', function(child, sizer){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-basesizer/#broadcast-event","title":"Broadcast event","text":"<p>Fire event to sizer itself and all children</p> <pre><code>sizer.broadcastEvent(eventName, parameter0, parameter1, ...);\n</code></pre> <p>Receive event</p> <pre><code>child.on(eventName, function(parameter0, parameter1, ...) {\n\n}, scope);\n</code></pre>"},{"location":"ui-basesizer/#other-properties","title":"Other properties","text":"<p>This game object inherits from ContainerLite.</p>"},{"location":"ui-buttons/","title":"Buttons","text":""},{"location":"ui-buttons/#introduction","title":"Introduction","text":"<p>A container with a group of buttons.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-buttons/#live-demos","title":"Live demos","text":"<ul> <li>Buttons with header and footer</li> <li>Expand</li> <li>Space</li> <li>Checkboxes/radio</li> <li>Popup each button</li> </ul>"},{"location":"ui-buttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-buttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-buttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.buttons(config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.buttons(config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Buttons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = new Buttons(scene, config);\nscene.add.existing(buttons);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#add-buttons-object","title":"Add Buttons object","text":"<pre><code>var buttons = scene.rexUI.add.buttons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n// buttonsType: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nexpand: false,\nalign: undefined,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: 0,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of button game objects.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange button game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange button game objects from top to bottom.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : Array of button game objects, or Space (<code>scene.rexUI.add.space()</code>).</li> <li><code>expand</code> : Set <code>true</code> to expand width, or height of buton game objects.</li> <li><code>align</code> : Note: Add Space (<code>scene.rexUI.add.space()</code>) into buttons parameter to have more flexible alignment style. Alignment of these button game objects. Only valid when <code>expand</code> is <code>false</code>.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.    </li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>space</code> :<ul> <li>A number: Space between 2 button game objects.</li> <li>An object: Padding of button game objects.<ul> <li><code>space.top</code>, <code>space.bottom</code>, <code>space.left</code>, <code>space.right</code> : Padding around bottons.</li> <li><code>space.item</code> : Space between 2 button game objects.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game object, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>setValueCallback</code>, or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-buttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyButtons extends RexPlugins.UI.Buttons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-buttons/#other-properties","title":"Other properties","text":"<p>See sizer object</p>"},{"location":"ui-buttons/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>buttons.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>groupName</code> : Optional group name.</li> <li><code>button</code> : Triggered button game object.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>buttons.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out button     <pre><code>buttons.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-down button     <pre><code>buttons.on('button.down', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.down', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-up button     <pre><code>buttons.on('button.up', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.up', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable button's input     <pre><code>buttons.on('button.enable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.enable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable button's input     <pre><code>buttons.on('button.disable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.disable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>buttons.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul>"},{"location":"ui-buttons/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable a button's input     <pre><code>buttons.setButtonEnable(index);\n// buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Enable all buttons' input     <pre><code>buttons.setButtonEnable();\n// buttons.setButtonEnable(true);\n</code></pre></li> <li>Disable     <pre><code>buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Disable all buttons' input     <pre><code>buttons.setButtonEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>buttons.toggleButtonEnable(index);\n</code></pre></li> <li>Toggle all buttons's input     <pre><code>buttons.toggleButtonEnable();\n</code></pre></li> <li>Get button's input enable     <pre><code>var enabled = bottons.getButtonEnable(index);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-buttons/#add-child","title":"Add child","text":"<ul> <li>Add button child     <pre><code>buttons.addButton(gameObject)\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add non-button child, see <code>sizer.add()</code> method.     <pre><code>buttons.add(gameObject,\n{\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nindex: undefined,\nminWidth: undefined,\nminHeight: undefined\n}\n)\n</code></pre></li> </ul>"},{"location":"ui-buttons/#remove-child","title":"Remove child","text":"<ul> <li>Remove button child     <pre><code>buttons.removeButton(gameObject, destroyChild);\n</code></pre><ul> <li><code>gameObject</code> : <ul> <li>Game object, or array of game objects : Button game object.</li> <li>A number, or array of numbers : Index of button game object.</li> <li>A string, or array of strings : Name of button game object.</li> </ul> </li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttton children     <pre><code>buttons.clearButtons(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove a button or non-button child, see <code>sizer.remove()</code> method.     <pre><code>buttons.remove(gameObject, destroyChild);\n</code></pre></li> <li>Remove all button or non-button children, see <code>sizer.remove()</code> method.     <pre><code>buttons.removeAll(destroyChild);\n</code></pre></li> </ul>"},{"location":"ui-buttons/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>buttons.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show button     <pre><code>buttons.showButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Hide button.     <pre><code>buttons.hideButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-buttons/#for-each-button","title":"For each button","text":"<pre><code>buttons.forEachButtton(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>function(button, index, buttonArray) {\n// ...\n}\n</code></pre></li> </ul>"},{"location":"ui-buttons/#checkboxesradio","title":"Checkboxes/radio","text":"<ul> <li>Configure buttons to checkboxes/radio     <pre><code>var buttons = scene.rexUI.add.buttons({\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nbuttonsType: 'checkboxes', // or 'radio'\nsetValueCallback: function(button, value, previousValue) {\n// ...\n}, // or setButtonStateCallback\n});\n</code></pre><ul> <li><code>buttons</code> : Array of button game objects.<ul> <li>Property <code>name</code> of each button game object will be used as a key in <code>buttons.data</code></li> </ul> </li> <li><code>buttonsType</code> : Set type to <code>'checkboxes'</code>, or <code>'radio'</code>.</li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.     <pre><code>function(button, value) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> <li>Also trigger <code>'button.statechange'</code> event.</li> </ul> </li> <li>State of a button : Stored in <code>buttons.data</code></li> <li>Get states of all buttons :     <pre><code>var states = buttons.getAllButtonsState();  // { key: boolean }\n</code></pre></li> <li>Clear states of all button :     <pre><code>buttons.clearAllButtonsState();\n</code></pre><ul> <li>Will trigger setValueCallback and <code>'button.statechange'</code> event.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-buttons/#checkboxes","title":"Checkboxes","text":"<ul> <li>Read state     <pre><code>var state = buttons.getButtonState(key);\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> <li><code>state</code> : <code>true</code>, or <code>false</code></li> </ul> </li> <li>Set state     <pre><code>buttons.setButtonState(key, state);\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> <li><code>state</code> : <code>true</code>, or <code>false</code></li> </ul> </li> </ul>"},{"location":"ui-buttons/#radio","title":"Radio","text":"<ul> <li>Read state     <pre><code>var value = buttons.getSelectedButtonName();\n</code></pre>     or     <pre><code>var value = buttons.value;\n</code></pre><ul> <li><code>value</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> </ul> </li> <li>Set state     <pre><code>buttons.setSelectedButtonName(key);\n</code></pre>     or     <pre><code>buttons.value = key;\n</code></pre><ul> <li><code>key</code> : <code>name</code> property of a button game object. (i.e. <code>button.name</code>)</li> </ul> </li> </ul>"},{"location":"ui-buttons/#events_1","title":"Events","text":"<ul> <li>On button state changed. For Checkboxes/radio     <pre><code>buttons.on('button.statechange', function(button, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.statechange', function(button, groupName, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre><ul> <li>Can be used to replace setValueCallback.</li> </ul> </li> </ul>"},{"location":"ui-chart/","title":"Chart","text":""},{"location":"ui-chart/#introduction","title":"Introduction","text":"<p>Draw chart on canvas.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-chart/#live-demos","title":"Live demos","text":"<ul> <li>Radar chart</li> </ul>"},{"location":"ui-chart/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-chart/#install-plugin","title":"Install plugin","text":""},{"location":"ui-chart/#install-chartjs","title":"Install chart.js","text":"<p>Chart.js is not included in rexUI, installs it before creating any chart.</p> <p><pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js');\n</code></pre> or <pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js');\n</code></pre></p>"},{"location":"ui-chart/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/Chart.min.js');\nscene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add chart object     <pre><code>var chart = scene.rexUI.add.chart(config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add chart object     <pre><code>var chart = scene.rexUI.add.chart(config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Chart } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add chart object     <pre><code>var chart = new Chart(scene, config);\nscene.add.existing(chart);\n</code></pre></li> </ul>"},{"location":"ui-chart/#add-chart-object","title":"Add chart object","text":"<pre><code>var chart = scene.rexUI.add.chart(x, y, width, height, config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object.</li> <li><code>width</code>, <code>height</code> : Canvas size.</li> <li><code>config</code> : Configuration for creating chart.<ul> <li>Set <code>undefined</code> to not create chart at beginning.</li> </ul> </li> </ul>"},{"location":"ui-chart/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyChart extends RexPlugins.UI.Chart {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var chart = new MyChart(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"ui-chart/#create-chart","title":"Create chart","text":"<p>Create chart (if not creating at beginning).</p> <pre><code>chart.setChart(config);\n</code></pre> <ul> <li><code>config</code> : Configuration for creating chart.</li> </ul>"},{"location":"ui-chart/#chart-data","title":"Chart data","text":"<ul> <li>Get dataset     <pre><code>var dataset = chart.getChartDataset(datasetIndex);\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> </ul> </li> <li>Get data     <pre><code>var data = chart.getChartData(datasetIndex, dataIndex);\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> <li><code>dataIndex</code> : Index number or label string.</li> </ul> </li> <li>Set     <pre><code>chart.setChartData(datasetIndex, dataIndex, value).updateChart();\n</code></pre><ul> <li><code>datasetIndex</code> : Index number or label string.</li> <li><code>dataIndex</code> : Index number or label string.</li> </ul> </li> </ul>"},{"location":"ui-chart/#manipulate-chart-object","title":"Manipulate chart object","text":"<ol> <li>Get chart object     <pre><code>var chart = chart.chart;\n</code></pre></li> <li>Set properties of chart<ul> <li>Array of dataset     <pre><code>var datasets = chart.data.datasets;\n</code></pre><ul> <li>Label of dataset     <pre><code>var label = chart.data.datasets[i].label;\n</code></pre></li> </ul> </li> <li>Labels     <pre><code>var labels = chart.data.labels;\n</code></pre></li> <li>Set chart data     <pre><code>chart.data.datasets[datasetIndex].data[dataIndex] = value;\n</code></pre></li> </ul> </li> <li>Update chart     <pre><code>chart.update();\n</code></pre></li> </ol>"},{"location":"ui-colorcomponents/","title":"Color components","text":""},{"location":"ui-colorcomponents/#introduction","title":"Introduction","text":"<p>Edit color value by RGB, or HSV input fields. Clicking fist label can switch color format between RGB and HSV</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorcomponents/#live-demos","title":"Live demos","text":"<ul> <li>Color components</li> </ul>"},{"location":"ui-colorcomponents/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorcomponents/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorcomponents/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = scene.rexUI.add.colorComponents(config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = scene.rexUI.add.colorComponents(config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorComponents } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-components object     <pre><code>var colorComponents = new ColorComponents(scene, config);\nscene.add.existing(colorComponents);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#add-colorcomponents-object","title":"Add colorComponents object","text":"<pre><code>var colorComponents = scene.rexUI.add.colorComponents({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nformatLabel: {\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n},\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n},\n\n// formatLabel: labelGameObject,\n\ninputText: {\nwidth: undefined, height: undefined,\n\npadding: 0,  // {left: 0, right: 0, top: 0, bottom: 0}\n\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null,\n\n// Style when focus\n// 'focus.color': ...\n// 'focus.color2': ...\n// 'focus.stroke': ...\n},\nfocusStyle: undefined,\n\ninnerBounds: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBY: undefined,\noffsetX: 0,\noffsetY: 0,\n\n// Style when cursor move on\n// 'cursor.color': ...\n// 'cursor.backgroundColor': ...\n// 'cursor.xxx': ...\n},\ncursorStyle: undefined,\n\nwrap: {\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n},\nlineHeight: undefined,\nmaxLines: undefined,\nwrapWidth: undefined,\nletterSpacing: 0,\nhAlign: 0,\nvAlign: 'center',  // For single line text input\ncharWrap: true,    // For single line text input\n},\n\n// enterClose: true,\n// readOnly: false,\n\n// Callbacks\n// onOpen: function (textObject, hiddenInputText) {\n// },\n\n// onClose: function (textObject, hiddenInputText) {\n// },\n\n// onUpdate: function (text, textObject, hiddenInputText) {\n//     return text;\n// },   \n\n// onAddChar: function(child, index, canvasInput) {\n//    child.modifyStyle({...})\n// },\n\n// onCursorOut: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n\n// onCursorIn: function(child, cursorIndex, canvasInput) {\n//     child.modifyStyle({\n//         \n//     });\n// },\n},\n\n// inputText0: canvasInputGameObject,\n// inputText1: canvasInputGameObject,\n// inputText2: canvasInputGameObject,\n\n// proportion: { formatLabel: 0 },\n\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\nitem: 0\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorComponents.</li> <li><code>formatLabel</code> : Clicking this label can switch color format between RGB and HSV<ul> <li>A label game object, or a text game object.</li> <li>A plain object     <pre><code>{\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: textStyle,\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n}\n</code></pre><ul> <li><code>formatLable.background</code> : Parameters to create round rectangle game object.</li> <li><code>formatLable.text</code> : Text style to create [text.md] game object.</li> <li><code>formatLabel.space</code> : Padding space around format label.    </li> </ul> </li> </ul> </li> <li><code>inputText</code> : Configuration of canvasInput</li> <li><code>inputText0</code>, <code>inputText1</code>, <code>inputText2</code> : 3 canvas input game objects if parameter <code>inputText</code> is not given.</li> <li><code>proportion</code> :<ul> <li><code>proportion.formatLabel</code> : Default value is <code>0</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between swatch and inputText.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorcomponents/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorComponents extends RexPlugins.UI.ColorComponents {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorComponents = new MyColorComponents(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorComponents.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorcomponents/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorComponents.getElement('background');\n</code></pre></li> <li>Format-label game object     <pre><code>var icon = colorComponents.getElement('formatLabel');\n</code></pre></li> <li>Color component input text game objects     <pre><code>var textObjects = colorComponents.getElement('components');\n</code></pre><ul> <li><code>textObjects</code> : An arrray with 3 canvas input game objects.</li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorComponents.getElement('#' + name);\n// var gameObject = colorComponents.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorComponents.getByName(name);\n// var gameObject = colorComponents.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorcomponents/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorComponents.value;\n// var value = colorComponents.color;\n</code></pre></li> <li>Set color value     <pre><code>colorComponents.setValue(value);\n// colorComponents.setColor(value);\n</code></pre>     or     <pre><code>colorComponents.value = value;\ncolorComponents.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorComponents.on('valuechange', function(newValue, oldValue, colorComponents){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorcomponents/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-colorinput/","title":"Color input","text":""},{"location":"ui-colorinput/#introduction","title":"Introduction","text":"<p>Color number (<code>0x0</code>~<code>0xffffff</code>) or color string (<code>'#000000'</code>~<code>'#ffffff'</code>, or <code>'red'</code>) input field.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorinput/#live-demos","title":"Live demos","text":"<ul> <li>Color input</li> </ul>"},{"location":"ui-colorinput/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorinput/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorinput/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = scene.rexUI.add.colorInput(config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = scene.rexUI.add.colorInput(config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorInput } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-input object     <pre><code>var colorInput = new ColorInput(scene, config);\nscene.add.existing(colorInput);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#add-colorinput-object","title":"Add colorInput object","text":"<pre><code>var colorInput = scene.rexUI.add.colorInput({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nswatch: undefined,\n// swatch: { shape: 'circle' },\n// swatch: { size: 30 },\n// swatch: swatchGameObject,\n// swatch: false,\n\n// swatchSize: undefined,  // or swatch: { size }\n// squareExpandSwatch: true,\n\ninputText: inputTextConfig,\n// inputText: false,\n\ncolorPicker : {\nwidth: 160, height: 170,\n\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n// createBackgroundCallback: function(scene) {\n//     return gameObject;\n// }\n\n// hPalettePosition: 'bottom',\n\n// space: { left: 10, right: 10, top: 10, bottom: 10, item: 8 }\n},\n\ncolorComponents: {\n// height: undefined,\n\n// formatLabel: undefined,\n\n// inputText: undefined,\n\n// space: { item: 8 }\n},\n// colorComponents: false,\n\nvaluechangeCallback: function(newValue, oldValue, colorInput) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorInput.</li> <li><code>swatch</code> : Display color value on a square, circle shape, or an image game object with tint.<ul> <li><code>undefein</code> : A square swatch. Default game object.</li> <li>A plain object : A circle, or a round square swatch.     <pre><code>{ shape: 'circle' }\n</code></pre>     or     <pre><code>{ radius: 10 }\n</code></pre>     or     <pre><code>{ radius: 10, size: 30 }\n</code></pre><ul> <li><code>shape</code> : (Round-) Rectangle or circle<ul> <li><code>0</code>, or <code>'rectangle'</code> : (Round-) Rectangle shape.</li> <li><code>1</code>, or <code>'circle'</code> : Circle shape.</li> </ul> </li> <li><code>radius</code> : Radius of round rectangle.</li> <li><code>size</code> : Size of swatch. Equal to <code>swatchSize</code> parameter.</li> </ul> </li> <li>An Image or Sprite game object : Tint this game object for displaying color value.</li> <li><code>false</code> : No swatch game object.</li> </ul> </li> <li><code>swatchSize</code> :<ul> <li>A number : Size of swatch.</li> <li><code>undefined</code> : Expand size to fit inner height of color input. Default behavior.</li> </ul> </li> <li><code>squareExpandSwatch</code><ul> <li><code>true</code> : Expand size to fit inner height of color input. Default behavior if <code>swatchSize</code> is set to <code>undefined</code>, or not given</li> <li><code>false</code> : Keep current size of swatch.</li> </ul> </li> <li><code>inputText</code> : Configuration of canvasInput</li> <li><code>colorPicker</code> : Configuration of a drop-down color picker, triggered by clicking swatch.<ul> <li><code>colorPicker.width</code>, <code>colorPicker.height</code> : Sizer of color picker. Default value is <code>180</code>x<code>170</code></li> <li><code>colorPicker.background</code> : Parameters to create round rectangle game object, optional.</li> <li><code>colorPicker.createBackgroundCallback</code> : Callback to create background game object, optional.     <pre><code>function(scene) {\nreturn gameObject;\n}\n</code></pre></li> <li><code>colorPicker.hPalettePosition</code> : Position of h-palette.<ul> <li><code>'bottom'</code> or <code>0</code> : Place h-palette at bottom side of sv-palette.</li> <li><code>'left'</code> or <code>1</code> : Place h-palette at left side of sv-palette.</li> <li><code>'top'</code> or <code>2</code> : Place h-palette at top side of sv-palette.</li> <li><code>'right'</code> or <code>3</code> : Place h-palette at right side of sv-palette.</li> </ul> </li> <li><code>colorPicker.space</code> : Padding space around color picker. Default value is     <pre><code>{ left: 10, right: 10, top: 10, bottom: 10, item: 8 }\n</code></pre></li> <li><code>false</code> : No color picker.</li> </ul> </li> <li><code>colorComponents</code> : Configuration of color components inside the drop down color picker.<ul> <li><code>colorComponents.height</code> : Height of color components.</li> <li><code>colorComponents.formatLabel</code> : Clicking this label can switch color format between RGB and HSV <ul> <li><code>undefined</code> : Will create a label with default text game object.</li> <li>A plain object     <pre><code>{\nbackground: {\nradius: 0,\ncolor: undefined, alpha: undefined,\nstrokeColor: undefined, strokeAlpha: undefined, strokeWidth: 2\n},\n\ntext: textStyle,\n\nspace: {left: 0, right: 0, top: 0, bottom: 0}\n}            </code></pre></li> </ul> </li> <li><code>colorComponents.inputText</code> : Configuration of canvasInput used in this color components. Will use <code>inputText</code> of color input if this parameter is not given.</li> <li><code>colorComponents.space</code> : Padding space around color components. Default value is     <pre><code>{ item: 8 }\n</code></pre></li> <li><code>false</code> : No color components.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).<ul> <li>Number :  0 ~ 0xffffff</li> <li>String : <ul> <li><code>0x0</code>~<code>0xffffff</code></li> <li><code>'#000000'</code>~<code>'#ffffff'</code></li> <li><code>'red'</code></li> </ul> </li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between swatch and inputText.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorinput/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorInput extends RexPlugins.UI.ColorInput {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorInput = new MyColorInput(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorInput.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorinput/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorInput.getElement('background');\n</code></pre></li> <li>Swatch game object     <pre><code>var icon = colorInput.getElement('swatch');\n</code></pre></li> <li>Input text game object     <pre><code>var textObject = colorInput.getElement('inputText');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorInput.getElement('#' + name);\n// var gameObject = colorInput.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorInput.getByName(name);\n// var gameObject = colorInput.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorinput/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorInput.value;\n// var value = colorInput.color;\n</code></pre></li> <li>Set color value     <pre><code>colorInput.setValue(value);\n// colorInput.setColor(value);\n</code></pre>     or     <pre><code>colorInput.value = value;\ncolorInput.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorInput.on('valuechange', function(newValue, oldValue, colorInput){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorinput/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-colorpicker/","title":"Color picker","text":""},{"location":"ui-colorpicker/#introduction","title":"Introduction","text":"<p>Pick color value from H and SV palettes.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-colorpicker/#live-demos","title":"Live demos","text":"<ul> <li>Color picker</li> </ul>"},{"location":"ui-colorpicker/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-colorpicker/#install-plugin","title":"Install plugin","text":""},{"location":"ui-colorpicker/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = scene.rexUI.add.colorPicker(config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = scene.rexUI.add.colorPicker(config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ColorPicker } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add color-picker object     <pre><code>var colorPicker = new ColorPicker(scene, config);\nscene.add.existing(colorPicker);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#add-colorpicker-object","title":"Add colorPicker object","text":"<pre><code>var colorPicker = scene.rexUI.add.colorPicker({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nhPalette: {\nposition: 'bottom',\nsize: 10,\nwidth: undefined,\nheight: undefined,       },\n\nsvPalette: {\nwidth: undefined,\nheight: undefined,\n},\n\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nvalue: 0xffffff,\n\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,    \n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of colorPicker.</li> <li><code>hPalette</code> : Configuration of h-palette. H-palette is rendered on a canvas game object.<ul> <li><code>hPalette.position</code> : Position of h-palette.<ul> <li><code>'bottom'</code> or <code>0</code> : Place h-palette at bottom side of sv-palette.</li> <li><code>'left'</code> or <code>1</code> : Place h-palette at left side of sv-palette.</li> <li><code>'top'</code> or <code>2</code> : Place h-palette at top side of sv-palette.</li> <li><code>'right'</code> or <code>3</code> : Place h-palette at right side of sv-palette.</li> </ul> </li> <li><code>hPalette.size</code> : Width (if position of h-palette is at left or right side) or height (if position of h-palette is at top or bottom side) of h-palette.</li> <li><code>hPalette.width</code> : Width (if position of h-palette is at left or right side) of h-palette.</li> <li><code>hPalette.height</code> : Height (if position of h-palette is at top or bottom side) of h-palette.</li> </ul> </li> <li><code>svPalette</code> : Configuration of sv-palette. SV-palette is rendered on a canvas game object.<ul> <li><code>svPalette.width</code> : Width of sv-palette.</li> <li><code>svPalette.height</code> : Height of sv-palette.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>value</code> : Initial color value (0 ~ 0xffffff).</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between sv-palette and h-palette.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-colorpicker/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyColorPicker extends RexPlugins.UI.ColorPicker {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var colorPicker = new MyColorPicker(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>colorPicker.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-colorpicker/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = colorPicker.getElement('background');\n</code></pre></li> <li>H-palette game object     <pre><code>var icon = colorPicker.getElement('hPalette');\n</code></pre></li> <li>SV-palette game object     <pre><code>var textObject = colorPicker.getElement('svPalette');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = colorPicker.getElement('#' + name);\n// var gameObject = colorPicker.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = colorPicker.getByName(name);\n// var gameObject = colorPicker.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-colorpicker/#value","title":"Value","text":"<p>Change value will also change the position of marker on H-palette and SV-palette</p> <ul> <li>Get color value     <pre><code>var value = colorPicker.value;\n// var value = colorPicker.color;\n</code></pre></li> <li>Set color value     <pre><code>colorPicker.setValue(value);\n// colorPicker.setColor(value);\n</code></pre>     or     <pre><code>colorPicker.value = value;\ncolorPicker.color = value;\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>colorPicker.on('valuechange', function(newValue, oldValue, colorPicker){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-colorpicker/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-confirmdialog/","title":"Confirm dialog","text":""},{"location":"ui-confirmdialog/#introduction","title":"Introduction","text":"<p>Using json style to create confirm dialog, composed of simple-label title, simple-label content, with simple-label 0, 1, or 2 action button(s).</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-confirmdialog/#live-demos","title":"Live demos","text":"<ul> <li>Yes-no buttons</li> <li>Ok button</li> <li>Any-touch closing</li> <li>TextArea content</li> <li>Radio-choices</li> </ul>"},{"location":"ui-confirmdialog/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-confirmdialog/#install-plugin","title":"Install plugin","text":""},{"location":"ui-confirmdialog/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);\n// var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.confirmDialog(style).resetDisplayContent(config);\n// var dialog = scene.rexUI.add.confirmDialog(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ConfirmDialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new ConfirmDialog(scene, config);\n// var dialog = new ConfirmDialog(scene, config, creators);\nscene.add.existing(dialog);\ndialog.resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#add-dialog-object","title":"Add dialog object","text":"<pre><code>var dialog = scene.rexUI.add.confirmDialog({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\n// SimpleLabelConfig\ntitle: {\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n// expandTextWidth: false,\n// expandTextHeight: false,\n\n// squareFitAction: false,\n// actionMask: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\nalign: undefined,  // 'left' | 'top' | 'right' | 'bottom' | 'center        \n},\n\ncontent: SimpleLabelConfig,\n\n/* TextArea\n    content: {\n        space: { left: 0, right: 0, top: 0, bottom: 0, text: 0, },\n\n        background: {\n            radius: 0,\n            // radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\n            color: undefined,\n            alpha: undefined,\n            strokeColor: undefined,\n            strokeAlpha: undefined,\n            strokeWidth: undefined,\n        },\n\n        text: {\n            fontFamily: 'Courier',\n            fontSize: '16px',\n            fontStyle: '',\n            backgroundColor: null,\n            color: '#fff',\n            stroke: '#fff',\n            strokeThickness: 0,\n            shadow: {\n                offsetX: 0,\n                offsetY: 0,\n                color: '#000',\n                blur: 0,\n                stroke: false,\n                fill: false\n            },                  \n            padding: {\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n            },\n            // more text styles\n        },\n\n        // textWidth: undefined,\n        // textHeight: undefined,\n        // textMask: false,\n        // alwaysScrollable: false,\n\n        slider: {\n            track: { \n                width: 1, height: 1,\n                radius: 0, \n                color: undefined, alpha: 1,\n                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n                shape: undefined\n            },\n\n            thumb: { \n                width: 1, height: 1,\n                radius: 0, \n                color: undefined, alpha: 1,\n                strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n                shape: undefined\n            },\n\n            // input: 'drag',\n            // position: 'right',\n\n            // hideUnscrollableSlider: false,\n            // adaptThumbSize: false,\n            // minThumbSize: undefined,\n        },\n\n        // scroller: {\n        //     threshold: 10,\n        //     slidingDeceleration: 5000,\n        //     backDeceleration: 2000,\n        //     pointerOutRelease: true,\n        //     dragRate: 1,\n        // },\n\n        mouseWheelScroller: false,\n        // mouseWheelScroller: {\n        //     focus: false,\n        //     speed: 0.1\n        // },\n\n        clamplChildOY: false,\n    }\n    */\n\nbuttonMode: 0,  // 0|1|2\n\nbutton: SimpleLabelConfig,\n// buttonA: SimpleLabelConfig\n// buttonB: SimpleLabelConfig\n\n// choice: SimpleLabelConfig,\n// choicesType\n// choicesWidth: undefined,\n// choicesHeight: undefined,\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntitle: 0,\ntitleLeft: 0,\ntitleRight: 0,\n\ncontent: 0,\ncontentLeft: 0,\ncontentRight: 0,\n\nactionsLeft: 0,\nactionsRight: 0,\naction: 0,\n\nchoices: 0,\nchoicesLeft: 0,\nchoicesRight: 0,\nchoice: 0,\nchoiceLine: 0,\nchoiceColumn: 0, choiceRow: 0,\nchoicesBackgroundLeft: 0,\nchoicesBackgroundRight: 0,\nchoicesBackgroundTop: 0,\nchoicesBackgroundBottom: 0,\n},\n\nproportion: {\ntitle: 0,\ncontent: 0,\nactions: 0,\nchoices: 0,\n},\n\nexpand: {\ntitle: true,\ncontent: true,\nactions: false,\nchoices: true,\n},\n\nalign: {\ntitle: 'center',\ncontent: 'center',\nactions: 'center',\nchoices: 'center',\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n}, creators);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Styles of simple-label</li> <li><code>title</code> : Styles of simple-label</li> <li><code>content</code> : Styles of simple-label, or TextArea<ul> <li>Style with <code>slider</code>, or <code>scroller</code> properties : TextArea</li> <li>Otherwise : SimpleLabel</li> </ul> </li> <li><code>buttonMode</code> : <code>0</code>, <code>1</code>, or <code>2</code><ul> <li><code>0</code> : No action button, any touch can close modal dialog</li> <li><code>1</code>, <code>2</code> : Dialog with 1 or 2 action buttons, clicking any action button to close modal dialog.</li> </ul> </li> <li><code>button</code> : Styles of simple-label, optional.</li> <li><code>choice</code> : Styles of simple-label, optional.</li> <li><code>choicesType</code> : Sizer type (Buttons/FixWidthButtons/GridButtons) and behavior (<code>''</code>/<code>'radio'</code>/<code>'checkboxes'</code>) of choice buttons.<ul> <li><code>undefined</code>, <code>''</code>, or <code>'y'</code> : Buttons in vertical/horizontal without any extra behavior, default behavior.</li> <li><code>'radio'</code>, or <code>'x-radio'</code> : Buttons in vertical/horizontal, with radio behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code>.</li> </ul> </li> <li><code>'checkboxes'</code>, or <code>'x-checkboxes'</code> : Buttons in vertical/horizontal, with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'wrap'</code> : FixWidthButtons without any extra behavior, default behavior.</li> <li><code>'wrap-radio'</code> : FixWidthButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'wrap-checkboxes'</code> : FixWidthButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.    </li> </ul> </li> </ul> </li> <li><code>choicesWidth</code>, <code>choicesHeight</code> : Minimum width, minimum height of choices.<ul> <li>Must assign <code>choicesHeight</code> value if using GridButtons choices.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.title</code> : Space between title game object and below game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Extra left/right padding of title game object.</li> <li><code>space.content</code> : Space between content game object and below game object.</li> <li><code>space.contentLeft</code>, <code>space.contentRight</code> : Extra left/right padding of content game object.        </li> <li><code>space.action</code> : Space between each action-button game objects.</li> </ul> </li> <li><code>proportion</code> : Keep height of element, or expand height of element.<ul> <li><code>proportion.title</code> : Set to <code>1</code> to expand height of title. Default is <code>0</code>.</li> <li><code>proportion.content</code> : Set to <code>1</code> to expand height of content. Default is <code>0</code>.    </li> <li><code>proportion.actions</code> : Set to <code>1</code> to expand height of actions. Default is <code>0</code>.</li> </ul> </li> <li><code>expand</code> : Expand width of element<ul> <li><code>expand.title</code> : Set <code>true</code> to expand width of title game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand width of content game object. Default is <code>true</code>.    </li> <li><code>expand.actions</code> : Set <code>true</code> to expand width of actions game object. Default is <code>false</code>.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.title</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value. Will add Spaces at right and left sides.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center. Will add a Space at right side.</li> </ul> </li> <li><code>align.content</code> : Align content game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.content</code> is <code>false</code>.    </li> <li><code>align.actions</code> : Align action game objects to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.actions</code> is <code>false</code>.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>creators</code> : Callbacks for creating components.     <pre><code>{\nbackground: undefined,\ntitle: undefined,\ncontent: undefined,\nbutton: undefined,\nbuttonA: undefined,\nbuttonB: undefined,\n}\n</code></pre><ul> <li><code>creators.background</code> : Callback to create background of dialog. Default behavior is creating a round-rectangle-shape.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.title</code>, <code>creators.content</code>, <code>creators.button</code>, <code>creators.buttonA</code>, <code>creators.buttonB</code> : Creators of simple-label, included these properties     <pre><code>{\nbackground: undefined,\ntext: undefined,\nicon: undefined,\naction: undefined,\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDialog extends RexPlugins.UI.ConfirmDialog {\nconstructor(scene, config, creators) {\nsuper(scene, config, creators);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dialog = new MyDialog(scene, config, creators);\n</code></pre></li> </ul>"},{"location":"ui-confirmdialog/#reset-display-content","title":"Reset display content","text":"<pre><code>dialog.resetDisplayContent({\ntitle: '',\ncontent: '',\nbuttonA: '',\nbuttonB: '',\n});\n</code></pre> <p>or</p> <pre><code>dialog.resetDisplayContent({\ntitle: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\ncontent: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nbuttonA: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nbuttonB: {\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n},\n\nchoices: [\n{\ntext: '', value: undefined,\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n},        // ...\n]\n});\n</code></pre> <ul> <li><code>title</code>, <code>content</code>,<code>buttonA</code>, <code>buttonB</code> : Display content<ul> <li>A string : Set text of simple lable</li> <li>Configuration of <code>simpleLabel.resetDisplayContent(config)</code> : Set icon, text, action icon of simple label.</li> </ul> </li> <li><code>choices</code> : Array of display content<ul> <li>A string : Set text of simple lable, also use this string as option value.</li> <li>Configuration of <code>simpleLabel.resetDisplayContent(config)</code> : Set icon, text, action icon of simple label.<ul> <li>Property <code>value</code> : Option value.</li> </ul> </li> </ul> </li> </ul> <p>Run <code>dialog.layout()</code> after this method, to layout children again.</p>"},{"location":"ui-confirmdialog/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>dialog.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-confirmdialog/#modal","title":"Modal","text":"<p>Pop this dialog as modal dialog, clicking any action button to close this modal dialog.</p> <pre><code>dialog.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true\n});\n// dialog.modal(config, onClose);\n</code></pre> <p>or</p> <pre><code>dialog\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior<ul> <li><code>config.defaultBehavior</code> :<ul> <li><code>undefined</code>, or <code>true</code> : Will close modal dialog when clicking any action button.</li> <li><code>false</code> : Disable default behavior.</li> </ul> </li> </ul> </li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {\n// var index = data.index;\n// var text = data.text;\n// var value = data.value;\n// var button = data.button;\n// var dialog = data.dialog;\n}\n</code></pre><ul> <li><code>data</code> : Contains these properties<ul> <li><code>data.index</code> : Index of clicking action button</li> <li><code>data.text</code> : <code>button.text</code>, this property is valided if button game object is a label.</li> <li><code>data.value</code> :<ul> <li>A single value : Return selected value, if <code>choicesType</code> is <code>'radio'</code></li> <li>A dictionary contains <code>{value: boolean}</code> : Return selected values, if <code>choicesType</code> is <code>'checkboxes'</code></li> <li><code>undefined</code> : Default value</li> </ul> </li> <li><code>data.button</code> : Clicked button game object.</li> <li><code>data.dialog</code> : This dialog game object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = dialog.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var title = dialog.getElement('title');\n</code></pre></li> <li>Content game object     <pre><code>var content = dialog.getElement('content');\n</code></pre></li> <li>Buttons game object     <pre><code>var buttonA = dialog.getElement('buttonA');\nvar buttonB = dialog.getElement('buttonB');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = dialog.getElement('#' + name);\n// var gameObject = dialog.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = dialog.getByName(name);\n// var gameObject = dialog.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-confirmdialog/#other-properties","title":"Other properties","text":"<p>See dialog, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dialog/","title":"Dialog","text":""},{"location":"ui-dialog/#introduction","title":"Introduction","text":"<p>A container with a title, content, buttons and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-dialog/#live-demos","title":"Live demos","text":"<ul> <li>Dialog</li> <li>Yes-no dialog</li> <li>Action buttons with Space</li> <li>Radio choices dialog</li> <li>Horizontal-radio choices dialog</li> <li>Wrap-radio choices dialog</li> <li>Wrap-checkboxes choices dialog</li> <li>Grid-checkboxes choices dialog</li> <li>Pop-up dialog</li> <li>Ease-in, ease-out</li> <li>Show/hide buttons</li> <li>Add button</li> <li>Wrap label</li> <li>Modal dialog</li> </ul>"},{"location":"ui-dialog/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-dialog/#install-plugin","title":"Install plugin","text":""},{"location":"ui-dialog/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.dialog(config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = scene.rexUI.add.dialog(config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Dialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dialog object     <pre><code>var dialog = new Dialog(scene, config);\nscene.add.existing(dialog);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#add-dialog-object","title":"Add dialog object","text":"<pre><code>var dialog = scene.rexUI.add.dialog({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\ntoolbarBackground: toolbarBackgroundGameObject,\ntoolbar: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nleftToolbarBackground: leftToolbarBackgroundGameObject,\nleftToolbar: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\ncontent: contentGameObject,\n\ndescription: descriptionGameObject,\n\nchoicesType: '',\n// choicesWidth: undefined,\n// choicesHeight: undefined,  // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\nchoicesBackground: choicesBackgroundGameObject,\nchoices: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\nactionsBackground: actionsBackgroundGameObject,\nactions: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntitle: 0,\ntitleLeft: 0,\ntitleRight: 0,\ncontent: 0,\ncontentLeft: 0,\ncontentRight: 0,\ndescription: 0,\ndescriptionLeft: 0,\ndescriptionRight: 0\nchoices: 0,\nchoicesLeft: 0,\nchoicesRight: 0,\nactionsLeft: 0,\nactionsRight: 0,\n\ntoolbarItem: 0,\nleftToolbarItem: 0,\n\nchoice: 0,\n// choiceLine: 0,   // Used when choicesType is `'wrap'`, `'wrap-radio'`, or `'wrap-checkboxes'`\n// choiceColumn: 0, // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\n// choiceRow: 0,    // Used when choicesType is `'grid'`, `'grid-radio'`, or `'grid-checkboxes'`\nchoicesBackgroundLeft: 0,\nchoicesBackgroundRight: 0,\nchoicesBackgroundTop: 0,\nchoicesBackgroundBottom: 0,\n\naction: 0,\n},\n\nproportion: {\ntitle: 0,\ncontent: 0,\ndescription: 0,\nchoices: 0,\nactions: 0,\n},\n\nexpand: {\ntitle: true,\ncontent: true,\ndescription: true,\nchoices: true,\nactions: false,\n},\n\nalign: {\ntitle: 'center',\ncontent: 'center',\ndescription: 'center',\nchoices: 'center',\nactions: 'center',\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>title</code> : Game object of title, optional.</li> <li><code>toolbar</code> : Array of Game objects for toolbar-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>toolbarBackground</code> : Game object of toolbar buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>leftToolbar</code> : Array of Game objects for left-toolbar-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>leftToolbarBackground</code> : Game object of leftToolbar buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>content</code> : Game object of content, optional.</li> <li><code>description</code> : Game object of description, optional.</li> <li><code>choices</code> : Array of Game objects for choice-buttons group which arranged from top to bottom, optional.<ul> <li>Array of Game objects, for Buttons/FixWidthButtons choices.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li>2d Array of Game objects, for GridButtons choices..</li> </ul> </li> <li><code>choicesBackground</code> : Game object of choices buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>choicesType</code> : Sizer type (Buttons/FixWidthButtons/GridButtons) and behavior (<code>''</code>/<code>'radio'</code>/<code>'checkboxes'</code>) of choice buttons.<ul> <li><code>undefined</code>, <code>''</code>, or <code>'y'</code> : Buttons in vertical/horizontal without any extra behavior, default behavior.</li> <li><code>'radio'</code>, or <code>'x-radio'</code> : Buttons in vertical/horizontal, with radio behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code>.</li> </ul> </li> <li><code>'checkboxes'</code>, or <code>'x-checkboxes'</code> : Buttons in vertical/horizontal, with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'wrap'</code> : FixWidthButtons without any extra behavior, default behavior.</li> <li><code>'wrap-radio'</code> : FixWidthButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'wrap-checkboxes'</code> : FixWidthButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.</li> </ul> </li> <li><code>'grid'</code> : GridButtons without any extra behavior, default behavior.</li> <li><code>'grid-radio'</code> : GridButtons with radio behavior.<ul> <li>Name of Selected button game object (<code>gameObject.name</code>) will be returned via method <code>dialog.setChoicesSelectedButtonName()</code></li> </ul> </li> <li><code>'grid-checkboxes'</code> : GridButtons with checkboxes behavior.<ul> <li>Name of selected button game object (<code>gameObject.name</code>) will be return via method <code>dialog.getChoicessButtonStates()</code>.        </li> </ul> </li> </ul> </li> <li><code>choicesWidth</code>, <code>choicesHeight</code> : Minimum width, minimum height of choices.<ul> <li>Must assign <code>choicesHeight</code> value if using GridButtons choices.</li> </ul> </li> <li><code>actions</code> : Array of Game objects, or Space (<code>scene.rexUI.add.space()</code>) for action-buttons group which arranged from left to right, optional.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>choicesBackground</code> : Game object of choices buttons background, optional. This background game object will be resized to fit the size of dialog.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.title</code> : Space between title game object and below game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Extra left/right padding of title game object.</li> <li><code>space.content</code> : Space between content game object and below game object.</li> <li><code>space.contentLeft</code>, <code>space.contentRight</code> : Extra left/right padding of content game object.</li> <li><code>space.description</code> : Space between description game object and below game object.</li> <li><code>space.descriptionLeft</code>, <code>space.descriptionRight</code> : Extra left/right padding of description game object.</li> <li><code>space.choices</code> : Space between last choice-button and below game object.</li> <li><code>space.choicesLeft</code>, <code>space.choicesRight</code> : Extra left/right padding of choice buttons.</li> <li><code>space.actionsLeft</code>, <code>space.actionsRight</code> : Extra left/right padding of actions buttons.</li> <li><code>space.toolbarItem</code> : Space between each toolbar item game objects.</li> <li><code>space.leftToolbarItem</code> : Space between each left-toolbar item game objects.</li> <li><code>space.choice</code> : Space between each choice-button game objects.</li> <li><code>space.choicesBackgroundLeft</code>, <code>space.choicesBackgroundRight</code>, <code>space.choicesBackgroundTop</code>, <code>space.choicesBackgroundBottom</code> : Padding space around choices-background. </li> <li><code>space.action</code> : Space between each action-button game objects.</li> </ul> </li> <li><code>proportion</code> : Keep height of element, or expand height of element.<ul> <li><code>proportion.title</code> : Set to <code>1</code> to expand height of title. Default is <code>0</code>.</li> <li><code>proportion.content</code> : Set to <code>1</code> to expand height of content. Default is <code>0</code>.</li> <li><code>proportion.description</code> : Set to <code>1</code> to expand height of description. Default is <code>0</code>.</li> <li><code>proportion.choices</code> : Set to <code>1</code> to expand height of choices. Default is <code>0</code>.</li> <li><code>proportion.actions</code> : Set to <code>1</code> to expand height of actions. Default is <code>0</code>.</li> </ul> </li> <li><code>expand</code> : Expand width of element<ul> <li><code>expand.title</code> : Set <code>true</code> to expand width of title game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand width of content game object. Default is <code>true</code>.</li> <li><code>expand.description</code> : Set <code>true</code> to expand width of description game object. Default is <code>true</code>.</li> <li><code>expand.choices</code> : Set <code>true</code> to expand width of choices game object. Default is <code>true</code>.</li> <li><code>expand.actions</code> : Set <code>true</code> to expand width of actions game object. Default is <code>false</code>.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.title</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value. Will add Spaces at right and left sides.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center. Will add a Space at right side.</li> </ul> </li> <li><code>align.content</code> : Align content game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.content</code> is <code>false</code>.</li> <li><code>align.description</code> : Align description game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.description</code> is <code>false</code>.</li> <li><code>align.choices</code> : Align choices game object to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.choices</code> is <code>false</code>.</li> <li><code>align.actions</code> : Align action game objects to <code>'left'</code>/<code>'center'</code>/<code>'right'</code>, if <code>expand.actions</code> is <code>false</code>.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDialog extends RexPlugins.UI.Dialog {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dialog = new MyDialog(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>dialog.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-dialog/#modal","title":"Modal","text":"<p>Pop this dialog as modal dialog, clicking any action button to close this modal dialog.</p> <pre><code>dialog.modal({\n// cover: {\n//     color: 0x0,\n//     alpha: 0.8,\n//     transitIn: function(gameObject, duration) { },\n//     transitOut: function(gameObject, duration) { },\n// },\n// cover: false, \n\n// When to close modal dialog?\n// touchOutsideClose: false,\n// anyTouchClose: false,\n// timeOutClose: false,\n// manualClose: false,\n\n// duration: {\n//     in: 200,\n//     hold: 2000,\n//     out: 200\n// }\n\n// transitIn: 0,\n// transitOut: 0,\n\n// destroy: true,\n\n// defaultBehavior: true,\n});\n// dialog.modal(config, onClose);\n</code></pre> <p>or</p> <pre><code>dialog\n.modalPromise(config)\n.then(function(data){\n\n})\n</code></pre> <ul> <li><code>config</code> : See Modal behavior<ul> <li><code>config.defaultBehavior</code> :<ul> <li><code>undefined</code>, or <code>true</code> : Will close modal dialog when clicking any action button.</li> <li><code>false</code> : Disable default behavior. User has to invoke <code>dialog.modalClose(data)</code> manually.</li> </ul> </li> </ul> </li> <li><code>onClose</code> : Callback when closing modal dialog     <pre><code>function(data) {\n// var index = data.index;\n// var text = data.text;\n// var button = data.button;\n// var dialog = data.dialog;\n}\n</code></pre><ul> <li><code>data</code> : Contains these properties<ul> <li><code>data.index</code> : Index of clicking action button</li> <li><code>data.text</code> : <code>button.text</code>, this property is valided if button game object is a label.</li> <li><code>data.button</code> : Clicked button game object.</li> <li><code>data.dialog</code> : This dialog game object.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-dialog/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dialog/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>dialog.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, or <code>'toolbar'</code>, <code>'leftToolbar'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>dialog.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out button     <pre><code>dialog.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Enable button's input     <pre><code>dialog.on('button.enable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.enable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> <li>Disable button's input     <pre><code>dialog.on('button.disable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>dialog.on('choice.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('action.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('toolbar.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <pre><code>dialog.on('leftToolbar.disable', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'choices'</code>, <code>'actions'</code>, <code>'toolbar'</code>, or <code>'leftToolbar'</code></li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#emit-button-click-event","title":"Emit button click event","text":"<ul> <li>Emit choice/action/toolbar/left-toolbar button's click event     <pre><code>dialog.emitChoiceClick(index);\ndialog.emitActionClick(index);\ndialog.emitToolbarClick(index);\ndialog.emitLeftToolbarClick(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = dialog.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var title = dialog.getElement('title');\n</code></pre></li> <li>Content game object     <pre><code>var content = dialog.getElement('content');\n</code></pre></li> <li>Description game object     <pre><code>var description = dialog.getElement('description');\n</code></pre></li> <li>Choice button game object     <pre><code>var buttons = dialog.getElement('choices');\n</code></pre>     or     <pre><code>var button = dialog.getChoice(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('choices[' + index + ']');\n</code></pre></li> <li>Action button game object     <pre><code>var buttons = dialog.getElement('actions');\n</code></pre>     or     <pre><code>var button = dialog.getAction(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('actions[' + index + ']');\n</code></pre></li> <li>Toolbar button game object     <pre><code>var buttons = dialog.getElement('toolbar');\n</code></pre>     or     <pre><code>var button = dialog.getToolbar(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('toolbar[' + index + ']');\n</code></pre></li> <li>Left-toolbar button game object     <pre><code>var buttons = dialog.getElement('leftToolbar');\n</code></pre>     or     <pre><code>var button = dialog.getLeftToolbar(index);\n</code></pre>     or     <pre><code>var button = dialog.getElement('leftToolbar[' + index + ']');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = dialog.getElement('#' + name);\n// var gameObject = dialog.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = dialog.getByName(name);\n// var gameObject = dialog.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#add-button","title":"Add button","text":"<p>Add choice/action/toolbar/left-toolbar button</p> <pre><code>dialog.addChoice(gameObject);\ndialog.addAction(gameObject);\ndialog.addToolbar(gameObject);\ndialog.addLeftToolbar(gameObject);\n</code></pre> <ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul>"},{"location":"ui-dialog/#remove-button","title":"Remove button","text":"<ul> <li>Remove a choice/action/toolbar/left-toolbar button     <pre><code>dialog.removeChoice(index, destroyChild);\ndialog.removeAction(index, destroyChild);\ndialog.removeToolbar(index, destroyChild);\ndialog.removeLeftToolbar(index, destroyChild);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all choice/action/toolbar/left-toolbar buttons     <pre><code>dialog.clearChoices(destroyChild);\ndialog.clearActions(destroyChild);\ndialog.clearToolbar(destroyChild);\ndialog.clearLeftToolbar(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable choice/action/toolbar/left-toolbar button     <pre><code>dialog.setChoiceEnable(index);\ndialog.setActionEnable(index);\ndialog.setToolbarEnable(index);\ndialog.setLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Enable all buttons     <pre><code>dialog.setAllButtonsEnable();\n</code></pre></li> <li>Disable choice/action/toolbar/left-toolbar button's input     <pre><code>dialog.setChoiceEnable(index, false);\ndialog.setActionEnable(index, false);\ndialog.setToolbarEnable(index, false);\ndialog.setLeftToolbarEnable(index, false);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable all buttons     <pre><code>dialog.setAllButtonsEnable(false);\n</code></pre></li> <li>Toggle choice/action/toolbar/left-toolbar button's input     <pre><code>dialog.toggleChoiceEnable(index);\ndialog.toggleActionEnable(index);\ndialog.toggleToolbarEnable(index);\ndialog.toggleLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Get choice/action/toolbar/left-toolbar button's input enable     <pre><code>var enabled = dialog.getChoiceEnable(index);\nvar enabled = dialog.getActionEnable(index);\nvar enabled = dialog.getToolbarEnable(index);\nvar enabled = dialog.getLeftToolbarEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>dialog.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show choice/action/toolbar/left-toolbar button     <pre><code>dialog.showChoice(index);\ndialog.showAction(index);\ndialog.showToolbar(index);\ndialog.showLeftToolbar(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide choice/action/toolbar/left-toolbar button.     <pre><code>dialog.hideChoice(index);\ndialog.hideAction(index);\ndialog.hideToolbar(index);\ndialog.hideLeftToolbar(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-dialog/#for-each-button","title":"For each button","text":"<pre><code>dialog.forEachChoice(callback, scope);\ndialog.forEachAction(callback, scope);\ndialog.forEachToolbar(callback, scope);\ndialog.forEachLeftToolbar(callback, scope);\n</code></pre> <ul> <li><code>callback</code> :      <pre><code>function(button, index, buttons) {\n// ...\n}\n</code></pre></li> </ul>"},{"location":"ui-dialog/#state-of-choices-buttons","title":"State of choices buttons","text":""},{"location":"ui-dialog/#radio","title":"Radio","text":"<ul> <li>Read state     <pre><code>var value = dialog.getChoicesSelectedButtonName();\n</code></pre></li> <li>Set state     <pre><code>dialog.setChoicesSelectedButtonName(name);\n</code></pre></li> </ul>"},{"location":"ui-dialog/#checkboxes","title":"Checkboxes","text":"<ul> <li>Read states     <pre><code>var states = dialog.getChoicesButtonStates();\n</code></pre><ul> <li><code>states</code> : <code>{name: boolean}</code></li> </ul> </li> <li>Set state     <pre><code>dialog.setChoicesButtonState(name, state);\n</code></pre><ul> <li><code>name</code> : Name of button game object</li> <li><code>state</code> : Set <code>true</code> if button is selected</li> </ul> </li> <li>Clear all states to <code>false</code> <pre><code>dialog.clearChoicesButtonStates();\n</code></pre></li> </ul>"},{"location":"ui-dialog/#events_1","title":"Events","text":"<ul> <li>On button state changed. For Checkboxes/radio     <pre><code>dialog.on('button.statechange', function(button, groupName, index, value, previousValue) {\n// ...\n}, scope);\n</code></pre><ul> <li>Can be used to replace setValueCallback.</li> </ul> </li> </ul>"},{"location":"ui-dropdownlist/","title":"Drop down list","text":""},{"location":"ui-dropdownlist/#introduction","title":"Introduction","text":"<p>A label can open a drop-down list panel.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-dropdownlist/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down list</li> <li>Drop-down wrap-list</li> <li>Custom transit</li> <li>Align to right side</li> </ul>"},{"location":"ui-dropdownlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-dropdownlist/#install-plugin","title":"Install plugin","text":""},{"location":"ui-dropdownlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.dropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.dropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { DropDownList } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dropDownList object     <pre><code>var dropDownList = new DropDownList(scene, config);\nscene.add.existing(dropDownList);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#add-drop-down-list-object","title":"Add drop-down list object","text":"<pre><code>var dropDownList = scene.rexUI.add.dropDownList({\noptions: [\noption0,\noption1,\n// ...\n],\n\nlist: {\n// createBackgroundCallback: function(scene) {\n//     // this : dropDownList\n//     return gameObject;\n// },\n\ncreateButtonCallback: function(scene, option, index, options) {\n// this : dropDownList\nreturn gameObject;\n},\n\nonButtonClick: function(button, index, pointer, event) {\n// this : dropDownList\n},\n\n// onButtonOver: function(button, index, pointer, event) {\n//     // this : dropDownList\n// },\n\n// onButtonOut: function(button, index, pointer, event) {\n//     // this : dropDownList\n// },\n\n// easeIn: 500,\n// transitIn: undefined,\n// transitIn: function(listPanel, duration) {  },\n\n// easeOut: 100,\n// transitOut: undefined,\n// transitOut: function(listPanel, duration) {  },\n\n// wrap: false,\n// width: undefined, \n// height: undefined,\n// alignParent: 'text',\n// alignSide: '',\n// expandDirection: 0,\n// bounds: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0, item: 0,\n//     line: 0\n// },\n\n// draggable: false\n},\n\nsetValueCallback: function(dropDownList, value, previousValue) {\n\n},\nsetValueCallbackScope: undefined,\nvalue: undefined,\n\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\naction: actionGameObject,\nactionMask: false,\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>options</code> : Array of strings, or objects.</li> <li><code>list</code> : Configuration of list panel.<ul> <li><code>list.createBackgroundCallback</code> : Create background of list panel     <pre><code>function(scene) {\n// this : dropDownList\nreturn gameObject;\n}\n</code></pre></li> <li><code>list.createButtonCallback</code> : Create option button of list panel     <pre><code>function(scene, option, index, options) {\n// this : dropDownList\nreturn gameObject;\n}\n</code></pre></li> <li><code>list.onButtonClick</code> : Callback when clicking a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.onButtonOver</code> : Callback when pointer over a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.onButtonOut</code> : Callback when pointer out a button     <pre><code>function(button, index, pointer, event) {\n// this : dropDownList\n}\n</code></pre></li> <li><code>list.easeIn</code> : Pop-up duration in ms. Default value is <code>500</code>.</li> <li><code>list.transitIn</code> : Tween behavior of opening list panel.<ul> <li><code>undefined</code> : Expand list panel by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.easeOut</code> : Scale-down duration in ms. Default value is <code>100</code>.</li> <li><code>list.transitOut</code> : Tween behavior of closing list panel.<ul> <li><code>undefined</code> : Closing list panel by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.wrap</code> : <ul> <li><code>true</code> : fixwidth-sizer layout, a row within buttons.</li> <li><code>false</code> : sizer layout, a row within a button. Default behavior.</li> </ul> </li> <li><code>list.width</code> : Minimum width.<ul> <li><code>undefined</code> : Minimum width of panel will equal to width of parent label. Default value.</li> <li>A number : Width of panel. Required fields when <code>list.wrap</code> is <code>true</code>.</li> </ul> </li> <li><code>list.height</code> : Minimum height.<ul> <li><code>undefined</code> : Default value.</li> </ul> </li> <li><code>list.alignParent</code> : Align x position to label.<ul> <li><code>'icon'</code> : Align x position to icon game object of parent label.</li> <li><code>'text'</code> : Align x position to text game object of parent label. Default behavior</li> <li><code>'label'</code>, or <code>null</code> : Align x position to parent label.        </li> </ul> </li> <li><code>list.alignSide</code> : Align list to label's left or right side.<ul> <li><code>undefined</code>, or <code>'left'</code> : Align list's left side to label's left side. Default behavior.</li> <li><code>'right</code> : Align list's right side to label's right side. Default behavior.</li> </ul> </li> <li><code>list.expandDirection</code> :<ul> <li><code>0</code>, <code>'down'</code> : Expand list down. i.e. list panel will put below parent label.</li> <li><code>1</code>, <code>'up'</code> : Expand list up. i.e. list panel will put above parent label.</li> </ul> </li> <li><code>list.bounds</code> : Put list panel below parent label if bottom of list panel is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>list.space</code> : <code>space</code> properties of list panel.<ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code> : For sizer layout. (<code>list.wrap</code> is <code>false</code>)</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code>, <code>line</code> : For fixwidth-sizer layout. (<code>list.wrap</code> is <code>true</code>)</li> </ul> </li> <li><code>list.draggable</code> : Set <code>true</code> to drag top-most object.</li> </ul> </li> <li><code>value</code>, <code>setValueCallback</code>, <code>setValueCallbackScope</code> : See value <pre><code>function(dropDownList, value, previousValue) {\n\n}\n</code></pre></li> <li>Properties of Label<ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : Set <code>true</code> to expand width of text object.</li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action-icon game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-dropdownlist/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDropDownList extends RexPlugins.UI.DropDownList {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dropDownList = new MyDropDownList(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#options","title":"Options","text":"<ul> <li>Set     <pre><code>dropDownList.setOptions(options);\n</code></pre>     or     <pre><code>dropDownList.options = options;\n</code></pre><ul> <li><code>options</code> : Array of strings, or objects.</li> </ul> </li> <li>Get     <pre><code>var options = dropDownList.options;\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#clicking","title":"Clicking","text":"<ul> <li>Enable     <pre><code>dropDownList.enableClick();\n</code></pre></li> <li>Disable     <pre><code>dropDownList.disableClick();\n</code></pre></li> <li>Register another clicking callback     <pre><code>dropDownList.onClick(callback, scope);\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>dropDownList.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of option.</li> </ul> <p>Will fire <code>'button.click'</code> event</p> <pre><code>dropDownList.on('button.click', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre> <ul> <li><code>listPanel</code> : <code>undefined</code></li> <li><code>button</code> : Option</li> <li><code>pointer</code> : <code>undefined</code></li> <li><code>event</code> : <code>undefined</code></li> </ul>"},{"location":"ui-dropdownlist/#value","title":"Value","text":"<ul> <li>Set value under <code>list.onButtonClick</code> callback.     <pre><code>dropDownList.setValue(value);\n</code></pre>     or     <pre><code>dropDownList.value = value;\n</code></pre><ul> <li>When value changing<ul> <li>Will invoke <code>setValueCallback</code> <pre><code>function(dropDownList, value, previousValue) {\n\n}\n</code></pre></li> <li>Will fire <code>'valuechange'</code> event</li> </ul> </li> </ul> </li> <li>Get     <pre><code>var value = dropDownList.value;\n</code></pre></li> </ul>"},{"location":"ui-dropdownlist/#openclose-list-panel","title":"Open/close list panel","text":""},{"location":"ui-dropdownlist/#open-list-panel","title":"Open list panel","text":"<ul> <li>Click parent label to open (create and pop-up) list panel.</li> <li>Or invoke this method <code>dropDownList.openListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#close-list-panel","title":"Close list panel","text":"<ul> <li>When list panel is opened, click any where will close (scale-down then destroy) this list panel.</li> <li>Or invoke this method <code>dropDownList.closeListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#toggle-list-panel","title":"Toggle list panel","text":"<ul> <li><code>dropDownList.toggleListPanel()</code>.</li> </ul>"},{"location":"ui-dropdownlist/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-dropdownlist/#events","title":"Events","text":"<ul> <li>Open list     <pre><code>dropDownList.on('list.open', function(dropDownList, listPanel) {\n\n})\n</code></pre></li> <li>Close list     <pre><code>dropDownList.on('list.close', function(dropDownList, listPanel) {\n\n})\n</code></pre></li> <li>Click button     <pre><code>dropDownList.on('button.click', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Over button     <pre><code>dropDownList.on('button.over', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Out button     <pre><code>dropDownList.on('button.out', function(dropDownList, listPanel, button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button on list panel.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>On value changing     <pre><code>dropDownList.on('valuechange', function(dropDownList, value, previousValue) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/","title":"File selector button","text":""},{"location":"ui-fileselectorbutton/#introduction","title":"Introduction","text":"<p>A transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>) above a Label.</p> <ul> <li>Author: Rex</li> <li>Game object, DOM Game object</li> </ul>"},{"location":"ui-fileselectorbutton/#live-demos","title":"Live demos","text":"<ul> <li>File selector button</li> </ul>"},{"location":"ui-fileselectorbutton/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fileselectorbutton/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fileselectorbutton/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add file selector button object     <pre><code>var button = scene.add.fileSelectorButton(config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import FileChooserPlugin from 'phaser3-rex-plugins/plugins/filechooser-plugin.js';\nvar config = {    parent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add file selector button object     <pre><code>var button = scene.add.fileSelectorButton(config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import { FileSelectorButton } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add file chooser object     <pre><code>var button = new FileSelectorButton(scene, config);\nscene.add.existing(button);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#add-file-chooser-object","title":"Add file chooser object","text":"<pre><code>var button = scene.add.fileSelectorButton({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\nicon: iconGameObject,\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\n\naction: actionGameObject,\n// actionMask: false,\n// squareFitAction: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n\n// accept: '',\n// multiple: false,\n});\n// var fileChooser = scene.add.fileSelectorButton(x, y, width, height, config);\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitIcon</code> : <ul> <li><code>true</code> : Resize icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object to <code>iconSize</code>x<code>iconSize</code></li> <li><code>iconWidth</code> : Set display width of icon game object to <code>iconWidth</code>. <ul> <li>If <code>iconHeight</code> is <code>undefined</code>, set <code>scaleY</code> of icon game object to <code>scaleX</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>iconHeight</code> : Set display height of icon game object to <code>iconHeight</code>. <ul> <li>If <code>iconWidth</code> is <code>undefined</code>, set <code>scaleX</code> of icon game object to <code>scaleY</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : <ul> <li><code>false</code> : Keep width of text to original size. Default behavior.</li> <li><code>true</code> : Expand width of text object. Will set display width by default.<ul> <li>Must set to <code>true</code> if using <code>scene.rexUI.wrapExpandText</code> method with any text game object.</li> </ul> </li> </ul> </li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitAction</code> : <ul> <li><code>true</code> : Resize action icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object to <code>actionSize</code>x<code>actionSize</code></li> <li><code>actionWidth</code> : Set display width of action game object to <code>actionWidth</code>. <ul> <li>If <code>actionHeight</code> is <code>undefined</code>, set <code>scaleY</code> of action game object to <code>scaleX</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>actionHeight</code> : Set display height of action game object to <code>actionHeight</code>. <ul> <li>If <code>actionWidth</code> is <code>undefined</code>, set <code>scaleX</code> of action game object to <code>scaleY</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> <li><code>multiple</code> : Set <code>true</code> to select multiple files.</li> </ul>"},{"location":"ui-fileselectorbutton/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFileSelectorButton extends RexPlugins.UI.FileSelectorButton {\nconstructor(scene, config) {\nsuper(scene, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var button = new MyFileSelectorButton(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fileselectorbutton/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> <li>File chooser game object     <pre><code>var fileChooser = label.getElement('fileChooser');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fileselectorbutton/#selected-files","title":"Selected files","text":"<pre><code>var files = fileChooser.files;\n</code></pre> <ul> <li><code>files</code> : Array of file object.</li> </ul>"},{"location":"ui-fileselectorbutton/#set-accept-filter","title":"Set accept filter","text":"<pre><code>fileChooser.setAccept(accept);\n</code></pre> <ul> <li><code>accept</code> : A filter for what file types the user can pick from the file input dialog box.<ul> <li><code>'image/*'</code> : The user can pick all image files.</li> <li><code>'audio/*'</code> : The user can pick all sound files.</li> <li><code>'video/*'</code> : The user can pick all video files.</li> <li><code>file_extension</code> : Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from.</li> </ul> </li> </ul>"},{"location":"ui-fileselectorbutton/#multiple-files","title":"Multiple files","text":"<ul> <li>Enable     <pre><code>fileChooser.setMultiple();\n</code></pre></li> <li>Disable     <pre><code>fileChooser.setMultiple(false);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#events","title":"Events","text":"<ul> <li>Selected file(s) changed     <pre><code>button.on('select', function(files, button) {        var file = files[0];\nvar url = URL.createObjectURL(file);\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#load-file-to-cache","title":"Load file to cache","text":"<pre><code>fileChooser.loadFile(file, loaderType, key);\n// fileChooser.loadFile(file, loaderType, key, cahceType);\n</code></pre> <p>or</p> <pre><code>fileChooser.loadFilePromise(file, loaderType, key, cahceType)\n.then(function(content) {\n\n})\n</code></pre> <ul> <li><code>file</code> : File object, see Events</li> <li><code>loaderType</code> : <code>image</code>, <code>text</code>, <code>binary</code>, ... See Loader</li> <li><code>key</code> : Unique string key.</li> <li><code>cahceType</code> : <ul> <li><code>undefined</code> : Use default value.</li> </ul> </li> <li><code>content</code> : Content of file.</li> </ul>"},{"location":"ui-fileselectorbutton/#create-object-url","title":"Create object URL","text":"<ul> <li>Create object url <pre><code>var objectURL = URL.createObjectURL(file);\n</code></pre></li> <li>Release object url <pre><code>URL.createObjectURL(objectURL);\n</code></pre></li> </ul>"},{"location":"ui-fileselectorbutton/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"ui-fileselectorbutton/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-fixwidthbuttons/","title":"Fix-width buttons","text":""},{"location":"ui-fixwidthbuttons/#introduction","title":"Introduction","text":"<p>A container with a group of fix-width buttons.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-fixwidthbuttons/#live-demos","title":"Live demos","text":"<ul> <li>Checkboxes/radio</li> <li>Indent left</li> <li>Indent top</li> </ul>"},{"location":"ui-fixwidthbuttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fixwidthbuttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fixwidthbuttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = scene.rexUI.add.fixWidthButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = scene.rexUI.add.fixWidthButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FixWidthButtons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add fix-Width buttons object     <pre><code>var buttons = new FixWidthButtons(scene, config);\nscene.add.existing(buttons);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#add-buttons-object","title":"Add Buttons object","text":"<pre><code>var buttons = scene.rexUI.add.fixWidthButtons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\n// rtl: false,\nalign: 0,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: 0,\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0,\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// buttonsType: undefined,\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : 1d/2d array of button game objects.</li> <li><code>align</code> : Align children of a line.<ul> <li><code>0</code>, <code>'left'</code> : Align children of a line to left/top side.</li> <li><code>1</code>, <code>'right'</code> : Align children of a line to right/bottom side.</li> <li><code>2</code>, <code>'center'</code> : Align children of a line to ceter.</li> <li><code>3</code>, <code>'justify'</code>, <code>'justify-left'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to left/top side.</li> <li><code>4</code>, <code>'justify-right'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to right/bottom side.</li> <li><code>5</code>, <code>'justify-cneter'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to center.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>space</code> :<ul> <li>A number: Space between 2 button game objects.</li> <li>An object: Padding of button game objects.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space betwen each child of a line.</li> <li><code>space.line</code> : Space between each line.</li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even line.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even item.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game obhect, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-fixwidthbuttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyButtons extends RexPlugins.UI.FixWidthButtons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fixwidthbuttons/#other-properties","title":"Other properties","text":"<p>See sizer object</p>"},{"location":"ui-fixwidthbuttons/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>buttons.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.click', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>groupName</code> : Optional group name.</li> <li><code>button</code> : Triggered button game object.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>buttons.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.over', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Pointer-out button     <pre><code>buttons.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.out', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Enable button's input     <pre><code>buttons.on('button.enable', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.enable', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> <li>Disable button's input     <pre><code>buttons.on('button.disalbe', function(button, index) {\n// ...\n}, scope);\n</code></pre>     or     <pre><code>buttons.on('button.disalbe', function(button, groupName, index, pointer, event) {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#emit-button-click-event","title":"Emit button click event","text":"<pre><code>buttons.emitButtonClick(index);\n</code></pre> <ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul>"},{"location":"ui-fixwidthbuttons/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable a button's input     <pre><code>buttons.setButtonEnable(index);\n// buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Enable all buttons' input     <pre><code>buttons.setButtonEnable();\n// buttons.setButtonEnable(true);\n</code></pre></li> <li>Disable     <pre><code>buttons.setButtonEnable(index, true);\n</code></pre><ul> <li><code>index</code> : Index of triggered button game object, or a button game object.</li> </ul> </li> <li>Disable all buttons' input     <pre><code>buttons.setButtonEnable(false);\n</code></pre></li> <li>Toggle     <pre><code>buttons.toggleButtonEnable(index);\n</code></pre></li> <li>Toggle all buttons's input     <pre><code>buttons.toggleButtonEnable();\n</code></pre></li> <li>Get button's input enable     <pre><code>var enabled = bottons.getButtonEnable(index);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthbuttons/#add-child","title":"Add child","text":"<ul> <li>Add button child     <pre><code>buttons.addButton(gameObject)\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add non-button child, see <code>fixWidthSizer.add()</code> method.     <pre><code>buttons.add(gameObject,\n{\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\nindex: undefined\n}\n)\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#remove-child","title":"Remove child","text":"<ul> <li>Remove button child     <pre><code>buttons.removeButton(gameObject, destroyChild);\n</code></pre><ul> <li><code>gameObject</code> : <ul> <li>Game object, or array of game objects : Button game object.</li> <li>A number, or array of numbers : Index of button game object.</li> <li>A string, or array of strings : Name of button game object.</li> </ul> </li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttton children     <pre><code>buttons.clearButtons(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove a button or non-button child, see <code>fixWidthSizer.remove()</code> method.     <pre><code>buttons.remove(gameObject, destroyChild);\n</code></pre></li> <li>Remove all button or non-button children, see <code>fixWidthSizer.remove()</code> method.     <pre><code>buttons.removeAll(destroyChild);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthbuttons/#showhide-button","title":"Show/hide button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-fixwidthbuttons/#for-each-button","title":"For each button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-fixwidthbuttons/#checkboxesradio","title":"Checkboxes/radio","text":"<p>The same as checkboxes/radio of buttons.</p>"},{"location":"ui-fixwidthsizer/","title":"Fix-width sizer","text":""},{"location":"ui-fixwidthsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects into lines.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-fixwidthsizer/#live-demos","title":"Live demos","text":"<ul> <li>Fix-width sizer</li> <li>Scrollable, fix-width sizer</li> <li>Indent</li> <li>Drag-drop item</li> <li>Set children interactive</li> </ul>"},{"location":"ui-fixwidthsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-fixwidthsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-fixwidthsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { FixWidthSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new FixWidthSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.fixWidthSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0, \n//     indentLeftOdd: 0, indentLeftEven: 0,\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(x, y, {\n// width: 2,\n// height: 2\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0,\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.fixWidthSizer(x, y, width, height, {\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0,\n//     item: 0, line: 0\n// },\n\n// rtl: false,\n// align: 0,\n\n// name: '',\n// draggable: false\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space betwen each child of a line.</li> <li><code>space.line</code> : Space between each line.</li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even line.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even item.</li> </ul> </li> <li><code>rtl</code> : Order of children in each line.<ul> <li><code>false</code> : Place children from left-to-right/top-to-bottom, default value.</li> <li><code>true</code> : Place children from right-to-left/bottom-to-top.</li> </ul> </li> <li><code>align</code> : Align children of a line.<ul> <li><code>0</code>, <code>'left'</code> : Align children of a line to left/top side.</li> <li><code>1</code>, <code>'right'</code> : Align children of a line to right/bottom side.</li> <li><code>2</code>, <code>'center'</code> : Align children of a line to ceter.</li> <li><code>3</code>, <code>'justify'</code>, <code>'justify-left'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to left/top side.</li> <li><code>4</code>, <code>'justify-right'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to right/bottom side.</li> <li><code>5</code>, <code>'justify-cneter'</code> : If remainder space is less or equal than 25%, then justify children. Else align children to center.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.FixWidthSizer {\nconstructor(scene, x, y, minWidth, minHeight, orientation, space, config) {\nsuper(scene, x, y, minWidth, minHeight, orientation, space, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, orientation, space, config);\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\nindex: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, padding, key, index);\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds</li> <li>Or a plain object     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> <li><code>items</code> : Reserved key, for all children item.</li> </ul> </li> <li><code>index</code> : Insert child to.<ul> <li><code>undefined</code> : Insert child at last.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#insert-child","title":"Insert child","text":"<pre><code>sizer.insert(index, child, {\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insert(index, child, padding, key);\n</code></pre>"},{"location":"ui-fixwidthsizer/#insert-at-position","title":"Insert at position","text":"<pre><code>sizer.insertAtPosition(x, y, child, {\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nkey: undefined,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insertAtPosition(x, y, index, child, padding, key);\n</code></pre>"},{"location":"ui-fixwidthsizer/#add-new-line","title":"Add new line","text":"<pre><code>sizer.addNewLine();\n</code></pre>"},{"location":"ui-fixwidthsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-fixwidthsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-fixwidthsizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-fixwidthsizer/#other-properties","title":"Other properties","text":"<p>See base-sizer object.</p>"},{"location":"ui-folder/","title":"Folder","text":""},{"location":"ui-folder/#introduction","title":"Introduction","text":"<p>A container with a title, foldable child, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-folder/#live-demos","title":"Live demos","text":"<ul> <li>Scrollable folders</li> <li>Folders</li> </ul>"},{"location":"ui-folder/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-folder/#install-plugin","title":"Install plugin","text":""},{"location":"ui-folder/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add folder object     <pre><code>var folder = scene.rexUI.add.folder(config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add folder object     <pre><code>var folder = scene.rexUI.add.folder(config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Folder } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add folder object     <pre><code>var folder = new Folder(scene, config);\nscene.add.existing(folder);\n</code></pre></li> </ul>"},{"location":"ui-folder/#add-folder-object","title":"Add folder object","text":"<pre><code>var folder = scene.rexUI.add.folder({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\ntitle: titleGameObject,    child: childGameObject,\n// customChildOrigin: false,\n\ntoggleByTarget: undefined,\ntoggleClickConfig: {\nmode:'pointerup',\nclickInterval: 100,\nthreshold: undefined,\n},\n\nalign: {\ntitle: 'left',\nchild: 'left',\n},\n\nexpand: {\ntitle: true,\nchild: true,\n},\n\ntransition: {\nduration: 200,\nexpandCallback: undefined,\ncollapseCallback: undefined,\n},\n\nreLayoutTarget: undefined,\n\nonExpandStart: undefined,\nonExpandComplete: undefined,\nonCollapseStart: undefined,\nonCollapseComplete: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nitem: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of folder.</li> <li><code>title</code> : Game object of title, required.</li> <li><code>child</code> : Game object of child, required.</li> <li><code>customChildOrigin</code> : <ul> <li><code>false</code> : Set origin of child to <code>0</code>, or <code>1</code> (if <code>rtl</code> is set to <code>true</code>). Default behavior.</li> <li><code>true</code> : Don't change origin of child.</li> </ul> </li> <li><code>toggleByTarget</code> : Toggle expanding/collapsing by clicking this target game object<ul> <li><code>undefined</code> : Toggle by clicking title game object.</li> </ul> </li> <li><code>toggleClickConfig</code> : Configuration of clicking behavior<ul> <li><code>undefined</code> : Use default configuration.</li> </ul> </li> <li><code>align.title</code>, <code>align.child</code> : Alignment of title, child game objects.    <ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top. Default behavior.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>expand.title</code>, <code>expand.child</code> : Expand width/height of title, child game objects.    <ul> <li><code>true</code> : Expand width/heigh. Default behavior.</li> <li><code>false</code> : Use origin width/height.</li> </ul> </li> <li><code>transition</code> : Configuration of expanding/collapsing transition.<ul> <li><code>transition.duration</code> : Duration of expanding/collapsing transition.</li> <li><code>transition.expandCallback</code> : Callback invoked when expading child. Default behavior is scale-up.</li> <li><code>transition.collapseCallback</code> : Callback invoked when collapsing child. Default behavior is scale-down.</li> </ul> </li> <li><code>reLayoutTarget</code> : Layout topmost sizer when expanding/collapsing start.<ul> <li><code>undefined</code> : Topmost sizer will be layouted again. Default behavior.</li> <li>A sizer : Layout this sizer.</li> </ul> </li> <li><code>onExpandStart</code> : Callback invoked when expanding start. Register this callback on <code>'expand.start'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onExpandComplete</code> : Callback invoked when expanding complete. Register this callback on <code>'expand.complete'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onCollapseStart</code> : Callback invoked when collapsing start. Register this callback on <code>'collapse.start'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>onCollapseComplete</code> : Callback invoked when collapsing complete. Register this callback on <code>'collapse.complete'</code> event.     <pre><code>function(folder) {  }\n</code></pre></li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-folder/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyFolder extends RexPlugins.UI.Folder {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var folder = new MyFolder(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-folder/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>folder.layout();\n</code></pre> <p>See also - dirty</p> <p>Note</p> <p>Layout topmost sizer when expanding/collapsing start.</p>"},{"location":"ui-folder/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = folder.getElement('background');\n</code></pre></li> <li>Title game object     <pre><code>var icon = folder.getElement('title');\n</code></pre></li> <li>Child game object     <pre><code>var textObject = folder.getElement('child');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = folder.getElement('#' + name);\n// var gameObject = folder.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = folder.getByName(name);\n// var gameObject = folder.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-folder/#expandcollapse","title":"Expand/collapse","text":"<ul> <li>Expand     <pre><code>folder.expand();\n// folder.expand(duration);\n</code></pre> <pre><code>folder.expand(0);  // Immediately, won't invoke expandCallback\n</code></pre></li> <li>Collapse     <pre><code>folder.collapse();\n// folder.collapse(duration);\n</code></pre> <pre><code>folder.collapse(0);  // Immediately, won't invoke collapseCallback\n</code></pre></li> <li>Toggle     <pre><code>folder.toggle();\n// folder.toggle(duration);\n</code></pre> <pre><code>folder.toggle(0);  // Immediately, won't invoke expandCallback/collapseCallback\n</code></pre></li> <li>Get expanded state     <pre><code>var expanded = folder.expanded;\n</code></pre><ul> <li><code>expanded</code> : Initial value is <code>undefined</code></li> </ul> </li> </ul>"},{"location":"ui-folder/#transition-callbacks","title":"Transition callbacks","text":"<ul> <li>Set transition callbacks     <pre><code>folder.setExpandCallback(callback);\nfolder.setCollapseCallback(callback);\n</code></pre><ul> <li><code>callback</code> :     <pre><code>function(gameObject, duration) {\n}\n</code></pre><ul> <li><code>gameObject</code> : Child game object</li> </ul> </li> </ul> </li> <li>Transition duration<ul> <li>Set     <pre><code>folder.setTransitionDuration(duration);\n</code></pre></li> <li>Get     <pre><code>var duration = folder.transitionDuration;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-folder/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-folder/#events","title":"Events","text":"<ul> <li>On expand-start     <pre><code>folder.on('expand.start', function(folder){\n\n})\n</code></pre> <pre><code>title.on('folder.expand', function(folder){\n\n})\n</code></pre> <pre><code>child.on('folder.expand', function(folder){\n\n})\n</code></pre></li> <li>On expand-complete     <pre><code>folder.on('expand.complete', function(folder){\n\n})\n</code></pre></li> <li>On collapse-start     <pre><code>folder.on('collapse.start', function(folder){\n\n})\n</code></pre> <pre><code>title.on('folder.collapse', function(folder){\n\n})\n</code></pre> <pre><code>child.on('folder.collapse', function(folder){\n\n})\n</code></pre></li> <li>On collapse-complete     <pre><code>folder.on('collapse.complete', function(folder){\n\n})\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/","title":"Grid buttons","text":""},{"location":"ui-gridbuttons/#introduction","title":"Introduction","text":"<p>A container with a group of buttons in grids.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridbuttons/#live-demos","title":"Live demos","text":"<ul> <li>Number pad</li> <li>Checkboxes/radio</li> </ul>"},{"location":"ui-gridbuttons/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridbuttons/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridbuttons/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.gridButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = scene.rexUI.add.gridButtons(config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridButtons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add buttons object     <pre><code>var buttons = new GridButtons(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#add-grid-sizer-object","title":"Add grid sizer object","text":"<pre><code>var buttons = scene.rexUI.add.gridButtons({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\n// background: backgroundGameObject,\n\nbuttons: [\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n[buttonGameObject, buttonGameObject, buttonGameObject, ...],\n...\n],\n// row: 0, \n// column: 0,   // col: 0\n// createCellContainerCallback: function(scene, x, y) {\n//       return cellContainer;\n// },    \nexpand: true,\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0     // [0, 0, 0]\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n// eventEmitter: this,\n// groupName: undefined,\n\n// buttonsType: undefined,\n// setValueCallback: undefined,  // or setButtonStateCallback: undefined\n// setValueCallbackScope: undefined  // or setButtonStateCallbackScope: undefined\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code> : Minimum width. i.e. Width of this gridButtons will larger then this value.</li> <li><code>height</code> : Minimum height. i.e. Hieght of this gridButtons will larger then this value.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>buttons</code> : 2d array of button game objects, or create buttons via <code>row</code>, <code>column</code>(or <code>col</code>), and <code>createCellContainerCallback</code>.</li> <li><code>createCellContainerCallback</code> : Callback to create buttons.     <pre><code>function(scene, x, y) {\nreturn cellContainer;\n}\n</code></pre></li> <li><code>expand</code> : Set <code>true</code> to expand width and height of buton game objects.</li> <li><code>space</code> : Space around this sizer, and space between columns/rows<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space around this sizer.</li> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>eventEmitter</code> : Dispatch buttons' touch events to other game object, default is this buttons game object.</li> <li><code>groupName</code> : Optional group name for argument of touch events.</li> <li><code>buttonsType</code> : Type/behavior of these buttons.<ul> <li><code>undefined</code> : No extra behavior, default value.</li> <li><code>'checkboxes'</code> : Set these buttons to checkboxes.</li> <li><code>'radio'</code> : Set these buttons to radio.</li> </ul> </li> <li><code>setValueCallback</code> or <code>setButtonStateCallback</code> : Callback to set value of a button.<ul> <li><code>undefined</code> : No callback, default value.</li> <li>A function object.     <pre><code>function(button, value, previousValue) {\n// ...\n}\n</code></pre><ul> <li><code>button</code> : Button game object.</li> <li><code>value</code>: <code>true</code>, or <code>false</code>.</li> <li><code>previousValue</code> : <code>true</code>, or <code>false</code>.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-gridbuttons/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridButtons extends RexPlugins.UI.GridButtons {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var buttons = new MyGridButtons(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-gridbuttons/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>buttons.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridbuttons/#other-properties","title":"Other properties","text":"<p>See grid sizer object.</p>"},{"location":"ui-gridbuttons/#events","title":"Events","text":"<p>The same as events of buttons.</p>"},{"location":"ui-gridbuttons/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = buttons.getElement('background');\n</code></pre></li> <li>Button game objects     <pre><code>var buttonObjects = buttons.getElement('buttons');\n</code></pre>     or     <pre><code>var buttonObject = buttons.getButton(index);\n</code></pre>     or     <pre><code>var buttonObjects = buttons.getElement('buttons[0]'); // First button\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = buttons.getElement('#' + name);\n// var gameObject = buttons.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = buttons.getByName(name);\n// var gameObject = buttons.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-gridbuttons/#showhide-button","title":"Show/hide button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-gridbuttons/#for-each-button","title":"For each button","text":"<p>The same as for each button of buttons.</p>"},{"location":"ui-gridbuttons/#checkboxesradio","title":"Checkboxes/radio","text":"<p>The same as checkboxes/radio of buttons.</p>"},{"location":"ui-gridsizer/","title":"Grid sizer","text":""},{"location":"ui-gridsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects in grids.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridsizer/#live-demos","title":"Live demos","text":"<ul> <li>Create cell-containers</li> <li>Scrollable grids</li> <li>Add new row</li> <li>Add new column</li> <li>Full viewport</li> <li>Set children interactive</li> <li>Destroy cell</li> <li>Reset grid</li> </ul>"},{"location":"ui-gridsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.gridSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.gridSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new GridSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#add-grid-sizer-object","title":"Add grid sizer object","text":"<pre><code>var gridSizer = scene.rexUI.add.gridSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\ncolumn: 0,  // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// name: '',\n// draggable: false\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, {\ncolumn: 0,  // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// width: undefined,\n// height: undefined\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, width, height, {\ncolumn: 0,   // col: 0\nrow: 0,\n// columnProportions: undefined,\n// rowProportions: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n});\n</code></pre> <p>or</p> <pre><code>var gridSizer = scene.rexUI.add.gridSizer(x, y, width, height, column, row, {\n// space: {\n//     left: 0, right: 0, top: 0, bottom:0,\n//     column: 0, // [0, 0, 0]\n//     row: 0,    // [0, 0, 0]\n//     indentLeftOdd: 0, indentLeftEven: 0,\n//     indentTopOdd: 0, indentTopEven: 0,\n// },\n\n// createCellContainerCallback: function(scene, x, y, config, gridSizer) {\n//     config.expand = true;\n//     return cellContainer;\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code> : Minimum width. i.e. Width of this gridSizer will larger then this value.</li> <li><code>height</code> : Minimum height. i.e. Hieght of this gridSizer will larger then this value.</li> <li><code>column</code>, or <code>col</code> : Amount of column grids.</li> <li><code>row</code> : Amount of row grids.</li> <li><code>columnProportions</code>, <code>rowProportions</code> : Proportion of each column/row.<ul> <li>Number : Apply this number proportion to each column/row</li> <li>Number array : Apply proportion of column/row through elements of this number array.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.indentLeftOdd</code>, <code>space.indentLeftEven</code> : Indent at each odd/even row.</li> <li><code>space.indentTopOdd</code>, <code>space.indentTopEven</code> : Indent at each odd/even column.</li> </ul> </li> <li><code>createCellContainerCallback</code> : Callback to create container(sizer) of each cell.     <pre><code>function(scene, x, y, config) {\nreturn cellContainer;\n}\n</code></pre><ul> <li><code>x</code>, <code>y</code> : Column, row index of this cell.</li> <li><code>config</code> : Config of adding child <pre><code>config.align = 'center';\nconfig.padding = {left: 0, right: 0, top: 0, bottom: 0};\nconfig.expand = false;\nconfig.key = undefined;\n</code></pre></li> <li><code>cellContainer</code> : Return a game object for this cell.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridSizer extends RexPlugins.UI.GridSizer {\nconstructor(scene, x, y, minWidth, minHeight, column, row) {\nsuper(scene, x, y, minWidth, minHeight, column, row);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var gridSizer = new MyGridSizer(scene, x, y, minWidth, minHeight, column, row);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#add-background","title":"Add background","text":"<pre><code>gridSizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>gridSizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to grid sizer</p> <pre><code>gridSizer.add(child, column, row);\n</code></pre> <p>or</p> <pre><code>gridSizer.add(child,\n{\ncolumn: 0,\nrow: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>gridSizer.add(child, column, row, align, padding, expand, key);\n</code></pre> <ul> <li><code>child</code> : A game object</li> <li><code>column</code>, <code>row</code> : Index of grid to add.<ul> <li><code>column</code> and <code>row</code> are numbers : Insert game object to cell (<code>column</code>, <code>row</code>). <ul> <li>Do nothing if that cell has item already.</li> </ul> </li> <li><code>column</code> and <code>row</code> are <code>undefined</code> : Search each column, each row to find an empty cell for inserting. <ul> <li>Add an new row (<code>gridSizer.addEmptyRow()</code>) if last row was full, then find an empty cell in new row.</li> </ul> </li> <li><code>column</code> is <code>undefined</code>, and <code>row</code> is <code>true</code> : Search each row, each column to find an empty cell for inserting.<ul> <li>Add an new column (<code>gridSizer.addEmptyColumn()</code>) if last column was full, then find an empty cell in new column.</li> </ul> </li> <li><code>column</code> is a number, and <code>row</code> is <code>undefined</code> : Search each row of column <code>column</code> to find an empty cell for inserting.<ul> <li>Add an new row (<code>gridSizer.addEmptyRow()</code>) if last row was full, then find an empty cell in new row.</li> </ul> </li> <li><code>column</code> is <code>undefined</code> and <code>row</code> is a number : Search each column of row <code>row</code> to find an empty cell for inserting. <ul> <li>Add an new column (<code>gridSizer.addEmptyColumn()</code>) if last column was full, then find an empty cell in new column.</li> </ul> </li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds</li> <li>Or a plain object     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Set <code>true</code> to height and width.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#insert-empty-rowcolumn","title":"Insert empty row/column","text":"<ul> <li>Insert an empty row     <pre><code>gridSizer.insertEmptyRow(rowIndex);\n// gridSizer.insertEmptyRow(rowIndex, proportion, space);\n</code></pre><ul> <li><code>proportion</code> : Proportion of this new row.<ul> <li><code>undefined</code> : Use proportion of 1st row as default value.</li> </ul> </li> <li><code>space</code> : Space between this new row and previous row.<ul> <li><code>undefined</code> : Use space of 1st row as default value.</li> </ul> </li> </ul> </li> <li>Add an empty row     <pre><code>gridSizer.addEmptyRow();\n// gridSizer.addEmptyRow(rowIndex, proportion, space);\n</code></pre></li> <li>Insert an empty column     <pre><code>gridSizer.insertEmptyColumn(colIndex);\n// gridSizer.insertEmptyColumn(colIndex, proportion, space);\n</code></pre><ul> <li><code>proportion</code> : Proportion of this new column.<ul> <li><code>undefined</code> : Use proportion of 1st column as default value.</li> </ul> </li> <li><code>space</code> : Space between this new column and previous column.<ul> <li><code>undefined</code> : Use space of 1st column as default value.</li> </ul> </li> </ul> </li> <li>Add an empty row     <pre><code>gridSizer.addEmptyColumn();\n// gridSizer.addEmptyColumn(colIndex, proportion, space);\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#proportion","title":"Proportion","text":"<p>Set proportion of each column or row via</p> <pre><code>gridSizer.setColumnProportion(columnIndex, proportion);\ngridSizer.setRowProportion(rowIndex, proportion);\n</code></pre>"},{"location":"ui-gridsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>gridSizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridsizer/#grid-index-child","title":"Grid index &lt;-&gt; child","text":"<ul> <li>Grid index -&gt; child     <pre><code>var child = gridSizer.getChildAt(columnIndex, rowIndex);\n</code></pre></li> <li>Child -&gt; grid index     <pre><code>var gridIndex = gridSizer.childToGridIndex(child);\n// var gridIndex = gridSizer.childToGridIndex(child, out);\n</code></pre><ul> <li><code>gridIndex</code> : <code>{x, y}</code>, or <code>null</code> if child is not belong this sizer.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>gridSizer.remove(child);\n</code></pre>     or     <pre><code>gridSizer.removeAt(columnIndex, rowIndex);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>gridSizer.remove(child, true);\n</code></pre>     or     <pre><code>gridSizer.removeAt(columnIndex, rowIndex, true);\n</code></pre></li> <li>Remove all children     <pre><code>gridSizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>gridSizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>gridSizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>gridSizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#grid-size","title":"Grid size","text":"<ul> <li>Amount of column     <pre><code>var columnCount = gridSizer.columnCount;\n</code></pre></li> <li>Amount of row     <pre><code>var rowCount = gridSizer.rowCount;\n</code></pre></li> <li>Amount of grid = columnCount * rowCount     <pre><code>var gridCount = gridSizer.gridCount;\n</code></pre></li> </ul>"},{"location":"ui-gridsizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = gridSizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = gridSizer.getElement('#' + name);\n// var gameObject = gridSizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = gridSizer.getByName(name);\n// var gameObject = gridSizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-gridsizer/#reset-grid","title":"Reset grid","text":"<pre><code>sizer.resetGrid(column, row, columnProportions, rowProportions, space);\n</code></pre> <ul> <li><code>column</code> : Amount of column grids.</li> <li><code>row</code> : Amount of row grids.</li> <li><code>columnProportions</code>, <code>rowProportions</code> : Proportion of each column/row.<ul> <li>Number : Apply this number proportion to each column/row</li> <li>Number array : Apply proportion of column/row through elements of this number array.</li> </ul> </li> <li><code>space</code> :<ul> <li><code>space.column</code> : Space between 2 columns<ul> <li>A number</li> <li>A number array</li> </ul> </li> <li><code>space.row</code> : Space between 2 rows<ul> <li>A number</li> <li>A number array</li> </ul> </li> </ul> </li> </ul> <p>Note</p> <p>Children game objects will be removed without destroyed.</p> <p>Note</p> <p>Will invoke <code>createCellContainerCallback</code> to create cellContainer of each cell.</p>"},{"location":"ui-gridsizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-gridtable/","title":"Grid table","text":""},{"location":"ui-gridtable/#introduction","title":"Introduction","text":"<p>A container with a grid table, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-gridtable/#live-demos","title":"Live demos","text":"<ul> <li>Grid table</li> <li>Varying cell size</li> <li>Messages<ul> <li>Demo 1</li> <li>Demo 2</li> <li>Demo 3</li> </ul> </li> <li>Sizer cell: <ul> <li>Demo 1</li> <li>Demo 2</li> </ul> </li> <li>Separator</li> <li>Modal</li> <li>Drag item</li> <li>Fade-out-destroy cell</li> <li>Custom mask</li> </ul>"},{"location":"ui-gridtable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-gridtable/#install-plugin","title":"Install plugin","text":""},{"location":"ui-gridtable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.rexUI.add.gridTable(config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add table object     <pre><code>var table = scene.rexUI.add.gridTable(config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { GridTable } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add table object     <pre><code>var table = new GridTable(scene, config);\nscene.add.existing(table);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#add-table-object","title":"Add table object","text":"<pre><code>var table = scene.rexUI.add.gridTable({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nscrollMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\ntable: {\nwidth: undefined,\nheight: undefined,\n\ncellWidth: undefined,\ncellHeight: undefined,\ncolumns: 1,\n// rows: 1,\nmask: {\npadding: 0,\n// updateMode: 0,\n},\n// enableLayer: false,\ninteractive: true,\nreuseCellContainer: false,\n\n// click: undefined,\n// tap: undefined,\n// press: undefined,\n// swipe: undefined,\n},\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// }.\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntable: 0,\n// table: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\ncreateCellContainerCallback: function(cell, cellContainer) {\nvar scene = cell.scene,\nwidth = cell.width,\nheight = cell.height,\nitem = cell.item,\nitems = cell.items,\nindex = cell.index;\nif (cellContainer === null) { // No reusable cell container, create a new one\n// cellContainer = scene.rexUI.add.label();\n}\n// Set child properties of cell container ...\n\n// cell.setCellContainerAlign();  // Set alignment of cellContainer\n\nreturn cellContainer; // or null\n},\n\nitems: [],\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.<ul> <li>Set <code>width</code> to <code>undefined</code>, and <code>table.width</code> is not <code>undefined</code>, will count width via table + slider.</li> <li>Set <code>height</code> to <code>undefined</code>, and <code>table.height</code> is not <code>undefined</code>, will count height via table + slider.</li> </ul> </li> <li><code>scrollMode</code> : Scroll grid table vertically, or horizontally.<ul> <li><code>0</code>, <code>'vertical'</code>, or <code>'v'</code>, <code>'y'</code> : Scroll panel vertically. Default value.</li> <li><code>1</code>, <code>'horizontal'</code>, or <code>'h'</code>. <code>'x'</code> : Scroll panel horizontally.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>table</code> : Configuration of grid table core.<ul> <li><code>table.width</code> : Width of table, in pixels.<ul> <li>Set to <code>undefined</code> to expand table width to fit this grid table object.</li> </ul> </li> <li><code>table.height</code> : Height of table, in pixels.<ul> <li>Set to <code>undefined</code> to expand table height to fit this grid table object.</li> </ul> </li> <li><code>table.cellHeight</code> : Default height of each cell.<ul> <li>Necessary field in vertical scrollMode.</li> <li><code>undefined</code> :  Expand cell height to fit table height, in horizontal scrollMode.</li> </ul> </li> <li><code>table.cellWidth</code> : Width of each cell.<ul> <li>Necessary field in horizontal scrollMode.</li> <li><code>undefined</code> : Expand cell width to fit table width, in vertical scrollMode.</li> </ul> </li> <li><code>table.columns</code> : Columns count of each row. Can be used in vertical or horizontal scroll mode.</li> <li><code>table.rows</code> : Rows count of each column. Can be used in horizontal scroll mode.</li> <li><code>table.mask</code> : A rectangle mask of cells<ul> <li><code>table.mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>table.mask.updateMode</code> : When to update cells mask<ul> <li><code>0</code>, or <code>update</code> : Apply mask to cell container only when <code>table.updateTable()</code> is invoked. Default behavior.</li> <li><code>1</code>, or <code>everyTick</code> : Apply mask to cell container every tick. Use this mode if game objects of cell are moved after <code>table.updateTable()</code> and still been masked.       </li> </ul> </li> <li><code>false</code> : No mask.</li> </ul> </li> <li><code>table.enableLayer</code> : <ul> <li><code>false</code> : Add cell game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add cell game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>table.reuseCellContainer</code> : <ul> <li><code>true</code> : Reuse cell container when creating new cell container. </li> <li><code>false</code> : Destory cell container when cell is invisible, create new cell container when cell is visible. Default behavior.</li> </ul> </li> <li><code>table.interactive</code> : Set <code>true</code> to install touch events (tap/press/over/out/click). Default value is <code>true</code>.</li> <li><code>table.click</code> : Configuration of cell-click behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default click behavior.</li> </ul> </li> <li><code>table.tap</code> : Configuration of cell-tap behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default tap behavior.</li> </ul> </li> <li><code>table.press</code> : Configuration of cell-press behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default press behavior.</li> </ul> </li> <li><code>table.swipe</code> : Configuration of cell-swipe behavior, if <code>table.interactive</code> is <code>true</code>.<ul> <li><code>undefined</code> : Use default swipe behavior.</li> </ul> </li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : Game object of slider background, optional.</li> <li><code>slider.track</code> : Game object of track.</li> <li><code>slider.thumb</code> : Game object of thumb.</li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over table.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>createCellContainerCallback</code> : Callback to return a container object, or <code>null</code> of each visible cell.<ul> <li>Properties of <code>cell</code> parameter<ul> <li><code>cell.scene</code> : Scene of this grid table object.</li> <li><code>cell.width</code> : Width of this cell, in pixels.</li> <li><code>cell.height</code> : Height of this cell, in pixels.</li> <li><code>cell.item</code> : Item of this cell to display.</li> <li><code>cell.items</code> : Array of item data for each cell, equal to <code>items</code> parameter.</li> <li><code>cell.index</code> : Index of this cell.</li> </ul> </li> <li>Alignment of cellContainer :      <pre><code>cell.setCellContainerAlign(align);\n</code></pre><ul> <li><code>align</code> :<ul> <li><code>undefined</code> : Set position of cellContainer to left-top of cell space. Default behavior.</li> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center of cell space.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center of cell space.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center of cell space.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center of cell space.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center of cell space.         </li> </ul> </li> </ul> </li> <li>If <code>cell.align</code> is <code>undefined</code> (default value), Origin of returned cell container will be set to (0, 0)</li> <li><code>cellContainer</code> : Cell container picked from object pool for reusing. Set <code>reuseCellContainer</code> to <code>true</code> to enable this feature.<ul> <li><code>null</code> : No cell container available.</li> <li>Game object : Reusable cell container.</li> </ul> </li> </ul> </li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.table</code> :<ul> <li>A number: Space between table object and slider object.</li> <li>An object: Padding of table object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.table.top</code>, <code>space.table.bottom</code> : Top, bottom padding space of table object.</li> <li><code>space.table.right</code> : Space between table object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.table.left</code>, <code>space.table.right</code> : Left, right padding space of table object.</li> <li><code>space.table.bottom</code> : Space between table object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and table.</li> <li><code>space.footer</code> : Space between footer and table.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>items</code> : Array of item data for each cell.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-gridtable/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyGridTable extends RexPlugins.UI.GridTable {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var table = new MyGridTable(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>table.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-gridtable/#items","title":"Items","text":"<ul> <li>Set     <pre><code>table.setItems(items);\n</code></pre><ul> <li><code>items</code> : Array of item data for each cell.</li> <li>This method will update each visible cell of grid table.</li> </ul> </li> <li>Clear all items     <pre><code>table.setItems();\n</code></pre></li> <li>Get     <pre><code>var items = table.items;\n</code></pre></li> <li>Add item <pre><code>Phaser.Utils.Array.Add(table.items, item);\ntable.refresh();\n</code></pre></li> <li>Insert item <pre><code>Phaser.Utils.Array.AddAt(table.items, item, index);\ntable.refresh();\n</code></pre></li> <li>Remove item <pre><code>Phaser.Utils.Array.Remove(table.items, item);\ntable.refresh();\n</code></pre></li> <li>Remove item at index <pre><code>Phaser.Utils.Array.RemoveAt(table.items, index);\ntable.refresh();\n</code></pre></li> <li>Remove items between indexes <pre><code>Phaser.Utils.Array.RemoveBetween(table.items, startIndex, endIndex);\ntable.refresh();\n</code></pre></li> <li>Remove random item <pre><code>Phaser.Utils.Array.RemoveRandomElement(table.items);\ntable.refresh();\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#cell-container","title":"Cell container","text":"<ul> <li>Get     <pre><code>var container = table.getCellContainer(cellIndex);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-content","title":"Scroll content","text":"<ul> <li>Set     <pre><code>table.childOY = oy;\n// table.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>table.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>table.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>table.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = table.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = table.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = table.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = textArea.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>table.t = t;  // t: 0~1\n// table.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>table.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = table.t;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>table.scrollToTop();\n</code></pre><ul> <li>Equal to <code>table.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>table.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>table.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-gridtable/#scroll-to-row","title":"Scroll to row","text":"<ul> <li>Scroll to next row     <pre><code>table.scrollToNextRow();\n</code></pre></li> <li>Scroll to next n row     <pre><code>table.scrollToNextRow(n);\n</code></pre></li> <li>Scroll to row     <pre><code>table.scrollToRow(rowIndex);\n</code></pre></li> <li>Get current row index     <pre><code>var rowIndex = table.startRowIndex;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>table.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>table.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = table.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>table.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>table.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = table.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-gridtable/#refresh-table-cells","title":"Refresh table cells","text":"<ul> <li>Refresh all visible cells     <pre><code>table.refresh();\n</code></pre><ul> <li>Equal to <code>table.setItems(table.items)</code>.</li> </ul> </li> <li>Update a visible cell     <pre><code>table.updateVisibleCell(cellIndex);\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#table-size","title":"Table size","text":"<ul> <li>Table width     <pre><code>var tableWidth = table.getElement('table').tableWidth;\n</code></pre></li> <li>Table height     <pre><code>var tableHeight = table.getElement('table').tableHeight;\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-gridtable/#events","title":"Events","text":"<ul> <li>Pointer-down cell     <pre><code>table.on('cell.down', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-up cell     <pre><code>table.on('cell.up', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over cell     <pre><code>table.on('cell.over', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out cell     <pre><code>table.on('cell.out', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Click cell     <pre><code>table.on('cell.click', function(cellContainer, cellIndex, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Tap cell     <pre><code>table.on(tapEventName, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>tapEventName</code> : <code>'cell.1tap'</code>, <code>'cell.2tap'</code>, <code>'cell.3tap'</code>, etc ...</li> <li><code>cellContainer</code> : Container game object of triggered cell.</li> <li><code>cellIndex</code> : Index of triggered cell.</li> </ul> </li> <li>Press cell     <pre><code>table.on(`cell.pressstart`, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre> <pre><code>table.on(`cell.pressend`, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre></li> <li>Swipe cell     <pre><code>table.on(swipeEventName, function(cellContainer, cellIndex, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>swipeEventName</code> : <code>'cell.swipeleft'</code>, <code>'cell.swiperight'</code>, <code>'cell.swipeup'</code>, <code>'cell.swipedown'</code>.</li> </ul> </li> <li>Scroll table     <pre><code>table.on('scroll', function(table) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>table.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>table.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-gridtable/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = table.getElement('background');\n</code></pre></li> <li>Grid table <pre><code>var tableBody = table.getElement('table');\n</code></pre></li> <li>Layer of gridtable, assigned at config <code>table.mask.layer</code>.     <pre><code>var layer = table.getElement('tableLayer');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = table.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = table.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller <pre><code>var scroller = table.getElement('scroller');\n</code></pre></li> <li>Header game object     <pre><code>var tableBody = table.getElement('header');\n</code></pre></li> <li>Footer game object     <pre><code>var tableBody = table.getElement('footer');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = table.getElement('#' + name);\n// var gameObject = table.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = table.getByName(name);\n// var gameObject = table.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-holygrail/","title":"Holy grail","text":""},{"location":"ui-holygrail/#introduction","title":"Introduction","text":"<p>Layout elements in Holy grail style.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-holygrail/#live-demos","title":"Live demos","text":"<ul> <li>Simple</li> <li>Align</li> <li>Layout modes</li> </ul>"},{"location":"ui-holygrail/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-holygrail/#install-plugin","title":"Install plugin","text":""},{"location":"ui-holygrail/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = scene.rexUI.add.holyGrail(config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = scene.rexUI.add.holyGrail(config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { HolyGrail } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add holy-grail object     <pre><code>var holyGrail = new HolyGrail(scene, config);\nscene.add.existing(holyGrail);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#add-holygrail-object","title":"Add holyGrail object","text":"<pre><code>var holyGrail = scene.rexUI.add.holyGrail({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\nheader: headerGameObject,\n\nleftSide: leftSideGameObject,\n\ncontent: contentGameObject,\n\nrightSide: rightSideGameObject,\n\nfooter: footerGameObject,\n\n// Space\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nheader: 0,  // {left, right, top, bottom}\nfooter: 0,  // {left, right, top, bottom}\nleftSide: 0, // {left, right, top, bottom}\nrightSide: 0, // {left, right, top, bottom}\n},\n\n// proportion: {\n//     header: 0,\n//     footer: 0,\n//     leftSide: 0,\n//     rightSide: 0,\n//     content: 1,\n// },\n\n// expand: {\n//     header: true,\n//     footer: true,\n//     leftSide: true,\n//     rightSide: true,\n//     content: false,\n// },\n\n// align: {\n//     header: 'center',\n//     footer: 'center',\n//     leftSide: 'center',\n//     rightSide: 'center',\n//     content: 'center',\n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : Expand left side, right side to bottom row.<ul> <li><code>0</code>, or <code>'FFF'</code> : Bottom row is footer. Default behavior</li> <li><code>1</code>, or <code>'LFF'</code> : Left side will expand down to bottom row.</li> <li><code>2</code>, or <code>'FFR'</code> : Right side will expand down to bottom row.</li> <li><code>3</code>, or <code>'LFR'</code> : Left side and right side will expand down to bottom row.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of holyGrail.</li> <li><code>header</code> : Game object of header, optional.<ul> <li>Will fixed height (<code>proportion=0</code>) and expand width (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>leftSide</code> : Game object of leftSide, optional.<ul> <li>Will fixed width (<code>proportion=0</code>) and expand height (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>content</code> : Game object of content, optional.<ul> <li>Will expand width (<code>proportion=1</code>) and expand height (<code>expand=true</code>) width default setting. </li> </ul> </li> <li><code>rightSide</code> : Game object of rightSide, optional.<ul> <li>Will fixed width (<code>proportion=0</code>) and expand height (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>footer</code> : Game object of footer, optional.<ul> <li>Will fixed height (<code>proportion=0</code>) and expand width (<code>expand=true</code>) width default setting.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.header</code> : <ul> <li>A number : Space between header game object and below game object, equal to <code>{bottom}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of header game object.</li> </ul> </li> <li><code>space.footer</code> <ul> <li>A number : Space between footer game object and above game object, equal to <code>{top}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of footer game object.</li> </ul> </li> <li><code>space.leftSide</code> : <ul> <li>A number : Space between leftSide game object and content game object, equal to <code>{right}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of leftSide game object.</li> </ul> </li> <li><code>space.rightSide</code> : <ul> <li>A number : Space between rightSide game object and content game object, equal to <code>{left}</code></li> <li><code>{left, right, top, bottom}</code> : Padding values of rightSide game object.</li> </ul> </li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width of header game object. Default is <code>true</code>.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width of footer game object. Default is <code>true</code>.</li> <li><code>expand.leftSide</code> : Set <code>true</code> to expand height of leftSide game object. Default is <code>true</code>.</li> <li><code>expand.rightSide</code> : Set <code>true</code> to expand height of rightSide game object. Default is <code>true</code>.</li> <li><code>expand.content</code> : Set <code>true</code> to expand height of content game object. Default is <code>true</code>.</li> </ul> </li> <li><code>proportion</code> : Fixed width or height of element<ul> <li><code>proportion.header</code> : <ul> <li><code>0</code> : Fixed height. Default behavior.</li> <li><code>1</code>, or other numbers : Expand height.</li> </ul> </li> <li><code>proportion.footer</code> :<ul> <li><code>0</code> : Fixed height. Default behavior.</li> <li><code>1</code>, or other numbers : Expand height.</li> </ul> </li> <li><code>proportion.leftSide</code> :<ul> <li><code>0</code> : Fixed width. Default behavior.</li> <li><code>1</code>, or other numbers : Expand width.</li> </ul> </li> <li><code>proportion.rightSide</code> :<ul> <li><code>0</code> : Fixed width. Default behavior.</li> <li><code>1</code>, or other numbers : Expand width.</li> </ul> </li> <li><code>proportion.content</code> :<ul> <li><code>0</code> : Fixed width.</li> <li><code>1</code>, or other numbers : Expand width. Default value is <code>1</code>.</li> </ul> </li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code></li> <li><code>align.footer</code></li> <li><code>align.leftSide</code></li> <li><code>align.rightSide</code></li> <li><code>align.content</code></li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>..</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-holygrail/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyHolyGrail extends RexPlugins.UI.HolyGrail {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var holyGrail = new MyHolyGrail(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-holygrail/#layout-modes","title":"Layout modes","text":""},{"location":"ui-holygrail/#mode-0","title":"Mode 0","text":"<p>Bottom row is footer. Default behavior.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-1","title":"Mode 1","text":"<p>Left side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-2","title":"Mode 2","text":"<p>Right side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#mode-3","title":"Mode 3","text":"<p>Left side and right side will expand down to bottom row.</p> Header Left side Content Right side Footer"},{"location":"ui-holygrail/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>holyGrail.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-holygrail/#re-build","title":"Re-build","text":"<p>Destroy current elements then add elements with new config.</p> <pre><code>holyGrail.build({\n// Elements\nbackground: backgroundGameObject,\n\nheader: headerGameObject,\n\nleftSide: leftSideGameObject,\n\ncontent: contentGameObject,\n\nrightSide: rightSideGameObject,\n\nfooter: footerGameObject,\n\nlayoutMode: 0,\n\n// Space\nspace: {        header: 0,  // {left, right, top, bottom}\nfooter: 0,  // {left, right, top, bottom}\nleftSide: 0, // {left, right, top, bottom}\nrightSide: 0, // {left, right, top, bottom}\n},\n\n// proportion: {\n//     header: 0,\n//     footer: 0,\n//     leftSide: 0,\n//     rightSide: 0,\n//     content: 1,\n// },\n\n// expand: {\n//     header: true,\n//     footer: true,\n//     leftSide: true,\n//     rightSide: true,\n//     content: false,\n// },\n\n// align: {\n//     header: 'center',\n//     footer: 'center',\n//     leftSide: 'center',\n//     rightSide: 'center',\n//     content: 'center',\n// },\n})\n</code></pre>"},{"location":"ui-holygrail/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-holygrail/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = holyGrail.getElement('background');\n</code></pre></li> <li>Header game object     <pre><code>var header = holyGrail.getElement('header');\n</code></pre></li> <li>Left-side game object     <pre><code>var leftSide = holyGrail.getElement('leftSide');\n</code></pre></li> <li>Content game object     <pre><code>var content = holyGrail.getElement('content');\n</code></pre></li> <li>Right-side game object     <pre><code>var rightSide = holyGrail.getElement('rightSide');\n</code></pre></li> <li>Footer game object     <pre><code>var footer = holyGrail.getElement('footer');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = holyGrail.getElement('#' + name);\n// var gameObject = holyGrail.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = holyGrail.getByName(name);\n// var gameObject = holyGrail.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-knob/","title":"Knob","text":""},{"location":"ui-knob/#introduction","title":"Introduction","text":"<p>A knob button based on circular progress shape.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-knob/#live-demos","title":"Live demos","text":"<ul> <li>Knob</li> </ul>"},{"location":"ui-knob/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-knob/#install-plugin","title":"Install plugin","text":""},{"location":"ui-knob/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add knob object     <pre><code>var knob = scene.rexUI.add.knob(config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add knob object     <pre><code>var knob = scene.rexUI.add.knob(config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Knob } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add knob object     <pre><code>var knob = new Knob(scene, config);\nscene.add.existing(knob);\n</code></pre></li> </ul>"},{"location":"ui-knob/#add-knob-object","title":"Add knob object","text":"<pre><code>var knob = scene.rexUI.add.knob({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\n\nbarColor: undefined,\ntrackColor: undefined,\ncenterColor: undefined,\nthickness: 0.2,\nstartAngle: Phaser.Math.DegToRad(270),\nanticlockwise: false,\nknobDepth: 0,\n\ntext: undefined,\ntextFormatCallback: undefined,\ntextFormatCallbackScope: undefined,\n\ninput: 'pan',\n\nvalue: 0,\ngap: undefined,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},\nvaluechangeCallback: function(newValue, oldValue, knob) {\n},\nvaluechangeCallbackScope: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of knob.</li> <li><code>barColor</code> : Color of circular bar, in number or css string value.</li> <li><code>trackColor</code> : Color of circular track, in number or css string value.</li> <li><code>centerColor</code> : Color of center circle, in number or css string value.</li> <li><code>thickness</code> : <code>0</code> ~ <code>1</code>, thickness of circular bar. Default value is <code>0.2</code> (<code>0.2*radius</code>)</li> <li><code>startAngle</code> : Start angle of circular bar, in radians. Default value is 270 degrees.</li> <li><code>anticlockwise</code> : Set <code>true</code> to put anticlockwise circular bar. Default value is <code>false</code>.</li> <li><code>knobDepth</code> : Depth of knob (circular progress). Default value is <code>0</code>.</li> <li><code>text</code> : Label, Text, BBCodeText, or TagText, which has <code>setText(text)</code> method, optional.<ul> <li>Don't set <code>textColor</code>, <code>textStrokeColor</code> if <code>text</code> parameter is provided.</li> <li>Depth of text object ought to larger than knob (circular progress), to put text object in front of knob.</li> </ul> </li> <li>Display text : <ul> <li><code>textColor</code> : Color of display text. Default is <code>undefined</code>.</li> <li><code>textStrokeColor</code>, <code>textStrokeThickness</code> : Stroke color, stroke line width of display text. Default is <code>undefined</code>.</li> <li><code>textSize</code>, <code>textFamily</code>, <code>textStyle</code> : Size, family, style of display text.</li> </ul> </li> <li><code>textFormatCallback</code>, <code>textFormatCallbackScope</code> : Formating callback of display text. ex:     <pre><code>function(value) {\nreturn Math.floor(value * 100).toString();\n}\n</code></pre>     Default value is <code>undefined</code>.</li> <li><code>input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning circular progress. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control knob by touching circular progress.</li> <li><code>'none'</code>, or <code>-1</code> : Disable knob controlling.</li> </ul> </li> <li><code>value</code> : Initial value (0 ~ 1).</li> <li><code>gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disalbe this feature.</li> </ul> </li> <li><code>easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-knob/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyKnob extends RexPlugins.UI.Knob {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var knob = new MyKnob(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-knob/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>knob.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-knob/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = knob.getElement('background');\n</code></pre></li> <li>Circular progress game object     <pre><code>var circularProgress = knob.getElement('knob');\n</code></pre></li> <li>Text game object     <pre><code>var text = knob.getElement('text');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = knob.getElement('#' + name);\n// var gameObject = knob.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = knob.getByName(name);\n// var gameObject = knob.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-knob/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = knob.enable;\n</code></pre></li> <li>Set     <pre><code>knob.setEanble(enable);\n</code></pre>     or     <pre><code>knob.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-knob/#value","title":"Value","text":"<p>Change value will also change the position of knob thumb and width of knob indicator.</p> <ul> <li>Get value     <pre><code>var value = knob.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = knob.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = knob.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>knob.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>knob.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>knob.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>knob.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>knob.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>knob.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-knob/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>knob.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>knob.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>knob.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>knob.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>knob.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-knob/#other-properties","title":"Other properties","text":"<p>See overlap sizer object, base sizer object, container-lite.</p>"},{"location":"ui-knob/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>knob.on('valuechange', function(newValue, oldValue, knob){\n//\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-label/","title":"Label","text":""},{"location":"ui-label/#introduction","title":"Introduction","text":"<p>A container with an icon, text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-label/#live-demos","title":"Live demos","text":"<ul> <li>Align</li> <li>Add to layer</li> <li>Text wrap in horizontal label</li> <li>Text wrap in vertical label</li> <li>Square fit icon</li> <li>Icon size</li> </ul>"},{"location":"ui-label/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-label/#install-plugin","title":"Install plugin","text":""},{"location":"ui-label/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.label(config);\n</code></pre></li> </ul>"},{"location":"ui-label/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.label(config);\n</code></pre></li> </ul>"},{"location":"ui-label/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Label } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new Label(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-label/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.label({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\n\nicon: iconGameObject,\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\ntext: textGameObject,\nexpandTextWidth: false,\nexpandTextHeight: false,\n\naction: actionGameObject,\n// actionMask: false,\n// squareFitAction: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nalign: undefined,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0, iconTop: 0, iconBottom: 0, iconLeft: 0, iconRight: 0,\n\ntext: 0,\nactionTop: 0, actionBottom: 0, actionLeft: 0, actionRight: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitIcon</code> : <ul> <li><code>true</code> : Resize icon size to square to fit label height/width.<ul> <li>Can't work wit <code>expandTextWidth: true</code></li> </ul> </li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object to <code>iconSize</code>x<code>iconSize</code></li> <li><code>iconWidth</code> : Set display width of icon game object to <code>iconWidth</code>. <ul> <li>If <code>iconHeight</code> is <code>undefined</code>, set <code>scaleY</code> of icon game object to <code>scaleX</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>iconHeight</code> : Set display height of icon game object to <code>iconHeight</code>. <ul> <li>If <code>iconWidth</code> is <code>undefined</code>, set <code>scaleX</code> of icon game object to <code>scaleY</code> of icon game object, to keep size ratio.</li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>expandTextWidth</code> : <ul> <li><code>false</code> : Keep width of text to original size. Default behavior.</li> <li><code>true</code> : Expand width of text object. Will set display width by default.<ul> <li>Must set to <code>true</code> if using <code>scene.rexUI.wrapExpandText</code> method with any text game object.</li> <li>Can't work with <code>squareFitIcon: true</code>.</li> </ul> </li> </ul> </li> <li><code>expandTextHeight</code> : Set <code>true</code> to expand height of text object.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>squareFitAction</code> : <ul> <li><code>true</code> : Resize action icon size to square to fit label height/width.</li> <li><code>false</code> : Ignore this feature. Default behavior.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object to <code>actionSize</code>x<code>actionSize</code></li> <li><code>actionWidth</code> : Set display width of action game object to <code>actionWidth</code>. <ul> <li>If <code>actionHeight</code> is <code>undefined</code>, set <code>scaleY</code> of action game object to <code>scaleX</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>actionHeight</code> : Set display height of action game object to <code>actionHeight</code>. <ul> <li>If <code>actionWidth</code> is <code>undefined</code>, set <code>scaleX</code> of action game object to <code>scaleY</code> of action game object, to keep size ratio.</li> </ul> </li> <li><code>align</code> : Alignment of icon, text, action game objects.<ul> <li><code>undefined</code>, or <code>'left'</code>, or <code>'top'</code> : Align game objects at left, or top.</li> <li><code>'center'</code> : Align game objects at center.</li> <li><code>'right'</code>, or <code>'bottom'</code> : Align game objects at right, or bottom.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code>, <code>space.iconLeft</code>, <code>space.iconRight</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code>, <code>space.actionLeft</code>, <code>space.actionRight</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-label/#expand-size-of-text","title":"Expand size of text","text":"<p>Expand width/height of text when <code>expandTextWidth</code>/<code>expandTextHeight</code> is <code>true</code></p> <p>To resize text object, text object should have <code>resize</code> method. For example</p> <pre><code>class MyText extends Phaser.GameObjects.Text {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\nscene.add.existing(this);\n}\nresize(width, height) {\nthis.setFixedSize(width, height);\nreturn this;\n}\n}\n</code></pre> <p>Or uses bbcode text object, or tag text object</p>"},{"location":"ui-label/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLabel extends RexPlugins.UI.Label {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-label/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-label/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-label/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = label.text;\n</code></pre></li> <li>Set text string     <pre><code>label.setText(s);\n</code></pre>     or     <pre><code>label.text = s;\n</code></pre></li> <li>Append text string     <pre><code>label.appendText(text);\n// label.text += '\\n' + text;\n</code></pre>     or     <pre><code>label.appendText(text, false);\n// label.text += text;\n</code></pre></li> </ul>"},{"location":"ui-label/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-label/#reset-display-content","title":"Reset display content","text":"<pre><code>label.resetDisplayContent({\ntext: '',\n\nicon: undefined, iconFrame: undefined,\niconSize: undefined,\n\naction: undefined, actionFrame: undefined,\nactionSize: undefined,\n\n})\n</code></pre> <ul> <li><code>text</code> : Set text string.</li> <li><code>icon</code>, <code>iconFrame</code><ul> <li>A string : Set texture of icon game object.</li> <li><code>undefined</code>, or <code>null</code> : Hide icon game object.</li> <li><code>true</code> : Show icon game object without change its texture.</li> </ul> </li> <li><code>iconSize</code> : Set display size of icon game object.</li> <li><code>action</code>, <code>actionFrame</code><ul> <li>A string : Set texture of icon game object.</li> <li><code>undefined</code>, or <code>null</code> : Hide action game object.</li> <li><code>true</code> : Show action game object without change its texture.</li> </ul> </li> <li><code>actionSize</code> : Set display size of action game object.</li> </ul> <p>Run <code>label.layout()</code> after this method, to layout children again.</p>"},{"location":"ui-label/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-menu/","title":"Menu","text":""},{"location":"ui-menu/#introduction","title":"Introduction","text":"<p>A container with buttons and sub-menu.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-menu/#live-demos","title":"Live demos","text":"<ul> <li>Pop-up menu</li> <li>Static menu</li> <li>Drop-down list</li> <li>Expand, collapse</li> <li>Custom transit</li> </ul>"},{"location":"ui-menu/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-menu/#install-plugin","title":"Install plugin","text":""},{"location":"ui-menu/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add menu object     <pre><code>var menu = scene.rexUI.add.menu(config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add menu object     <pre><code>var menu = scene.rexUI.add.menu(config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Menu } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add menu object     <pre><code>var menu = new Menu(scene, config);\nscene.add.existing(menu);\n</code></pre></li> </ul>"},{"location":"ui-menu/#add-menu-object","title":"Add menu object","text":"<pre><code>var menu = scene.rexUI.add.menu({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n\n// popup: true,\n// orientation: 1,\n// subMenuSide: undefined,\nitems: [],\n\ncreateBackgroundCallback: function(items) {\nvar scene = items.scene;\n// background = ...\nreturn background;\n},\ncreateBackgroundCallbackScope: undefined,\n\ncreateButtonCallback: function(item, index, items) {\nvar scene = item.scene;\n// var isFirstButton = (index === 0);\n// var isLastButton = (index === (items.length - 1));\n// container = ...\nreturn container;\n},\ncreateButtonCallbackScope: undefined,\n\neaseIn: 0,\n// easeIn: {\n//     duration: 500,\n//     orientation: undefined,\n//     ease: 'Cubic'\n// },\ntransitIn: undefined,\n// transitIn: function(menu, duration) {  },\n\neaseOut: 0,\n// easeOut: {\n//     duration: 100,\n//     orientation: undefined,\n//     ease: 'Linear'\n// },\ntransitOut: undefined,\n// transitOut: function(menu, duration) {  },\n\n// expandEvent: 'button.click',\n\n// pointerDownOutsideCollapsing: true,\n\n// childrenKey: 'children',\n\nname: '',\n// draggable: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>popup</code> : <ul> <li><code>true</code> : Pop-up menu, will layout automatically, push inside viewport. Default behavior.</li> <li><code>false</code> : Static menu, can put into another sizer, won't layout automatically.</li> </ul> </li> <li><code>orientation</code> : Main orientation of the menu, default is <code>1</code> (top to bottom)<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange buttons from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange buttons from top to bottom.</li> </ul> </li> <li><code>items</code> : Array of item data for each button. Each item has<ul> <li><code>children</code> : An array of items for sub-menu, optional. Can change by <code>childrenKey</code> parameter.</li> <li>Other custom properties</li> </ul> </li> <li><code>createBackgroundCallback</code> : Callback to return container object of menu's bckground.<ul> <li>Properties of <code>items</code> parameter<ul> <li><code>items.scene</code> : Scene of this menu object.</li> </ul> </li> </ul> </li> <li><code>createButtonCallback</code> : Callback to return container object of each item.<ul> <li>Properties of <code>item</code> parameter<ul> <li><code>item.scene</code> : Scene of this menu object.</li> <li>Other custom properties</li> </ul> </li> </ul> </li> <li><code>easeIn</code> : Duration of expanding menu.<ul> <li>A number : Duration of ease, in milliseconds.</li> <li>An object :<ul> <li><code>easeIn.duration</code> : Duration of ease, in milliseconds.</li> <li><code>easeIn.ease</code> : Ease function, default is <code>'Cubic'</code></li> <li><code>easeIn.orientation</code> : Orientation of ease.<ul> <li><code>undefined</code> : The same orientation with menu's orientation.</li> <li><code>'h'</code>, <code>'x'</code>, or <code>0</code> : Pop-up menu horizontally.</li> <li><code>'v'</code>, <code>'y'</code>, or <code>1</code> : Pop-up menu vertically.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>transitIn</code> : Tween behavior of expanding menu.<ul> <li><code>undefined</code> : Expand menu by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(menu, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>easeOut</code> : Duration of collapsing menu<ul> <li>A number : Duration of ease, in milliseconds.</li> <li>An object :<ul> <li><code>easeOut.duration</code> : Duration of ease, in milliseconds.</li> <li><code>easeOut.ease</code> : Ease function, default is <code>'Linear'</code></li> <li><code>easeOut.orientation</code> : Orientation of ease.<ul> <li><code>undefined</code> : The same orientation with menu's orientation.</li> <li><code>'h'</code>, <code>'x'</code>, or <code>0</code> : Scale-down menu horizontally.</li> <li><code>'v'</code>, <code>'y'</code>, or <code>1</code> : Scale-down menu vertically.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>transitOut</code> : Tween behavior of collapsing menu.<ul> <li><code>undefined</code> : Collapse menu by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(menu, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>expandEvent</code> : Event name of expanding sub-menu.<ul> <li><code>'button.click'</code> : Default value</li> <li><code>'button.over'</code></li> </ul> </li> <li><code>pointerDownOutsideCollapsing</code> :<ul> <li><code>true</code> : Collapse all menus (<code>popup:true</code>), or sub-menus (<code>popup:false</code>) when pointer-down outside of all menus. Default behavior.</li> <li><code>false</code> : Ignore pointer-down outside detection.</li> </ul> </li> <li><code>childrenKey</code> : Key of sub-menu in element of <code>items</code>.<ul> <li><code>children</code> : Default value.</li> </ul> </li> <li><code>subMenuSide</code> : Side of sub-menu<ul> <li><code>undefined</code> : Determine side of sub-menu automatically.</li> <li><code>'right'</code>, or <code>0</code> : Put sub-menu at right side. Used with <code>orientation</code> is set to <code>y</code>.</li> <li><code>'left'</code>, or <code>2</code> : Put sub-menu at left side. Used with <code>orientation</code> is set to <code>y</code>.</li> <li><code>'up'</code>, or <code>3</code> : Put sub-menu at up side. Used with <code>orientation</code> is set to <code>x</code>.</li> <li><code>'down'</code>, or <code>1</code> : Put sub-menu at down side. Used with <code>orientation</code> is set to <code>x</code>.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-menu/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyMenu extends RexPlugins.UI.Menu {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var menu = new MyMenu(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-menu/#collapse","title":"Collapse","text":"<ul> <li>Collapse menu     <pre><code>menu.collapse();\n</code></pre></li> <li>Collapse sub-menu     <pre><code>menu.collapseSubMenu();\n</code></pre></li> </ul>"},{"location":"ui-menu/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-menu/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>menu.on('button.click', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-over button     <pre><code>menu.on('button.over', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Pointer-out button     <pre><code>menu.on('button.out', function(button, index, pointer, event) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Game object of triggered button.</li> <li><code>index</code> : Index of triggered button.</li> <li><code>pointer</code> : Pointer object.</li> <li>Cancel remaining touched events : <code>event.stopPropagation()</code></li> </ul> </li> <li>Expand(Pop-up start) sub-menu     <pre><code>menu.on('expand', function(subMenu, parentButton) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>subMenu</code> : Sub-menu.</li> <li><code>parentButton</code> : Game object of triggered button.</li> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> <li>Pop-up root-menu, or sub-menu completely     <pre><code>menu.on('popup.complete', function(menu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>menu</code> : Root-menu, or sub-menu</li> </ul> </li> <li>Collapse(Scale-down starting) root-menu, or sub-menu     <pre><code>menu.on('collapse', function(subMenu, parentButton, rootMenu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>subMenu</code> : Sub-menu.</li> <li><code>parentButton</code> : Game object of triggered button.</li> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> <li>Scale-down root-menu completely     <pre><code>menu.on('scaledown.complete', function(rootMenu) {\n// ....\n}, scope)\n</code></pre><ul> <li><code>rootMenu</code> : Root-menu</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/","title":"Name value label","text":""},{"location":"ui-namevaluelabel/#introduction","title":"Introduction","text":"<p>A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-namevaluelabel/#live-demos","title":"Live demos","text":"<ul> <li>Name-value label</li> </ul>"},{"location":"ui-namevaluelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-namevaluelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-namevaluelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.nameValueLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.nameValueLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { NameValueLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new NameValueLabel(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.nameValueLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\n\nnameText: nameTextGameObject,\nvalueText: valueTextGameObject,\n// valueTextFormatCallback: function(value, min, max) {\n//     return `${value}/${max}`;\n// },\nbar: {\ntrackColor: undefined,\ntrackThickness: 2,\ntrackStrokeColor: undefined,\nbarColor: undefined,\nbarColor2: undefined,\n\nskewX: 0,\n\nrtl: false,\n\neaseValue: {\nduration: 0,\nease: 'linear'\n},\n}, // bar: undefined,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {        text: 'bottom',  // 'top', 'center', 'bottom'\n},\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0, iconTop: 0, iconBottom: 0,\nname: 0, value: 0,\nbar:0, barBottom: 0, barLeft: 0, barRight: 0,\ntext: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>true</code> : Layout children from right to left.</li> <li><code>false</code> : Layout children from left to right. Default behavior.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.   </li> </ul> </li> <li><code>nameText</code> : Game object of nameText. <ul> <li>OriginX of nameText will be set to <code>0</code>.</li> <li>Empty text will be set to a space character <code>' '</code>. To preserve height of this text game object.</li> </ul> </li> <li><code>valueText</code> : Game object of valueText.<ul> <li>OriginX of nameText will be set to <code>1</code>.</li> <li>Empty text will be set to a space character <code>' '</code>. To preserve height of this text game object.</li> </ul> </li> <li><code>valueTextFormatCallback</code> : An optional callback to return a string set to <code>valueText</code> game object when invokeing <code>label.setValue(value, min, max)</code> method.     <pre><code>function(value, min, max) {\nreturn `${value}/${max}`;\n}\n</code></pre></li> <li><code>bar</code> : Game object of bar, or config of horizontal line progress bar, or <code>undefined</code>.<ul> <li><code>undefined</code> : No bar game object.</li> <li><code>bar.trackColor</code> : Fill color of bar's track, in number or css string value.</li> <li><code>bar.trackStrokeColor</code> : Stroke color of bar's track, in number or css string value.</li> <li><code>bar.trackThickness</code> : Stroke line width of bar's track.</li> <li><code>bar.barColor</code>, <code>bar.barColor2</code> : Fill color of bar, in number or css string value. Assign gradient start color by <code>barColor2</code>.</li> <li><code>bar.skewX</code> : Horizontal skew of track and bar.</li> <li><code>bar.rtl</code> :<ul> <li><code>false</code> : Bar starts from left side. Default behavior.</li> <li><code>true</code> : Bar starts from right side.</li> </ul> </li> <li><code>bar.easeValue</code> : Parameters of easing value.<ul> <li><code>bar.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>bar.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.    </li> </ul> </li> </ul> </li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : <ul> <li><code>align.text</code> : Alignment of nameText, valueText game objects.<ul> <li><code>'top'</code>, <code>'center'</code>, or <code>'bottom'</code>. Default value is <code>'bottom'</code>.</li> </ul> </li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.name</code> : Left space of nameText game object.</li> <li><code>space.value</code> : Right space of valueText game object.</li> <li><code>space.bar</code>, <code>space.barLeft</code>, <code>space.barRight</code>, <code>space.barBottom</code> : Space around bar game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyNameValueLabel extends RexPlugins.UI.NameValueLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyNameValueLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-namevaluelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>NameText game object     <pre><code>var nameTextObject = label.getElement('name');\n</code></pre></li> <li>ValueText game object     <pre><code>var valueTextObject = label.getElement('value');\n</code></pre></li> <li>Bar game object     <pre><code>var textObject = label.getElement('bar');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-namevaluelabel/#name-text","title":"Name text","text":"<ul> <li>Get nameText string     <pre><code>var s = label.nameText;\n</code></pre></li> <li>Set nameText string     <pre><code>label.setNameText(s);\n</code></pre>     or     <pre><code>label.nameText = s;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#value-text","title":"Value text","text":"<ul> <li>Get valueText string     <pre><code>var s = label.valueText;\n</code></pre></li> <li>Set valueText string     <pre><code>label.setValueText(s);\n</code></pre>     or     <pre><code>label.valueText = s;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#bar","title":"Bar","text":"<ul> <li>Get bar value     <pre><code>var s = label.barValue;\n</code></pre></li> <li>Set bar value     <pre><code>label.setBarValue(value);  // 0~1\n</code></pre>     or     <pre><code>label.setBarValue(value, min, max);  // min~max\n</code></pre>     or     <pre><code>label.barValue = t;  // 0~1\n</code></pre></li> <li>Ease bar value     <pre><code>label.easeBarValueTo(value);  // 0~1\n</code></pre>     or     <pre><code>label.easeBarValueTo(value, min, max);    // min~max\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame.     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-namevaluelabel/#set-value","title":"Set value","text":"<p>Set valueText game object and bar game object.</p> <pre><code>label.setValue(value, min, max);\n</code></pre> <p>Will invoke <code>valueTextFormatCallback</code> callback.</p>"},{"location":"ui-namevaluelabel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-numberbar/","title":"Number bar","text":""},{"location":"ui-numberbar/#introduction","title":"Introduction","text":"<p>A container with an icon, slider, text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-numberbar/#live-demos","title":"Live demos","text":"<ul> <li>Number bar</li> <li>Color picker</li> <li>Video player</li> </ul>"},{"location":"ui-numberbar/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-numberbar/#install-plugin","title":"Install plugin","text":""},{"location":"ui-numberbar/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexuiplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js\",\n\"rexUI\",\n\"rexUI\"\n);\n</code></pre></li> <li>Add number bar object   <pre><code>var numberBar = scene.rexUI.add.numberBar(config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from \"phaser3-rex-plugins/templates/ui/ui-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexUI\",\nplugin: UIPlugin,\nmapping: \"rexUI\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add number bar object   <pre><code>var numberBar = scene.rexUI.add.numberBar(config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { NumberBar } from \"phaser3-rex-plugins/templates/ui/ui-components.js\";\n</code></pre></li> <li>Add number bar object   <pre><code>var sizer = new NumberBar(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#add-number-bar-object","title":"Add number bar object","text":"<pre><code>var numberBar = scene.rexUI.add.numberBar({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\nslider: {\nbackground: backgroundGameObject,\n/* \n        background: { \n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */    indicator: indicatorGameObject,\n/* \n        indicator: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ninput: 'drag',\ngap: undefined,        easeValue: {\nduration: 0,\nease: 'Linear'\n},\n}\ntext: textGameObject,\n\nvaluechangeCallback: function(newValue, oldValue, numberBar) {\n// numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\nslider: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of numberBar.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>slider</code> : Slider game object which composed of<ul> <li><code>slider.width</code> : Fixed width of slider, optional. Width of slider will be extended if this value is not set.</li> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disable this feature.</li> </ul> </li> <li><code>slider.easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>slider.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>slider.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>text</code> : Game object of text, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.slider</code> : Space between slider game object and text game object.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-numberbar/#custom-class","title":"Custom class","text":"<ul> <li>Define class   <pre><code>class MyNumberBar extends RexPlugins.UI.NumberBar {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance   <pre><code>var numberBar = new MyNumberBar(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>numberBar.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-numberbar/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>Background game object     <pre><code>var background = numberBar.getElement(\"background\");\n</code></pre></li> <li>Icon game object     <pre><code>var icon = numberBar.getElement(\"icon\");\n</code></pre></li> <li>Slider game object<ul> <li>Slider background   <pre><code>var sliderBackground = numberBar.getElement(\"slider.background\");\n</code></pre></li> <li>Slider track   <pre><code>var sliderTrack = numberBar.getElement(\"slider.track\");\n</code></pre></li> <li>Slider indicator   <pre><code>var sliderIndicator = numberBar.getElement(\"slider.indicator\");\n</code></pre></li> <li>Slider thumb   <pre><code>var sliderThumb = numberBar.getElement(\"slider.thumb\");\n</code></pre></li> </ul> </li> <li>Text game object     <pre><code>var textObject = numberBar.getElement(\"text\");\n</code></pre></li> <li>Get by name   <pre><code>var gameObject = numberBar.getElement(\"#\" + name);\n// var gameObject = numberBar.getElement('#' + name, recursive);\n</code></pre>   or   <pre><code>var gameObject = numberBar.getByName(\"#\" + name);\n// var gameObject = numberBar.getByName(name, recursive);\n</code></pre></li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul>"},{"location":"ui-numberbar/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = numberBar.enable;\n</code></pre></li> <li>Set     <pre><code>numberBar.setEanble(enable);\n</code></pre>     or     <pre><code>numberBar.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value   <pre><code>var value = numberBar.getValue(min, max); // value : min ~ max\n</code></pre>   or   <pre><code>var value = numberBar.getValue(); // value: 0 ~ 1\n</code></pre>   or   <pre><code>var value = numberBar.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value   <pre><code>numberBar.setValue(value, min, max); // value: min ~ max\n</code></pre>   or   <pre><code>numberBar.setValue(value); // value: 0 ~ 1\n</code></pre>   or   <pre><code>numberBar.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value   <pre><code>numberBar.addValue(inc, min, max); // inc: min ~ max\n</code></pre>   or   <pre><code>numberBar.addValue(inc); // inc: 0 ~ 1\n</code></pre>   or   <pre><code>numberBar.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>numberBar.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>numberBar.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>numberBar.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>numberBar.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>numberBar.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-numberbar/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = numberBar.text;\n</code></pre></li> <li>Set text string     <pre><code>numberBar.setText(s);\n</code></pre>     or     <pre><code>numberBar.text = s;\n</code></pre></li> </ul>"},{"location":"ui-numberbar/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-numberbar/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>numberBar.on('valuechange', function (newValue, oldValue, numberBar) {\n// numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}, scope);\n</code></pre></li> <li>On input start     <pre><code>numberBar.on('inputstart', function(pointer) {\n\n}, scope);\n</code></pre></li> <li>On input end     <pre><code>numberBar.on('inputend', function(pointer) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/","title":"Overlap sizer","text":""},{"location":"ui-overlapsizer/#introduction","title":"Introduction","text":"<p>Layout children game objects overlapped.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-overlapsizer/#live-demos","title":"Live demos","text":"<ul> <li>Overlap</li> <li>Fit viewport</li> </ul>"},{"location":"ui-overlapsizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-overlapsizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-overlapsizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.overlapSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.overlapSizer(config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { OverlapSizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new OverlapSizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.overlapSizer({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.overlapSizer(x, y, {\n// width: undefined,\n// height: undefined,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.overlapSizer(x, y, width, height, {\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.OverlapSizer {\nconstructor(scene, x, y, minWidth, minHeight, config) {\nsuper(scene, x, y, minWidth, minHeight, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, config);\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> <li><code>items</code> is a reserved key, which is used to store all children.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\nkey: undefined,\nalign: 'center',\noffsetX: 0,\noffsetY: 0,\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: true,        minWidth: undefined,\nminHeight: undefined\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, key, align, padding, expand, minWidth, minHeight, offsetX, offsetY);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Use current timestamp as key.</li> <li><code>items</code> is a reserved key, which is used to store all children.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> <li><code>'left-top'</code> , or <code>Phaser.Display.Align.TOP_LEFT</code> : Align game object at left-top.</li> <li><code>'left-center'</code> , or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'left-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_LEFT</code> : Align game object at left-bottom.</li> <li><code>'center-top'</code> , or <code>Phaser.Display.Align.TOP_CENTER</code> : Align game object at center-top.</li> <li><code>'center-center'</code> , or <code>Phaser.Display.Align.CENTER</code> : Align game object at center-center.</li> <li><code>'center-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at center-bottom.</li> <li><code>'right-top'</code> , or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align game object at right-top.</li> <li><code>'right-center'</code> , or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'right-bottom'</code> , or <code>Phaser.Display.Align.BOTTOM_RIGHT</code> : Align game object at right-bottom.</li> </ul> </li> <li><code>offsetX</code>, <code>offsetY</code> : Apply offset to x, y coordinate after alignment.</li> <li><code>padding</code> : Extra padded space. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> :<ul> <li>Boolean value<ul> <li><code>true</code> : Expand width and height of child. Default value.</li> <li><code>false</code> : Don't expand width or height of child.</li> </ul> </li> <li>A plain object<ul> <li><code>{width: true}</code> : Only expand width of child.</li> <li><code>{height: true}</code> : only expand height of child.</li> <li><code>{width: true, height: true}</code> : Expand width and height of child.</li> </ul> </li> </ul> </li> <li><code>minWidth</code> : Minimum width of normal (non-sizer) game object, used when expand width mode. Default value is current display width.</li> <li><code>minHeight</code> : Minimum height of normal (non-sizer) game object, used when expand height mode. Default value is current display height.</li> </ul>"},{"location":"ui-overlapsizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-overlapsizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre>     or     <pre><code>sizer.remove(key);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre>     or     <pre><code>sizer.remove(key, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-overlapsizer/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>A child         <pre><code>var item = sizer.getElement(key);\n</code></pre>         or         <pre><code>var item = sizer.getElement('items[' + key + ']');\n</code></pre><ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-overlapsizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-overview/","title":"Overview","text":""},{"location":"ui-overview/#install-ui-plugins","title":"Install ui plugins","text":""},{"location":"ui-overview/#install-from-minify-file","title":"Install from minify file","text":"<ol> <li>Download minify file (link).</li> <li>Install ui plugin in preload stage     <pre><code>scene.load.scenePlugin({\nkey: 'rexuiplugin',\nurl: filePath,\nsceneKey: 'rexUI'\n});\n</code></pre><ul> <li><code>key</code> : Must be <code>'rexuiplugin'</code></li> </ul> </li> </ol>"},{"location":"ui-overview/#install-from-npm-package","title":"Install from npm package","text":"<ol> <li>Install rex plugins     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install ui plugin in configuration of game <pre><code>import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\n\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: RexUIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#using-typescript-declaration-file","title":"Using typescript declaration file","text":"<pre><code>import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\n\nclass Game extends Phaser.Scene {\nrexUI: RexUIPlugin;  // Declare scene property 'rexUI' as RexUIPlugin type\n\ncreate() {\nvar sizer = this.rexUI.add.sizer({\n// ...\n})\n}\n}\n\nvar game = new Phaser.Game({\nscene: Game,\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: RexUIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n});\n</code></pre> <ul> <li><code>'phaser3-rex-plugins/templates/ui/ui-plugin'</code> : Factories of rexUI components.</li> <li><code>'phaser3-rex-plugins/templates/ui/ui-components'</code> : Class of rexUI components.     <pre><code>import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components';\n</code></pre></li> </ul> <p>See this example</p>"},{"location":"ui-overview/#list-of-ui-plugins","title":"List of ui plugins","text":""},{"location":"ui-overview/#ui-components","title":"UI components","text":"<ol> <li>Badge label: A container with badges above a main item.</li> <li>Buttons: A container with a group of buttons.</li> <li>Color componets: Edit color value by RGB, or HSV input fields.</li> <li>Color input: Color number or color string input field.</li> <li>Color picker: Pick color value from H and SV palettes.</li> <li>Confirm dialog: Using json style to create confirm dialog.</li> <li>Dialog: A container with a title, content, buttons and background.</li> <li>Drop down list: A label can open a drop-down list panel.</li> <li>File selector button: A transparent file chooser button above a Label.</li> <li>Fix-width-buttons: A container with a group of fix-width buttons.</li> <li>Fix-width-sizer: Layout children game objects into lines.</li> <li>Folder: A container with a title, foldable child, and background.</li> <li>Grid-buttons: A container with a group of buttons in grids.</li> <li>Grid-sizer: Layout children game objects in grids.</li> <li>Grid-table: A container with a grid table, slider, and scroller.</li> <li>Holy grail: Layout elements in Holy grail style.</li> <li>Knob: A knob button based on circular progress.</li> <li>Label: A container with an icon, text, and background.</li> <li>Menu: A container with buttons and sub-menu.</li> <li>Name-value label: A container with name text, value text in a row, with a horizontal line progress bar, and an icon, background.</li> <li>Number-bar: A container with an icon, slider, text, and background.</li> <li>Overlap sizer: Layout children game objects overlapped.</li> <li>Pages: A container with pages, only current page is visible.</li> <li>Perspective card: A container with front and back faces.</li> <li>Scroll-able panel: A container with a panel, slider, and scroller.</li> <li>Simple drop down list: Using plain object to create drop down list.</li> <li>Simple label: Using json style to create label.</li> <li>Sizer: Layout children game objects.</li> <li>Slider: A container with a track, indicator, thumb and background.</li> <li>Tab-pages: A container with tabs and pages, only current page is visible.</li> <li>Tabs: A container with 4 groups of buttons around a center panel.</li> <li>TextArea: A container with a text, slider, and scroller.</li> <li>Textbox: A container with an icon, (typing and paging) text, and background.</li> <li>Title label: A container with title, text in two rows, and an icon, background.</li> <li>Toast: Show text message for a short while.</li> <li>Tweaker: Fine-tuning properties of target object.</li> </ol> <p>Scroll-able table</p> <p>There are 3 kinds of scroll-able tables :</p> <ul> <li>Grid-table only creates visible objects. It is suitable for large table.</li> <li>Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table.</li> <li>Fixwidth-sizer adds all objects. Put this fixwidth-sizer into scroll-able panel to have a scroll-able table.</li> </ul>"},{"location":"ui-overview/#basic-container","title":"Basic container","text":"<ol> <li>ContainerLite: Control the position and angle of children game objects.     <pre><code>var container = scene.rexUI.add.container(x, y);\n</code></pre>     or     <pre><code>class MyContainer extends RexPlugins.UI.Container {\nconstructor(scene, x, y, width, height, children) {\nsuper(scene, x, y, width, height, children);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#background-objects","title":"Background objects","text":"<ol> <li>Round-rectangle: Round rectangle shape.     <pre><code>var shape = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);\n</code></pre>     or     <pre><code>class MyRoundRectangle extends RexPlugins.UI.RoundRectangle {\nconstructor(scene, x, y, width, height, radius, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, radius, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Nine-patch: Stretchable imaage.     <pre><code>var ninePatch = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);\n</code></pre> <pre><code>var ninePatch = scene.rexUI.add.ninePatch2(x, y, width, height, key, columns, rows, config);\n</code></pre>     or     <pre><code>class MyNinePatch extends RexPlugins.UI.NinePatch {\nconstructor(scene, x, y, width, height, key, columns, rows, config) {\nsuper(scene, x, y, width, height, key, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre> <pre><code>class MyNinePatch extends RexPlugins.UI.NinePatch2 {\nconstructor(scene, x, y, width, height, key, columns, rows, config) {\nsuper(scene, x, y, width, height, key, columns, rows, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Custom shapes: Custom shapes on shape.     <pre><code>var customShapes = scene.rexUI.add.customShapes(x, y, width, height, config);\n</code></pre>     or     <pre><code>class MyCustomShapes extends RexPlugins.UI.CustomShapes {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Custom progress: Custom progress on shape.     <pre><code>var customProgress = scene.rexUI.add.customProgress(x, y, width, height, config);\n</code></pre>     or     <pre><code>class MyCustomProgress extends RexPlugins.UI.CustomProgress {\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}    </code></pre></li> <li>Canvas-round-rectangle: Round rectangle on canvas.     <pre><code>var shape = scene.rexUI.add.roundRectangleCanvas(x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n</code></pre>     or     <pre><code>class MyRoundRectangleCanvas extends RexPlugins.UI.RoundRectangleCanvas {\nconstructor(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient) {\nsuper(scene, x, y, width, height, radiusConfig, fillStyle, strokeStyle, lineWidth, fillColor2, isHorizontalGradient);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Cover: Rectangle shape covered full window, and block all touch events.     <pre><code>var shape = scene.rexUI.add.cover(config);\n</code></pre>     or     <pre><code>class MyCover extends RexPlugins.UI.Cover {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#canvasshape-objects","title":"Canvas/Shape objects","text":"<ol> <li>Canvas: Drawing on canvas.     <pre><code>var canvas = scene.rexUI.add.canvas(x, y, width, height);\n// var canvas = scene.rexUI.add.canvas(x, y, width, height);\n</code></pre>     or     <pre><code>class MyCanvas extends RexPlugins.UI.Canvas {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circle mask image: Load a texture, then apply a circle mask.     <pre><code>var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config);\n</code></pre>     or     <pre><code>class MyImage extends RexPlugins.UI.CircleMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Alpha mask image: Load a texture, then apply an alpha mask from another texture.     <pre><code>var image = scene.rexUI.add.alphaMaskImage(x, y, key, frame, config);\n</code></pre>     or     <pre><code>class MyImage extends RexPlugins.UI.AlphaMaskImage {\nconstructor(scene, x, y, key, frame, config) {\nsuper(scene, x, y, key, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circular progress shape: Circular progress bar shape.     <pre><code>var circularProgress = scene.rexUI.add.circularProgress(x, y, radius, barColor, value, config);\n</code></pre>     or     <pre><code>class MyCircularProgress extends RexPlugins.UI.CircularProgress {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Circular progress canvas: Circular progress bar on canvas     <pre><code>var circularProgress = scene.rexUI.add.circularProgressCanvas(x, y, radius, barColor, value, config);\n</code></pre>     or     <pre><code>class MyCircularProgress extends RexPlugins.UI.CircularProgressCanvas {\nconstructor(scene, x, y, radius, barColor, value, config) {\nsuper(scene, x, y, radius, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Line progress shape: Horizontal line progress bar shape.     <pre><code>var lineProgress = scene.rexUI.add.lineProgress(x, y, width, height, barColor, value, config);\n</code></pre>     or     <pre><code>class MyLineProgress extends RexPlugins.UI.LinerProgress {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Line progress canvas: Horizontal line progress bar filled with gradient color on canvas.     <pre><code>var lineProgress = scene.rexUI.add.lineProgressCanvas(x, y, width, height, barColor, value, config);\n</code></pre>     or     <pre><code>class MyLineProgress extends RexPlugins.UI.LinerProgressCanvas {\nconstructor(scene, x, y, width, height, barColor, value, config) {\nsuper(scene, x, y, width, height, barColor, value, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Checkbox: Checkbox input with drawing checker path animation.     <pre><code>var checkbox = scene.rexUI.add.checkbox(x, y, width, height, color, config);\n</code></pre>     or     <pre><code>class MyCheckbox extends RexPlugins.UI.Checkbox {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Toggle switch: Toggle-switch input.     <pre><code>var toggleSwitch = scene.rexUI.add.toggleSwitch(x, y, width, height, color, config);\n</code></pre>     or     <pre><code>class MyToggleSwitch extends RexPlugins.UI.ToggleSwitch {\nconstructor(scene, x, y, width, height, color, config) {\nsuper(scene, x, y, width, height, color, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Triangle: Trangle shape inside a rectangle bounds.     <pre><code>var triangle = scene.rexUI.add.triangle(x, y, width, height, fillColor, fillAlpha);\n</code></pre>     or     <pre><code>class MyTriangle extends RexPlugins.UI.Triangle {\nconstructor(scene, x, y, width, height, fillColor, fillAlpha) {\nsuper(scene, x, y, width, height, fillColor, fillAlpha);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Chart: Draw chart on canvas.</li> </ol>"},{"location":"ui-overview/#colored-text-objects","title":"Colored text objects","text":"<ol> <li>BBCode text: Drawing text with BBCode protocol.     <pre><code>var txt = scene.rexUI.add.BBCodeText(x, y, text, style);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.BBCodeText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Tag text: Displays text with multi-color, font face, or font size with tags.     <pre><code>var txt = scene.rexUI.add.tagText(x, y, text, style);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.TagText {\nconstructor(scene, x, y, text, style) {\nsuper(scene, x, y, text, style);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Dynamic text: Control position, angle of each character drawn on a canvas.     <pre><code>var txt = scene.rexUI.add.dynamicText(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.DynamicText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Text player: Typing characters on dynamic text, waiting click or key enter, play sound effect or backgroun music.     <pre><code>var txt = scene.rexUI.add.textPlayer(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.TextPlayer {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Canvas input: An invisible Input DOM element to  receive character input and display on DynamicText.     <pre><code>var txt = scene.rexUI.add.canvasInput(config);\n</code></pre>     or     <pre><code>class MyText extends RexPlugins.UI.CanvasInput {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#behaviors-of-text","title":"Behaviors of text","text":"<ol> <li>Hidden text edit: Create an invisible Input DOM element to edit string content.     <pre><code>var hiddenEdit = this.rexUI.add.hiddenEdit(textObject, config);\n</code></pre><ul> <li><code>textObject</code> : text, bbocodetext, tagtext, or label.</li> </ul> </li> <li>Text edit: Create an input text object above a text object to edit string content.     <pre><code>scene.rexUI.edit(textObject, config);\n// scene.rexUI.edit(textObject, config, onClose);\n</code></pre></li> <li>Wrap-expand text     <pre><code>var textObject = scene.rexUI.wrapExpandText(textObject);\n// var textObject = scene.rexUI.wrapExpandText(textObject, minWidth);\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object,</li> <li>Bitmap text object</li> <li>Dynamic text object, With default wrap configuration, ex:     <pre><code>{\nlineHeight: 24,\npadding: {bottom: 12}\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Font-size-expand text     <pre><code>var textObject = scene.rexUI.fontSizeExpandText(textObject);    </code></pre>     or     <pre><code>var textObject = scene.rexUI.fontSizeExpandText(textObject, {\nfitHeight: true\n});\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object, bitmap text game object</li> </ul> </li> <li><code>fitHeight</code> : <ul> <li><code>false</code> : Set font size to fit width only. Default behavior.</li> <li><code>true</code> : Set font size to fit width and height.</li> </ul> </li> </ul> </li> <li>Set font-size to fit width      <pre><code>var textObject = scene.rexUI.setFontSizeFitToWidth(textObject, width);\n</code></pre><ul> <li><code>textObject</code> :<ul> <li>Text object, bbcode text object, tag text object, bitmap text game object</li> </ul> </li> </ul> </li> <li>Text typing <pre><code>var textTyping = scene.rexUI.textTyping(textObject, config);\n</code></pre></li> <li>Text page <pre><code>var textPage = scene.rexUI.textPage(textObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#scaled-image","title":"Scaled image","text":"<ol> <li>Image box: Keep aspect ratio of image game object after scale-down resizing.     <pre><code>var image = scene.rexUI.add.imageBox(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImage extends RexPlugins.UI.ImageBox {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#transition-image","title":"Transition image","text":"<ol> <li>Transition image: Transit texture to another one.     <pre><code>var image = scene.rexUI.add.transitionImage(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImage extends RexPlugins.UI.TransitionImage {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Transition image pack: Transit texture to another one, with some pre-build effects, extended from TransitionImage.     <pre><code>var image = scene.rexUI.add.transitionImagePack(x, y, texture, frame, config);\n</code></pre>     or     <pre><code>class MyTransitionImagePack extends RexPlugins.UI.TransitionImagePack {\nconstructor(scene, x, y, texture, frame, config) {\nsuper(scene, x, y, texture, frame, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#states-game-objects","title":"States game objects","text":"<ol> <li>States image: Using plain object to create Image game object, with active, hover, disable styles.     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre>     or     <pre><code>class MyStatesImage extends RexPlugins.UI.StatesImage {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>States text: Using plain object to create Text game object, with active, hover, disable styles.     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre>     or     <pre><code>class MyStatesText extends RexPlugins.UI.StatesText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>States round-rectangle: Using plain object to create round rectangle game object, with active, hover, disable styles.     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre>     or     <pre><code>class MyStatesRoundRectangle extends RexPlugins.UI.StatesRoundRectangle {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#dom-game-objects","title":"Dom game objects","text":"<ol> <li>Input text: Input DOM element.     <pre><code>var image = scene.rexUI.add.inputText(config);\n</code></pre>     or     <pre><code>class MyInputText extends RexPlugins.UI.InputText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>File chooser: Create a transparent file chooser button (<code>&lt;input type=\"file\"&gt;</code>).     <pre><code>var image = scene.rexUI.add.fileChooser(config);\n</code></pre>     or     <pre><code>class MyFileChooser extends RexPlugins.UI.FileChooser {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>File drop zone: Create a div element for dropping file(s).     <pre><code>var image = scene.rexUI.add.fileDropZone(config);\n</code></pre>     or     <pre><code>class MyFileDropZpne extends RexPlugins.UI.FileDropZpne {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> </ol>"},{"location":"ui-overview/#touch-input","title":"Touch input","text":"<ol> <li>Click: Fires 'click' event when touch releasd after pressed.     <pre><code>var click = scene.rexUI.add.click(gameObject, config);\n</code></pre>     or     <pre><code>var click = new RexPlugins.UI.Click(gameObject, config);\n</code></pre></li> <li>Click-Outside: Fires 'clickoutside' event when pointer-down or pointer-up outside of game object.     <pre><code>var clickOutside = scene.rexUI.add.clickOutside(gameObject, config);\n</code></pre>     or     <pre><code>var clickOutside = new RexPlugins.UI.ClickOutside(gameObject, config);\n</code></pre></li> <li>In touching: Fires 'intouch' event every tick when pressing on a game object.     <pre><code>var inTouching = scene.rexUI.add.inTouching(gameObject, config);\n</code></pre>     or     <pre><code>var inTouching = new RexPlugins.UI.inTouching(gameObject, config);\n</code></pre></li> <li>Tap: Get tap/multi-taps events of a game object.     <pre><code>var tap = scene.rexUI.add.tap(gameObject, config);\n</code></pre>     or     <pre><code>var tap = new RexPlugins.UI.Tap(gameObject, config);\n</code></pre></li> <li>Press: Get press events of a game object.     <pre><code>var press = scene.rexUI.add.press(gameObject, config);\n</code></pre>     or     <pre><code>var press = new RexPlugins.UI.Press(gameObject, config);\n</code></pre></li> <li>Swipe: Get swipe events of a game object.     <pre><code>var swipe = scene.rexUI.add.swipe(gameObject, config);\n</code></pre>     or     <pre><code>var swipe = new RexPlugins.UI.Swipe(gameObject, config);\n</code></pre></li> <li>Pan: Get pan events of a game object.     <pre><code>var pan = scene.rexUI.add.pan(gameObject, config);\n</code></pre>     or     <pre><code>var pan = new RexPlugins.UI.Pan(gameObject, config);\n</code></pre></li> <li>Pinch: Get scale factor from 2 dragging touch pointers.     <pre><code>var pinch = scene.rexUI.add.pinch(config);\n</code></pre>     or     <pre><code>var pinch = new RexPlugins.UI.Pinch(config);\n</code></pre></li> <li>Rotste: Get spin angle from 2 dragging touch pointers.     <pre><code>var rotate = scene.rexUI.add.rotate(config);\n</code></pre>     or     <pre><code>var rotate = new RexPlugins.UI.Rotate(config);\n</code></pre></li> <li>Touch event stop: Stop touch events propagation.     <pre><code>var touchEventStop = scene.rexUI.add.touchEventStop(gameObject, config);\n</code></pre>     or     <pre><code>var touchEventStop = new RexPlugins.UI.TouchEventStop(gameObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#behaviors","title":"Behaviors","text":"<ol> <li>Modal promise: Modal behavior wrapped into promise.     <pre><code>scene.rexUI.modalPromise(gameObject, config)\n.then(function(closeEventData){ })\n</code></pre><ul> <li>Close modal dialog:     <pre><code>scene.rexUI.modalClose(gameObject);\n// scene.rexUI.modalClose(gameObject, closeEventData);\n</code></pre>     or     <pre><code>gameObject.emit('modal.requestClose');\n// gameObject.emit('modal.requestClose', closeEventData);\n</code></pre><ul> <li>Fire <code>'modal.requestClose'</code> event on game object, which will invoke <code>modal.requestClose()</code> method. After closing dialog, <code>resolve</code> part of promise will be triggered.</li> </ul> </li> </ul> </li> <li>Flip: Flip game object to another face by scaling width/height.     <pre><code>var flip = scene.rexUI.add.flip(gameObject, config);\n</code></pre>     or     <pre><code>var flip = new RexPlugins.UI.Flip(gameObject, config);\n</code></pre></li> <li>Fade in, fade out destroy <pre><code>scene.rexUI.fadeIn(gameObject, duration);\n// scene.rexUI.fadeIn(gameObject, duration, alpha);\n</code></pre> <pre><code>scene.rexUI.fadeOutDestroy(gameObject, duration);\n</code></pre></li> <li>Ease-move to, ease-move from     <pre><code>scene.rexUI.easeMoveTo(gameObject, duration, x, y);\n// scene.rexUI.easeMoveTo(gameObject, duration, x, y, ease);\n</code></pre> <pre><code>scene.rexUI.easeMoveFrom(gameObject, duration, x, y);\n// scene.rexUI.easeMoveFrom(gameObject, duration, x, y, ease);\n</code></pre></li> <li>Shake <pre><code>scene.rexUI.shake(gameObject, config);\n</code></pre></li> <li>Perspective: Snapshot children of containerlite, to a perspective render texture.     <pre><code>var perspective = scene.rexUI.add.perspective(gameObject, config);\n</code></pre>     or     <pre><code>var perspective = new RexPlugins.UI.Perspective(gameObject, config);\n</code></pre></li> <li>Skew: Snapshot children of containerlite, to a skew render texture.     <pre><code>var skew = scene.rexUI.add.skew(gameObject, config);\n</code></pre>     or     <pre><code>var skew = new RexPlugins.UI.Skew(gameObject, config);\n</code></pre></li> </ol>"},{"location":"ui-overview/#helper-methods","title":"Helper methods","text":""},{"location":"ui-overview/#get-parent","title":"Get parent","text":"<ul> <li>Get parent sizer     <pre><code>var parentSizer = scene.rexUI.getParentSizer(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> </ul> </li> <li>Get ancestor sizer matched given name     <pre><code>var parentSizer = scene.rexUI.getParentSizer(gameObject, name);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> <li><code>name</code> : Name string.</li> </ul> </li> <li>Get topmost sizer     <pre><code>var topmostSizer = scene.rexUI.getTopmostSizer(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : Any game object added to sizer.</li> </ul> </li> </ul>"},{"location":"ui-overview/#showhide","title":"Show/hide","text":"<ul> <li>Show     <pre><code>scene.rexUI.show(gameObject);\nscene.rexUI.getTopmostSizer(gameObject).layout();\n</code></pre></li> <li>Hide     <pre><code>scene.rexUI.hide(gameObject);\nscene.rexUI.getTopmostSizer(gameObject).layout();\n</code></pre></li> <li>Is shown     <pre><code>var isShown = scene.rexUI.isShown(gameObject);\n</code></pre></li> </ul>"},{"location":"ui-overview/#is-pointer-in-bounds","title":"Is pointer in bounds","text":"<pre><code>var isInBounds = scene.rexUI.isInTouching(gameObject);\n// var isInBounds = scene.rexUI.isInTouching(gameObject, pointer);\n</code></pre>"},{"location":"ui-overview/#event-promise","title":"Event promise","text":"<ul> <li>Get event promise <pre><code>var promise = scene.rexUI.waitEvent(eventEmitter, eventName)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>eventEmitter</code> : Any kind of event emitter. for example, game object, or tween task, or scene event </li> </ul> </li> <li>Get complete event promise <pre><code>var promise = scene.rexUI.waitComplete(eventEmitter)\n.then(function() {\n\n})\n</code></pre><ul> <li><code>eventEmitter</code> : Event emitter which will fire <code>'complete'</code> event, for example, tween task.</li> </ul> </li> <li>Delay time promise     <pre><code>var promise = scene.rexUI.delayPromise(time)\n.then(function() {\n\n})\n</code></pre></li> </ul>"},{"location":"ui-overview/#view-port","title":"View port","text":"<p>View port is a rectangle of current visible area.</p> <pre><code>var viewport = scene.rexUI.viewport;\n</code></pre> <p>Which will be changed after resizing</p> <pre><code>scene.scale.on('resize', function() {\nvar viewport = scene.rexUI.viewport;\n/*\n    sizer\n        .setPosition(viewport.centerX, viewport.centerY)\n        .setMinSize(viewport.width, viewport.height)\n        .layout();\n    */\n});\n</code></pre>"},{"location":"ui-overview/#yaml","title":"YAML","text":"<p>js-yaml</p> <pre><code>try {\nconst doc = scene.rexUI.yaml.load(yamlStrinig);\n} catch (e) {\n// ...\n}\n</code></pre> <pre><code>scene.rexUI.yaml.loadAll(data, function (doc) {\n// ...\n});\n</code></pre>"},{"location":"ui-overview/#demos","title":"Demos","text":"<ul> <li>Dialog<ul> <li>Yes/No</li> <li>Choice</li> <li>Pop-up</li> </ul> </li> <li>Text input<ul> <li>Text edit</li> <li>Hidden text edit</li> <li>Canvas input</li> </ul> </li> <li>Menu</li> <li>Text-box</li> <li>Text-area</li> <li>Number bar</li> <li>Grid table</li> <li>Tabs<ul> <li>Tabs-tables</li> </ul> </li> <li>Scroll-able panel</li> <li>Pages</li> <li>Fix-width sizer</li> <li>Chart</li> <li>Video player</li> <li>Anchor</li> <li>Round-rectangle</li> </ul>"},{"location":"ui-pages/","title":"Pages","text":""},{"location":"ui-pages/#introduction","title":"Introduction","text":"<p>A container with pages, only current page is visible.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-pages/#live-demos","title":"Live demos","text":"<ul> <li>Pages</li> <li>Tabpage</li> </ul>"},{"location":"ui-pages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-pages/#install-plugin","title":"Install plugin","text":""},{"location":"ui-pages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add pages object     <pre><code>var pages = scene.rexUI.add.pages(config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add pages object     <pre><code>var pages = scene.rexUI.add.pages(config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Pages } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add pages object     <pre><code>var pages = new Pages(scene, config);\nscene.add.existing(pages);\n</code></pre></li> </ul>"},{"location":"ui-pages/#add-pages-object","title":"Add pages object","text":"<pre><code>var pages = scene.rexUI.add.pages({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0 },\n// swapMode: 0,\n// fadeIn: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>swapMode</code> : Set to invisible or destroy swapped page.<ul> <li><code>0</code>, <code>'invisible'</code> : Set swapped page to invisible.</li> <li><code>1</code>, <code>'destroy'</code> : Destroy swapped page.</li> </ul> </li> <li><code>fadeIn</code> : Fade-in duration of current page.<ul> <li><code>0</code> : No fade-in effect. Default behavior.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-pages/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPages extends RexPlugins.UI.Pages {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var pages = new MyPages(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-pages/#add-background","title":"Add background","text":"<pre><code>pages.addBackground(child);\n</code></pre> <p>or</p> <pre><code>pages.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-pages/#add-page","title":"Add page","text":"<pre><code>pages.addPage(child, key, align, padding, expand);\n// pages.add(child, key, align, padding, expand);\n</code></pre> <p>or </p> <pre><code>pages.addPage(child, {\nkey: 0,\nalign: Phaser.Display.Align.TOP_LEFT,\npadding: {left: 0, right: 0, top: 0, bottom: 0}, expand: true\n}\n);\n// pages.add(child, config);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>key</code> : Unique name of this page.</li> <li><code>align</code> :<ul> <li><code>'left-top'</code>, or <code>Phaser.Display.Align.TOP_LEFT</code> : Align game object at left-top. Default value.</li> <li><code>'left-center'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'left-bottom'</code>, or <code>Phaser.Display.Align.LEFT_BOTTOM</code> : Align game object at left-bottom.</li> <li><code>'center-top'</code>, or <code>Phaser.Display.Align.TOP_CENTER</code> : Align game object at center-top.</li> <li><code>'center-center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center-center.</li> <li><code>'center-bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at center-bottom.</li> <li><code>'right-top'</code>, or <code>Phaser.Display.Align.TOP_RIGHT</code> : Align game object at right-top.</li> <li><code>'right-center'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'right-bottom'</code>, or <code>Phaser.Display.Align.RIGHT_BOTTOM</code> : Align game object at right-bottom.</li> </ul> </li> <li><code>padding</code> : Add space between bounds. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Expand width and height of the page.<ul> <li><code>true</code> : Expand width and height.</li> <li><code>false</code> : Don't expand width or height.</li> <li>A plain object, to expand width or height     <pre><code>{\nwidth: true,\nheight: true\n}\n</code></pre><ul> <li><code>expand.width</code> : Expand width.</li> <li><code>expand.height</code> : Expand height.</li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-pages/#swap-to-page","title":"Swap to page","text":"<pre><code>pages.swapPage(key);\n// pages.swapPage(key, fadeInDuration);\n</code></pre> <ul> <li><code>key</code> : Unique name of this page.</li> </ul> <p>Note</p> <p>This method will run <code>pages.layout()</code> to arrange position of current page.</p>"},{"location":"ui-pages/#page-name","title":"Page name","text":"<ul> <li> <p>Current page name     <pre><code>var pageName = pages.currentKey;\n</code></pre></p> </li> <li> <p>Previous page name     <pre><code>var pageName = pages.previousKey;\n</code></pre></p> </li> <li>Name of all pages     <pre><code>var names = pages.keys;\n</code></pre></li> </ul>"},{"location":"ui-pages/#page-object","title":"Page object","text":"<ul> <li>Get page object     <pre><code>var pageObject = pages.getPage(key);\n</code></pre><ul> <li><code>pageObject</code> : A game object or <code>null</code>.</li> </ul> </li> <li>Current page object     <pre><code>var pageObject = pages.currentPage;\n</code></pre></li> <li>Previous page object     <pre><code>var pageObject = pages.previousPage;\n</code></pre></li> </ul>"},{"location":"ui-pages/#fade-in-duration","title":"Fade in duration","text":"<pre><code>pages.setFadeInDuration(duration);\n</code></pre> <ul> <li><code>0</code> : No fade-in effect.</li> </ul>"},{"location":"ui-pages/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All page game objects     <pre><code>var gameObjects = pages.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = pages.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = pages.getByName(name);\n// var gameObject = pages.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-pages/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-pages/#events","title":"Events","text":"<ul> <li>Set page invisible, triggered when page is swapped out.     <pre><code>pages.on('pageinvisible', function(pageObject, key, pages) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>pageObject</code> : Game object of page.</li> <li><code>key</code> : Page name.</li> <li><code>pages</code> : Pages object</li> </ul> </li> <li>Set page visible, triggered when page is shown.     <pre><code>pages.on('pagevisible', function(pageObject, key, pages) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>pageObject</code> : Game object of page.</li> <li><code>key</code> : Page name.</li> <li><code>pages</code> : Pages object</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/","title":"Perspective card","text":""},{"location":"ui-perspectivecard/#introduction","title":"Introduction","text":"<p>A container with front and back faces.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul> <p>WebGL only</p> <p>It only works in WebGL render mode.</p>"},{"location":"ui-perspectivecard/#live-demos","title":"Live demos","text":"<ul> <li>Flip</li> <li>Rotation</li> </ul>"},{"location":"ui-perspectivecard/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-perspectivecard/#install-plugin","title":"Install plugin","text":""},{"location":"ui-perspectivecard/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.rexUI.add.perspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add card object     <pre><code>var card = scene.rexUI.add.perspectiveCard(config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { PerspectiveCard } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add card object     <pre><code>var card = new PerspectiveCard(scene, config);\nscene.add.existing(card);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#add-card-object","title":"Add card object","text":"<pre><code>var sizer = scene.rexUI.add.perspectiveCard({    // x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nback: backGameObject,\nfront: frontGameObject,\n// face: 0,\n// orientation: 0,\n// snapshotPadding: 0,\n\n// flip : {\n//     frontToBack: 0,\n//     backToFront: 1,\n//     duration: 1000,\n//     ease: 'Cubic',\n//     delay: 0,\n// }\n\n// space: { left: 0, right:0, top:0, bottom:0 },\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>front</code>, <code>back</code> : Any game object for front or back face.</li> <li><code>face</code> : Show front or back face.<ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> <li><code>orientation</code> : Flipping orientation.<ul> <li><code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Flipping left-to-right, or right-to-left.</li> <li><code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Flipping top-to-bottom, or bottom-to-top.</li> </ul> </li> <li><code>snapshotPadding</code> : Padding around face when taking a snapshot of a face.</li> <li><code>flip</code> : Configuration of flipping behavior.<ul> <li><code>flip.frontToBack</code>, <code>flip.backToFront</code> : Flipping direction.<ul> <li><code>'right'</code>, <code>'left-to-right'</code>, or <code>0</code> : Flipping from right to left.</li> <li><code>'left'</code>, <code>'right-to-left'</code>, or <code>1</code> : Flipping from left to right.</li> </ul> </li> <li><code>flip.duration</code> : Duration of flipping, in millisecond.</li> <li><code>flip.delay</code> : Initial delay.</li> <li><code>flip.ease</code> : Ease function. Default value is <code>'Cubic'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPerspectiveCard extends PerspectiveCard {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta);\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var card = new MyPerspectiveCard(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>card.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-perspectivecard/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = card.getElement('background');\n</code></pre></li> <li>Front face game object     <pre><code>var frontFace = card.getElement('front');\n</code></pre></li> <li>Back face game object     <pre><code>var backFace = card.getElement('back');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = card.getElement('#' + name);\n// var gameObject = card.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = card.getByName(name);\n// var gameObject = card.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#face","title":"Face","text":"<ul> <li>Get     <pre><code>var face = card.face;\n</code></pre><ul> <li><code>face</code>:<ul> <li><code>0</code> : Show front face.</li> <li><code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Set     <pre><code>card.setFace(face)\n</code></pre><ul> <li><code>face</code><ul> <li><code>'front'</code>, or <code>0</code> : Show front face.</li> <li><code>'back'</code>, or <code>1</code> : Show back face.</li> </ul> </li> </ul> </li> <li>Toggle     <pre><code>card.toggleFace()\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#face-instances","title":"Face instances","text":"<ul> <li>Front face     <pre><code>var frontFace = card.frontFace;\n// var frontFace = card.faces.front;\n</code></pre></li> <li>Back face     <pre><code>var backFace = card.backFace;\n// var backFace = card.faces.back;\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#flip-behavior","title":"Flip behavior","text":""},{"location":"ui-perspectivecard/#start-flipping","title":"Start flipping","text":"<pre><code>card.flip.flip();\n// card.flip.flip(duration, repeat);\n</code></pre> <ul> <li><code>duration</code> : Overwrite default duration value.</li> <li><code>repeat</code> : Number of flipping time (<code>repeat + 1</code>) during <code>duration</code>. Default value is <code>0</code>.</li> </ul> <p>or</p> <ul> <li>Flip-right     <pre><code>card.flip.flipRight();\n// card.flip.flipRight(duration, repeat);\n</code></pre></li> <li>Flip-left     <pre><code>card.flip.flipLeft();\n// card.flip.flipLeft(duration, repeat);\n</code></pre></li> </ul> <p>Note</p> <ul> <li>When flipping start:<ul> <li>Snapshot face game objects to perspective-card mesh</li> <li>Set face game objects to invisible, and perspective-card mesh to visible</li> </ul> </li> <li>When flipping complete:<ul> <li>Revert visible of Face game objects and perspective-card mesh</li> </ul> </li> </ul>"},{"location":"ui-perspectivecard/#stop-flipping","title":"Stop flipping","text":"<pre><code>card.flip.stop();\n</code></pre>"},{"location":"ui-perspectivecard/#set-duration","title":"Set duration","text":"<pre><code>card.flip.setDuration(duration);\n// card.flip.duration = duration;\n</code></pre>"},{"location":"ui-perspectivecard/#set-ease","title":"Set ease","text":"<pre><code>card.flip.setEase(ease);\n// card.flip.ease = ease;\n</code></pre>"},{"location":"ui-perspectivecard/#events","title":"Events","text":"<ul> <li>On flipping start     <pre><code>card.flip.on('start', function(){\n// ...\n});\n</code></pre></li> <li>On flipping complete     <pre><code>card.flip.on('complete', function(){\n// ...\n});\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#status","title":"Status","text":"<ul> <li>Is flipping     <pre><code>var isRunning = card.flip.isRunning;\n</code></pre></li> </ul>"},{"location":"ui-perspectivecard/#rotation","title":"Rotation","text":"<ul> <li>Get rotation angle     <pre><code>var angleX = card.angleX; // Angle in degrees\nvar angleY = card.angleY; // Angle in degrees\nvar angleZ = card.angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>var rotationX = card.rotationX; // Angle in radians\nvar rotationY = card.rotationY; // Angle in radians\nvar rotationZ = card.rotationZ; // Angle in radians\n</code></pre></li> <li>Set rotation angle     <pre><code>card.angleX = angleX; // Angle in degrees\ncard.angleY = angleY; // Angle in degrees\ncard.angleZ = angleZ; // Angle in degrees\n</code></pre>     or     <pre><code>card.rotationX = rotationX; // Angle in radians\ncard.rotationY = rotationY; // Angle in radians\ncard.rotationZ = rotationZ; // Angle in radians\n</code></pre></li> </ul> <p>Warning</p> <p>Can't be used with flipping mode.</p>"},{"location":"ui-perspectivecard/#other-properties","title":"Other properties","text":"<p>See overlapSizer.</p>"},{"location":"ui-scrollablepanel/","title":"Scroll-able panel","text":""},{"location":"ui-scrollablepanel/#introduction","title":"Introduction","text":"<p>A container with a panel, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-scrollablepanel/#live-demos","title":"Live demos","text":"<ul> <li>Scroll-able panel + grid sizer</li> <li>Scroll-able panel + table by fix-width sizer</li> <li>Scroll-able panel + fix-width sizer</li> <li>Dropdown, scrollable list</li> <li>Add child</li> <li>Scroll to child</li> <li>Drag item</li> <li>Destory</li> </ul>"},{"location":"ui-scrollablepanel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-scrollablepanel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-scrollablepanel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = scene.rexUI.add.scrollablePanel(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = scene.rexUI.add.scrollablePanel(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { ScrollablePanel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add scrollable-panel object     <pre><code>var panel = new ScrollablePanel(scene, config);\nscene.add.existing(panel);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#add-scroll-able-panel-object","title":"Add scroll-able panel object","text":"<pre><code>var panel = scene.rexUI.add.scrollablePanel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nscrollMode: 0,\n\n// Elements\nbackground: backgroundGameObject,\n\npanel: {\nchild: panelGameObject,\nmask: {\npadding: 0,\n// updateMode: 0,\n}\n}.\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, \n//     bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, \n//     right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// },\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\npanel: 0,\n// panel: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\n// name: '',\n// draggable: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>scrollMode</code> : Scroll panel vertically, or horizontally.<ul> <li><code>0</code>, <code>'vertical'</code>, or <code>'v'</code>, <code>'y'</code> : Scroll panel vertically. Default value.</li> <li><code>1</code>, <code>'horizontal'</code>, or <code>'h'</code>. <code>'x'</code> : Scroll panel horizontally.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel.</li> <li><code>panel</code> : Configuration of panel game object.<ul> <li><code>panel.child</code> : Panel game object.</li> <li><code>panel.mask</code> : Configuration of panel's mask.<ul> <li><code>panel.mask.padding</code> : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is <code>0</code>.</li> <li><code>panel.mask.updateMode</code> : When to update mask<ul> <li><code>0</code>, or <code>'update'</code> : Apply mask only when scrolling. Default behavior.</li> <li><code>1</code>, or <code>'everyTick'</code> : Apply mask every tick. Use this mode if children game objects of panel are moved after scrolling and still been masked.</li> </ul> </li> <li><code>false</code> : No mask</li> </ul> </li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over panel.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.panel</code> :<ul> <li>A number: Space between panel object and slider object.</li> <li>An object: Padding of panel object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.panel.top</code>, <code>space.panel.bottom</code> : Top, bottom padding space of panel object.</li> <li><code>space.panel.right</code> : Space between panel object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.panel.left</code>, <code>space.panel.right</code> : Left, right padding space of panel object.</li> <li><code>space.panel.bottom</code> : Space between panel object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and panel.</li> <li><code>space.footer</code> : Space between footer and panel.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-scrollablepanel/#child-bounds","title":"Child bounds","text":"<p>Scrollable panel will mask child if child's bounds (<code>child.getBounds()</code>)  is across mask area. </p> <p>Bitmaptext game object does not have <code>getBounds</code> method.  User can inject it by</p> <pre><code>const Components = Phaser.GameObjects.Components;\nPhaser.Class.mixin(\nPhaser.GameObjects.BitmapText,\n[\nComponents.ComputedSize,\nComponents.GetBounds\n]\n);\n</code></pre>"},{"location":"ui-scrollablepanel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyPanel extends RexPlugins.UI.ScrollablePanel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var panel = new MyPanel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>panel.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-scrollablepanel/#scroll-content","title":"Scroll content","text":"<ul> <li>Set     <pre><code>panel.childOY = oy;\n// panel.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>panel.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>panel.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>panel.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = panel.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = panel.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = panel.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = panel.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>panel.t = t;  // t: 0~1\n// panel.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>panel.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = panel.t;\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>panel.scrollToTop();\n</code></pre><ul> <li>Equal to <code>panel.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>panel.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>panel.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#scroll-to-child","title":"Scroll to child","text":"<pre><code>panel.scrollToChild(child, align);\n</code></pre> <ul> <li><code>align</code> : <ul> <li><code>undefined</code> : Align child to top(left), or bottom(right) of panel. Default value.</li> <li><code>'top'</code>, <code>'center'</code>, <code>'bottom'</code> : Align child to top/center/bottom of panel.</li> <li><code>'left'</code>, <code>'center'</code>, <code>'right'</code> : Align child to left/center/right of panel.</li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>panel.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>panel.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = panel.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>panel.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>panel.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = panel.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>panel.on('scroll', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>panel.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>panel.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-scrollablepanel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-scrollablepanel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = panel.getElement('background');\n</code></pre></li> <li>Child-panel game object     <pre><code>var childPanel = panel.getElement('panel');\n</code></pre></li> <li>Child-panel mask game object, which is a graphics game object.     <pre><code>var maskGameObject = panel.getElement('mask');\n</code></pre></li> <li>Layer of panel, assigned at config <code>panel.mask.layer</code>.     <pre><code>var layer = panel.getElement('panelLayer');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = panel.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = panel.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller     <pre><code>var scroller = panel.getElement('scroller');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = panel.getElement('#' + name);\n// var gameObject = panel.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = panel.getByName(name);\n// var gameObject = panel.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-scrollablepanel/#input-events","title":"Input events","text":"<p>Two possible solution to register input events to children of scrollable panel.</p>"},{"location":"ui-scrollablepanel/#set-children-interactive","title":"Set children interactive","text":"<p>Applies click, tap, press, swipe behaviors on this scrollable panel, to detect input events of children.</p> <pre><code>panel.setChildrenInteractive({\ntargets: targetSizers,\n\n// click: {mode: 'release', clickInterval: 100},\n\n// over: undefined,\n\n// press: {time: 251, threshold: 9},\n\n// tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, \n//       taps: undefined, minTaps: undefined, maxTaps: undefined,},\n\n// swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},\n\n// inputEventPrefix: 'child.',\n})\n</code></pre> <ul> <li><code>targetSizers</code> : Array of target children-sizer.</li> </ul> <p>See Base-sizer/Set children interactive</p>"},{"location":"ui-scrollablepanel/#events","title":"Events","text":"<p>See Base-sizer/Set children interactive/Events</p>"},{"location":"ui-scrollablepanel/#individual-input-events","title":"Individual input events","text":"<p>When <code>scene.input.topOnly</code> is <code>true</code> (default value), input events of children elements will block the drag-scrolling of scrollable panel. (Assmue that the children elememts are above scrollable panel)</p> <ul> <li>Set <code>scene.input.topOnly</code> to <code>false</code> to enable drag-scrolling and input events of children elememts both.</li> <li>Test if pointer is inside the mask of panel via <code>panel.isInTouching('mask')</code>, during input events' callback.</li> <li>To recognize pointer-down and dragging-start, use press's <code>pressstart</code> event.</li> </ul>"},{"location":"ui-scrollablepanel/#steps-of-building-a-scrollable-panel","title":"Steps of building a scrollable panel","text":"<ol> <li>Build child panel from bottom to top<ul> <li>Child panel might be composed of sizers (sizer/fix-width sizer/grid sizer)</li> <li>Return child sizer from method</li> </ul> </li> <li>Build scrollable panel</li> <li>Add interactive events</li> </ol>"},{"location":"ui-scrollbar/","title":"Scroll bar","text":""},{"location":"ui-scrollbar/#introduction","title":"Introduction","text":"<p>A container with slider, two buttons, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-scrollbar/#live-demos","title":"Live demos","text":"<ul> <li>Scroll bar</li> </ul>"},{"location":"ui-scrollbar/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-scrollbar/#install-plugin","title":"Install plugin","text":""},{"location":"ui-scrollbar/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage   <pre><code>scene.load.scenePlugin(\n\"rexuiplugin\",\n\"https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js\",\n\"rexUI\",\n\"rexUI\"\n);\n</code></pre></li> <li>Add scroll bar object   <pre><code>var scrollBar = scene.rexUI.add.scrollBar(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from \"phaser3-rex-plugins/templates/ui/ui-plugin.js\";\nvar config = {\n// ...\nplugins: {\nscene: [\n{\nkey: \"rexUI\",\nplugin: UIPlugin,\nmapping: \"rexUI\",\n},\n// ...\n],\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add scroll bar object   <pre><code>var scrollBar = scene.rexUI.add.scrollBar(config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm   <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class   <pre><code>import { ScrollBar } from \"phaser3-rex-plugins/templates/ui/ui-components.js\";\n</code></pre></li> <li>Add scroll bar object   <pre><code>var sizer = new ScrollBar(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#add-scroll-bar-object","title":"Add scroll bar object","text":"<pre><code>var scrollBar = scene.rexUI.add.scrollBar({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\norientation: 0,\n\nbackground: backgroundGameObject,    slider: {\nbackground: backgroundGameObject,\n/* \n        background: { \n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */    indicator: indicatorGameObject,\n/* \n        indicator: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\ninput: 'drag',\ngap: undefined,        easeValue: {\nduration: 0,\nease: 'Linear'\n},\n},\n\nbuttons: {\ntop: topButtonGameObject, bottom: bottomButtonGameObject,\nleft: leftButtonGameObject, right: rightButtonGameObject,\nstep: 0.01,\n}\n\nvaluechangeCallback: function(newValue, oldValue, scrollBar) {\n// scrollBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n}\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\nitem: 0\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the sizer.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of scrollBar.</li> <li><code>slider</code> : Slider game object which composed of<ul> <li><code>slider.width</code> : Fixed width of slider, optional. Width of slider will be extended if this value is not set.</li> <li><code>slider.background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control knob by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disable this feature.</li> </ul> </li> <li><code>slider.easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>slider.easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>slider.easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> </ul> </li> <li><code>buttons</code> : Press button to scroll content in each tick.<ul> <li><code>buttons.top</code>, <code>buttons.bottom</code> : Top and bottom buttons.</li> <li><code>buttons.left</code>, <code>buttons.right</code> : Left and right buttons</li> <li><code>buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.item</code> : Space between 2 children game objects.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.</li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> </ul>"},{"location":"ui-scrollbar/#custom-class","title":"Custom class","text":"<ul> <li>Define class   <pre><code>class MyScrollBar extends RexPlugins.UI.ScrollBar {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance   <pre><code>var scrollBar = new MyScrollBar(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>scrollBar.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-scrollbar/#get-element","title":"Get element","text":"<ul> <li>Get element</li> <li>Background game object     <pre><code>var background = scrollBar.getElement(\"background\");\n</code></pre></li> <li>Slider game object<ul> <li>Slider background   <pre><code>var sliderBackground = scrollBar.getElement(\"slider.background\");\n</code></pre></li> <li>Slider track   <pre><code>var sliderTrack = scrollBar.getElement(\"slider.track\");\n</code></pre></li> <li>Slider indicator   <pre><code>var sliderIndicator = scrollBar.getElement(\"slider.indicator\");\n</code></pre></li> <li>Slider thumb   <pre><code>var sliderThumb = scrollBar.getElement(\"slider.thumb\");\n</code></pre></li> </ul> </li> <li>Button game objects     <pre><code>var buttons = scrollBar.getElement(\"buttons\");\n</code></pre><ul> <li><code>buttons</code> : Array of button game objects.<ul> <li><code>buttons[0]</code> : Left or top button.</li> <li><code>buttons[1]</code> : Right or bottom button.</li> </ul> </li> </ul> </li> <li>Get by name   <pre><code>var gameObject = scrollBar.getElement(\"#\" + name);\n// var gameObject = scrollBar.getElement('#' + name, recursive);\n</code></pre>   or   <pre><code>var gameObject = scrollBar.getByName(\"#\" + name);\n// var gameObject = scrollBar.getByName(name, recursive);\n</code></pre></li> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul>"},{"location":"ui-scrollbar/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = scrollBar.enable;\n</code></pre></li> <li>Set     <pre><code>scrollBar.setEanble(enable);\n</code></pre>     or     <pre><code>scrollBar.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value   <pre><code>var value = scrollBar.getValue(min, max); // value : min ~ max\n</code></pre>   or   <pre><code>var value = scrollBar.getValue(); // value: 0 ~ 1\n</code></pre>   or   <pre><code>var value = scrollBar.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value   <pre><code>scrollBar.setValue(value, min, max); // value: min ~ max\n</code></pre>   or   <pre><code>scrollBar.setValue(value); // value: 0 ~ 1\n</code></pre>   or   <pre><code>scrollBar.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value   <pre><code>scrollBar.addValue(inc, min, max); // inc: min ~ max\n</code></pre>   or   <pre><code>scrollBar.addValue(inc); // inc: 0 ~ 1\n</code></pre>   or   <pre><code>scrollBar.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-scrollbar/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>scrollBar.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>scrollBar.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>scrollBar.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>scrollBar.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>scrollBar.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-scrollbar/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-scrollbar/#events","title":"Events","text":"<ul> <li>On value changed   <pre><code>scrollBar.on('valuechange',\nfunction (newValue, oldValue, scrollBar) {\n// scrollBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue));\n},\nscope\n);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/","title":"Simple drop down list","text":""},{"location":"ui-simpledropdownlist/#introduction","title":"Introduction","text":"<p>Using plain object to create drop down list.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-simpledropdownlist/#live-demos","title":"Live demos","text":"<ul> <li>Drop-down list</li> </ul>"},{"location":"ui-simpledropdownlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-simpledropdownlist/#install-plugin","title":"Install plugin","text":""},{"location":"ui-simpledropdownlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add drop-down list object     <pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList(config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { DropDownList } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add dropDownList object     <pre><code>var dropDownList = new SimpleDropDownList(scene, config);\nscene.add.existing(dropDownList);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#add-drop-down-list-object","title":"Add drop-down list object","text":"<pre><code>var dropDownList = scene.rexUI.add.simpleDropDownList({\nlabel: SimpleLabelConfig,\n\nbutton: SimpleLabelConfig,\n\nlist: {\n// easeIn: 500,\n// transitIn: undefined,\n// transitIn: function(listPanel, duration) {  },\n\n// easeOut: 100,\n// transitOut: undefined,\n// transitOut: function(listPanel, duration) {  },\n\n// wrap: false,\n// width: undefined, \n// height: undefined,\n// alignParent: 'text',\n// alignSide: '',\n// expandDirection: 0,\n// bounds: undefined,\n\n// space: {\n//     left: 0, right: 0, top: 0, bottom: 0, item: 0,\n//     line: 0\n// },\n\n// draggable: false        \n}\n\n}, creators);\n</code></pre> <ul> <li><code>label</code> : Styles of simple-label, for creating label.</li> <li><code>button</code> : Styles of simple-label, for creating each button on drop-down list.<ul> <li>Use <code>label</code> parameter of <code>button</code> parameter is not given.</li> </ul> </li> <li><code>list</code> : Configuration of list panel.<ul> <li><code>list.easeIn</code> : Pop-up duration in ms. Default value is <code>500</code>.</li> <li><code>list.transitIn</code> : Tween behavior of opening list panel.<ul> <li><code>undefined</code> : Expand list panel by pop-up, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.easeOut</code> : Scale-down duration in ms. Default value is <code>100</code>.</li> <li><code>list.transitOut</code> : Tween behavior of closing list panel.<ul> <li><code>undefined</code> : Closing list panel by scale-down, default behavior.</li> <li>Custom callback     <pre><code>function(listPanel, duration) {\n\n}\n</code></pre></li> </ul> </li> <li><code>list.wrap</code> : <ul> <li><code>true</code> : fixwidth-sizer layout, a row within buttons.</li> <li><code>false</code> : sizer layout, a row within a button. Default behavior.</li> </ul> </li> <li><code>list.width</code> : Minimum width.<ul> <li><code>undefined</code> : Minimum width of panel will equal to width of parent label. Default value.</li> <li>A number : Width of panel. Required fields when <code>list.wrap</code> is <code>true</code>.</li> </ul> </li> <li><code>list.height</code> : Minimum height.<ul> <li><code>undefined</code> : Default value.</li> </ul> </li> <li><code>list.alignParent</code> : Align x position to label.<ul> <li><code>'icon'</code> : Align x position to icon game object of parent label.</li> <li><code>'text'</code> : Align x position to text game object of parent label. Default behavior</li> <li><code>'label'</code>, or <code>null</code> : Align x position to parent label.        </li> </ul> </li> <li><code>list.alignSide</code> : Align list to label's left or right side.<ul> <li><code>undefined</code>, or <code>'left'</code> : Align list's left side to label's left side. Default behavior.</li> <li><code>'right</code> : Align list's right side to label's right side. Default behavior.</li> </ul> </li> <li><code>list.expandDirection</code> :<ul> <li><code>0</code>, <code>'down'</code> : Expand list down. i.e. list panel will put below parent label.</li> <li><code>1</code>, <code>'up'</code> : Expand list up. i.e. list panel will put above parent label.</li> </ul> </li> <li><code>list.bounds</code> : Put list panel below parent label if bottom of list panel is inside bounds (Rectangle)<ul> <li><code>undefined</code> : Use viewport as bounds</li> <li>Rectangle</li> </ul> </li> <li><code>list.space</code> : <code>space</code> properties of list panel.<ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code> : For sizer layout. (<code>list.wrap</code> is <code>false</code>)</li> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>item</code>, <code>line</code> : For fixwidth-sizer layout. (<code>list.wrap</code> is <code>true</code>)</li> </ul> </li> <li><code>list.draggable</code> : Set <code>true</code> to drag top-most object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-simpledropdownlist/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyDropDownList extends RexPlugins.UI.SimpleDropDownList {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var dropDownList = new MyDropDownList(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#options","title":"Options","text":"<ul> <li>Set     <pre><code>dropDownList.setOptions(options);\n</code></pre>     or     <pre><code>dropDownList.options = options;\n</code></pre><ul> <li><code>options</code> : Array of strings, or objects contains these properties.     <pre><code>{\ntext: string,\nvalue: any\n}\n</code></pre></li> </ul> </li> <li>Get     <pre><code>var options = dropDownList.options;\n</code></pre></li> </ul>"},{"location":"ui-simpledropdownlist/#other-properties","title":"Other properties","text":"<p>See drop-down list, label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-simpledropdownlist/#events","title":"Events","text":"<p>See Events section of drop-down list</p>"},{"location":"ui-simplelabel/","title":"Simple label","text":""},{"location":"ui-simplelabel/#introduction","title":"Introduction","text":"<p>Using plain object to create label.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-simplelabel/#live-demos","title":"Live demos","text":"<ul> <li>Style</li> <li>Bitmaptext</li> <li>Nine-slice background</li> <li>Wrap text</li> <li>Buttons</li> </ul>"},{"location":"ui-simplelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-simplelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-simplelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.simpleLabel(style).resetDisplayContent(config);\n//var label = scene.rexUI.add.simpleLabel(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.simpleLabel(style).resetDisplayContent(config);\n//var label = scene.rexUI.add.simpleLabel(style, creators).resetDisplayContent(config);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { SimpleLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new SimpleLabel(scene, style);\n// var label = new SimpleLabel(scene, style, creators);\nscene.add.existing(label);\nlabel.resetDisplayContent(config)\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.simpleLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n// rtl: false,\n\n// States-Round-rectangle background\nbackground: {...},\n\n// Nine-slice background\nbackground: {\nkey: ,\nframe: ,\nleftWidth: , rightWidth: ,\ntopHeight: , bottomHeight: }\n\n// States-Image\nicon: {...},\n\n// iconMask: false,\n// squareFitIcon: false,\n// iconSize: undefined, iconWidth: undefined, iconHeight: undefined,\n\n// States-Text\ntext: {...},\n// text: {\n//     $type: 'text',\n//     ...\n// }\n\n// Create bbcodetext\n// text: {\n//     $type: 'bbcodetext',\n//     ...\n// },\n\n// Create bitmaptext\n// text: {\n//     $type: 'bitmaptext',\n//     key: '',\n//     size: undefined,\n//     color: undefined,\n// },\n\n// wrapText: false,\n\n// expandTextWidth: false,\n// expandTextHeight: false,\n\n// States-Image\naction: {...},\n\n// squareFitAction: false,\n// actionMask: false,\n// actionSize: undefined, actionWidth: undefined, actionHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\nalign: undefined,  // 'left' | 'top' | 'right' | 'bottom' | 'center\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n}, creators);\n</code></pre> <ul> <li><code>background</code> : <ul> <li>States-round-rectangle</li> <li>Nine-slice <pre><code>{\nkey: ,\nframe: ,\nleftWidth: , rightWidth: ,\ntopHeight: , bottomHeight: }\n</code></pre></li> </ul> </li> <li><code>icon</code> : <ul> <li>States-Image</li> </ul> </li> <li><code>text</code> : <ul> <li>States-Text, default type of game object.    <pre><code>{\n// $type: 'text',\n// more style setting...\n}\n</code></pre></li> <li>Style of bbcodetext <pre><code>{\n// $type: 'bbcodetext',  // or 'bbcode'\n// more style setting...\n}\n</code></pre></li> <li>Style of bitmaptext     <pre><code>{\n// $type: 'bitmaptext',  // or 'bitmap'\nkey: '',\nsize: undefined,\ncolor: undefined,\n}\n</code></pre></li> </ul> </li> <li><code>wrapText</code> : Enable WrapExpandText feature.<ul> <li><code>false</code>, <code>0</code> : No WrapExpandText feature. Default behavior.</li> <li><code>true</code>, <code>1</code>, <code>'word'</code> : Word WrapExpandText.</li> <li><code>2</code>, <code>'char'</code> : Character WrapExpandText.</li> </ul> </li> <li><code>action</code> : <ul> <li>States-Image</li> </ul> </li> <li><code>creators</code> : A series of callback to create background, text, icon, action icon game object.<ul> <li><code>creators.background</code> : Callback to create background. Default behavior is creating a states round rectangle.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.text</code> : Callback to create text. Default behavior is creating a bbcodetext.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.icon</code> : Callback to create icon. Default behavior is creating a image.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> <li><code>creators.action</code> : Callback for creating action-icon. Default behavior is creating a image.     <pre><code>function(scene, config)  {\nreturn gameObject;\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyLabel extends RexPlugins.UI.SimpleLabel {\nconstructor(scene, config, creators) {\nsuper(scene, config, creators);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyLabel(scene, config, creators);\n</code></pre></li> </ul>"},{"location":"ui-simplelabel/#reset-display-content","title":"Reset display content","text":"<p>See label</p>"},{"location":"ui-simplelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-simplelabel/#set-state","title":"Set state","text":"<p>Override/restore properties of background game object.</p> <p>Note</p> <p>Assume that background game object is states round rectangle game object.)</p>"},{"location":"ui-simplelabel/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>label.setActiveState();\n// label.setActiveState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>label.setActiveState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>label.setHoverState();\n// label.setHoverState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>label.setHoverState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>label.setDisableState();\n// label.setDisableState(true);\n</code></pre><ul> <li>Override properties of background declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable disable state     <pre><code>label.setDisableState(false);\n</code></pre><ul> <li>Restore properties of background.</li> </ul> </li> </ul>"},{"location":"ui-simplelabel/#other-properties","title":"Other properties","text":"<p>See label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-sizer/","title":"Sizer","text":""},{"location":"ui-sizer/#introduction","title":"Introduction","text":"<p>Layout children game objects.</p> <p>It is inspired from wxSizer.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-sizer/#live-demos","title":"Live demos","text":"<ul> <li>Nested sizer</li> <li>Proportion</li> <li>DOM child</li> <li>More nested sizer</li> <li>Set children interactive</li> <li>Drag drop child</li> </ul>"},{"location":"ui-sizer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-sizer/#install-plugin","title":"Install plugin","text":""},{"location":"ui-sizer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.sizer(config);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = scene.rexUI.add.sizer(config);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var sizer = new Sizer(scene, config);\nscene.add.existing(sizer);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#add-sizer-object","title":"Add sizer object","text":"<pre><code>var sizer = scene.rexUI.add.sizer({\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, {\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n\n// width: undefined,\n// height: undefined,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, width, height, {\norientation: 0,\n// rtl: false,\n// startChildIndex: 0,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <p>or</p> <pre><code>var sizer = scene.rexUI.add.sizer(x, y, width, height, orientation, {\n// rtl: false,\n// startChildIndex: 0,\n// anchor: undefined,\n// space: { left: 0, right:0, top:0, bottom:0, item:0 }\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the sizer.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right. Default value is <code>0</code>.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom.</li> </ul> </li> <li><code>rtl</code> :     <ul> <li><code>false</code> : Layout children from left to right. Default behavior.</li> <li><code>true</code> : Layout children from right to left.</li> </ul> </li> <li><code>startChildIndex</code> : A number, start index of first layout child. Default value is <code>0</code>.</li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.item</code> : Space between 2 children game objects.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySizer extends RexPlugins.UI.Sizer {\nconstructor(scene, x, y, minWidth, minHeight, orientation, config) {\nsuper(scene, x, y, minWidth, minHeight, orientation, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var sizer = new MySizer(scene, x, y, minWidth, minHeight, orientation);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#add-background","title":"Add background","text":"<pre><code>sizer.addBackground(child);\n</code></pre> <p>or</p> <pre><code>sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);\n</code></pre> <ul> <li><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> : Extra padded space. Default is 0.</li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#add-child","title":"Add child","text":"<p>Add a game obejct to sizer</p> <pre><code>sizer.add(child);\n</code></pre> <p>or</p> <pre><code>sizer.add(child,\n{\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nindex: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or</p> <pre><code>sizer.add(child, proportion, align, padding, expand, key, index);\n// sizer.add(child, proportion, align, padding, expand, key, index);\n</code></pre> <ul> <li><code>child</code> : A game object.</li> <li><code>proportion</code> :<ul> <li><code>0</code>, or <code>'min'</code> : Place next game object closely. Default value.</li> <li><code>&gt; 0</code> : Stretch game object via proportion value.</li> <li><code>null</code> : Don't arrange this child.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> <li><code>padding</code> : Extra padded space. Default is 0.<ul> <li>A number for left/right/top/bottom bounds,</li> <li>Or a plain object.     <pre><code>{\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0\n}\n</code></pre></li> </ul> </li> <li><code>expand</code> : Set <code>true</code> to<ul> <li>Expand height when <code>orientation</code> is <code>0</code> (<code>left-to-right</code>), or</li> <li>Expand width when <code>orientation</code> is <code>1</code> (<code>top-to-bottom</code>)</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>sizer.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> <li><code>index</code> : Insert child to.<ul> <li><code>undefined</code> : Insert child at last.</li> </ul> </li> <li><code>minWidth</code> : Minimum width of normal (non-sizer) game object, used when      <code>orientation</code> is <code>x</code>, and <code>proportion</code> is not <code>0</code>, or      <code>orientation</code> is <code>y</code>, and <code>expand</code> is <code>true</code><ul> <li>Default value is current display width.</li> </ul> </li> <li><code>minHeight</code> : Minimum height of normal (non-sizer) game object, used when      <code>orientation</code> is <code>y</code>, and <code>proportion</code> is not <code>0</code>, or     <code>orientation</code> is <code>x</code>, and <code>expand</code> is <code>true</code><ul> <li>Default value is current display height.</li> </ul> </li> <li><code>fitRatio</code> : Resize child to fit sizer height/width before layout children, when <code>proportion</code> is set to <code>0</code>.<ul> <li><code>0</code> : Ignore this feature. Default behavior.</li> <li><code>&gt; 0</code> : Fit ratio (width/height). <code>1</code> is square.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#insert-child","title":"Insert child","text":"<pre><code>sizer.insert(index, child, {\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insert(index, child, proportion, align, padding, expand, key);\n</code></pre>"},{"location":"ui-sizer/#insert-at-position","title":"Insert at position","text":"<pre><code>sizer.insertAtPosition(x, y, child, {\nproportion: 0,\nalign: 'center',\npadding: {left: 0, right: 0, top: 0, bottom: 0},\nexpand: false,\nkey: undefined,\nminWidth: undefined,\nminHeight: undefined,\nfitRatio: 0,\n}\n);\n</code></pre> <p>or </p> <pre><code>sizer.insertAtPosition(x, y, index, child, proportion, align, padding, expand, key);\n</code></pre>"},{"location":"ui-sizer/#add-space","title":"Add space","text":"<ul> <li>Add a stretchable space.     <pre><code>sizer.addSpace();\n// sizer.addSpace(proportion);\n</code></pre></li> <li>Insert a stretchable space.     <pre><code>sizer.insertSpace(index);\n// sizer.insertSpace(index, proportion);\n</code></pre></li> </ul>"},{"location":"ui-sizer/#layout-children","title":"Layout children","text":"<p>Arrange position of all children.</p> <pre><code>sizer.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-sizer/#remove-child","title":"Remove child","text":"<ul> <li>Remove a child     <pre><code>sizer.remove(child);\n</code></pre></li> <li>Remove and destroy a child     <pre><code>sizer.remove(child, true);\n</code></pre></li> <li>Remove all children     <pre><code>sizer.removeAll();\n</code></pre></li> <li>Remove and destroy all children     <pre><code>sizer.removeAll(true);\n</code></pre></li> <li>Remove all children and backgrounds     <pre><code>sizer.clear();\n</code></pre></li> <li>Remove and destroy all children and backgrounds     <pre><code>sizer.clear(true);\n</code></pre></li> <li>Remove from parent sizer     <pre><code>sizer.removeFromParentSizer();\n</code></pre></li> </ul>"},{"location":"ui-sizer/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>All children items     <pre><code>var items = sizer.getElement('items');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = sizer.getElement('#' + name);\n// var gameObject = sizer.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = sizer.getByName(name);\n// var gameObject = sizer.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-sizer/#rtl","title":"RTL","text":"<ul> <li>Set rtl in config of constructor</li> <li>Set rtl : <code>sizer.setRTL(enable)</code></li> <li>Get rtl : <code>var rtl = sizer.rtl</code></li> </ul>"},{"location":"ui-sizer/#alignment-of-child","title":"Alignment of child","text":"<ul> <li>Set alignment of child in config of adding child</li> <li>Set alignment of child : <code>sizer.setChildAlign(child, align)</code><ul> <li><code>align</code> :<ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> <li><code>'top'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at top-center.</li> <li><code>'bottom'</code>, or <code>Phaser.Display.Align.BOTTOM_CENTER</code> : Align game object at bottom-center.</li> </ul> </li> </ul> </li> <li>Get alignment of child : <code>var align = sizer.getChildAlign(child)</code></li> </ul>"},{"location":"ui-sizer/#proportion-of-child","title":"Proportion of child","text":"<ul> <li>Set proportion of child in config of adding child</li> <li>Set proportion of child : <code>sizer.setChildProportion(child, proportion)</code></li> <li>Get proportion of child : <code>var align = sizer.getChildProportion(child)</code></li> </ul>"},{"location":"ui-sizer/#expand-of-child","title":"Expand of child","text":"<ul> <li>Set expand of child in config of adding child</li> <li>Set expand of child : <code>sizer.setChildExpand(child, expand)</code></li> <li>Get expand of child : <code>var expand = sizer.getChildExpand(child)</code></li> </ul>"},{"location":"ui-sizer/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite.</p>"},{"location":"ui-slider/","title":"Slider","text":""},{"location":"ui-slider/#introduction","title":"Introduction","text":"<p>A container with a track, indicator, thumb and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-slider/#live-demos","title":"Live demos","text":"<ul> <li>Slider bar</li> <li>Color picker</li> <li>Crop resize</li> <li>Gap</li> </ul>"},{"location":"ui-slider/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-slider/#install-plugin","title":"Install plugin","text":""},{"location":"ui-slider/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add slider object     <pre><code>var slider = scene.rexUI.add.slider(config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add slider object     <pre><code>var slider = scene.rexUI.add.slider(config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Slider } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add slider object     <pre><code>var slider = new Slider(scene, config);\nscene.add.existing(slider);\n</code></pre></li> </ul>"},{"location":"ui-slider/#add-slider-object","title":"Add slider object","text":"<pre><code>var slider = scene.rexUI.add.slider({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\nreverseAxis: false,\n\nbackground: backgroundGameObject,\n/* \n    background: { \n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\ntrack: trackGameObject,\n/* \n    track: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */    indicator: indicatorGameObject,\n/* \n    indicator: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\nthumb: thumbGameObject,\n/* \n    thumb: { \n        width: 1, height: 1,\n        radius: 0, \n        color: undefined, alpha: 1,\n        strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n        shape: undefined\n    }\n    */\n\ninput: 'drag',\n\nvalue: 0,\ngap: undefined,\neaseValue: {\nduration: 0,\nease: 'Linear'\n},    valuechangeCallback: function(newValue, oldValue, slider) {\n},\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n\nenable: true,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Horizontal slider.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Vertical slider.</li> </ul> </li> <li><code>reverseAxis</code> : <ul> <li><code>false</code> : Map left/top to <code>0</code>, and right/bottom to <code>1</code>. Default behavior.</li> <li><code>true</code> : Map left/top to <code>1</code>, and right/bottom to <code>0</code>.</li> </ul> </li> <li><code>background</code> : <ul> <li>Game object of background, optional. This background game object will be resized to fit the size of slider.</li> <li>A plain object to create round rectangle shape <pre><code>{ radius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>track</code> : <ul> <li>Game object of track, optional. This track game object will be resized to fit the size of slider, with space.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>indicator</code> : <ul> <li>Game object of indicator, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>thumb</code> : <ul> <li>Game object of thumb, optional.</li> <li>A plain object to create round rectangle shape <pre><code>{ width: 1, height: 1,\nradius: 0, color: undefined, alpha: 1,\nstrokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\nshape: undefined\n}\n</code></pre></li> </ul> </li> <li><code>input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>value</code> : Initial value (0 ~ 1).</li> <li><code>gap</code> : Snap a value to nearest grid slice, using rounding.<ul> <li><code>undefined</code> : Disalbe this feature.</li> </ul> </li> <li><code>easeValue</code> : Easing value when <code>input</code> is <code>'click'</code>.<ul> <li><code>easeValue.duration</code> : Duration of value easing, default is <code>0</code> (no easing).</li> <li><code>easeValue.ease</code> : Ease function, default is <code>'Linear'</code>.</li> </ul> </li> <li><code>valuechangeCallback</code> : callback function when value changed.     <pre><code>function(newValue, oldValue, slider) {\n}\n</code></pre></li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>enable</code> : Set <code>false</code> to disable controlling.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-slider/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MySlider extends RexPlugins.UI.Slider {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var slider = new MySlider(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-slider/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>slider.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-slider/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = slider.getElement('background');\n</code></pre></li> <li>Track game object     <pre><code>var track = slider.getElement('track');\n</code></pre></li> <li>Indicator game object     <pre><code>var track = slider.getElement('indicator');\n</code></pre></li> <li>Thumb track game object     <pre><code>var action = slider.getElement('thumb');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = slider.getElement('#' + name);\n// var gameObject = slider.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = slider.getByName(name);\n// var gameObject = slider.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-slider/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = slider.enable;\n</code></pre></li> <li>Set     <pre><code>slider.setEanble(enable);\n</code></pre>     or     <pre><code>slider.enable = enable;\n</code></pre></li> </ul>"},{"location":"ui-slider/#value","title":"Value","text":"<p>Change value will also change the position of slider thumb and width of slider indicator.</p> <ul> <li>Get value     <pre><code>var value = slider.getValue(min, max); // value : min ~ max\n</code></pre>     or     <pre><code>var value = slider.getValue(); // value: 0 ~ 1\n</code></pre>     or     <pre><code>var value = slider.value; // value: 0 ~ 1\n</code></pre></li> <li>Set value     <pre><code>slider.setValue(value, min, max); // value: min ~ max\n</code></pre>     or     <pre><code>slider.setValue(value); // value: 0 ~ 1\n</code></pre>     or     <pre><code>slider.value = value; // value: 0 ~ 1\n</code></pre></li> <li>Increase value     <pre><code>slider.addValue(inc, min, max); // inc: min ~ max\n</code></pre>     or     <pre><code>slider.addValue(inc); // inc: 0 ~ 1\n</code></pre>     or     <pre><code>slider.value += inc; // inc: 0 ~ 1\n</code></pre></li> </ul>"},{"location":"ui-slider/#ease-value","title":"Ease value","text":"<ul> <li>Ease value to     <pre><code>slider.easeValueTo(value, min, max);  // value: min ~ max\n</code></pre>     or     <pre><code>slider.easeValueTo(value);  // value: 0 ~ 1\n</code></pre></li> <li>Stop ease     <pre><code>slider.stopEaseValue();\n</code></pre></li> <li>Set ease duration     <pre><code>slider.setEaseValueDuration(duration);\n</code></pre></li> <li>Set ease function     <pre><code>slider.setEaseValueFunction(ease);\n</code></pre><ul> <li><code>ease</code> : Ease function.</li> </ul> </li> </ul>"},{"location":"ui-slider/#gap","title":"Gap","text":"<ul> <li>Set     <pre><code>slider.setGap(gap);  // gap: 0~1\n</code></pre>     or     <pre><code>slider.setGap(gap, min, max);  // gap: min~max\n</code></pre></li> <li>Get     <pre><code>var gap = slider.gap;  // gap: 0~1\n</code></pre></li> </ul>"},{"location":"ui-slider/#events","title":"Events","text":"<ul> <li>On value changed     <pre><code>slider.on('valuechange', function(newValue, oldValue, slider){\n//\n}, scope);\n</code></pre></li> <li>On input start     <pre><code>slider.on('inputstart', function(pointer) {\n\n}, scope);\n</code></pre></li> <li>On input end     <pre><code>slider.on('inputend', function(pointer) {\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-slider/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-statesimage/","title":"States image","text":""},{"location":"ui-statesimage/#introduction","title":"Introduction","text":"<p>Using plain object to create image game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statesimage/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statesimage/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statesimage/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add image object     <pre><code>var image = scene.rexUI.add.statesImage(config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesImage } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var image = new StatesImage(scene, config);\nscene.add.existing(image);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#create-image-object","title":"Create image object","text":"<pre><code>var image = scene.rexUI.add.statesImage({\nx: 0,\ny: 0,\nkey:\n// frame:\n// tint: 0xffffff,\n// alpha: 1,\n// scale: 1,\n\n// Style override in active state\n// 'active.key': undefined,\n// 'active.frame': undefined,\n// 'active.tint': undefined,\n// 'active.alpha': undefined,\n// 'active.scale': undefined,\n\n// Style override in hover state\n// 'hover.key': undefined,\n// 'hover.frame': undefined,\n// 'hover.tint': undefined,\n// 'hover.alpha': undefined,\n// 'hover.scale': undefined,\n\n// Style override in disable state\n// 'disable.key': undefined,\n// 'disable.frame': undefined,\n// 'disable.tint': undefined,\n// 'disable.alpha': undefined,\n// 'disable.scale': undefined,\n\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>key</code>, <code>frame</code> : Texture.</li> <li><code>'active.key'</code>, <code>'active.frame'</code>, <code>'active.tint'</code>, <code>'active.alpha'</code>, <code>'active.scale'</code>, ... ect : Override these properties in active state</li> <li><code>'hover.key'</code>, <code>'hover.frame'</code>, <code>'hover.tint'</code>, <code>'hover.alpha'</code>, <code>'hover.scale'</code>, ... ect : Override these properties in hover state</li> <li><code>'disable.key'</code>, <code>'disable.frame'</code>, <code>'disable.tint'</code>, <code>'disable.alpha'</code>, <code>'disable.scale'</code>, ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statesimage/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStatesImage extends RexPlugins.UI.StatesImage {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var image = new MyStatesImage(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statesimage/#set-state","title":"Set state","text":""},{"location":"ui-statesimage/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>image.setActiveState();\n// image.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>image.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>image.setHoverState();\n// image.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>image.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>image.setDisableState();\n// image.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>image.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesimage/#other-properties","title":"Other properties","text":"<p>See Image, game object</p>"},{"location":"ui-statesroundrectangle/","title":"States round rectangle","text":""},{"location":"ui-statesroundrectangle/#introduction","title":"Introduction","text":"<p>Using plain object to create round rectangle game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statesroundrectangle/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statesroundrectangle/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statesroundrectangle/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add round-rectangle object     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add round-rectangle object     <pre><code>var rect = scene.rexUI.add.statesRoundRectangle(config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesRoundRectangle } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var rect = new StatesRoundRectangle(scene, config);\nscene.add.existing(roundRectangle);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#create-shape-object","title":"Create shape object","text":"<pre><code>var rect = scene.rexUI.add.statesRoundRectangle({\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\n// color: 0xffffff,\n// alpha: 1,\n// strokeColor: 0xffffff,\n// strokeAlpha: 1,\n// strokeWidth: 2,\n// radius: 0,\n\n// Style override in active state\n// 'active.color': undefined,\n// 'active.alpha': undefined,\n// 'active.strokeColor': undefined,\n// 'active.strokeAlpha': undefined,\n// 'active.strokeWidth': undefined,\n// 'active.radius': undefined,\n// 'active.xxx': ...\n\n// Style override in hover state\n// 'hover.color': undefined,\n// 'hover.alpha': undefined,\n// 'hover.strokeColor': undefined,\n// 'hover.strokeAlpha': undefined,\n// 'hover.strokeWidth': undefined,\n// 'hover.radius': undefined,\n// 'hover.xxx': ...\n\n// Style override in disable state\n// 'disable.color': undefined,\n// 'disable.alpha': undefined,\n// 'disable.strokeColor': undefined,\n// 'disable.strokeAlpha': undefined,\n// 'disable.strokeWidth': undefined,\n// 'disable.radius': undefined,\n// 'disable.xxx': ...\n\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>radius</code> : Radius of four corners.<ul> <li><code>0</code>, or <code>undefined</code> : Disable round corner.</li> <li>Number: 4 corners with the same radius.</li> <li>JSON<ul> <li>4 corners with the same radius X/Y     <pre><code>{\nx: radiusX,\ny: radiusY\n}\n</code></pre></li> <li>Eeach radius of corner     <pre><code>{\ntl: radius,\ntr: radius,\nbl: radius,\nbr: radius\n}\n</code></pre>     or     <pre><code>{\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n}\n</code></pre></li> <li>Radius and iteration     <pre><code>{\nradius: radius,\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {x: radiusX, y: radiusY},\niteration: 0\n}\n</code></pre>     or     <pre><code>{\nradius: {\ntl: {x : radiusX, y: radiusY},\ntr: {x : radiusX, y: radiusY},\nbl: {x : radiusX, y: radiusY},\nbr: {x : radiusX, y: radiusY},\n},\niteration: 0\n}\n</code></pre><ul> <li><code>radius</code> : <ul> <li><code>0</code>  : No round corner</li> <li><code>&gt; 0</code> : Convex round corner</li> <li><code>&lt; 0</code> : Concave round corner</li> </ul> </li> <li><code>iteration</code> : Number of interpolation points in each round corner. Default value is <code>4</code>.<ul> <li><code>0</code> : Draw a straight line instead of arc.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><code>'active.color'</code>, <code>'active.alpha'</code>, <code>'active.strokeColor'</code>, <code>'active.strokeAlpha'</code>, <code>'active.strokeWidth'</code>, <code>'active.radius'</code>, <code>'active.xxx'</code>, ... ect : Override these properties in active state</li> <li><code>'hover.color'</code>, <code>'hover.alpha'</code>, <code>'hover.strokeColor'</code>, <code>'hover.strokeAlpha'</code>, <code>'hover.strokeWidth'</code>, <code>'hover.radius'</code>, <code>'hover.xxx'</code>, ... ect : Override these properties in hover state</li> <li><code>'disable.color'</code>, <code>'disable.alpha'</code>, <code>'disable.strokeColor'</code>, <code>'disable.strokeAlpha'</code>, <code>'disable.strokeWidth'</code>, <code>'disable.radius'</code>, <code>'disable.xxx'</code>, ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statesroundrectangle/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyRoundRectangle extends RexPlugins.UI.StatesRoundRectangle {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var rect = new MyRoundRectangle(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statesroundrectangle/#set-state","title":"Set state","text":""},{"location":"ui-statesroundrectangle/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>rect.setActiveState();\n// rect.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>rect.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>rect.setHoverState();\n// rect.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>rect.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>rect.setDisableState();\n// rect.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>rect.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statesroundrectangle/#other-properties","title":"Other properties","text":"<p>See Round rectangle, game object</p>"},{"location":"ui-statestext/","title":"States text","text":""},{"location":"ui-statestext/#introduction","title":"Introduction","text":"<p>Using plain object to create text game object, with active, hover, disable styles.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-statestext/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-statestext/#install-plugin","title":"Install plugin","text":""},{"location":"ui-statestext/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text object     <pre><code>var txt = scene.rexUI.add.statesText(config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { StatesText } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add sizer object     <pre><code>var txt = new StatesText(scene, config);\nscene.add.existing(txt);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#create-text-object","title":"Create text object","text":"<pre><code>var txt = scene.rexUI.add.statesText({\nx: 0,\ny: 0,\n\n// Normal text-style\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},\nalign: 'left',  // 'left'|'center'|'right'|'justify'\npadding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\nmaxLines: 0,\nlineSpacing: 0,\nfixedWidth: 0,\nfixedHeight: 0,\nrtl: false,\ntestString: '|M\u00c9qgy',\nwordWrap: {\nwidth: null,\ncallback: null,\ncallbackScope: null,\nuseAdvancedWrap: false\n},\nmetrics: false,\n// metrics: {\n//     ascent: 0,\n//     descent: 0,\n//     fontSize: 0\n// },\n\n// Style override in active state\n'active.fontFamily': undefined,\n'active.fontSize': undefined,\n'active.fontStyle': undefined,\n'active.backgroundColor': undefined,\n'active.color': undefined,\n'active.fill': undefined,\n'active.stroke': undefined,\n'active.strokeThickness': undefined,\n\n// Style override in hover state\n'hover.fontFamily': undefined,\n'hover.fontSize': undefined,\n'hover.fontStyle': undefined,\n'hover.backgroundColor': undefined,\n'hover.color': undefined,\n'hover.fill': undefined,\n'hover.stroke': undefined,\n'hover.strokeThickness': undefined,\n\n// Style override in disable state\n'disable.fontFamily': undefined,\n'disable.fontSize': undefined,\n'disable.fontStyle': undefined,\n'disable.backgroundColor': undefined,\n'disable.color': undefined,\n'disable.fill': undefined,\n'disable.stroke': undefined,\n'disable.strokeThickness': undefined,\n});\n</code></pre> <ul> <li><code>width</code>, <code>height</code> : Size of rectangle.<ul> <li><code>undefined</code> : Set ot <code>undefined</code> to draw a circle.</li> </ul> </li> <li><code>key</code>, <code>frame</code> : Texture.</li> <li><code>'active.fontFamily'</code>, <code>'active.fontSize'</code>, <code>'active.fontStyle'</code>, <code>'active.backgroundColor'</code>, <code>'active.color'</code>,  <code>'active.fill'</code>, <code>'active.stroke'</code>, <code>'active.strokeThickness'</code> ... ect : Override these properties in active state</li> <li><code>'hover.fontFamily'</code>, <code>'hover.fontSize'</code>, <code>'hover.fontStyle'</code>, <code>'hover.backgroundColor'</code>, <code>'hover.color'</code>,  <code>'hover.fill'</code>, <code>'hover.stroke'</code>, <code>'hover.strokeThickness'</code> ... ect : Override these properties in hover state</li> <li><code>'disable.fontFamily'</code>, <code>'disable.fontSize'</code>, <code>'disable.fontStyle'</code>, <code>'disable.backgroundColor'</code>, <code>'disable.color'</code>,  <code>'disable.fill'</code>, <code>'disable.stroke'</code>, <code>'disable.strokeThickness'</code> ... ect : Override these properties in disable state</li> </ul>"},{"location":"ui-statestext/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyStatesText extends RexPlugins.UI.StatesText {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var txt = new MyStatesText(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-statestext/#set-state","title":"Set state","text":""},{"location":"ui-statestext/#active-state","title":"Active state","text":"<ul> <li>Enable active state     <pre><code>txt.setActiveState();\n// txt.setActiveState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'active.'</code> parameters.    </li> </ul> </li> <li>Disable active state     <pre><code>txt.setActiveState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#hover-state","title":"Hover state","text":"<ul> <li>Enable active state     <pre><code>txt.setHoverState();\n// txt.setHoverState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'hover.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>txt.setHoverState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#disable-state","title":"Disable state","text":"<ul> <li>Enable disable state     <pre><code>txt.setDisableState();\n// txt.setDisableState(true);\n</code></pre><ul> <li>Override properties declared in config with prefix <code>'disable.'</code> parameters</li> </ul> </li> <li>Disable active state     <pre><code>txt.setDisableState(false);\n</code></pre><ul> <li>Restore properties.</li> </ul> </li> </ul>"},{"location":"ui-statestext/#other-properties","title":"Other properties","text":"<p>See Text, game object</p>"},{"location":"ui-tabpages/","title":"Tab pages","text":""},{"location":"ui-tabpages/#introduction","title":"Introduction","text":"<p>A container with tabs and pages, only current page is visible.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tabpages/#live-demos","title":"Live demos","text":"<ul> <li>Tabpage</li> </ul>"},{"location":"ui-tabpages/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tabpages/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tabpages/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = scene.rexUI.add.tabPages(config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = scene.rexUI.add.tabPages(config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TabPages } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tab-pages object     <pre><code>var tabPages = new TabPages(scene, config);\nscene.add.existing(tabPages);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#add-tab-pages-object","title":"Add tab-pages object","text":"<pre><code>var tabPages = scene.rexUI.add.tabPages({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// background: backgroundGameObject,\n\ntabPosition: 'top',\nwrapTabs: false,\ntabs: {\n// width:\n// height:\n// rtl:\n\n// background: backgroundGameObject,\nexpand:\nalign:\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n},\nspace: { left: 0, right:0, top:0, bottom:0, item:0 }\n},\n\npages: {\nspace: { left: 0, right:0, top:0, bottom:0 },\nfadeIn: 0,\n},\n\nexpand: {\ntabs: false,\n},\n\nalign: {\ntabs: 'left',\n},\n\n// space: { left:0, right:0, top:0, bottom:0, item:0 },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>tabPosition</code> : Put tabs at top, bottom, left, right of pages.<ul> <li><code>'top'</code>, <code>'bottom'</code>, <code>'left'</code>, <code>'right'</code> : Default value is <code>'top'</code>.</li> </ul> </li> <li><code>wrapTabs</code> :<ul> <li><code>false</code> : Uses Buttons as Tabs, default behavior.</li> <li><code>true</code> : <ul> <li>Using FixWidthButtons as Tabs, if <code>tabPosition</code> is <code>'top'</code> or <code>'bottom'</code>. </li> <li>Using Buttons as Tabs, if <code>tabPosition</code> is <code>'left'</code> or <code>'right'</code> </li> </ul> </li> </ul> </li> <li><code>tabs</code> : Configuration of tabs, which is a buttons game object.<ul> <li><code>tabs.width</code>, <code>tabs.height</code> : Minimum width, minimum height of tabs, to preserve space if tabs is empty, optional.</li> <li><code>tabs.rtl</code> : <ul> <li><code>true</code> : Layout buttons from right to left.</li> <li><code>false</code> : Layout buttons from left to right. Default behavior.</li> </ul> </li> <li><code>tabs.background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>tabs.space</code> : <ul> <li><code>tabs.space.top</code>, <code>tabs.space.bottom</code>, <code>tabs.space.left</code>, <code>tabs.space.right</code> : Padding around bottons.</li> <li><code>tabs.space.item</code> : Space between 2 button game objects.</li> </ul> </li> <li><code>tabs.expand</code> : Set <code>true</code> to expand width, or height of tabs game objects.  </li> <li><code>tabs.click</code>: Configuration of button clicking.<ul> <li><code>tabs.click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>tabs.click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> </ul> </li> <li><code>pages</code> : Configuration of pages<ul> <li><code>pages.space</code> : Pads spaces.<ul> <li><code>pages.space.left</code>, <code>pages.space.right</code>, <code>pages.space.top</code>, <code>pages.space.bottom</code> : Space of bounds.</li> </ul> </li> <li><code>pages.fadeIn</code> : Fade-in duration of current page.<ul> <li><code>0</code> : No fade-in effect. Default behavior.</li> </ul> </li> </ul> </li> <li><code>expand</code> :<ul> <li><code>expand.tabs</code> : Set <code>true</code> to expand width/height of tabs. Default value is <code>false</code>.</li> </ul> </li> <li><code>align</code> :<ul> <li><code>align.tabs</code> :  <ul> <li><code>'left'</code>. <code>'right'</code>, <code>'center'</code> : Align tabs to left/right/center side when <code>tabPosition</code> is <code>'top'</code> or <code>'bottom'</code>.</li> <li><code>'top'</code>. <code>'bottom'</code>, <code>'center'</code> : Align tabs to top/bottom/center side when <code>tabPosition</code> is <code>'left'</code> or <code>'right'</code>.</li> </ul> </li> </ul> </li> <li><code>space</code> :<ul> <li>An object: Padding of button game objects.<ul> <li><code>space.top</code>, <code>space.bottom</code>, <code>space.left</code>, <code>space.right</code> : Padding around bottons.</li> <li><code>space.item</code> : Space between tabs and pages.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tabpages/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTabPages extends RexPlugins.UI.TabPages {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tabPages = new MyTabPages(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#add-page","title":"Add page","text":"<p>Add a tab/page to last of tabs/pages.</p> <pre><code>tabPages.addPage(key, tabGameObject, pageGameObject).layout();\n</code></pre> <p>or </p> <pre><code>tabPages.addPage({\n// key: undefined,\ntab: tabGameObject,\npage: pageGameObject\n}).layout();\n</code></pre> <ul> <li><code>key</code> : Unique string name of this page.<ul> <li><code>undefined</code> : Create an UUID for key.</li> </ul> </li> <li><code>tab</code> : A game object, will put it into tabs.</li> <li><code>page</code> : A game object, will put it into pages.</li> </ul> <p>Note</p> <p>Invoke <code>tabPages.layout()</code> after adding pages.</p>"},{"location":"ui-tabpages/#swap-to-page","title":"Swap to page","text":"<ul> <li>Swap to related page when clicking tab.</li> <li>Swap to page by key/index     <pre><code>tabPages.swapPage(key);\n</code></pre> <pre><code>tabPages.swapPage(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> <li>Swap to first page     <pre><code>tabPages.swapFirstPage();\n</code></pre></li> <li>Swap to last page     <pre><code>tabPages.swapLastPage();\n</code></pre></li> <li>Swap page without fade-in transition     <pre><code>tabPages.swapPage(key, 0);\n</code></pre> <pre><code>tabPages.swapPage(index, 0);\n</code></pre> <pre><code>tabPages.swapFirstPage(0);\n</code></pre> <pre><code>tabPages.swapLastPage(0);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#remove-page","title":"Remove page","text":"<ul> <li>Remove page     <pre><code>tabPages.removePage(key);\n</code></pre> <pre><code>tabPages.removePage(index);\n</code></pre></li> <li>Remove and destroy page     <pre><code>tabPages.removePage(key, true);\n</code></pre> <pre><code>tabPages.removePage(index, true);\n</code></pre></li> </ul>"},{"location":"ui-tabpages/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Pages <pre><code>var gameObject = tabPages.getElement('pages');\n</code></pre></li> <li>Tabs, a buttons <pre><code>var gameObject = tabPages.getElement('tabs');\n</code></pre></li> <li>Page by key/index     <pre><code>var gameObject = tabPages.getPage(key);\n</code></pre> <pre><code>var gameObject = tabPages.getPage(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> <li>Tab by key/index     <pre><code>var gameObjects = tabPages.getTab(key);\n</code></pre> <pre><code>var gameObjects = tabPages.getTab(index);\n</code></pre><ul> <li><code>key</code> : Unique string name of the page.</li> <li><code>index</code> : Index number in tabs.</li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tabPages.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tabPages.getByName(name);\n// var gameObject = tabPages.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tabpages/#other-properties","title":"Other properties","text":"<p>See base sizer object, container-lite, Pages, Buttons</p>"},{"location":"ui-tabpages/#events","title":"Events","text":"<ul> <li>When swapping to a page by clicking tab, or <code>tabPages.swapPage(key)</code> <pre><code>pages.on('tab.focus', function(tab, key) {\n// ...\n}, scope);\npages.on('page.focus', function(page, key) {\n// ...\n}, scope);\n</code></pre> <pre><code>pages.on('tab.blur', function(tab, key) {\n// ...\n}, scope);\npages.on('page.blur', function(page, key) {\n// ...\n}, scope);    </code></pre><ul> <li><code>tab</code> : Game object of tab.</li> <li><code>page</code> : Game object of page.</li> <li><code>key</code> : Unique string name of the page.</li> </ul> </li> </ul>"},{"location":"ui-tabs/","title":"Tabs","text":""},{"location":"ui-tabs/#introduction","title":"Introduction","text":"<p>A container with 4 groups of buttons around a center panel.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tabs/#live-demos","title":"Live demos","text":"<ul> <li>Tabs</li> </ul>"},{"location":"ui-tabs/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tabs/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tabs/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = scene.rexUI.add.tabs(config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = scene.rexUI.add.tabs(config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tabs } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tabs object     <pre><code>var tabs = new Tabs(scene, config);\nscene.add.existing(tabs);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#add-tabs-object","title":"Add Tabs object","text":"<pre><code>var tabs = scene.rexUI.add.tabs({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\npanel: panelGameObject,\n\nleftButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nrightButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\ntopButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nbottomButtons: [\nbuttonGameObject,\nbuttonGameObject,\n// ...\n],\nleftButtonsBackground: leftButtonsBackgroundGameObject,\nrightButtonsBackground: rightButtonsBackgroundGameObject,\ntopButtonsBackground: topButtonsBackgroundGameObject,\nbottomButtonsBackground: bottomButtonsBackgroundGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nleftButtonsOffset: 0,\nrightButtonsOffset: 0,\ntopButtonsOffset: 0,\nbottomButtonsOffset: 0,\n\nleftButton: 0,\nrightButton: 0,\ntopButton: 0,\nbottomButton: 0\n},\n\nclick: {\nmode: 'pointerup',\nclickInterval: 100\n}\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of grid table.</li> <li><code>panel</code> : Game object of center panel.</li> <li><code>leftButtons</code>, <code>rightButtons</code>, <code>topButtons</code>, <code>bottomButtons</code> : Array of button game object.<ul> <li><code>[]</code> : Assign an empty array if user will add button later.</li> </ul> </li> <li><code>leftButtonsBackground</code>, <code>rightButtonsBackground</code>, <code>topButtonsBackground</code>, <code>bottomButtonsBackground</code> : Game object of leftButtons' background, rightButtons' background, topButtons' background, bottomButtons' background, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.leftButtonsOffset</code>, <code>space.rightButtonsOffset</code> : Top offset of buttons group.</li> <li><code>space.topButtonsOffset</code>, <code>space.bottomButtonsOffset</code> : Left offset of buttons group.</li> <li><code>space.leftButton</code>, <code>space.rightButton</code>, <code>space.topButton</code>, <code>space.bottomButton</code> : Space between 2 button game objects.</li> </ul> </li> <li><code>click</code>: Configuration of button clicking.<ul> <li><code>click.mode</code> :<ul> <li><code>'pointerdown'</code>, <code>'press'</code>, or <code>0</code> : Fire 'click' event when touch pressed.</li> <li><code>'pointerup'</code>, <code>'release'</code>, or <code>1</code> : Fire 'click' event when touch released after pressed.</li> </ul> </li> <li><code>click.clickInterval</code> : Interval between 2 'click' events, in ms.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTabs extends RexPlugins.UI.Tabs {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tabs = new MyTabs(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tabs/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>tabs.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-tabs/#other-properties","title":"Other properties","text":"<p>See grid sizer object, base-sizer object.</p>"},{"location":"ui-tabs/#events","title":"Events","text":"<ul> <li>Click button     <pre><code>tabs.on('button.click', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Pointer-over button     <pre><code>tabs.on('button.over', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Pointer-out button     <pre><code>tabs.on('button.out', function(button, groupName, index, pointer) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> <li><code>pointer</code> : Pointer object.</li> </ul> </li> <li>Enable button's input     <pre><code>tabs.on('button.enable', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> <li>Disable button's input     <pre><code>tabs.on('button.disalbe', function(button, groupName, index) {\n// ...\n}, scope);\n</code></pre><ul> <li><code>button</code> : Triggered button game object.</li> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : Index of triggered button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#emit-button-click-event","title":"Emit button click event","text":"<ul> <li>Emit button click event in a given group     <pre><code>tabs.emitButtonClick(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Emit left/right/top/bottom button click event     <pre><code>tabs.emitLeftButtonClick(index);\ntabs.emitRightButtonClick(index);\ntabs.emitTopButtonClick(index);\ntabs.emitBottomButtonClick(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#enabledisable-input-of-button","title":"Enable/disable input of button","text":"<ul> <li>Enable button input in a given group     <pre><code>tabs.setButtonEnable(groupName, index);\n// tabs.setButtonEnable(groupName, index, true);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Enable left/right/top/bottom button     <pre><code>tabs.setLeftButtonEnable(index);\ntabs.setRightButtonEnable(index);\ntabs.setTopButtonEnable(index);\ntabs.setBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable button input in a given group     <pre><code>tabs.setButtonEnable(groupName, index, false);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Disable choice/action/toolbar/left-toolbar button's input     <pre><code>tabs.setLeftButtonEnable(index, false);\ntabs.setRightButtonEnable(index, false);\ntabs.setTopButtonEnable(index, false);\ntabs.setBottomButtonEnable(index, false);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Toggle button input in a given group     <pre><code>tabs.toggleButtonEnable(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.    </li> </ul> </li> <li>Toggle choice/action/toolbar/left-toolbar button's input     <pre><code>tabs.toggleLeftButtonEnable(index);\ntabs.toggleRightButtonEnable(index);\ntabs.toggleTopButtonEnable(index);\ntabs.toggleBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> <li>Get button input enable in a given group     <pre><code>var enabled = tabs.getButtonEnable(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object.  </li> </ul> </li> <li>Get choice/action/toolbar/left-toolbar button's input enable     <pre><code>var enabled = tabs.getLeftButtonEnable(index);\nvar enabled = tabs.getRightButtonEnable(index);\nvar enabled = tabs.getTopButtonEnable(index);\nvar enabled = tabs.getBottomButtonEnable(index);\n</code></pre><ul> <li><code>index</code> : A number index, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = tabs.getElement('background');\n</code></pre></li> <li>Panel game object     <pre><code>var panel = tabs.getElement('panel');\n</code></pre></li> <li>Buttons<ul> <li>Button game object in a group     <pre><code>var bottons = tabs.getButton(groupName, index)\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index.</li> </ul> </li> <li>Left button game object     <pre><code>var bottons = tabs.getElement('leftButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getLeftButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('leftButtons[0]');\n</code></pre><ul> <li>First button of left buttons.</li> </ul> </li> <li>Right button game object     <pre><code>var bottons = tabs.getElement('rightButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getRightButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('rightButtons[0]');\n</code></pre><ul> <li>First button of right buttons.</li> </ul> </li> <li>Top button game object     <pre><code>var bottons = tabs.getElement('topButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getTopButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('topButtons[0]');\n</code></pre><ul> <li>First button of top buttons.</li> </ul> </li> <li>Bottom button game object     <pre><code>var bottons = tabs.getElement('bottomButtons');\n</code></pre>     or     <pre><code>var botton = tabs.getBottomButton(index);\n</code></pre>     or     <pre><code>var bottons = tabs.getElement('bottomButtons[0]');\n</code></pre><ul> <li>First button of bottom buttons.</li> </ul> </li> </ul> </li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tabs.getElement('#' + name);\n// var gameObject = tabs.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tabs.getByName(name);\n// var gameObject = tabs.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#add-button","title":"Add button","text":"<ul> <li>Add button in a group     <pre><code>tabs.addButton(groupName, gameObject);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> <li>Add left/right/top/bottom button     <pre><code>tabs.addLeftButton(gameObject);\ntabs.addRightButton(gameObject);\ntabs.addTopButton(gameObject);\ntabs.addBottomButton(gameObject);\n</code></pre><ul> <li><code>gameObject</code> : A game object, or an array of game objects.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#remove-button","title":"Remove button","text":"<ul> <li>Remove a button from a group     <pre><code>tabls.removeButton(groupName, index, destroyChild);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove left/right/top/bottom button     <pre><code>tabs.removeLeftButton(index, destroyChild);\ntabs.removeRightButton(index, destroyChild);\ntabs.removeTopButton(index, destroyChild);\ntabs.removeBottomButton(index, destroyChild);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game object.</li> </ul> </li> <li>Remove all buttons of a group     <pre><code>tabls.clearButtons(groupName, destroyChild);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> <li>Remove all left/right/top/bottom buttons     <pre><code>tabs.clearLeftButtons(destroyChild);\ntabs.clearRightButtons(destroyChild);\ntabs.clearTopButtons(destroyChild);\ntabs.clearBottomButtosn(destroyChild);\n</code></pre><ul> <li><code>destroyChild</code> : Set <code>true</code> to destroy button game objects.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#showhide-button","title":"Show/hide button","text":"<p>Hidden elements won't be counted when layouting.  Call <code>tabs.layout()</code>, or <code>topSizer.layout()</code> after show/hide any button.</p> <ul> <li>Show button in a group     <pre><code>tabs.showButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Show left/right/top/bottom button     <pre><code>tabs.showLeftButton(index);\ntabs.showRightButton(index);\ntabs.showTopButton(index);\ntabs.showBottomButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide button in a group     <pre><code>tabs.hideButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> <li>Hide left/right/top/bottom button.     <pre><code>tabs.hideLeftButton(index);\ntabs.hideRightButton(index);\ntabs.hideTopButton(index);\ntabs.hideBottomButton(index);\n</code></pre><ul> <li><code>index</code> : A number index, a string name, or a button game object.</li> </ul> </li> </ul>"},{"location":"ui-tabs/#for-each-button","title":"For each button","text":"<ul> <li>For each button in a group     <pre><code>var enabled = tabs.forEachButton(groupName, index);\n</code></pre><ul> <li><code>groupName</code> : <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, or <code>'bottom'</code>.</li> <li><code>index</code> : A number index, or a button game object. </li> </ul> </li> <li>For each button in left/right/top/bottom group     <pre><code>tabs.forEachLeftButton(callback, scope);\ntabs.forEachRightButton(callback, scope);\ntabs.forEachTopButton(callback, scope);\ntabs.forEachBottomButton(callback, scope);\n</code></pre><ul> <li><code>callback</code> :      <pre><code>function(button, index, buttons) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-textarea/","title":"Text area","text":""},{"location":"ui-textarea/#introduction","title":"Introduction","text":"<p>A container with a text, slider, and scroller.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-textarea/#live-demos","title":"Live demos","text":"<ul> <li>Text-area</li> <li>Bitmap text</li> <li>Hide unscrollable slider</li> <li>Append text</li> <li>Scroll to line</li> <li>Modal dialog</li> </ul>"},{"location":"ui-textarea/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-textarea/#install-plugin","title":"Install plugin","text":""},{"location":"ui-textarea/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = scene.rexUI.add.textArea(config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = scene.rexUI.add.textArea(config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TextArea } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add text-area object     <pre><code>var textArea = new TextArea(scene, config);\nscene.add.existing(textArea);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#add-text-area-object","title":"Add text-area object","text":"<pre><code>var textArea = scene.rexUI.add.textArea({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\n// Elements\nbackground: backgroundGameObject,\n\ntext: textGameObject,\n// textWidth: undefined,\n// textHeight: undefined,\n// textMask: false,\n// alwaysScrollable: false,\n\nslider: {\n// background: sliderBackgroundGameObject,\ntrack: trackGameObject,\n/* \n        track: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n\n// indicator: indicatorGameObject,\nthumb: thumbGameObject,\n/* \n        thumb: { \n            width: 1, height: 1,\n            radius: 0, \n            color: undefined, alpha: 1,\n            strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,\n            shape: undefined\n        }\n        */\n\n// input: 'drag',\n// position: 'right',\n\n// hideUnscrollableSlider: false,\n// adaptThumbSize: false,\n// minThumbSize: undefined,\n\n// buttons: {\n//     top: topButtonGameObject, bottom: bottomButtonGameObject,\n//     left: leftButtonGameObject, right: rightButtonGameObject,\n//     step: 0.01,\n// }\n},\n\n// scroller: {\n//     threshold: 10,\n//     slidingDeceleration: 5000,\n//     backDeceleration: 2000,\n//     pointerOutRelease: true,\n//     dragRate: 1,\n// },\n\nmouseWheelScroller: false,\n// mouseWheelScroller: {\n//     focus: false,\n//     speed: 0.1\n// },\n\nclamplChildOY: false,\n\nheader: headerGameObject,\nfooter: footerGameObject,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\ntext: 0,\n// text: {\n//    top: 0,\n//    bottom: 0,\n//    left: 0,\n//    right: 0,\n//},\n\nslider: 0,\n// slider: {\n//     top: 0,\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n// },\n\nheader: 0,\nfooter: 0,\n},\n\nexpand: {\nheader: true,\nfooter: true,\n},\n\nalign: {\nheader: 'center',\nfooter: 'center',\n},\n\ncontent: '',\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of text area.</li> <li><code>text</code> : Text object, bbcode text object, tag text object, or bitmap text object</li> <li><code>textWidth</code> : Fixed width of text game object. Set <code>undefined</code> to ignore this feature.</li> <li><code>textHeight</code> : Fixed height of text game object. Set <code>undefined</code> to ignore this feature.</li> <li><code>textMask</code> :<ul> <li><code>false</code> : Crop text game object. Default behavior if text game object has <code>setCrop</code> method.</li> <li><code>true</code> : Apply mask on text to crop text game object. Default behavior if text game object does not have <code>setCrop</code> method (ex. bitmaptext game object).</li> </ul> </li> <li><code>slider</code> : Componments of slider, optional.<ul> <li><code>slider.background</code> : Game object of slider background, optional.</li> <li><code>slider.track</code> : Game object of track.</li> <li><code>slider.thumb</code> : Game object of thumb.</li> <li><code>slider.input</code> :<ul> <li><code>'pan'</code>, <code>'drag'</code>, or <code>0</code> : Control slider by panning/dragging thumb game object. Default setting.</li> <li><code>'click'</code>, or <code>1</code> : Control slider by touching track game object.</li> <li><code>'none'</code>, or <code>-1</code> : Disable sider controlling.</li> </ul> </li> <li><code>slider.position</code> : Position of this slider.<ul> <li><code>0</code>, <code>'right'</code>, <code>'bottom'</code> : Slider at right/bottom side. Default value.</li> <li><code>1</code>, <code>'left'</code>, <code>'top'</code> : Slider at left/top side.</li> </ul> </li> <li><code>slider.hideUnscrollableSlider</code> :<ul> <li><code>false</code> : Slider is always visible no matter it is scrollable or not. Default behavior.</li> <li><code>true</code> : Set slider to invisible if it is unscrollable.</li> </ul> </li> <li><code>slider.adaptThumbSize</code> :<ul> <li><code>false</code> : Don't adjust height/width of thumb. Default behavior.</li> <li><code>true</code> : Adjust height/width of thumb according to ratio of visible child.<ul> <li>Minimum height/width of thumb = <code>slider.minThumbSize</code>. If content is larger then a page.</li> <li>Maximum height/width of thumb = height/width of <code>slider.track</code>. If content is less then a page.</li> </ul> </li> </ul> </li> <li><code>slider.minThumbSize</code> : Minimum height/width of thumb used in <code>slider.adaptThumbSize</code> mode.</li> <li><code>slider.buttons</code> : Press button to scroll content in each tick.<ul> <li><code>slider.buttons.top</code>, <code>slider.buttons.bottom</code> : Top and bottom buttons.</li> <li><code>slider.buttons.left</code>, <code>slider.buttons.right</code> : Left and right buttons</li> <li><code>slider.buttons.step</code> : Scrolling step in each tick. Default value is <code>0.01</code>.</li> </ul> </li> <li>Set to <code>false</code> to skip creating slider.</li> </ul> </li> <li><code>scroller</code> : Configuration of scroller behavior.<ul> <li><code>scroller.threshold</code> : Minimal movement to scroll. Set <code>0</code> to scroll immediately.</li> <li><code>scroller.slidingDeceleration</code> : Deceleration of slow down when dragging released.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.backDeceleration</code> : Deceleration of pull back when out of bounds.<ul> <li>Set <code>false</code> to disable it.</li> </ul> </li> <li><code>scroller.pointerOutRelease</code> : Set to <code>true</code> to release input control when pointer out of gameObject.</li> <li><code>scroller.dragRate</code> : Rate of dragging distance/dragging speed. Default value is <code>1</code>.</li> <li>Set to <code>false</code> to skip creating scroller.</li> </ul> </li> <li><code>mouseWheelScroller</code> : Configuration of mouse-wheel-scroller behavior.<ul> <li><code>mouseWheelScroller.focus</code> : <ul> <li><code>true</code> : Only scrolling when cursor is over textArea.</li> <li><code>false</code> : Scrolling without checking cursor. Default behavior.</li> </ul> </li> <li><code>mouseWheelScroller.speed</code> : Scrolling speed, default value is <code>0.1</code>.</li> <li>Set to <code>false</code> to skip creating mouse-wheel-scroller. Default behavior.</li> </ul> </li> <li><code>clamplChildOY</code> : Set <code>true</code> to clamp scrolling.</li> <li><code>alwaysScrollable</code> : <ul> <li><code>false</code> : Can't scroll if content is less then 1 page. Default behavior.</li> <li><code>true</code> : Can scroll in all cases</li> </ul> </li> <li><code>header</code> : Game object of header, optional.</li> <li><code>footer</code> : Game object of footer, optional.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.text</code> :<ul> <li>A number: Space between text object and slider object.</li> <li>An object: Padding of text object.<ul> <li>If <code>scrollMode</code> is <code>0</code> (vertical) :<ul> <li><code>space.text.top</code>, <code>space.text.bottom</code> : Top, bottom padding space of text object.</li> <li><code>space.text.right</code> : Space between text object and slider object.</li> </ul> </li> <li>If <code>scrollMode</code> is <code>1</code> (horizontal) :<ul> <li><code>space.text.left</code>, <code>space.text.right</code> : Left, right padding space of text object.</li> <li><code>space.text.bottom</code> : Space between text object and slider object.</li> </ul> </li> </ul> </li> </ul> </li> <li><code>space.slider</code> :<ul> <li><code>0</code> : No space around slider.</li> <li><code>space.slider.left</code>, <code>space.slider.right</code>, <code>space.slider.top</code>, <code>space.slider.bottom</code> : Space around slider.</li> </ul> </li> <li><code>space.header</code> : Space between header and text object.</li> <li><code>space.footer</code> : Space between footer and text object.</li> </ul> </li> <li><code>expand</code> : Expand width or height of element<ul> <li><code>expand.header</code> : Set <code>true</code> to expand width or height of header game object.</li> <li><code>expand.footer</code> : Set <code>true</code> to expand width or height of footer game object.</li> </ul> </li> <li><code>align</code> : Align element<ul> <li><code>align.header</code><ul> <li><code>'center'</code>, or <code>Phaser.Display.Align.CENTER</code> : Align game object at center. Default value.</li> <li><code>'left'</code>, or <code>Phaser.Display.Align.LEFT_CENTER</code> : Align game object at left-center.</li> <li><code>'right'</code>, or <code>Phaser.Display.Align.RIGHT_CENTER</code> : Align game object at right-center.</li> </ul> </li> <li><code>align.footer</code></li> </ul> </li> <li><code>content</code> : Content of this text area.</li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-textarea/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextArea extends RexPlugins.UI.TextArea {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var textArea = new MyTextArea(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-textarea/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>textArea.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-textarea/#content","title":"Content","text":"<ul> <li>Set     <pre><code>textArea.setText(text);\n</code></pre></li> <li>Append     <pre><code>textArea.appendText(text);\n</code></pre></li> <li>Get    <pre><code>var text = textArea.text;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-content","title":"Scroll content","text":"<ul> <li>Scroll down lines     <pre><code>textArea.scrollLine(lineCount);\n</code></pre></li> <li>Set     <pre><code>textArea.childOY = oy;\n// textArea.setChildOY(oy);\n</code></pre></li> <li>Set and clamp     <pre><code>textArea.setChildOY(oy, true);\n</code></pre></li> <li>Add     <pre><code>textArea.addChildOY(oy);\n</code></pre></li> <li>Add and clamp     <pre><code>textArea.addChildOY(oy, true);\n</code></pre></li> <li>Get     <pre><code>var childOY = textArea.childOY;\n</code></pre></li> <li>Top OY     <pre><code>var topOY = textArea.topChildOY;\n</code></pre></li> <li>Bottom OY     <pre><code>var bottomOY = textArea.bottomChildOY;\n</code></pre></li> <li>Is overflow (height of content is larger than display height)     <pre><code>var isOverflow = textArea.isOverflow;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-by-percentage","title":"Scroll by percentage","text":"<ul> <li>Set     <pre><code>textArea.t = t;  // t: 0~1\n// textArea.setT(t);  \n</code></pre></li> <li>Set and clamp     <pre><code>textArea.setT(t, true);\n</code></pre></li> <li>Get     <pre><code>var t = textArea.t;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#scroll-to-topbottom","title":"Scroll to top/bottom","text":"<ul> <li>Scroll to top     <pre><code>textArea.scrollToTop();\n</code></pre><ul> <li>Equal to <code>textArea.t = 0;</code></li> </ul> </li> <li>Scroll to bottom     <pre><code>textArea.scrollToBottom();\n</code></pre><ul> <li>Equal to <code>textArea.t = 1;</code></li> </ul> </li> </ul>"},{"location":"ui-textarea/#scroll-to-line","title":"Scroll to line","text":"<ul> <li>Scroll to next line     <pre><code>textArea.scrollToNextLine();\n</code></pre></li> <li>Scroll to next n line     <pre><code>textArea.scrollToNextLine(n);\n</code></pre></li> <li>Scroll to line     <pre><code>textArea.scrollToLine(lineIndex);\n</code></pre></li> <li>Get current line index     <pre><code>var lineIndex = textArea.lineIndex;\n</code></pre></li> </ul>"},{"location":"ui-textarea/#enabledisable-scrolling","title":"Enable/disable scrolling","text":"<ul> <li>Slider<ul> <li>Set enable state     <pre><code>textArea.setSliderEnable(enabled);\n</code></pre>     or     <pre><code>textArea.sliderEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = textArea.sliderEnable;\n</code></pre></li> </ul> </li> <li>Scroller<ul> <li>Set enable state     <pre><code>textArea.setScrollerEnable(enabled);\n</code></pre>     or     <pre><code>textArea.scrollerEnable = enabled;\n</code></pre></li> <li>Get enable state     <pre><code>var enable = textArea.scrollerEnable;\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-textarea/#event","title":"Event","text":"<ul> <li>Scroll     <pre><code>textArea.on('scroll', function(textArea) {\n// ...\n})\n</code></pre></li> <li>Scroller drag start     <pre><code>textArea.getElement('scroller').on('dragstart', function(panel) {\n// ...\n})\n</code></pre></li> <li>Scroller drag end     <pre><code>textArea.getElement('scroller').on('dragend', function(panel) {\n// ...\n})\n</code></pre></li> </ul>"},{"location":"ui-textarea/#lines-count","title":"Lines count","text":"<pre><code>var linesCount = textArea.linesCount;\n</code></pre>"},{"location":"ui-textarea/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-textarea/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = textArea.getElement('background');\n</code></pre></li> <li>Text game object     <pre><code>var text = textArea.getElement('text');\n</code></pre></li> <li>Slider<ul> <li>Track     <pre><code>var track = textArea.getElement('slider.track');\n</code></pre></li> <li>Thumb     <pre><code>var thumb = textArea.getElement('slider.thumb');\n</code></pre></li> </ul> </li> <li>Scroller     <pre><code>var scroller = textArea.getElement('scroller');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = textArea.getElement('#' + name);\n// var gameObject = textArea.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = textArea.getByName(name);\n// var gameObject = textArea.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-textbox/","title":"Text box","text":""},{"location":"ui-textbox/#introduction","title":"Introduction","text":"<p>A container with an icon, (typing and paging) text, and background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-textbox/#live-demos","title":"Live demos","text":"<ul> <li>Text box</li> <li>Inner sizer</li> <li>Speech bubble background</li> <li>Bitmap text</li> <li>Page break</li> <li>Show last page</li> </ul>"},{"location":"ui-textbox/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-textbox/#install-plugin","title":"Install plugin","text":""},{"location":"ui-textbox/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = scene.rexUI.add.textBox(config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = scene.rexUI.add.textBox(config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TextBox } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add text-box object     <pre><code>var textBox = new TextBox(scene, config);\nscene.add.existing(textBox);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#add-textbox-object","title":"Add textbox object","text":"<pre><code>var textBox = scene.rexUI.add.textBox({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\nrtl: false,\n\nbackground: backgroundGameObject,\n\ninnerBackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\nseparator: separatorGameObject,\n\nicon: iconGameObject,\niconMask: false,\n\ntext: textGameObject,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {\ntitle: 'left',\ntext: 'left',\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ninnerLeft: 0, innerRight: 0, innerTop: 0, innerBottom: 0,\n\ntitle: 0, titleLeft: 0, titleRight: 0,\nicon: 0, iconTop: 0, iconBottom: 0,\ntext: 0, textLeft: 0, textRight: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// page: { \n//    maxLines: undefined,\n//    pageBreak: '\\f\\n',\n// },\n// typing: { \n//    wrap: false,\n//    speed: 333,    \n// },\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : <ul> <li><code>0</code> : <code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically, then layout with <code>icon</code>, <code>action</code> horizontally.</li> <li><code>1</code> : <code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally, then layout with <code>title</code>, <code>separator</code> vertically. Default behavior.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>false</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from left to right. Default behavior.</li> <li><code>true</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from right to left.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>innerBackground</code> : Game object of background inside innerSizer, optional.<ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li><code>title</code> : Game object of title, optional.</li> <li><code>separator</code> : Game object of separator, optional.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>text</code> : Text object, bbcode text object, tag text object, or bitmap text object<ul> <li>Max lines and wrapped width<ul> <li>Built-in text object : <code>maxLines</code> and wrap width (<code>wordWrap.width</code>).</li> <li>BBcode text object : <code>maxLines</code> and wrap width (<code>wrap.width</code>).</li> <li>Tag text object : <code>maxLines</code> and wrap width (<code>wrap.width</code>).</li> <li>Bitmap text object : Set maxLines at <code>page.maxLines</code> in configuration of page behavior, and wrap width at <code>text.setMaxWidth(width)</code>.</li> </ul> </li> <li>Fixed width and fixed height<ul> <li>Built-in text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> <li>BBcode text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> <li>Tag text object : <code>fixedWidth</code> and <code>fixedHeight</code>, set to <code>0</code> to disable this feature.</li> </ul> </li> </ul> </li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.</li> <li><code>align</code> : Alignment of title, text game objects.<ul> <li><code>align.title</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> <li><code>align.text</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.innerLeft</code>, <code>space.innerRight</code>, <code>space.innerTop</code>, <code>space.innerBottom</code> : Space parameter of inner sizer.</li> <li><code>space.title</code> : Space between title game object and separator game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Space at left or right side of title game object.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.textLeft</code>, <code>space.textRight</code> : Space at left or right side of text game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>page</code> : Configuration of page behavior<ul> <li><code>page.maxLines</code> : Max lines of a page.</li> <li><code>page.pageBreak</code> : Symbol of page-break. Default value is <code>'\\f\\n'</code>.</li> </ul> </li> <li><code>typing</code> : Configuration of type behavior <ul> <li><code>typing.wrap</code> : <ul> <li><code>false</code> : Don't insert <code>\\n</code>, default behavior.</li> <li><code>true</code> : Insert <code>\\n</code> to wrap content according to style of text, to prevent typing jittering.</li> </ul> </li> <li><code>typing.speed</code> : Typing speed in ms, default value is <code>333</code>.</li> </ul> </li> </ul>"},{"location":"ui-textbox/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTextBox extends RexPlugins.UI.TextBox {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var textBox = new MyTextBox(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#typing","title":"Typing","text":"<ul> <li>Start     <pre><code>textBox.start(content, typingSpeed);\n</code></pre><ul> <li><code>content</code> : Content string.</li> <li><code>speed</code> : Typing speed in ms.<ul> <li><code>undefined</code> : Use previous typing speed.</li> </ul> </li> </ul> </li> <li>Stop     <pre><code>textBox.stop();\n</code></pre><ul> <li>Will fire <code>'stop'</code> event.</li> </ul> </li> <li>Stop and show all text     <pre><code>textBox.stop(true);\n</code></pre><ul> <li>Will fire <code>'stop'</code>, <code>'type'</code>, <code>'pageend'</code> event.</li> </ul> </li> <li>Stop and show all text at last page     <pre><code>textBox.showLastPage();\n</code></pre><ul> <li>Will fire <code>'type'</code>, <code>'pageend'</code>, <code>'complete'</code> events.</li> </ul> </li> <li>Pause     <pre><code>textBox.pause();\n</code></pre><ul> <li>Will fire <code>'pause'</code> event.</li> </ul> </li> <li>Resume     <pre><code>textBox.resume();\n</code></pre><ul> <li>Will fire <code>'resume'</code> event.</li> </ul> </li> <li>Is typing     <pre><code>var isTyping = textBox.isTyping;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#typing-speed","title":"Typing speed","text":"<ul> <li>Change typing speed     <pre><code>textBox.setTypingSpeed(speed);\n</code></pre><ul> <li><code>speed</code> : Typing speed in ms.</li> </ul> </li> <li>Get typing speed     <pre><code>var speed = textBox.typingSpeed;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#page","title":"Page","text":"<ul> <li>Type next page     <pre><code>textBox.typeNextPage();\n</code></pre></li> <li>Is last page     <pre><code>var isLastPage = textBox.isLastPage;\n</code></pre></li> <li>Is first page     <pre><code>var isFirstPage = textBox.isFirstPage;\n</code></pre></li> <li>Current page index     <pre><code>var pageIndex = textBox.pageIndex;\n</code></pre></li> <li>Number of pages     <pre><code>var pageIndex = textBox.pageCount;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>textBox.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Get texture key, frame name     <pre><code>var textureKey = textBox.texture.key;\nvar frameName = textBox.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-textbox/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = textBox.getElement('background');\n</code></pre></li> <li>InnerSizer     <pre><code>var innerSizer = textBox.getElement('innerSizer');\n</code></pre><ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li>Background game object inside innerSizer     <pre><code>var innerBackground = textBox.getElement('innerBackground');\n</code></pre></li> <li>Title game object     <pre><code>var textObject = textBox.getElement('title');\n</code></pre></li> <li>Separator game object     <pre><code>var textObject = textBox.getElement('separator');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = textBox.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = textBox.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = textBox.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = textBox.getElement('#' + name);\n// var gameObject = textBox.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = textBox.getByName(name);\n// var gameObject = textBox.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-textbox/#events","title":"Events","text":"<ul> <li>On typing start.     <pre><code>textBox.on('start', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On changing content of text game object, will also re-layout textbox :     <pre><code>textBox.on('type', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing a character :     <pre><code>textBox.on('typechar', function(char) {\n// ...\n}, scope);\n</code></pre></li> <li>On Typing the last character of current page.     <pre><code>textBox.on('pageend', function() {\nif (textBox.isLastPage) {\n// ...            \n}\n}, scope);\n</code></pre></li> <li>On typing all pages complete, equal to <code>'pageend'</code> event with <code>textBox.isLastPage</code>.     <pre><code>textBox.on('complete', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing paused by <code>textBox.pause()</code>.     <pre><code>textBox.on('pause', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing resume by <code>textBox.resume()</code>.     <pre><code>textBox.on('resume', function() {\n// ...\n}, scope);\n</code></pre></li> <li>On typing stop by <code>textBox.stop()</code>.     <pre><code>textBox.on('stop', function() {\n// ...\n}, scope);\n</code></pre></li> </ul>"},{"location":"ui-textbox/#other-properties","title":"Other properties","text":"<p>See title label, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-titlelabel/","title":"Title label","text":""},{"location":"ui-titlelabel/#introduction","title":"Introduction","text":"<p>A container with title, text in two rows, and an icon, background.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-titlelabel/#live-demos","title":"Live demos","text":"<ul> <li>Title-label</li> <li>Layout modes</li> </ul>"},{"location":"ui-titlelabel/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-titlelabel/#install-plugin","title":"Install plugin","text":""},{"location":"ui-titlelabel/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.titleLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add label object     <pre><code>var label = scene.rexUI.add.titleLabel(config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { TitleLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add label object     <pre><code>var label = new TitleLabel(scene, config);\nscene.add.existing(label);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#add-label-object","title":"Add label object","text":"<pre><code>var label = scene.rexUI.add.titleLabel({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\nlayoutMode: 0,\n\nrtl: false,\n\nbackground: backgroundGameObject,\n\ninnerBackground: backgroundGameObject,\n\ntitle: titleGameObject,\n\nseparator: separatorGameObject,\n\nicon: iconGameObject,\niconMask: false,\n\ntext: textGameObject,\n\naction: actionGameObject,\nactionMask: false,\n\nalign: {\ntitle: 'left',\ntext: 'left',\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ninnerLeft: 0, innerRight: 0, innerTop: 0, innerBottom: 0,\n\ntitle: 0, titleLeft: 0, titleRight: 0,\nicon: 0, iconTop: 0, iconBottom: 0,\ntext: 0, textLeft: 0, textRight: 0,\nactionTop: 0, actionBottom: 0,\n},\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>layoutMode</code> : <ul> <li><code>0</code> : <code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically, then layout with <code>icon</code>, <code>action</code> horizontally.</li> <li><code>1</code> : <code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally, then layout with <code>title</code>, <code>separator</code> vertically.</li> </ul> </li> <li><code>rtl</code> : <ul> <li><code>false</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from left to right. Default behavior.</li> <li><code>true</code> : Layout children (<code>icon</code>, <code>text</code>, <code>action</code>) from right to left.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of label.</li> <li><code>innerBackground</code> : Game object of background inside innerSizer, optional.<ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li><code>title</code> : Game object of title, optional.</li> <li><code>separator</code> : Game object of separator, optional.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.   </li> </ul> </li> <li><code>text</code> : Game object of text.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.<ul> <li>Phaser 3 engine does not support nested mask, uses circle mask image instead.</li> </ul> </li> <li><code>align</code> : Alignment of title, text game objects.<ul> <li><code>align.title</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> <li><code>align.text</code> : <code>'left'</code>, or <code>'right'</code>. Default vale is <code>'left'</code>.</li> </ul> </li> <li><code>space</code> : Pads spaces.<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds.</li> <li><code>space.innerLeft</code>, <code>space.innerRight</code>, <code>space.innerTop</code>, <code>space.innerBottom</code> : Space parameter of inner sizer.</li> <li><code>space.title</code> : Space between title game object and separator game object.</li> <li><code>space.titleLeft</code>, <code>space.titleRight</code> : Space at left or right side of title game object.</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.iconTop</code>, <code>space.iconBottom</code> : Space around icon game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> <li><code>space.textLeft</code>, <code>space.textRight</code> : Space at left or right side of text game object.</li> <li><code>space.actionTop</code>, <code>space.actionBottom</code> : Space around action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-titlelabel/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTitleLabel extends RexPlugins.UI.TitleLabel {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var label = new MyTitleLabel(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#layout-modes","title":"Layout modes","text":""},{"location":"ui-titlelabel/#mode-0","title":"Mode 0","text":"<p><code>title</code>, <code>separator</code>, and <code>text</code> will be layout vertically inside innerSizer, then layout with <code>icon</code>, <code>action</code> horizontally.</p> Icon Title Action Separator Text"},{"location":"ui-titlelabel/#mode-1","title":"Mode 1","text":"<p><code>icon</code>, <code>text</code>, and <code>action</code> will be layout horizontally inside innerSizer, then layout with <code>title</code>, <code>separator</code> vertically.</p> Title Separator Icon Text Action"},{"location":"ui-titlelabel/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>label.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-titlelabel/#get-element","title":"Get element","text":"<ul> <li>Get element<ul> <li>Background game object     <pre><code>var background = label.getElement('background');\n</code></pre></li> <li>InnerSizer     <pre><code>var innerSizer = label.getElement('innerSizer');\n</code></pre><ul> <li>In mode 0, innerSizer contains <code>title</code>, <code>separator</code>, and <code>text</code>.</li> <li>In mode 1, innerSizer contains <code>icon</code>, <code>text</code>, and <code>action</code>.</li> </ul> </li> <li>Background game object inside innerSizer     <pre><code>var innerBackground = label.getElement('innerBackground');\n</code></pre></li> <li>Title game object     <pre><code>var textObject = label.getElement('title');\n</code></pre></li> <li>Separator game object     <pre><code>var textObject = label.getElement('separator');\n</code></pre></li> <li>Icon game object     <pre><code>var icon = label.getElement('icon');\n</code></pre></li> <li>Text game object     <pre><code>var textObject = label.getElement('text');\n</code></pre></li> <li>Action icon game object     <pre><code>var action = label.getElement('action');\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = label.getElement('#' + name);\n// var gameObject = label.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = label.getByName(name);\n// var gameObject = label.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-titlelabel/#title","title":"Title","text":"<ul> <li>Get title string     <pre><code>var s = label.title;\n</code></pre></li> <li>Set title string     <pre><code>label.setTitle(s);\n</code></pre>     or     <pre><code>label.title = s;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#text","title":"Text","text":"<ul> <li>Get text string     <pre><code>var s = label.text;\n</code></pre></li> <li>Set text string     <pre><code>label.setText(s);\n</code></pre>     or     <pre><code>label.text = s;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#icon-texture","title":"Icon texture","text":"<ul> <li>Set texture     <pre><code>label.setTexture(key);\n// label.setTexture(key, frame);\n</code></pre></li> <li>Set texture via texture object     <pre><code>label.setTexture(texture);\n// label.setTexture(texture, frame);\n</code></pre></li> <li>Get texture, frame.     <pre><code>var texture = label.texture;\nvar frame = label.frame;\n</code></pre></li> <li>Get texture key, frame name.     <pre><code>var textureKey = label.texture.key;\nvar frameName = label.frame.name;\n</code></pre></li> </ul>"},{"location":"ui-titlelabel/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"ui-toast/","title":"Toast","text":""},{"location":"ui-toast/#introduction","title":"Introduction","text":"<p>Show text message for a short while.</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-toast/#live-demos","title":"Live demos","text":"<ul> <li>Toast</li> </ul>"},{"location":"ui-toast/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-toast/#install-plugin","title":"Install plugin","text":""},{"location":"ui-toast/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add toast object     <pre><code>var toast = scene.rexUI.add.toast(config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add toast object     <pre><code>var toast = scene.rexUI.add.toast(config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Toast } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add toast object     <pre><code>var toast = new Toast(scene, config);\nscene.add.existing(toast);\n</code></pre></li> </ul>"},{"location":"ui-toast/#add-toast-object","title":"Add toast object","text":"<pre><code>var toast = scene.rexUI.add.toast({\nx: 0,\ny: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n\norientation: 0,\n\nbackground: backgroundGameObject,\nicon: iconGameObject,\niconMask: false,\ntext: textGameObject,\naction: actionGameObject,\nactionMask: false,\n\nspace: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n\nicon: 0,\ntext: 0,\n},\n\nduration: {\nin: 200,\nhold: 1200,\nout: 200,\n},\n\n// transitIn: 0,\n// transitOut: 0,\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> :<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Put icon at left side, and text at right side.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Put icon at top side, and text at bottom side.</li> </ul> </li> <li><code>background</code> : Game object of background, optional. This background game object will be resized to fit the size of toast.</li> <li><code>icon</code> : Game object of icon, optional.</li> <li><code>iconMask</code> : Set true to add a circle mask on icon game object.</li> <li><code>text</code> : Game object of text.</li> <li><code>action</code> : Game object of action icon, optional.</li> <li><code>actionMask</code> : Set true to add a circle mask on action icon game object.</li> <li><code>space</code> : Pads spaces<ul> <li><code>space.left</code>, <code>space.right</code>, <code>space.top</code>, <code>space.bottom</code> : Space of bounds</li> <li><code>space.icon</code> : Space between icon game object and text game object.</li> <li><code>space.text</code> : Space between text game object and action icon game object.</li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> <li><code>duration</code> : Duration of displaying message<ul> <li><code>duration.in</code> : Duration of transit-in stage.</li> <li><code>duration.hold</code> : Duration of hold stage.</li> <li><code>duration.out</code> : Duration of transit-out stage.</li> </ul> </li> <li><code>transitIn</code> : Transit-in action.<ul> <li><code>0</code>, or <code>'popUp'</code> : Pop-up.</li> <li><code>1</code>, or <code>'fadeIn'</code> : Fade-in.</li> <li>A callback : Custom transit-in function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> <li><code>false</code>, <code>null</code> : No transitOut.</li> </ul> </li> <li><code>transitOut</code> : Transit-out action.<ul> <li><code>0</code>, or <code>'scaleDown'</code> : Scale-down.</li> <li><code>1</code>, or <code>'fadeOut'</code> : Fade-out.</li> <li>A callback : Custom transit-out function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> <li><code>false</code>, <code>null</code> : No transitOut.</li> </ul> </li> </ul> <p>Toast object will be invisible at beginning.</p>"},{"location":"ui-toast/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyToast extends RexPlugins.UI.Toast {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var toast = new MyToast(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-toast/#show-message","title":"Show message","text":"<pre><code>toast.showMessage(message);\n</code></pre> <ul> <li><code>message</code> : A string, or a callback.<ul> <li>A string. Apply this content to <code>text</code> game object.</li> <li>Callback. Invoke this callback to configurate toast object.     <pre><code>function(toast) {\n// var icon = toast.getElement('icon');\n// var text = toast.getElement('text');\n// var action = toast.getElement('action');\n}\n</code></pre></li> </ul> </li> </ul> <p>Toast displays message follows these steps : transit-in, hold, transit-out. New message will be pending until toast is back to idle.</p>"},{"location":"ui-toast/#display-time","title":"Display time","text":"<ul> <li>Transit-in time (<code>duration.in</code>)<ul> <li>Get     <pre><code>var time = toast.transitInTime;\n</code></pre></li> <li>Set     <pre><code>toast.setTransitInTime(time);\n</code></pre></li> </ul> </li> <li>Display time (<code>duration.hold</code>)<ul> <li>Get     <pre><code>var time = toast.displayTime;\n</code></pre></li> <li>Set     <pre><code>toast.setDisplayTime(time);\n</code></pre></li> </ul> </li> <li>Transit-out time (<code>duration.out</code>)<ul> <li>Get     <pre><code>var time = toast.transitOutTime;\n</code></pre></li> <li>Set     <pre><code>toast.setTransitOutTime(time);\n</code></pre></li> </ul> </li> </ul>"},{"location":"ui-toast/#transit-action","title":"Transit action","text":"<ul> <li>Set transit-in action     <pre><code>toast.setTransitInCallback(callback);\n</code></pre><ul> <li><code>callback</code> : Transit-in action<ul> <li><code>0</code>, or <code>'popUp'</code> : Pop-up.</li> <li><code>1</code>, or <code>'fadeIn'</code> : Fade-in.</li> <li>A callback : Custom transit-in function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> <li>Set transit-out action     <pre><code>toast.setTransitOutCallback(callback);\n</code></pre><ul> <li><code>callback</code> : Transit-out action<ul> <li><code>0</code>, or <code>'scaleDown'</code> : Scale-down.</li> <li><code>1</code>, or <code>'fadeOut'</code> : Fade-out.</li> <li>A callback : Custom transit-out function     <pre><code>function(toast, duration) {\n// ...\n}\n</code></pre></li> </ul> </li> </ul> </li> </ul>"},{"location":"ui-toast/#other-properties","title":"Other properties","text":"<p>See label object, sizer object, base sizer object, container-lite.</p>"},{"location":"ui-tweaker/","title":"Tweaker","text":""},{"location":"ui-tweaker/#introduction","title":"Introduction","text":"<p>Fine-tuning properties of target object. Reference</p> <ul> <li>Author: Rex</li> <li>Game object</li> </ul>"},{"location":"ui-tweaker/#live-demos","title":"Live demos","text":"<ul> <li>Tweaker</li> <li>Bind target</li> <li>Horizontal tweaker</li> </ul>"},{"location":"ui-tweaker/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ui-tweaker/#install-plugin","title":"Install plugin","text":""},{"location":"ui-tweaker/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = scene.rexUI.add.tweaker(config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';\nvar config = {\n// ...\nplugins: {\nscene: [{\nkey: 'rexUI',\nplugin: UIPlugin,\nmapping: 'rexUI'\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = scene.rexUI.add.tweaker(config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import { Tweaker } from 'phaser3-rex-plugins/templates/ui/ui-components.js';\n</code></pre></li> <li>Add tweaker object     <pre><code>var tweaker = new Tweaker(scene, config);\nscene.add.existing(tweaker);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#add-tweaker-object","title":"Add tweaker object","text":"<pre><code>var tweaker = scene.rexUI.add.tweaker({\n// x: 0,\n// y: 0,\n// anchor: undefined,\n// width: undefined,\n// height: undefined,\n// orientation: 0,\n\nstyles : {\nitemWidth : 0,\n\ninputRow: {\nbackground: {\n\n},\n\ntitle: {\n\n},\n\ninputText: {\n\n},\n\nlist: {\nlabel: {\n\n},\n\nbutton: {\n\n}\n},\n\nbutton: {\n\n},\n\nslider: {\ntrack: {\n\n},\n\nindicator: {\n\n},\n\nthumb: {\n\n}\n},\n\ncolorInput: {\ncolorPicker: {\n\n},\n\ncolorComponents: {\ninputText: {\n\n}\n}\n},\n\ncheckbox: {\n\n},\n\ntoggleSwitch: {\n\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n},\n\nseparator: {\n\n},\n\nfolder: {\n},\n\ntab: {\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0, item: 0\n},\n},\n\n\n// name: '',\n// draggable: false,\n// sizerEvents: false,\n// enableLayer: false,\n});\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position of this object, it is valid when this object is the top object.</li> <li><code>anchor</code> : See anchor.<ul> <li><code>left</code>, <code>right</code>, <code>centerX</code>, <code>x</code>, <code>top</code>, <code>bottom</code>, <code>centerY</code>, <code>y</code> : Position based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.<ul> <li><code>'left'</code>(=0%), <code>'center'</code>(=50%), <code>'right'</code>(=100%)</li> <li><code>'top'</code>(=0%), <code>'center'</code>(=50%), <code>'bottom'</code>(=100%)</li> </ul> </li> <li>Offset : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>width</code>, <code>height</code> : Set size (invoke <code>onResizeCallback</code>) based on visible window, which composed of<ul> <li>Percentage of visible width/height : <code>'p%'</code>, p: <code>0</code> ~ <code>100</code>.        </li> <li>Padding : <code>'+n'</code>, or <code>'-n'</code>.</li> </ul> </li> <li><code>onResizeCallback</code> : A default resize callback will be assigned interanlly. </li> </ul> </li> <li><code>width</code>, <code>height</code> : Minimum width, minimum height.</li> <li><code>orientation</code> : Main orientation of the tweaker.<ul> <li><code>'left-to-right'</code>, <code>'horizontal'</code>,<code>'h'</code>, <code>'x'</code>, or <code>0</code> : Arrange game objects from left ot right.</li> <li><code>'top-to-bottom'</code>, <code>'vertical'</code>,<code>'v'</code>, <code>'y'</code>, or <code>1</code> : Arrange game objects from top to bottom. Default value is <code>1</code>.</li> </ul> </li> <li><code>styles</code> : Styles settings of input rows, separator, folder, and tab. See Styles chapter for more detail.<ul> <li><code>style.itemWidth</code> : Width of input row, used if <code>orientation</code> is set to <code>'y'</code>(<code>1</code>).</li> <li><code>styles.space</code> : Pads spaces.<ul> <li><code>styles.space.left</code>, <code>styles.space.right</code>, <code>styles.space.top</code>, <code>styles.space.bottom</code> : Space of bounds.</li> <li><code>styles.space.item</code> : Space between 2 input rows.</li> </ul> </li> </ul> </li> <li><code>name</code> : Set name of this game object.</li> <li><code>draggable</code> : Set <code>true</code> to drag top-most object.</li> <li><code>sizerEvents</code> : Set <code>true</code> to fire sizer events. Default value is <code>false</code>.</li> <li><code>enableLayer</code> : <ul> <li><code>false</code> : Add child game objects into scene's display list. Default behavior.</li> <li><code>true</code> : Add child game objects into an internal layer game object. See also.</li> </ul> </li> </ul>"},{"location":"ui-tweaker/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyTweaker extends RexPlugins.UI.Tweaker {\nconstructor(scene, config) {\nsuper(scene, config);\n// ...\nscene.add.existing(this);\n}\n// ...\n}\n</code></pre></li> <li>Create instance     <pre><code>var tweaker = new MyTweaker(scene, config);\n</code></pre></li> </ul>"},{"location":"ui-tweaker/#add-input-row","title":"Add input row","text":"<p>An input row can fine-tuning properties of target object. </p>"},{"location":"ui-tweaker/#text-input-row","title":"Text input row","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {    // view: 'string',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n\n// autoUpdate: true,\n// onValidate: undefined,\n// onValueChange: undefined,    \n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'string',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n\n// autoUpdate: true,\n// onValidate: undefined,\n// onValueChange: undefined,    \n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'string'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> <li><code>autoUpdate</code> : <ul> <li><code>true</code> : Update binding key when user input. Default behavior.</li> <li><code>false</code> : Use <code>onValueChange</code> to set value of binding key when user input.</li> </ul> </li> <li><code>onValidate</code> : <ul> <li>Callback invoked when new value input.     <pre><code>function(newValue, oldValue, bindingTarget, bindingKey) { return true;\n}\n</code></pre><ul> <li><code>true</code> : Accept this new value.</li> <li><code>false</code> : Reject this new value.</li> </ul> </li> <li><code>undefined</code> : Always accept new value changing. Default behavior.</li> </ul> </li> <li><code>onValueChange</code> : <ul> <li>Callback invoked when binding value changing.     <pre><code>function(newValue, oldValue, bindingTarget, bindingKey) { }\n</code></pre></li> <li><code>undefined</code> : Ignore this feature. Default value.</li> </ul> </li> </ul> <p>See Styles of text input</p>"},{"location":"ui-tweaker/#text-input-from-list","title":"Text input from list","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'list'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of list input</p>"},{"location":"ui-tweaker/#text-input-from-buttons","title":"Text input from buttons","text":"<p><code>object[key]</code> is a text value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'buttons'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of buttons input</p>"},{"location":"ui-tweaker/#number-input-row","title":"Number input row","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'number',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'number',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'number'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of text input</p>"},{"location":"ui-tweaker/#number-input-in-a-range","title":"Number input in a range","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'range',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\nmin: minValue, max: maxValue,\n\n// format: function(value) { return s; },\n// inputTextReadOnly: false,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'range',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\nmin: minValue, max: maxValue,\n\n// format: function(value) { return s; },\n// inputTextReadOnly: false,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'range'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>min</code>, <code>max</code> : Minimum, maximun value of range.</li> <li><code>format</code> : Callback to return formatted string for input text field.     <pre><code>function(value) {\nreturn s;\n}\n</code></pre></li> <li><code>inputTextReadOnly</code> :<ul> <li><code>false</code> : Input text field is editable. Default behavior.</li> <li><code>true</code> : Input text field is read-only.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of range input</p>"},{"location":"ui-tweaker/#number-input-from-list","title":"Number input from list","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'list',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'list'</code>, if <code>bindingTarget</code> is not given.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of list input</p>"},{"location":"ui-tweaker/#number-input-from-buttons","title":"Number input from buttons","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'buttons',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\noptions: [\n{text: text0, value: value0},\n{text: text1, value: value1},\n// ...\n],\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'buttons'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>options</code> : Option list, each item contains<ul> <li><code>text</code> : Display text.</li> <li><code>value</code> : Set <code>key</code> to this value.</li> </ul> </li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of buttons input</p>"},{"location":"ui-tweaker/#color-input","title":"Color input","text":"<p><code>object[key]</code> is a number value.</p> <pre><code>tweaker.addInput(object, key, {\nview: 'color',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\nview: 'color',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'color'</code>.</li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of color input</p>"},{"location":"ui-tweaker/#boolean-input-row","title":"Boolean input row","text":"<p><code>object[key]</code> is a boolean value.</p> <pre><code>tweaker.addInput(object, key, {\n// view: 'boolean',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <p>or</p> <pre><code>tweaker.addInput({\nbindingTarget: object,\nbindingKey: key,\n// view: 'boolean',\n// view: 'toggleSwitch',\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\n// title: undefined,\n\n// monitor: false,\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target object.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>bindingKey</code> : Bind to target's property key. Necessary field</li> <li><code>view</code> : Set to <code>'boolean'</code>, or <code>'toggleSwitch'</code>, if <code>bindingTarget</code> is not given.<ul> <li><code>'boolean'</code> : Checkbox input. Default behavior.</li> <li><code>'toggleSwitch'</code> : Toggle switch input.</li> </ul> </li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label. Default value is equal to <code>key</code>.</li> <li><code>monitor</code> : <ul> <li><code>false</code> : Don't update input text from current object. Default behavior.</li> <li><code>true</code> : Update input text from current object, in <code>postupdate</code> event of scene.</li> </ul> </li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of boolean input</p>"},{"location":"ui-tweaker/#add-button","title":"Add button","text":"<pre><code>tweaker.addButton({\n// bindingTarget: object,\n\n// icon: undefined,\n// iconFrame: undefined,\n// iconSize: undefined,\n\ntitle: undefined,\n\nlabel: undefined,\n\ncallback: function(target) {},\n\n// key: undefined,\n})\n</code></pre> <ul> <li><code>bindingTarget</code> : Binding target will pass to callback. Optional.<ul> <li>Can bind target later via <code>tweaker.setBindingTarget(object)</code>.</li> </ul> </li> <li><code>icon</code>, <code>iconFrame</code> : Texture key, frame name of icon on title-label.</li> <li><code>iconSize</code> : Fixed icon size</li> <li><code>title</code> : Display text of title-label.</li> <li><code>label</code> : Display text of button.</li> <li><code>callback</code> : Callback when clicking button     <pre><code>function(target) { }\n</code></pre></li> <li><code>key</code> : Add this child into childMap, which could be read back by <code>tweaker.getElement(key)</code>.<ul> <li><code>undefined</code> : Don't add this child. Default value.</li> </ul> </li> </ul> <p>See Styles of botton</p>"},{"location":"ui-tweaker/#add-separator","title":"Add separator","text":"<pre><code>tweaker.addSeparator();\n</code></pre> <p>See Styles of separator</p>"},{"location":"ui-tweaker/#add-folder","title":"Add folder","text":"<p>Folder contains collapsible child tweaker game object.</p> <pre><code>var childTweaker = tweaker.addFolder({\ntitle: titleA,\n\n// expanded: true,\n});\n\n// childTweaker.addInput(...)\n</code></pre> <ul> <li><code>childTweaker</code> : Child tweaker game object. Add input rows by <code>addInput</code> method.</li> <li><code>title</code> Title of folder. Click title can collapse or expand child tweaker game object.</li> <li><code>expanded</code> : <ul> <li><code>true</code> : Expand child tweaker game object at beginning. Default behavior.</li> <li><code>false</code> : Collapse child tweaker game object at beginning.</li> </ul> </li> </ul> <p>See Styles of folder</p>"},{"location":"ui-tweaker/#add-tab","title":"Add tab","text":"<p>Tab containes pages. Each page is a tweaker game object.</p> <pre><code>var childrenTweakers = tweaker.addTab({\npages: [\n{\ntitle: titleA, // show: false\n},\n{\ntitle: titleB\n// show: false\n},\n// ...\n]\n});\n\n// childrenTweakers[0].addInput(...)\n// childrenTweakers[1].addInput(...)\n</code></pre> <ul> <li><code>childrenTweakers</code> : Array of children tweaker game object. Add input rows by <code>addInput</code> method.</li> <li><code>pages</code> : Array of page setting.     <pre><code>{\ntitle: titleA,\nshow: false,\n}\n</code></pre><ul> <li><code>title</code> : Display text of page title</li> <li><code>show</code> : Set to <code>true</code> to show this page at beginning</li> </ul> </li> </ul> <p>See Styles of tab</p>"},{"location":"ui-tweaker/#layout-children","title":"Layout children","text":"<p>Arrange position of all elements.</p> <pre><code>tweaker.layout();\n</code></pre> <p>See also - dirty</p>"},{"location":"ui-tweaker/#styles","title":"Styles","text":""},{"location":"ui-tweaker/#styles-of-text-input","title":"Styles of text input","text":"<p>Style of text/number input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-list-input","title":"Styles of list input","text":"<p>Style of text/number list input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.list</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nlist: {\nlabel: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\n'hover.color': undefined,\n'hover.alpha': undefined,\n'hover.strokeColor': undefined,\n'hover.strokeAlpha': undefined,\n'hover.strokeWidth': undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-buttons-input","title":"Styles of buttons input","text":"<p>Style of buttons input is defined in </p> <ul> <li><code>styles.inputRow.title</code></li> <li><code>styles.inputRow.button</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n},\n\nexpand: true\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-range-input","title":"Styles of range input","text":"<p>Style of range input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.slider</code></li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nslider: {\ntrack: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nindicator: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nthumb: {\nwidth: 0, height: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n}\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-color-input","title":"Styles of color input","text":"<p>Style of color input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.inputText</code> </li> <li><code>styles.inputRow.colorInput</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\ncolorInput: {\nswatch: {\nradius: 0,\nsize: undefined,\n},\n\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n},                // inputText: false,\n\ncolorPicker: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n},\n\ncolorComponents: {\ninputText: {\nbackground: {\ncolor: null,\ncolor2: null,\nhorizontalGradient: true,\n\nstroke: null,\nstrokeThickness: 2,\n\ncornerRadius: 0,\ncornerIteration: null\n},\nfocusStyle: {\n// color:\n// color2:\n// horizontalGradient:\n\n// stroke:\n// strokeThickness:\n\n// cornerRadius:\n// cornerIteration:\n},\n\nstyle: {\nbold: false,\nitalic: false,\nfontSize: '16px',\nfontFamily: 'Courier',\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadowColor: null,\nshadowOffsetX: 0,\nshadowOffsetY: 0,\nshadowBlur: 0,\nbackgroundColor: null,\nbackgroundHeight: undefined,\nbackgroundBottomY: undefined,\noffsetX: 0,\noffsetY: 0\n},\ncursorStyle: {\n// bold:\n// italic:\n// fontSize:\n// fontFamily:\n// color:\n// stroke:\n// strokeThickness:\n// shadowColor:\n// shadowOffsetX:\n// shadowOffsetY:\n// shadowBlur:\n// backgroundColor:\n// backgroundHeight:\n// backgroundBottomY:\n// offsetX:\n// offsetY:\n}\n\n}\n}\n\n// colorComponents: false,\n\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-boolean-input","title":"Styles of boolean input","text":"<p>Style of boolean input is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.checkbox</code>, or <code>styles.inputRow.toggleSwitch</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\n// For checkbox view\ncheckbox: {\n// size: undefined,\n\ncolor: 0x005cb2,\nboxFillAlpha: 1,\nuncheckedColor: null,\nuncheckedBoxFillAlpha: 1,\n\nboxLineWidth: 4,\nboxStrokeColor: 0x005cb2,\nboxStrokeAlpha: 1,\nuncheckedBoxStrokeColor: 0x005cb2,\nuncheckedBoxStrokeAlpha: 1,\n\ncheckerColor: 0xffffff,\ncheckerAlpha: 1,\n\ncircleBox: false\n\nanimationDuration: 150,\n\nreadOnly: false,\n},\n\n// For toggle switch view\ntoggleSwitch: {\n// size: undefined,\n\ncolor: 0x005cb2,\ntrackFillAlpha: 1,\nfalseValueTrackColor: undefined,\nfalseValueTrackFillAlpha: 1,\n\nthumbColor: 0xffffff,\nthumbAlpha: 1,\n\ntrackWidth: 0.9,\ntrackHeight: 0.5,\ntrackCornerRadius: (trackHeight * 0.5),\n\nthumbHeight: (trackHeight * 0.9),\nthumbWidth: (thumbHeight),\nthumbCornerRadius: (thumbHeight * 0.5),\n\nthumbLeft: 0.3,\nthumbRight: (1 - thumbLeft),\nrtl: false,\n\nanimationDuration: 150,\n\nreadOnly: false,\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-botton","title":"Styles of botton","text":"<p>Style of button is defined in </p> <ul> <li><code>styles.inputRow.title</code>, </li> <li><code>styles.inputRow.button</code></li> <li><code>styles.inputRow.background</code></li> </ul> <pre><code>{\nstyles: {\ninputRow: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nbutton: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom: 0,\ntitle: 0\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-separator","title":"Styles of separator","text":"<p>Style of separator is defined in </p> <ul> <li><code>styles.separator</code></li> </ul> <pre><code>{\nstyles: {\nseparator: {\nheight: 0,\n\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-folder","title":"Styles of folder","text":"<p>Style of folder is defined in </p> <ul> <li><code>styles.folder</code></li> </ul> <pre><code>{\nstyles: {\nfolder: {\ntitle: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n},\n\nexpandedIcon: {\ncolor: undefined,\nalpha: 1,\n\nstrokeColor: undefined,\nstrokeAlpha: 1,\nstrokeWidth: 1,\narrowOnly: false,\n\neaseDuration: 0,\n}\n},\n\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n},\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, }\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#styles-of-tab","title":"Styles of tab","text":"<p>Style of tab is defined in </p> <ul> <li><code>styles.tab</code></li> </ul> <pre><code>{\nstyles: {\ntab: {\ntab: {\nbackground: {\nradius: 0,\n// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}\n\ncolor: undefined,\nalpha: undefined,\nstrokeColor: undefined,\nstrokeAlpha: undefined,\nstrokeWidth: undefined,\n\n'active.color': undefined,\n'active.alpha': undefined,\n'active.strokeColor': undefined,\n'active.strokeAlpha': undefined,\n'active.strokeWidth': undefined,\n},\n\ntext: {\nfontFamily: 'Courier',\nfontSize: '16px',\nfontStyle: '',\nbackgroundColor: null,\ncolor: '#fff',\nstroke: '#fff',\nstrokeThickness: 0,\nshadow: {\noffsetX: 0,\noffsetY: 0,\ncolor: '#000',\nblur: 0,\nstroke: false,\nfill: false\n},                  padding: {\nleft: 0,\nright: 0,\ntop: 0,\nbottom: 0,\n},\n// more text styles\n},\n\niconSize: undefined,\niconWidth: undefined, iconHeight: undefined,\n\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, icon: 0, text: 0\n}\n},\n\nwrapTabs: false,\n\ntabs: {\nspace: {\nleft: 0, right: 0, top: 0, bottom:0, item: 0,\n}\n},\n\npages: {\nfadeIn: 0,\n}\n}\n}\n}\n</code></pre>"},{"location":"ui-tweaker/#bind-target","title":"Bind target","text":"<p>All input rows will bind to this new target, and update display status.</p> <pre><code>tweaker.setBindingTarget(object);\n</code></pre>"},{"location":"ui-tweaker/#get-element","title":"Get element","text":"<ul> <li>Get by key     <pre><code>var gameObject = tweaker.getElement(key);\n</code></pre><ul> <li><code>key</code> : Add by <code>key</code> parameter in <code>tweaker.addInput(config)</code> method     <pre><code>tweaker.addInput({\nkey: ...\n})\n</code></pre></li> </ul> </li> <li>Get by name     <pre><code>var gameObject = tweaker.getElement('#' + name);\n// var gameObject = pages.getElement('#' + name, recursive);\n</code></pre>     or     <pre><code>var gameObject = tweaker.getByName(name);\n// var gameObject = tweaker.getByName(name, recursive);\n</code></pre><ul> <li><code>recursive</code> : Set <code>true</code> to search all children recursively.</li> </ul> </li> </ul>"},{"location":"ui-tweaker/#other-properties","title":"Other properties","text":"<p>See sizer object, base sizer object, container-lite.</p>"},{"location":"uniqueitemlist/","title":"Unique item list","text":""},{"location":"uniqueitemlist/#introduction","title":"Introduction","text":"<p>List of unique items. Support array and set methods.</p> <ul> <li>Author: Rex</li> <li>Data structure</li> </ul>"},{"location":"uniqueitemlist/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"uniqueitemlist/#install-plugin","title":"Install plugin","text":""},{"location":"uniqueitemlist/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexuniqueitemlistplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuniqueitemlistplugin.min.js', true);\n</code></pre></li> <li>Add list object     <pre><code>var listA = scene.plugins.get('rexuniqueitemlistplugin').add(config);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import UniqueItemListPlugin from 'phaser3-rex-plugins/plugins/uniqueitemlist-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexUniqueItemList',\nplugin: UniqueItemListPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add list object     <pre><code>var listA = scene.plugins.get('rexUniqueItemList').add(config);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import UniqueItemList from 'phaser3-rex-plugins/plugins/uniqueitemlist.js';\n</code></pre></li> <li>Add list object     <pre><code>var listA = new UniqueItemList();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#create-instance","title":"Create instance","text":"<pre><code>var listA = scene.plugins.get('rexUniqueItemList').add({\n// items: undefined,\n// autoCleanup: true\n});\n</code></pre> <ul> <li><code>items</code> : Initial items.</li> <li><code>autoCleanup</code> : Set <code>true</code> to remove item when item is destroyed (from item's 'destroy' event)</li> </ul> <p>or</p> <pre><code>var listA = scene.plugins.get('rexUniqueItemList').add(items);\n</code></pre>"},{"location":"uniqueitemlist/#items","title":"Items","text":"<ul> <li>Get first item     <pre><code>var item = listA.getFirst();\n</code></pre></li> <li>Get last item     <pre><code>var item = listA.getLast();\n</code></pre></li> <li>Get item at index     <pre><code>var item = listA.get(index);\n</code></pre></li> <li>Get a random item     <pre><code>var item = listA.getRandom();\n</code></pre></li> <li>Get items     <pre><code>var items = listA.getItems();\n</code></pre></li> <li>Clone items to a new array     <pre><code>var items = listA.cloneItems();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#item-count","title":"Item count","text":"<ul> <li>Get item count     <pre><code>var count = listA.length;\n</code></pre></li> <li>List is empty     <pre><code>var isEmpty = listA.isEmpty();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#contains","title":"Contains","text":"<ul> <li>Has item     <pre><code>var hasItem = listA.contains(item);\n</code></pre></li> <li>Has any item     <pre><code>var hasAny = listA.any(listB);\n</code></pre></li> <li>Has all items     <pre><code>var hasAll = listA.all(listB);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#array-operations","title":"Array operations","text":""},{"location":"uniqueitemlist/#add","title":"Add","text":"<ul> <li>Add to last     <pre><code>listA.add(item);\n</code></pre>     or     <pre><code>listA.addLast(item);\n</code></pre></li> <li>Add to first     <pre><code>listA.addFirst(item);\n</code></pre></li> <li>Insert to index     <pre><code>listA.add(item, index);\n</code></pre></li> <li>Insert, or move to index     <pre><code>listA.add(item, iindex, true);\n</code></pre></li> <li>Add items     <pre><code>listA.addMultiple(items);\n</code></pre></li> <li>Clone list     <pre><code>var newList = listA.clone();\n// listA.clone(listB)\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#remove","title":"Remove","text":"<ul> <li>Remove item     <pre><code>listA.remove(item);\n</code></pre></li> <li>Remove first     <pre><code>listA.removeFirst();\n</code></pre></li> <li>Remove last     <pre><code>listA.removeLast();\n</code></pre></li> <li>Remove item at index     <pre><code>listA.remove(undefined, index);\n</code></pre></li> <li>Remove items     <pre><code>listA.removeMultiple(items);\n</code></pre></li> <li>Remove all items     <pre><code>listA.clear();\n</code></pre></li> <li>Destroy all items     <pre><code>listA.clear(true);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#pop","title":"Pop","text":"<ul> <li>Pop first item     <pre><code>var item = listA.pop();\n</code></pre>     or     <pre><code>var item = listA.popFirst();\n</code></pre></li> <li>Pop last item     <pre><code>var item = listA.popLast();\n</code></pre></li> <li>Pop item at index    <pre><code>var item = listA.pop(index);\n</code></pre></li> <li>Pop a random item    <pre><code>var item = listA.popRandom();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#slice","title":"Slice","text":"<ul> <li>Extract items from startIndex to endIndex (item of endIndex is included)    <pre><code>var newList = listA.slice(startIndex, endIndex);\n// listA.slice(startIndex, endIndex, listB);\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#sort","title":"Sort","text":"<ul> <li>Sort    <pre><code>list.sort(function(itemA, itemB) {\nif (itemA &gt; itemB) {\nreturn 1;\n} else if (itemA &lt; itemB) {\nreturn -1;\n} else {\nreturn 0;\n}\n})\n</code></pre></li> <li>Reverse    <pre><code>listA.reverse();\n</code></pre></li> <li>Shuffle    <pre><code>listA.shuffle();\n</code></pre></li> </ul>"},{"location":"uniqueitemlist/#set-operations","title":"Set operations","text":"<ul> <li>C = A | B     <pre><code>var listC = listA.union(listB);\n// listA.union(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> <li>C = A &amp; B     <pre><code>var listC = listA.intersect(listB);\n// listA.intersect(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> <li>C = A - B     <pre><code>var listC = listA.difference(listB);\n// listA.difference(listB, listC);\n</code></pre><ul> <li><code>listC</code> : Result unique-item-list. Can be <code>listA</code>, or <code>listB</code>.</li> </ul> </li> </ul>"},{"location":"uniqueitemlist/#call-method","title":"Call method","text":"<p>Apply method of each item.</p> <pre><code>listA.call(fnName, arg0, arg1, arg2, ...);\n</code></pre> <ul> <li><code>fnName</code> : Method name of item.</li> <li><code>arg0</code>, <code>arg1</code>, <code>arg2</code> : Arguments of <code>fnName</code> method.</li> </ul> <p>Warning</p> <p>Don't add or remove any item during this method.</p> <pre><code>listA.call(function(item, i) {\n// ....\n}, scope);\n</code></pre> <ul> <li><code>callback</code> : A function object.     <pre><code>function(item, i) {\n\n}\n</code></pre></li> </ul>"},{"location":"uuid/","title":"UUID","text":""},{"location":"uuid/#introduction","title":"Introduction","text":"<p>Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"uuid/#usage","title":"Usage","text":"<pre><code>var uuid = Phaser.Utils.String.UUID();\n</code></pre>"},{"location":"vector2/","title":"Vector2","text":""},{"location":"vector2/#introduction","title":"Introduction","text":"<p>A representation of a vector in 2D space (<code>{x, y}</code>), built-in object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"vector2/#usage","title":"Usage","text":""},{"location":"vector2/#create-object","title":"Create object","text":"<pre><code>var vector = new Phaser.Math.Vector2();\n// var vector = new Phaser.Math.Vector2(x, y);\n// var vector = new Phaser.Math.Vector2({x, y});\n</code></pre>"},{"location":"vector2/#clone","title":"Clone","text":"<pre><code>var newVector = vector.clone();\n</code></pre>"},{"location":"vector2/#set-components","title":"Set components","text":"<ul> <li>Set (x, y)     <pre><code>vector.set(x, y);\n// vector.setTo(x, y);\n</code></pre>     or     <pre><code>vector.copy({x, y});\n// vector.setFromObject({x, y});\n</code></pre></li> <li>Set angle     <pre><code>vector.setAngle(angle);\n</code></pre><ul> <li><code>angle</code> : Angle in radians.</li> </ul> </li> <li>Rotate     <pre><code>vector.rotate(delta);\n</code></pre><ul> <li><code>delta</code> : The angle to rotate by, in radians.</li> </ul> </li> <li>Project     <pre><code>vector.project(srcVector2);\n</code></pre></li> <li>Set length     <pre><code>vector.setLength(length);\n</code></pre></li> <li>Set from polar coordinate     <pre><code>vector.setToPolar(azimuth, radius);\n</code></pre><ul> <li><code>azimuth</code> : The angular coordinate, in radians.</li> <li><code>radius</code> : The radial coordinate (length). Default is <code>1</code>.</li> </ul> </li> <li>Reset to (0, 0)     <pre><code>vector.reset();\n</code></pre></li> </ul>"},{"location":"vector2/#get-componments","title":"Get componments","text":"<ul> <li>X, Y     <pre><code>var x = vector.x;\nvar y = vector.y;\n</code></pre></li> <li>Angle     <pre><code>var angle = vector.angle(); // angle in radians\n</code></pre></li> <li>Length     <pre><code>var length = vector.length();\n</code></pre>     or     <pre><code>var lengthSq = vector.lengthSq(); // squared\n</code></pre></li> </ul>"},{"location":"vector2/#methods","title":"Methods","text":"<ul> <li>Scale     <pre><code>vector.scale(value);\n</code></pre></li> <li>Limit the length     <pre><code>vector.limit(value);\n</code></pre></li> <li>Normalize     <pre><code>vector.normalize();\n</code></pre></li> <li>Negate     <pre><code>vector.negate();\n</code></pre></li> <li>Rotate perpendicular     <pre><code>vector.normalizeRightHand();\nvector.normalizeLeftHand();\n</code></pre></li> <li>Reflect<ul> <li>Reflect this Vector off a line defined by a normal.     <pre><code>vector.reflect(normal);\n</code></pre><ul> <li><code>normal</code> : A vector perpendicular to the line.</li> </ul> </li> <li>Reflect this Vector across another.     <pre><code>vector.mirror(axis);\n</code></pre><ul> <li><code>axis</code> : A vector to reflect across.</li> </ul> </li> </ul> </li> </ul>"},{"location":"vector2/#vector-methods","title":"Vector methods","text":"<ul> <li>Add     <pre><code>vector.add(src); // src: {x, y}\n</code></pre></li> <li>Subtract     <pre><code>vector.subtract(src); // src: {x, y}\n</code></pre></li> <li>Multiply     <pre><code>vector.multiply(src); // src: {x, y}\n</code></pre></li> <li>Divide     <pre><code>vector.divide(src); // src: {x, y}\n</code></pre></li> <li>Dot     <pre><code>var value = vector.dot(src); // src: {x, y}\n</code></pre></li> <li>Cross     <pre><code>var value = vector.cross(src); // src: {x, y}\n</code></pre></li> <li>Fuzzy Equal     <pre><code>var equal = vector.fuzzyEquals(src); // src: {x, y}\n// var equal = vector.fuzzyEquals(src, epsilon);\n</code></pre></li> </ul>"},{"location":"vector2/#points-method","title":"Points method","text":"<ul> <li>Distance between 2 points.     <pre><code>var distance = vector.distance(src);\n</code></pre>     or     <pre><code>var distanceSq = vector.distanceSq(src); // squared\n</code></pre></li> <li>Linearly interpolate between 2 points.     <pre><code>vector.lerp(src, t); // src: {x, y}\n</code></pre><ul> <li><code>t</code> : The interpolation percentage, between 0 and 1.</li> </ul> </li> </ul>"},{"location":"vector2/#constant","title":"Constant","text":"<ul> <li>Zero <code>(0,0)</code> <pre><code>var vector = Phaser.Math.Vector2.ZERO;\n</code></pre></li> <li>One <code>(1,1)</code> <pre><code>var vector = Phaser.Math.Vector2.ONE;\n</code></pre></li> <li>Right <code>(1,0)</code> <pre><code>var vector = Phaser.Math.Vector2.RIGHT;\n</code></pre></li> <li>Left <code>(-1,0)</code> <pre><code>var vector = Phaser.Math.Vector2.LEFT;\n</code></pre></li> <li>Up <code>(0,-1)</code> <pre><code>var vector = Phaser.Math.Vector2.UP;\n</code></pre></li> <li>Down <code>(0,1)</code> <pre><code>var vector = Phaser.Math.Vector2.DOWN;\n</code></pre></li> </ul>"},{"location":"video/","title":"Video","text":""},{"location":"video/#introduction","title":"Introduction","text":"<p>Handling playback of a video file, video stream or media stream.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"video/#usage","title":"Usage","text":""},{"location":"video/#load-video","title":"Load video","text":"<pre><code>scene.load.video(key, url, noAudio);\n</code></pre> <p>Reference: load video</p> <p>Cross-origin</p> <p>Can't load video cross-origin via <code>scene.load.video(...)</code>. Using <code>scene.add.video(x, y).loadURL(urls, noAudio, crossOrigin)</code> to load video cross-origin. </p>"},{"location":"video/#add-video-object","title":"Add video object","text":""},{"location":"video/#reference-video-from-video-cache","title":"Reference video from Video Cache","text":"<pre><code>var video = scene.add.video(x, y, key);\n</code></pre> <ul> <li><code>key</code> : Key of the Video this Game Object will play, as stored in the Video Cache.</li> </ul>"},{"location":"video/#load-video-from-url","title":"Load video from URL","text":"<ol> <li>Add video object     <pre><code>var video = scene.add.video(x, y);\n</code></pre></li> <li>Play video from URL     <pre><code>video.loadURL(url);\n// video.loadURL(urls, noAudio, crossOrigin);\n</code></pre><ul> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.<ul> <li><code>false</code> : Has audio track. Default behavior.</li> </ul> </li> <li><code>crossOrigin</code> : The value to use for the <code>crossOrigin</code> property in the video load request.  <ul> <li><code>undefined</code> : <code>crossorigin</code> will not be set in the request. Default behavior.</li> <li><code>'anonymous'</code> </li> <li><code>'use-credentials'</code></li> </ul> </li> </ul> </li> </ol>"},{"location":"video/#load-video-from-mediastream","title":"Load video from MediaStream","text":"<pre><code>video.loadMediaStream(stream);\n// video.loadMediaStream(stream, noAudio, crossOrigin);\n</code></pre> <ul> <li><code>stream</code> : The MediaStream object.</li> <li><code>noAudio</code> : Does the video have an audio track? If not you can enable auto-playing on it.<ul> <li><code>false</code> : Has audio track. Default behavior.</li> </ul> </li> <li><code>crossOrigin</code> : The value to use for the <code>crossOrigin</code> property in the video load request.  <ul> <li><code>undefined</code> : <code>crossorigin</code> will not be set in the request. Default behavior.</li> <li><code>'anonymous'</code> </li> <li><code>'use-credentials'</code></li> </ul> </li> </ul> <pre><code>navigator.mediaDevices.getUserMedia({ video: true, audio: false })\n.then(function(stream) {\nvideo.loadMediaStream(stream, true);\nvideo.play();\n})\n.catch(function(err) {\n\n})\n</code></pre> <ul> <li>navigator.mediaDevices.getUserMedia</li> </ul>"},{"location":"video/#play","title":"Play","text":"<pre><code>video.play();\n// video.play(loop, markerIn, markerOut);\n</code></pre> <ul> <li><code>loop</code> : Should the video loop automatically when it reaches the end? Please note that not all browsers support seamless video looping for all encoding formats.</li> <li><code>markerIn</code>, <code>markerOut</code> : Optional in/out marker time, in seconds, for playback of a sequence of the video.</li> </ul> <p>Play video first time</p> <p>Call <code>video.play()</code> when playing video first time.</p> <p>Note</p> <p>If you need audio in your videos, then you'll have to consider the fact that  the video cannot start playing until the user has interacted with the browser, into your game flow.</p>"},{"location":"video/#pause","title":"Pause","text":"<ul> <li>Pause     <pre><code>video.setPaused();\n// video.setPaused(true);\n</code></pre></li> <li>Resume     <pre><code>video.setPaused(false);\n</code></pre></li> </ul> <p>Play video after paused</p> <p>Call <code>video.setPaused(false)</code> to resume playing.</p>"},{"location":"video/#stop","title":"Stop","text":"<p>Stops the video playing and clears all internal event listeners.</p> <pre><code>video.stop();\n</code></pre>"},{"location":"video/#is-playing","title":"Is playing","text":"<ul> <li>Is playing     <pre><code>var isPlaying = video.isPlaying();  // (not PAUSE) and (not not ENDED)\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = video.isPaused();\n</code></pre></li> </ul>"},{"location":"video/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = video.getCurrentTime();\n</code></pre>     or     <pre><code>var t = video.getProgress(); // t: 0~1\n</code></pre></li> <li>Set<ul> <li>Set to     <pre><code>video.setCurrentTime(playbackTime);  // time in seconds\n</code></pre>     or     <pre><code>video.seekTo(t); // t: 0~1\n</code></pre><ul> <li>Is seeking     <pre><code>var isSeeking = video.isSeeking();\n</code></pre></li> </ul> </li> <li>Forward     <pre><code>video.setCurrentTime('+' + time);  // time in seconds\n// video.setCurrentTime('+2');\n</code></pre></li> <li>Backeard     <pre><code>video.setCurrentTime('-' + time);  // time in seconds\n// video.setCurrentTime('-2');\n</code></pre></li> </ul> </li> </ul>"},{"location":"video/#playback-rate","title":"Playback rate","text":"<ul> <li>Get     <pre><code>var rate = video.getPlaybackRate();\n</code></pre></li> <li>Set     <pre><code>video.setPlaybackRate(rate);\n</code></pre></li> </ul>"},{"location":"video/#duration","title":"Duration","text":"<pre><code>var duration = video.getDuration();  // time in seconds\n</code></pre>"},{"location":"video/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = video.getVolume();  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>video.setVolume(volume);  // volume: 0~1\n</code></pre></li> </ul>"},{"location":"video/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = video.isMuted();  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>video.setMute(muted);  // muted: true/false\n</code></pre></li> </ul>"},{"location":"video/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = video.getLoop();  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>video.setLoop(loop);  // loop: true/false\n</code></pre></li> </ul>"},{"location":"video/#video-key","title":"Video key","text":"<ul> <li>Get     <pre><code>var key = video.getVideoKey();\n</code></pre></li> <li>Change video key (video source)     <pre><code>video.changeSource(key);\n// video.changeSource(key, autoplay, loop, markerIn, markerOut);\n</code></pre><ul> <li><code>autoplay</code> : Should the video start playing immediately, once the swap is complete?</li> <li><code>loop</code> : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats.</li> <li><code>markerIn</code>, <code>markerOut</code> : Optional in/out marker time, in seconds, for playback of a sequence of the video.</li> </ul> </li> </ul>"},{"location":"video/#marks","title":"Marks","text":"<ul> <li>Add mark     <pre><code>video.addMarker(key, markerIn, markerOut);\n</code></pre><ul> <li><code>key</code> : A unique name to give this marker.</li> <li><code>markerIn</code>, <code>markerOut</code> : The time, in seconds, representing the start/end of this marker.</li> </ul> </li> <li>Play mark     <pre><code>video.playMarker(key, loop);\n</code></pre></li> <li>Remove mark     <pre><code>video.removeMarker(key);\n</code></pre></li> </ul>"},{"location":"video/#snapshot","title":"Snapshot","text":"<ol> <li>Allocate a canvas texrure     <pre><code>video.saveSnapshotTexture(key);\n</code></pre><ul> <li><code>key</code> : Texture key.</li> </ul> </li> <li>Take a snapshot     <pre><code>var canvasTexture = video.video.snapshot();\n// var canvasTexture = video.snapshot(width, height);\n</code></pre>     or     <pre><code>var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight);\n// var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight);\n</code></pre><ul> <li><code>x</code>, <code>y</code> : The horizontal/vertical location of the top-left of the area to grab from.</li> <li><code>srcWidth</code>, <code>srcHeight</code> : The width/height of area to grab from the video.</li> <li><code>destWidth</code>, <code>destHeight</code> : The destination width/height of the grab, allowing you to resize it.</li> <li><code>canvasTexture</code> : Canvas texture object.<ul> <li>Get key of texture     <pre><code>var key = canvasTexture.key;\n</code></pre></li> </ul> </li> </ul> </li> </ol>"},{"location":"video/#save-texture","title":"Save texture","text":"<p>The saved texture is automatically updated as the video plays. If you pause this video, or change its source, then the saved texture updates instantly.</p> <pre><code>var texture = video.saveTexture(key);\n// var texture = video.saveTexture(key, flipY);\n</code></pre> <ul> <li><code>flipY</code> : Set to <code>true</code> if use it as the input for a Shader.</li> </ul>"},{"location":"video/#events","title":"Events","text":"<ul> <li>The media source doesn't represent a supported media format.     <pre><code>video.on('unsupported', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video is unlocked by a user gesture.     <pre><code>video.on('unlocked', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video tries to play a source that does not exist, or is the wrong file type.     <pre><code>video.on('error', function(video, error){\n\n}, scope);\n</code></pre></li> <li>A Video has exhausted its allocated time while trying to connect to a video source to start playback.     <pre><code>video.on('timeout', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video begins playback.     <pre><code>video.on('play', function(video){\n\n}, scope);\n</code></pre></li> <li>First started or restarted.     <pre><code>video.on('playing', function(video){\n\n}, scope);\n</code></pre></li> <li>The video has finished loading enough data for its first frame.     <pre><code>video.on('textureready', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video finishes playback by reaching the end of its duration, or <code>markerOut</code>.     <pre><code>video.on('complete', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video that is currently playing has looped.     <pre><code>video.on('loop', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video begins seeking to a new point in its timeline.     <pre><code>video.on('seeking', function(video){\n\n}, scope);\n</code></pre></li> <li>A Video completes seeking to a new point in its timeline.     <pre><code>video.on('seeked', function(video){\n\n}, scope);\n</code></pre></li> <li>Enough of the video source has been loaded, that the browser is able to render a frame from it.     <pre><code>video.on('created', function(video, width, height){\n\n}, scope);\n</code></pre></li> <li>Stalled by <code>stalled</code>, <code>suspend</code>, <code>waiting</code> DOM event.     <pre><code>video.on('stalled', function(video, width, height){\n\n}, scope);\n</code></pre></li> <li>A Video is stopped from playback via a call to the <code>Video.stop</code> method,     <pre><code>video.on('stop', function(video){\n\n}, scope);\n</code></pre></li> </ul>"},{"location":"video/#other-properties","title":"Other properties","text":"<p>See game object</p>"},{"location":"video/#create-mask","title":"Create mask","text":"<pre><code>var mask = video.createBitmapMask();\n</code></pre> <p>See mask</p>"},{"location":"video/#shader-effects","title":"Shader effects","text":"<p>Support preFX and postFX effects</p>"},{"location":"viewport-coordinate/","title":"Viewport-coordinate","text":""},{"location":"viewport-coordinate/#introduction","title":"Introduction","text":"<p>Attach <code>vpx</code>, <code>vpy</code> properties to a game object, to set position according to proportion (<code>vpx</code>, <code>vpy</code>) of viewport, a rectangle).</p> <ul> <li>Author: Rex</li> <li>Method only</li> </ul>"},{"location":"viewport-coordinate/#live-demos","title":"Live demos","text":"<ul> <li>Resize</li> </ul>"},{"location":"viewport-coordinate/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"viewport-coordinate/#install-plugin","title":"Install plugin","text":""},{"location":"viewport-coordinate/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexviewportcoordinateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexviewportcoordinateplugin.min.js', true);\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code> properties.     <pre><code>scene.plugins.get('rexviewportcoordinateplugin').add(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ViewportCoordinatePlugin from 'phaser3-rex-plugins/plugins/viewportcoordinate-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexViewportCoordinate',\nplugin: ViewportCoordinatePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code>, <code>vpxOffset</code>, <code>vpyOffset</code> properties.     <pre><code>scene.plugins.get('rexViewportCoordinate').add(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\ngameObject.vpxOffset = 0;\ngameObject.vpyOffset = 0;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#import-method","title":"Import method","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import method     <pre><code>import AddViewportCoordinateProperties from 'phaser3-rex-plugins/plugins/viewportcoordinate.js';\n</code></pre></li> <li>Attach <code>vpx</code>, <code>vpy</code>, <code>vpxOffset</code>, <code>vpyOffset</code> properties.     <pre><code>AddViewportCoordinateProperties(gameObject, viewport, vpx, vpy);\ngameObject.vpx = 0.5;\ngameObject.vpy = 0.5;\ngameObject.vpxOffset = 0;\ngameObject.vpyOffset = 0;\n</code></pre></li> </ul>"},{"location":"viewport-coordinate/#attach-properties","title":"Attach properties","text":"<pre><code>scene.plugins.get('rexViewportCoordinate').add(gameObject, viewport, vpx, vpy, transformCallback);\n</code></pre> <ul> <li><code>vpx</code>, <code>vpy</code> : Proportion of viewport.</li> <li><code>vpxOffset</code>, <code>vpyOffset</code> : Offset of position.</li> <li><code>viewport</code> : Viewport in rectangle</li> <li><code>transformCallback</code> : Transform callback.<ul> <li><code>undefined</code> : Use default transform callback.     <pre><code>function(vpx, vpy, vpxOffset, vpyOffset, viewport, out) {\ngameObject.x = viewport.x + (viewport.width * vpx) + vpxOffset;\ngameObject.y = viewport.y + (viewport.height * vpy) + vpyOffset;\n}\n</code></pre></li> </ul> </li> </ul> <p>Changing </p> <ul> <li><code>gameObject.vpx</code>, <code>gameObject.vpy</code>, <code>gameObject.vpxOffset</code>, <code>gameObject.vpyOffset</code></li> <li><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> of viewport (a rectangle)</li> </ul> <p>Will change position (<code>x</code> , <code>y</code>) of game object.</p>"},{"location":"virtualjoystick/","title":"Virtual joystick","text":""},{"location":"virtualjoystick/#introduction","title":"Introduction","text":"<p>Simulate cursor keys according to touch events.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"virtualjoystick/#live-demos","title":"Live demos","text":"<ul> <li>Virtual joystick</li> <li>Two joySticks</li> </ul>"},{"location":"virtualjoystick/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"virtualjoystick/#install-plugin","title":"Install plugin","text":""},{"location":"virtualjoystick/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = scene.plugins.get('rexvirtualjoystickplugin').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import VirtualJoystickPlugin from 'phaser3-rex-plugins/plugins/virtualjoystick-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexVirtualJoystick',\nplugin: VirtualJoystickPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = scene.plugins.get('rexVirtualJoystick').addPlayer(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';\n</code></pre></li> <li>Create instance     <pre><code>var joyStick = new VirtualJoystick(scene, config);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#create-instance","title":"Create instance","text":"<pre><code>var joystick = scene.plugins.get('rexVirtualJoystick').add(scene, {\nx: x,\ny: y,\nradius: 100,\nbase: baseGameObject,\nthumb: thumbGameObject,\n// dir: '8dir',\n// forceMin: 16,\n// fixed: true,\n// enable: true\n});\n</code></pre> <ul> <li><code>base</code> : Base game object.<ul> <li>Create a circle shape object if no base game object passed.</li> </ul> </li> <li><code>thumb</code> : Thumb game object.<ul> <li>Create a circle shape object if no thumb game object passed.</li> </ul> </li> <li><code>x</code>, <code>y</code> : Position of base game object</li> <li><code>radius</code> : Circle hit-area of base game object</li> <li><code>dir</code> : <ul> <li><code>'up&amp;down'</code>, or <code>0</code> : Simulate up or down cursor keys only.</li> <li><code>'left&amp;right'</code>, or <code>1</code> : Simulate left or right cursor keys only.</li> <li><code>'4dir'</code>, or <code>2</code> : Simulate up, down, left or right cursor keys.</li> <li><code>'8dir'</code>, or <code>3</code> : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.</li> </ul> </li> <li><code>forceMin</code> : Cursor keys will be pressed when force is larger then this value.<ul> <li><code>force</code> : Distance between position of base game object to touch pointer</li> </ul> </li> <li><code>fixed</code> : Set <code>true</code> to fix to camera, i.e set <code>scrollFactor</code> to <code>0</code> for base and thumb game object. Default value is <code>true</code>.</li> <li><code>enable</code> : Set <code>false</code> to disable cursor keys simulation</li> </ul>"},{"location":"virtualjoystick/#state-of-cursor-keys","title":"State of cursor keys","text":"<pre><code>var cursorKeys = joystick.createCursorKeys();\n\nvar leftKeyDown = cursorKeys.left.isDown;\nvar rightKeyDown = cursorKeys.right.isDown;\nvar upKeyDown = cursorKeys.up.isDown;\nvar downKeyDown = cursorKeys.down.isDown;\n</code></pre> <p>Or</p> <pre><code>var leftKeyDown = joystick.left;\nvar rightKeyDown = joystick.right;\nvar upKeyDown = joystick.up;\nvar downKeyDown = joystick.down;\nvar noKeyDown = joystick.noKey;\n</code></pre>"},{"location":"virtualjoystick/#force-angle","title":"Force &amp; Angle","text":"<p>Force : Distance between position of base game object to touch pointer.</p> <pre><code>var force = joystick.force;\nvar forceX = joystick.forceX;\nvar forceY = joystick.forceY;\n\nvar angle = joystick.angle;  // degree between -180 to 180\nvar rotation = joystick.rotation; // radians\n</code></pre>"},{"location":"virtualjoystick/#visible","title":"Visible","text":"<p>Visible of base game object.</p> <ul> <li>Get : Return visible of base game object     <pre><code>var visible = joystick.visible;\n</code></pre></li> <li>Set : Set visible to base game object and thumb game object     <pre><code>joystick.visible = visible;\njoystick.setVisible(visible);\njoystick.toggleVisible();\n</code></pre>     Joystick will be disabled when invisible.</li> </ul>"},{"location":"virtualjoystick/#enable","title":"Enable","text":"<ul> <li>Get     <pre><code>var enable = joystick.enable;\n</code></pre></li> <li>Set     <pre><code>joystick.setEnable(enable);  // enable: true, or false\n//joystick.enable = enable;\n</code></pre></li> <li>Toggle     <pre><code>joystick.toggleEnable();\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#position","title":"Position","text":"<p>Position of base game object.</p> <ul> <li>Get     <pre><code>var x = joystick.x;\nvar y = joystick.y;\n</code></pre></li> <li>Set     <pre><code>joystick.setPosition(x ,y);\n// joystick.x = x;\n// joystick.y = y;\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#scroll-factor","title":"Scroll factor","text":"<ul> <li>Fix to camera     <pre><code>joystick.setScrollFactor(0);\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#touch-pointer","title":"Touch pointer","text":"<ul> <li>Position     <pre><code>var x = joystick.pointerX;\nvar y = joystick.pointerY;\n</code></pre></li> <li>Pointer     <pre><code>var pointer = joystick.pointer;\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#destroy","title":"Destroy","text":"<p>Destroy base &amp; thumb game object.</p> <pre><code>joystick.destroy();\n</code></pre>"},{"location":"virtualjoystick/#events","title":"Events","text":"<ul> <li>On joystick updated :     <pre><code>joystick.on('update', function(){});\n</code></pre></li> <li>On pointer-down     <pre><code>joystick.on('pointerdown', function(pointer){});\n</code></pre></li> <li>On pointer-up     <pre><code>joystick.on('pointerup', function(pointer){});\n</code></pre></li> </ul>"},{"location":"virtualjoystick/#elements","title":"Elements","text":"<ul> <li>Base Game object:      <pre><code>var baseGO = joystick.base;\n</code></pre></li> <li>Thumb Game object:      <pre><code>var thumb = joystick.thumb;\n</code></pre></li> </ul>"},{"location":"waitevents/","title":"Wait events","text":""},{"location":"waitevents/#introduction","title":"Introduction","text":"<p>Wait fired events or callbacks.</p> <ul> <li>Author: Rex</li> </ul>"},{"location":"waitevents/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"waitevents/#install-plugin","title":"Install plugin","text":""},{"location":"waitevents/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexwaiteventsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwaiteventsplugin.min.js', true);\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = scene.plugins.get('rexwaiteventsplugin').add(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WaitEventsPlugin from 'phaser3-rex-plugins/plugins/waitevents-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWaitEvents',\nplugin: WaitEventsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = scene.plugins.get('rexWaitEvents').add(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import WaitEvents from 'phaser3-rex-plugins/plugins/waitevents.js';\n</code></pre></li> <li>Create instance     <pre><code>var waitEvents = new WaitEvents(completeCallback, completeCallbackScope);\n</code></pre></li> </ul>"},{"location":"waitevents/#create-instance","title":"Create instance","text":"<pre><code>var waitEvents = scene.plugins.get('rexWaitEvents').add(completeCallback, completeCallbackScope);\n</code></pre> <ul> <li><code>completeCallback</code>, <code>completeCallbackScope</code> : Callback when all waitting events are fired.</li> </ul>"},{"location":"waitevents/#set-complete-callback","title":"Set complete callback","text":"<pre><code>waitEvents.setCompleteCallback(completeCallback, completeCallbackScope);\n</code></pre> <ul> <li><code>completeCallback</code>, <code>completeCallbackScope</code> : Callback when all waitting events are fired.</li> </ul>"},{"location":"waitevents/#add-waiting-event","title":"Add waiting event","text":""},{"location":"waitevents/#callback","title":"Callback","text":"<pre><code>var callback = waitEvents.waitCallback();\n</code></pre> <ul> <li><code>callback</code> : A function object which invoked when waitting event finished.</li> </ul> <p>For example, invokes <code>completeCallback</code> when all timers are time-out.</p> <pre><code>scene.time.delayedCall(500, waitEvents.waitCallback());\nscene.time.delayedCall(1000, waitEvents.waitCallback());\nscene.time.delayedCall(1500, waitEvents.waitCallback());\n</code></pre>"},{"location":"waitevents/#callback-from-event-emitter","title":"Callback from event emitter","text":"<pre><code>waitEvents.waitEvent(eventEmitter, eventName);\n</code></pre>"},{"location":"waitevents/#remove-waiting-event","title":"Remove waiting event","text":"<pre><code>callback();\n</code></pre> <p>or </p> <pre><code>waitEvents.remove(callback);\n</code></pre> <ul> <li><code>callback</code> : A function object created via <code>waitEvents.waitCallback()</code></li> </ul>"},{"location":"waitevents/#clear-all-waiting-events","title":"Clear all waiting events","text":"<pre><code>waitEvents.clear();\n</code></pre>"},{"location":"waitevents/#no-wait-event","title":"No wait event","text":"<pre><code>var noWaitEvent = waitEvents.noWaitEvent;\n</code></pre>"},{"location":"webfontloader/","title":"Webfont loader","text":""},{"location":"webfontloader/#introduction","title":"Introduction","text":"<p>Load web font by google webfont loader in payload or preload stage.</p> <ul> <li>Author: Rex</li> <li>Custom File of loader</li> </ul>"},{"location":"webfontloader/#live-demos","title":"Live demos","text":"<ul> <li>Webfont loader</li> </ul>"},{"location":"webfontloader/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"webfontloader/#install-plugin","title":"Install plugin","text":""},{"location":"webfontloader/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>var sceneConfig = {\n// ....\npack: {\nfiles: [{\ntype: 'plugin',\nkey: 'rexwebfontloaderplugin',\nurl: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/    rexwebfontloaderplugin.min.js',\nstart: true\n}]\n}\n};\nclass MyScene extends Phaser.Scene {\nconstructor() {\nsuper(sceneConfig)\n}\n// ....\n\npreload() {\n// rexwebfontloaderplugin will be installed before preload(), but not added to loader yet\n// Call addToScene(scene) to add this await loader to loader of this scene\nthis.plugins.get('rexwebfontloaderplugin').addToScene(this);\n\nthis.load.rexWebFont(config);\n}\n}\n</code></pre></li> </ul>"},{"location":"webfontloader/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexWebFontLoader',\nplugin: WebFontLoaderPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>In preload stage     <pre><code>scene.load.rexWebFont(config);\n</code></pre></li> </ul>"},{"location":"webfontloader/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import WebFontLoader from 'phaser3-rex-plugins/plugins/webfontloader.js';\n</code></pre></li> <li>Start loading task     <pre><code>WebFontLoader.call(scene.load, config);\n</code></pre></li> </ul>"},{"location":"webfontloader/#load-webfont","title":"Load webfont","text":"<p>In preload stage:</p> <pre><code>this.load.rexWebFont({\ngoogle: {\nfamilies: ['Bangers']\n},\n// testString: undefined,\n// testInterval: 20,\n});\n</code></pre> <ul> <li><code>testString</code> : To test if the font is loaded completed or not.<ul> <li><code>undefined</code> : No testing. Default value.</li> <li>A string : A test string for all fonts</li> <li>An object, <code>{fontFamily: testString}</code> : Test string for a specific font family.</li> </ul> </li> <li><code>testInterval</code> : Retry interval.</li> </ul> <p>or load font in pack</p> <pre><code>var sceneConfig = {\nkey: '...',\npack: {\nfiles: [{\ntype: 'rexWebFont',\nkey: 'webfont',\nconfig: {\ngoogle: {\nfamilies: ['Bangers']\n},\n// testString: undefined,\n// testInterval: 20,\n}\n}\n]\n}\n};\n</code></pre> <p>Configuration of loading fonts</p> <ul> <li>Google webfont <pre><code>WebFontConfig = {\ngoogle: {\nfamilies: ['Droid Sans', 'Droid Serif:bold']\n}\n};\n</code></pre></li> <li>Custom font <pre><code>WebFontConfig = {\ncustom: {\nfamilies: ['My Font', 'My Other Font:n4,i4,n7'],\nurls: ['/fonts.css']\n}\n};\n</code></pre>     and <code>fonts.css</code> <pre><code>@font-face {\nfont-family: 'My Font';\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: normal;\nfont-weight: normal; /* or 400 */\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: italic;\nfont-weight: normal; /* or 400 */\nsrc: ...;\n}\n@font-face {\nfont-family: 'My Other Font';\nfont-style: normal;\nfont-weight: bold; /* or 700 */\nsrc: ...;\n}\n</code></pre></li> </ul>"},{"location":"webfontloader/#events","title":"Events","text":"<ul> <li> <p><code>fontactive</code> event</p> <pre><code>this.load.on('webfontactive', function(fileObj, familyName){});\n</code></pre> </li> <li> <p><code>fontinactive</code> event</p> <pre><code>this.load.on('webfontinactive', function(fileObj, familyName){});\n</code></pre> </li> </ul>"},{"location":"webfontloader/#test-string","title":"Test string","text":"<p>Add string parameter <code>testString</code> into config, to test if the font is loaded completed or not.</p> <ol> <li>Fill <code>0</code> within an internal canvas.</li> <li>Draw <code>testString</code>.</li> <li>Check if any pixel has non-zero value.</li> </ol>"},{"location":"wrap/","title":"Wrap","text":""},{"location":"wrap/#introduction","title":"Introduction","text":"<p>Wrap the given <code>value</code> between <code>min</code> and <code>max</code>, built-in method of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"wrap/#usage","title":"Usage","text":"<pre><code>var result = Phaser.Math.Wrap(value, min, max);\n</code></pre> <ul> <li><code>value</code> : The value to wrap.</li> </ul>"},{"location":"xor/","title":"XOR","text":""},{"location":"xor/#introduction","title":"Introduction","text":"<p>Encrypt or decrypt string by XOR algorithm.</p> <ul> <li>Author: Rex</li> <li>Methods</li> </ul>"},{"location":"xor/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"xor/#install-plugin","title":"Install plugin","text":""},{"location":"xor/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexxorplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexxorplugin.min.js', true);\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = scene.plugins.get('rexxorplugin').Encrypt(src, pwd);\nvar decResult = scene.plugins.get('rexxorplugin').Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import XORPlugin from 'phaser3-rex-plugins/plugins/xor-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexXOR',\nplugin: XORPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = scene.plugins.get('rexXOR').Encrypt(src, pwd);\nvar decResult = scene.plugins.get('rexXOR').Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import XOR from 'phaser3-rex-plugins/plugins/xor.js';\n</code></pre></li> <li>Encrypt, or decrypt     <pre><code>var encResult = XOR.Encrypt(src, pwd);\nvar decResult = XOR.Decrypt(encResult, pwd);\n</code></pre></li> </ul>"},{"location":"xor/#encrypt","title":"Encrypt","text":"<pre><code>var encResult = scene.plugins.get('rexXOR').Encrypt(src, pwd);\n</code></pre>"},{"location":"xor/#decrypt","title":"Decrypt","text":"<pre><code>var decResult = scene.plugins.get('rexXOR').Decrypt(encResult, pwd);\n</code></pre>"},{"location":"ymlachievements/","title":"YAML Achievements","text":""},{"location":"ymlachievements/#introduction","title":"Introduction","text":"<p>Achievements in a YAML table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"ymlachievements/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ymlachievements/#install-plugin","title":"Install plugin","text":""},{"location":"ymlachievements/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexymlachievementsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexymlachievementsplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexymlachievementsplugin').add();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import AchievementsPlugin from 'phaser3-rex-plugins/plugins/ymlachievements-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexAchievements',\nplugin: AchievementsPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import Achievements from 'phaser3-rex-plugins/plugins/ymlachievements.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var achievements = new Achievements();\n</code></pre></li> </ul>"},{"location":"ymlachievements/#create-instance","title":"Create instance","text":"<pre><code>var achievements = scene.plugins.get('rexAchievements').add();\n</code></pre>"},{"location":"ymlachievements/#load-table-from-yaml-string","title":"Load table from YAML string","text":"<pre><code>achievements.loadYML(ymlString);\n</code></pre> <p>For exameple</p> <pre><code>Lv1 :\nAch1 : (A &gt;= 10) &amp;&amp; (A &lt; 20)\nAch2 : (A &gt;= 20) &amp;&amp; (A &lt; 50)\nAch3 : A &gt;= 50\n</code></pre> <p>Equations will be parsed by expression-parser.</p>"},{"location":"ymlachievements/#test","title":"Test","text":"<ol> <li>Run test     <pre><code>var achievements.runTest(levelName, values);\n</code></pre><ul> <li><code>levelName</code> : Level name, in 1st column of achievements table.</li> <li><code>values</code> : Inputs in Key-value pairs</li> </ul> </li> <li>Get obtained states     <pre><code>var states = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> </ol> <p>or</p> <pre><code>var states = achievements.getTestResults(levelName, values);\n</code></pre>"},{"location":"ymlachievements/#get-obtained-states","title":"Get obtained states","text":"<ul> <li>Get obtained states of an achievement in a level     <pre><code>var state = achievements.getObtainedState(levelName, achievementName);\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre><ul> <li><code>wasObtained</code> : Obtained this achievement <code>achievementName</code> before last testing.</li> <li><code>justObtained</code> : Obtained this achievement <code>achievementName</code> at last testing.</li> </ul> </li> </ul> </li> <li>Get obtained states of a level     <pre><code>var state = achievements.getObtainedState(levelName);\n</code></pre><ul> <li><code>states</code> : Obtained states of <code>levelName</code> <pre><code>{\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n</code></pre></li> </ul> </li> <li>Get obtained states of all levels     <pre><code>var state = achievements.getObtainedState();\n// var state = achievements.getObtainedStates();\n</code></pre><ul> <li><code>states</code> : Obtained states of all levels     <pre><code>{\nlevelName: {\nachievementName: {\nwasObtained: boolean,\njustObtained: boolean\n}\n}\n}\n</code></pre></li> </ul> </li> <li>For each obtained state in a level     <pre><code>achievements.forEachObtainedState(levelName, function(levelName, achievementName, state) {\n\n}, scope)\n</code></pre><ul> <li><code>state</code> : Obtained states of <code>achievementName</code>, in level <code>levelName</code> <pre><code>{\nwasObtained: boolean,\njustObtained: boolean\n}\n</code></pre></li> </ul> </li> </ul>"},{"location":"ymlachievements/#get-name","title":"Get name","text":"<ul> <li>Name of levels     <pre><code>var names = achievements.getLevelNames();\n// var names = achievements.getLevelNames(out);\n</code></pre></li> <li>Name of achievements in a level     <pre><code>var names = achievements.getAchievementNames(levelName);\n// var names = achievements.getAchievementNames(levelName, out);\n</code></pre></li> </ul>"},{"location":"ymlachievements/#save-load-obtained-states","title":"Save &amp; load obtained states","text":"<ul> <li>Get obtained states     <pre><code>var states = achievements.getObtainedStates();\n</code></pre></li> <li>Load obtained states     <pre><code>achievements.loadObtainedStates(states);\n</code></pre></li> </ul>"},{"location":"ymlachievements/#set-obtained-state","title":"Set obtained state","text":"<ul> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>true</code>.     <pre><code>achievements.setObtainedState(levelName, achievementName);\n</code></pre></li> <li>Set <code>wasObtained</code>, <code>justObtained</code> properties to <code>false</code>.     <pre><code>achievements.clearObtainedState(levelName, achievementName);\n// achievements.setObtainedState(levelName, achievementName, false);\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/","title":"YAML Conditions table","text":""},{"location":"ymlconditionstable/#introduction","title":"Introduction","text":"<p>Check conditions to find passed tests listed in a YAML table.</p> <ul> <li>Author: Rex</li> <li>Member of scene</li> </ul>"},{"location":"ymlconditionstable/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"ymlconditionstable/#install-plugin","title":"Install plugin","text":""},{"location":"ymlconditionstable/#load-minify-file","title":"Load minify file","text":"<ul> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexymlconditionstableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexymlconditionstableplugin.min.js', true);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexymlconditionstableplugin').add();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import ConditionsTablePlugin from 'phaser3-rex-plugins/plugins/ymlconditionstable-plugin.js';\nvar config = {\n// ...\nplugins: {\nglobal: [{\nkey: 'rexConditionsTable',\nplugin: ConditionsTablePlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = scene.plugins.get('rexConditionsTable').add();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Import class     <pre><code>import ConditionsTable from 'phaser3-rex-plugins/plugins/ymlconditionstable.js';\n</code></pre></li> <li>Add conditions-table object     <pre><code>var conditionstable = new ConditionsTable();\n</code></pre></li> </ul>"},{"location":"ymlconditionstable/#create-instance","title":"Create instance","text":"<pre><code>var table = scene.plugins.get('rexConditionsTable').add();\n</code></pre>"},{"location":"ymlconditionstable/#load-table-from-yaml-string","title":"Load table from YAML string","text":"<pre><code>table.loadYML(ymlString);\n</code></pre> <p>For exameple</p> <pre><code>Test1 : (A &gt;= 10) &amp;&amp; (A &lt;= 20)\nTest2 : B == 3\n</code></pre> <p>Equations will be parsed by expression-parser.</p>"},{"location":"ymlconditionstable/#test","title":"Test","text":""},{"location":"ymlconditionstable/#get-test-results","title":"Get test results","text":"<pre><code>var results = table.getTestResults(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> <li><code>results</code> : <code>{name: boolean}</code>, use OR operation to combine result of tests with the same name.</li> </ul>"},{"location":"ymlconditionstable/#get-first-pass-test-name","title":"Get first pass test name","text":"<pre><code>var testName = table.anyPassTest(context);\n</code></pre> <ul> <li><code>context</code> : Inputs in Key-value pairs</li> </ul>"},{"location":"youtubeplayer/","title":"Youtube player","text":""},{"location":"youtubeplayer/#introduction","title":"Introduction","text":"<p>Play youtube video on iframe.</p> <ul> <li>Author: Rex</li> <li>DOM Game object</li> </ul>"},{"location":"youtubeplayer/#live-demos","title":"Live demos","text":"<ul> <li>Youtube player</li> </ul>"},{"location":"youtubeplayer/#usage","title":"Usage","text":"<p>Sample code</p>"},{"location":"youtubeplayer/#install-plugin","title":"Install plugin","text":""},{"location":"youtubeplayer/#load-minify-file","title":"Load minify file","text":"<ul> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Load plugin (minify file) in preload stage     <pre><code>scene.load.plugin('rexyoutubeplayerplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexyoutubeplayerplugin.min.js', true);\n</code></pre></li> <li>Add youtube player object     <pre><code>var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#import-plugin","title":"Import plugin","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Install plugin in configuration of game <pre><code>import YoutubePlayerPlugin from 'phaser3-rex-plugins/plugins/youtubeplayer-plugin.js';\nvar config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\nplugins: {\nglobal: [{\nkey: 'rexYoutubePlayer',\nplugin: YoutubePlayerPlugin,\nstart: true\n},\n// ...\n]\n}\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Add youtube player object     <pre><code>var youtubePlayer = scene.add.rexYoutubePlayer(x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#import-class","title":"Import class","text":"<ul> <li>Install rex plugins from npm     <pre><code>npm i phaser3-rex-plugins\n</code></pre></li> <li>Enable dom element in configuration of game <pre><code>var config = {\nparent: divId,\n// fullscreenTarget: divId, // For fullscreen\ndom: {\ncreateContainer: true\n},\ninput: {\nmouse: {\ntarget: divId\n},\ntouch: {\ntarget: divId\n},\n},\n// ...\n};\nvar game = new Phaser.Game(config);\n</code></pre><ul> <li>Set <code>parent</code> to divId</li> <li>Set <code>dom.createContainer</code> to <code>true</code>.</li> </ul> </li> <li>Import class     <pre><code>import YoutubePlayer from 'phaser3-rex-plugins/plugins/youtubeplayer.js';\n</code></pre></li> <li>Add youtube player object     <pre><code>var youtubePlayer = new YoutubePlayer(scene, x, y, width, height, config);\nscene.add.existing(youtubePlayer);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#add-youtube-player-object","title":"Add youtube player object","text":"<ul> <li>Youtube player on DOM     <pre><code>var player = scene.add.rexYoutubePlayer(x, y, width, height, config);\n// var player = scene.add.rexYoutubePlayer(x, y, config);\n// var player = scene.add.rexYoutubePlayer(config);\n</code></pre></li> </ul> <p>Default configuration</p> <pre><code>{\nx: 0,\ny: 0,\nwidth: undefined,\nheight: undefined,\n\nvideoId: '',\nautoPlay: true,\ncontrols: false,\nkeyboardControl: true,\nmodestBranding: false,\nloop: false,\n}\n</code></pre> <ul> <li><code>x</code>, <code>y</code> : Position</li> <li><code>width</code>, <code>height</code> : Size of element</li> <li><code>videoId</code> : The YouTube video ID that identifies the video that the player will load.</li> <li><code>autoPlay</code> : Automatically start to play when the player loads.</li> <li><code>controls</code> : Whether the video player controls are displayed.</li> <li><code>keyboardControl</code> : Set <code>false</code> to disable keyboard controls.</li> <li><code>modestBranding</code> : Set <code>false</code> to prevent the YouTube logo from displaying in the control bar.</li> <li><code>loop</code> : Play video when ended.</li> </ul>"},{"location":"youtubeplayer/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyYoutubePlayer extends YoutubePlayer {  // or YoutubePlayerCanvas\nconstructor(scene, x, y, width, height, config) {\nsuper(scene, x, y, width, height, config) {\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {\n//     super.preUpdate(time, delta)\n// }\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var player = new MyYoutubePlayer(scene, x, y, width, height, config);\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#load","title":"Load","text":"<pre><code>player.load(videoId);\n// player.load(videoId, autoPlay);\n</code></pre>"},{"location":"youtubeplayer/#play","title":"Play","text":"<pre><code>player.play();\n</code></pre>"},{"location":"youtubeplayer/#pause","title":"Pause","text":"<pre><code>player.pause();\n</code></pre>"},{"location":"youtubeplayer/#playback-time","title":"Playback time","text":"<ul> <li>Get     <pre><code>var playbackTime = player.playbackTime; // time in seconds\n</code></pre> <pre><code>var t = player.t; // t: 0~1\n</code></pre></li> <li>Set     <pre><code>player.setPlaybackTime(time); // time in seconds\n// player.playbackTime = time;\n</code></pre> <pre><code>player.setT(t); // t: 0~1\n// player.t = t;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#duration","title":"Duration","text":"<pre><code>var duration = player.duration;  // time in seconds\n</code></pre>"},{"location":"youtubeplayer/#volume","title":"Volume","text":"<ul> <li>Get     <pre><code>var volume = player.volume;  // volume: 0~1\n</code></pre></li> <li>Set     <pre><code>player.setVolume(volume);  // volume: 0~1\n// player.volume = volume;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#mute","title":"Mute","text":"<ul> <li>Get     <pre><code>var muted = player.muted;  // muted: true/false\n</code></pre></li> <li>Set     <pre><code>player.setMute(muted);  // muted: true/false\n// player.muted = muted;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#loop","title":"Loop","text":"<ul> <li>Get     <pre><code>var loop = player.loop;  // loop: true/false\n</code></pre></li> <li>Set     <pre><code>player.setLoop(loop);  // loop: true/false\n// player.loop = loop;\n</code></pre></li> </ul>"},{"location":"youtubeplayer/#resize","title":"Resize","text":"<pre><code>player.resize(width, height);\n</code></pre>"},{"location":"youtubeplayer/#status","title":"Status","text":"<ul> <li>Is playing     <pre><code>var isPlaying = player.isPlaying;\n</code></pre></li> <li>Is paused     <pre><code>var isPaused = player.isPaused;\n</code></pre></li> <li>Has end     <pre><code>var hasEnded = player.hasEnded;\n</code></pre></li> <li>Video state     <pre><code>var videoState = player.videoState;\n</code></pre>     or     <pre><code>var videoStateString = player.videoStateString;\n</code></pre><ul> <li><code>-1</code> : <code>unstarted</code></li> <li><code>0</code> : <code>ended</code></li> <li><code>1</code> : <code>playing</code></li> <li><code>2</code> : <code>paused</code></li> <li><code>3</code> : <code>buffering</code></li> <li><code>5</code> : <code>cued</code></li> </ul> </li> </ul>"},{"location":"youtubeplayer/#events","title":"Events","text":"<ul> <li>Youtube player api ready     <pre><code>player.on('ready', function(player){ }, scope);\n</code></pre></li> <li>State change     <pre><code>player.on('statechange', function(player){ }, scope);\n</code></pre><ul> <li>State : <code>player.videoState</code></li> </ul> </li> <li>Unstarted     <pre><code>player.on('unstarted', function(player){ }, scope);\n</code></pre></li> <li>Playing     <pre><code>player.on('playing', function(player){ }, scope);\n</code></pre></li> <li>Pause     <pre><code>player.on('pause', function(player){ }, scope);\n</code></pre></li> <li>Ended     <pre><code>player.on('ended', function(player){ }, scope);\n</code></pre></li> <li>Buffering     <pre><code>player.on('buffering', function(player){ }, scope);\n</code></pre></li> <li>Video cued     <pre><code>player.on('cued', function(player){ }, scope);\n</code></pre></li> <li>Error     <pre><code>player.on('error', function(player, errorMessage){ }, scope);\n</code></pre></li> </ul> <p>No <code>Playback time changed</code> event</p> <p>Get playback time every tick might cause playing video lagging.</p>"},{"location":"youtubeplayer/#other-properties","title":"Other properties","text":"<p>See dom game object, game object</p>"},{"location":"youtubeplayer/#interactive-with-other-game-objects","title":"Interactive with other game objects","text":"<p>See dom-element's Interactive with other game objects</p>"},{"location":"zone/","title":"Zone","text":""},{"location":"zone/#introduction","title":"Introduction","text":"<p>Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser.</p> <ul> <li>Author: Richard Davey</li> </ul>"},{"location":"zone/#usage","title":"Usage","text":""},{"location":"zone/#add-zone-object","title":"Add zone object","text":"<pre><code>var zone = scene.add.zone(x, y, width, height);\n</code></pre> <p>Add zone from JSON</p> <pre><code>var zone = scene.make.zone({\nx: 0,\ny: 0,\n//width: 1,\n//height: 1,\n// origin: {x: 0.5, y: 0.5},\n});\n</code></pre>"},{"location":"zone/#custom-class","title":"Custom class","text":"<ul> <li>Define class     <pre><code>class MyZone extends Phaser.GameObjects.Zone {\nconstructor(scene, x, y, width, height) {\nsuper(scene, x, y, width, height);\n// ...\nscene.add.existing(this);\n}\n// ...\n\n// preUpdate(time, delta) {}\n}\n</code></pre><ul> <li><code>scene.add.existing(gameObject)</code> : Adds an existing Game Object to this Scene.<ul> <li>If the Game Object renders, it will be added to the Display List.</li> <li>If it has a <code>preUpdate</code> method, it will be added to the Update List.</li> </ul> </li> </ul> </li> <li>Create instance     <pre><code>var zone = new MyZone(x, y, width, height);\n</code></pre></li> </ul>"},{"location":"zone/#input-hit-zone","title":"Input hit zone","text":"<pre><code>zone.setInteractive();\n</code></pre> <p>See touch events</p>"},{"location":"zone/#drop-zones","title":"Drop zones","text":"<ul> <li>Default drop zone     <pre><code>zone.setDropZone();\n</code></pre></li> <li>Rectangle drop zone     <pre><code>zone.setRectangleDropZone(width, height);\n</code></pre></li> <li>Circular drop zone     <pre><code>zone.setCircleDropZone(radius);\n</code></pre></li> <li>Custom drop zone     <pre><code>zone.setDropZone(shape, callback);\n</code></pre><ul> <li><code>callback</code> <pre><code>function(shape, x, y, gameObject) {\nreturn hit;  // true/false\n}\n</code></pre></li> </ul> </li> </ul> <p>See drop zone</p>"},{"location":"zone/#other-properties","title":"Other properties","text":"<p>See game object</p>"}]}
\ No newline at end of file
diff --git a/docs/site/shader/index.html b/docs/site/shader/index.html
index 3a3916580d..6c678f1e5a 100644
--- a/docs/site/shader/index.html
+++ b/docs/site/shader/index.html
@@ -1197,6 +1197,13 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9484,6 +9491,13 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9754,6 +9768,10 @@ <h3 id="texture-routing">Texture routing<a class="headerlink" href="#texture-rou
 end</code></pre>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">shader</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
 <h3 id="baseshader">BaseShader<a class="headerlink" href="#baseshader" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">baseShader</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Display</span><span class="p">.</span><span class="nx">BaseShader</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="nx">fragmentSrc</span><span class="p">,</span><span class="w"> </span><span class="nx">vertexSrc</span><span class="p">,</span><span class="w"> </span><span class="nx">uniforms</span><span class="p">);</span>
 </code></pre></div>
diff --git a/docs/site/shape-arc/index.html b/docs/site/shape-arc/index.html
index 773287c2e1..69270355f2 100644
--- a/docs/site/shape-arc/index.html
+++ b/docs/site/shape-arc/index.html
@@ -2042,6 +2042,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9660,6 +9688,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">arc</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-checkbox/index.html b/docs/site/shape-checkbox/index.html
index d2aa1733f8..c7010375e1 100644
--- a/docs/site/shape-checkbox/index.html
+++ b/docs/site/shape-checkbox/index.html
@@ -2370,6 +2370,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9631,6 +9645,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10003,6 +10031,16 @@ <h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-circle/index.html b/docs/site/shape-circle/index.html
index c6d7fa66ef..a98f8e92ef 100644
--- a/docs/site/shape-circle/index.html
+++ b/docs/site/shape-circle/index.html
@@ -2021,6 +2021,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9609,6 +9637,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">circle</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-circularprogress/index.html b/docs/site/shape-circularprogress/index.html
index c7dba23ff9..208c86bfb2 100644
--- a/docs/site/shape-circularprogress/index.html
+++ b/docs/site/shape-circularprogress/index.html
@@ -2258,6 +2258,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9610,6 +9631,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9985,6 +10027,18 @@ <h3 id="alpha">Alpha<a class="headerlink" href="#alpha" title="Permanent link">&
 <span class="c1">// circularProgress.alpha = alpha;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">circularProgress</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h3 id="compare-with-circular-progress-canvas">Compare with Circular-progress canvas<a class="headerlink" href="#compare-with-circular-progress-canvas" title="Permanent link">&para;</a></h3>
 <ul>
 <li><a href="../canvas-circularprogress/">Circular-progress canvas</a> creates a canvas then draw on that canvas, circular progress shape draw on GRAPHICS pipeline like Shape or Graphics game object.</li>
diff --git a/docs/site/shape-cover/index.html b/docs/site/shape-cover/index.html
index cdb49baec5..868a987d13 100644
--- a/docs/site/shape-cover/index.html
+++ b/docs/site/shape-cover/index.html
@@ -2293,6 +2293,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9519,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9664,6 +9692,16 @@ <h3 id="color">Color<a class="headerlink" href="#color" title="Permanent link">&
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">cover</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-curve/index.html b/docs/site/shape-curve/index.html
index 701b7930b7..d6dc77823b 100644
--- a/docs/site/shape-curve/index.html
+++ b/docs/site/shape-curve/index.html
@@ -2091,6 +2091,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9595,6 +9623,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">curve</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-custom-progress/index.html b/docs/site/shape-custom-progress/index.html
index 68ae9d9308..1925a52c26 100644
--- a/docs/site/shape-custom-progress/index.html
+++ b/docs/site/shape-custom-progress/index.html
@@ -2326,6 +2326,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9627,6 +9648,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9962,6 +10004,18 @@ <h3 id="alpha">Alpha<a class="headerlink" href="#alpha" title="Permanent link">&
 <span class="c1">// customProgress.alpha = alpha;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">customProgress</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-custom-shapes/index.html b/docs/site/shape-custom-shapes/index.html
index fc604499e6..cc911c4f27 100644
--- a/docs/site/shape-custom-shapes/index.html
+++ b/docs/site/shape-custom-shapes/index.html
@@ -2402,6 +2402,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9814,6 +9835,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -10606,6 +10648,18 @@ <h3 id="alpha">Alpha<a class="headerlink" href="#alpha" title="Permanent link">&
 <span class="c1">// shape.alpha = alpha;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">shape</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h3 id="compare-with-similar-plugins">Compare with similar plugins<a class="headerlink" href="#compare-with-similar-plugins" title="Permanent link">&para;</a></h3>
 <ul>
 <li><a href="./">Custom Shapes</a> : Draw shapes.</li>
diff --git a/docs/site/shape-ellipse/index.html b/docs/site/shape-ellipse/index.html
index 66f1394c72..4940ba5dbd 100644
--- a/docs/site/shape-ellipse/index.html
+++ b/docs/site/shape-ellipse/index.html
@@ -2070,6 +2070,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9616,6 +9644,16 @@ <h3 id="smoothness">Smoothness<a class="headerlink" href="#smoothness" title="Pe
 </code></pre></div></p>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ellipse</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-fullwindowrectangle/index.html b/docs/site/shape-fullwindowrectangle/index.html
index b3f1011836..c32badc9c3 100644
--- a/docs/site/shape-fullwindowrectangle/index.html
+++ b/docs/site/shape-fullwindowrectangle/index.html
@@ -2279,6 +2279,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9519,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9657,6 +9685,16 @@ <h3 id="color">Color<a class="headerlink" href="#color" title="Permanent link">&
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-grid/index.html b/docs/site/shape-grid/index.html
index f15a6d496c..c94cd26aba 100644
--- a/docs/site/shape-grid/index.html
+++ b/docs/site/shape-grid/index.html
@@ -2126,6 +2126,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9451,6 +9465,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9594,6 +9622,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">grid</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-isobox/index.html b/docs/site/shape-isobox/index.html
index 9be2b96ae3..be66afa9bd 100644
--- a/docs/site/shape-isobox/index.html
+++ b/docs/site/shape-isobox/index.html
@@ -2147,6 +2147,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9580,6 +9608,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">isoBox</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-isotriangle/index.html b/docs/site/shape-isotriangle/index.html
index eb38307358..1a0bd5b2e3 100644
--- a/docs/site/shape-isotriangle/index.html
+++ b/docs/site/shape-isotriangle/index.html
@@ -2168,6 +2168,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9607,6 +9635,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">isoTriangle</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-line/index.html b/docs/site/shape-line/index.html
index 1323b2798c..9cee25a7cb 100644
--- a/docs/site/shape-line/index.html
+++ b/docs/site/shape-line/index.html
@@ -2056,6 +2056,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9608,6 +9636,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">line</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-lineprogress/index.html b/docs/site/shape-lineprogress/index.html
index 302a10534d..37ec980440 100644
--- a/docs/site/shape-lineprogress/index.html
+++ b/docs/site/shape-lineprogress/index.html
@@ -2272,6 +2272,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9603,6 +9624,27 @@
     Alpha
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9950,6 +9992,18 @@ <h3 id="alpha">Alpha<a class="headerlink" href="#alpha" title="Permanent link">&
 <span class="c1">// lineProgress.alpha = alpha;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lineProgress</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-polygon/index.html b/docs/site/shape-polygon/index.html
index 72d83e79be..e266b7d563 100644
--- a/docs/site/shape-polygon/index.html
+++ b/docs/site/shape-polygon/index.html
@@ -2084,6 +2084,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9628,6 +9656,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">polygon</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-rectangle/index.html b/docs/site/shape-rectangle/index.html
index 863e02c5aa..324e8aac90 100644
--- a/docs/site/shape-rectangle/index.html
+++ b/docs/site/shape-rectangle/index.html
@@ -2007,6 +2007,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9599,6 +9627,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-roundrectangle/index.html b/docs/site/shape-roundrectangle/index.html
index 1c68d060ff..24966f5704 100644
--- a/docs/site/shape-roundrectangle/index.html
+++ b/docs/site/shape-roundrectangle/index.html
@@ -2243,6 +2243,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9601,6 +9615,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9990,6 +10018,16 @@ <h3 id="iteration">Iteration<a class="headerlink" href="#iteration" title="Perma
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-spinner/index.html b/docs/site/shape-spinner/index.html
index 6602d00175..3c210213e5 100644
--- a/docs/site/shape-spinner/index.html
+++ b/docs/site/shape-spinner/index.html
@@ -2319,6 +2319,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9669,6 +9690,27 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9998,6 +10040,18 @@ <h3 id="custom-spinner">Custom spinner<a class="headerlink" href="#custom-spinne
 </ul>
 <h4 id="shape-class">Shape class<a class="headerlink" href="#shape-class" title="Permanent link">&para;</a></h4>
 <p>See <a href="../shape-custom-shapes/#shape-class">Shape class</a></p>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">customSpinner</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-star/index.html b/docs/site/shape-star/index.html
index b7512d1b21..842f225730 100644
--- a/docs/site/shape-star/index.html
+++ b/docs/site/shape-star/index.html
@@ -2105,6 +2105,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9465,6 +9479,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9629,6 +9657,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">star</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-toggleswitch/index.html b/docs/site/shape-toggleswitch/index.html
index 8d7b8547b0..58d5a6cf11 100644
--- a/docs/site/shape-toggleswitch/index.html
+++ b/docs/site/shape-toggleswitch/index.html
@@ -2405,6 +2405,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9673,6 +9687,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10083,6 +10111,16 @@ <h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">toggleSwitch</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-triangle/index.html b/docs/site/shape-triangle/index.html
index c3ffd161c1..b2995858f8 100644
--- a/docs/site/shape-triangle/index.html
+++ b/docs/site/shape-triangle/index.html
@@ -2126,6 +2126,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9479,6 +9493,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9608,6 +9636,16 @@ <h3 id="display-size">Display size<a class="headerlink" href="#display-size" tit
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">triangle</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shape-triangle2/index.html b/docs/site/shape-triangle2/index.html
index e9fdbbf129..cfe82996c7 100644
--- a/docs/site/shape-triangle2/index.html
+++ b/docs/site/shape-triangle2/index.html
@@ -2384,6 +2384,27 @@
     Arrow only
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9603,6 +9624,27 @@
     Arrow only
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9948,6 +9990,18 @@ <h3 id="arrow-only">Arrow only<a class="headerlink" href="#arrow-only" title="Pe
 <span class="c1">// triangle.arrowOnly = enable;</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">triangle</span><span class="p">.</span><span class="nx">createGeometryMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shatter-image/index.html b/docs/site/shatter-image/index.html
index bbc099facc..963d57c12b 100644
--- a/docs/site/shatter-image/index.html
+++ b/docs/site/shatter-image/index.html
@@ -1617,6 +1617,27 @@
     Tint color
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9625,6 +9646,27 @@
     Tint color
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9949,6 +9991,18 @@ <h3 id="tint-color">Tint color<a class="headerlink" href="#tint-color" title="Pe
     <div class="highlight"><pre><span></span><code><span class="nx">image</span><span class="p">.</span><span class="nx">setTint</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/shatter-rendertexture/index.html b/docs/site/shatter-rendertexture/index.html
index e1b9c87e55..316be3f586 100644
--- a/docs/site/shatter-rendertexture/index.html
+++ b/docs/site/shatter-rendertexture/index.html
@@ -1605,6 +1605,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9587,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9768,7 +9796,17 @@ <h4 id="fill">Fill<a class="headerlink" href="#fill" title="Permanent link">&par
 <span class="c1">// image.rt.fill(rgb, alpha, x, y, width, height);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../shatter-image/">Shatter image</a> game object.</p>
+<p>See <a href="../shatter-image/">Shatter image game object</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/sitemap.xml.gz b/docs/site/sitemap.xml.gz
index 65ca0d30df..118cf7a95b 100644
Binary files a/docs/site/sitemap.xml.gz and b/docs/site/sitemap.xml.gz differ
diff --git a/docs/site/skew-image/index.html b/docs/site/skew-image/index.html
index ceb70dcbba..19f9db170d 100644
--- a/docs/site/skew-image/index.html
+++ b/docs/site/skew-image/index.html
@@ -1495,6 +1495,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9505,6 +9519,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9673,7 +9701,17 @@ <h3 id="skew">Skew<a class="headerlink" href="#skew" title="Permanent link">&par
 </code></pre></div></li>
 </ul>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../mesh/">Mesh</a> game object.</p>
+<p>See <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/skew-rendertexture/index.html b/docs/site/skew-rendertexture/index.html
index e364efd1f3..b8996d8771 100644
--- a/docs/site/skew-rendertexture/index.html
+++ b/docs/site/skew-rendertexture/index.html
@@ -1543,6 +1543,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9573,6 +9587,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9756,7 +9784,17 @@ <h4 id="fill">Fill<a class="headerlink" href="#fill" title="Permanent link">&par
 <span class="c1">// image.rt.fill(rgb, alpha, x, y, width, height);</span>
 </code></pre></div>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../skew-image/">Skew image</a> game object.</p>
+<p>See <a href="../skew-image/">Skew image game object</a>, <a href="../mesh/">Mesh game object</a>, <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 
 
   
diff --git a/docs/site/sprite/index.html b/docs/site/sprite/index.html
index 669b012f91..f624d5df9b 100644
--- a/docs/site/sprite/index.html
+++ b/docs/site/sprite/index.html
@@ -852,6 +852,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9547,6 +9561,20 @@
     Other properties
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9767,6 +9795,12 @@ <h3 id="texture">Texture<a class="headerlink" href="#texture" title="Permanent l
 <p>See <a href="../gameobject/#texture">game object - texture</a></p>
 <h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
 <p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">sprite</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 <h3 id="animation">Animation<a class="headerlink" href="#animation" title="Permanent link">&para;</a></h3>
 <h4 id="create-animation">Create animation<a class="headerlink" href="#create-animation" title="Permanent link">&para;</a></h4>
 <ul>
diff --git a/docs/site/tagtext/index.html b/docs/site/tagtext/index.html
index 1b1650c6de..f7698609d4 100644
--- a/docs/site/tagtext/index.html
+++ b/docs/site/tagtext/index.html
@@ -1840,6 +1840,27 @@
     RTL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9795,6 +9816,27 @@
     RTL
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10451,6 +10493,14 @@ <h3 id="rtl">RTL<a class="headerlink" href="#rtl" title="Permanent link">&para;<
 </ul>
 </li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/text/index.html b/docs/site/text/index.html
index b0fe2516c3..3eccebfdfd 100644
--- a/docs/site/text/index.html
+++ b/docs/site/text/index.html
@@ -1682,6 +1682,27 @@
     Test string
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9535,6 +9556,27 @@
     Test string
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9864,6 +9906,14 @@ <h3 id="test-string">Test string<a class="headerlink" href="#test-string" title=
 <p>Set the test string to use when measuring the font.</p>
 <div class="highlight"><pre><span></span><code><span class="nx">txt</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">setTestString</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
 </code></pre></div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/textplayer/index.html b/docs/site/textplayer/index.html
index 8fb52d6853..fcbba3c9a2 100644
--- a/docs/site/textplayer/index.html
+++ b/docs/site/textplayer/index.html
@@ -1949,6 +1949,27 @@
     Size
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9957,6 +9978,27 @@
     Size
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -11075,6 +11117,14 @@ <h3 id="size">Size<a class="headerlink" href="#size" title="Permanent link">&par
     <div class="highlight"><pre><span></span><code><span class="nx">txt</span><span class="p">.</span><span class="nx">setToMinSize</span><span class="p">();</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">txt</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/tilemap/index.html b/docs/site/tilemap/index.html
index 255cb6866e..2f21ff7bd2 100644
--- a/docs/site/tilemap/index.html
+++ b/docs/site/tilemap/index.html
@@ -2568,6 +2568,13 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9862,6 +9869,13 @@
       </ul>
     </nav>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -10477,6 +10491,12 @@ <h4 id="shuffle-tiles">Shuffle tiles<a class="headerlink" href="#shuffle-tiles"
     <div class="highlight"><pre><span></span><code><span class="nx">layer</span><span class="p">.</span><span class="nx">shuffle</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span><span class="w"> </span><span class="nx">tileY</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>`layer`` support <a href="../shader-builtin/">postFX effects</a></p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>No preFX effect support</p>
+</div>
 <h3 id="tile">Tile<a class="headerlink" href="#tile" title="Permanent link">&para;</a></h3>
 <h4 id="get-tile">Get tile<a class="headerlink" href="#get-tile" title="Permanent link">&para;</a></h4>
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">tile</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">map</span><span class="p">.</span><span class="nx">getTileAt</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span><span class="w"> </span><span class="nx">tileY</span><span class="p">);</span>
diff --git a/docs/site/tilesprite/index.html b/docs/site/tilesprite/index.html
index 4250dcb803..d727c64f89 100644
--- a/docs/site/tilesprite/index.html
+++ b/docs/site/tilesprite/index.html
@@ -1108,6 +1108,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9451,6 +9458,13 @@
     Create mask
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9560,6 +9574,8 @@ <h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title=
 <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
 </code></pre></div>
 <p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/transitionimage/index.html b/docs/site/transitionimage/index.html
index 9d47dcf6d5..a2cb247bae 100644
--- a/docs/site/transitionimage/index.html
+++ b/docs/site/transitionimage/index.html
@@ -1075,6 +1075,27 @@
     Use cases
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#internal-image-game-object" class="md-nav__link">
+    Internal image game object
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9673,6 +9694,27 @@
     Use cases
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#internal-image-game-object" class="md-nav__link">
+    Internal image game object
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9701,7 +9743,7 @@
   <h1>Transition image</h1>
 
 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
-<p>Transit texture to another one. A <a href="../containerlite/">containerLite game object</a> with 2 <a href="../image/">image</a> game objects.</p>
+<p>Transit texture to another one. A <a href="../containerlite/">containerLite game object</a> with 2 <a href="../image/">image game objects</a>.</p>
 <ul>
 <li>Author: Rex</li>
 <li>Game object</li>
@@ -10157,6 +10199,21 @@ <h3 id="use-cases">Use cases<a class="headerlink" href="#use-cases" title="Perma
 </ul>
 </li>
 </ul>
+<h3 id="internal-image-game-object">Internal image game object<a class="headerlink" href="#internal-image-game-object" title="Permanent link">&para;</a></h3>
+<ul>
+<li>Current, next image game object
+    <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">curentImageGO</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">currentImage</span><span class="p">;</span>
+<span class="kd">var</span><span class="w"> </span><span class="nx">nextImageGO</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">nextImage</span><span class="p">;</span>
+</code></pre></div></li>
+<li>Front, back image game object
+    <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">frontImageGO</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">frontImage</span><span class="p">;</span>
+<span class="kd">var</span><span class="w"> </span><span class="nx">backImageGO</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">image</span><span class="p">.</span><span class="nx">backImage</span><span class="p">;</span>
+</code></pre></div></li>
+</ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Internal image game objects (<code>image.currentImage</code>, <code>image.nextImage</code>) support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/transitionimagepack/index.html b/docs/site/transitionimagepack/index.html
index b7aeba5ba0..e92cddf279 100644
--- a/docs/site/transitionimagepack/index.html
+++ b/docs/site/transitionimagepack/index.html
@@ -1054,6 +1054,13 @@
     Flip
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
       </ul>
@@ -9603,6 +9610,13 @@
     Flip
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
       </ul>
@@ -9839,6 +9853,8 @@ <h3 id="flip">Flip<a class="headerlink" href="#flip" title="Permanent link">&par
 <span class="nx">image</span><span class="p">.</span><span class="nx">toggleFlipY</span><span class="p">();</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../transitionimage/">transition image object</a>, <a href="../gameobject/">game object</a></p>
 
 
   
diff --git a/docs/site/video/index.html b/docs/site/video/index.html
index d0b9a71c0a..201a537a85 100644
--- a/docs/site/video/index.html
+++ b/docs/site/video/index.html
@@ -984,6 +984,27 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -9659,6 +9680,27 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#create-mask" class="md-nav__link">
+    Create mask
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#shader-effects" class="md-nav__link">
+    Shader effects
+  </a>
+  
 </li>
         
       </ul>
@@ -10013,6 +10055,14 @@ <h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link
 <span class="p">},</span><span class="w"> </span><span class="nx">scope</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>
+<h3 id="create-mask">Create mask<a class="headerlink" href="#create-mask" title="Permanent link">&para;</a></h3>
+<div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">mask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">video</span><span class="p">.</span><span class="nx">createBitmapMask</span><span class="p">();</span>
+</code></pre></div>
+<p>See <a href="../mask/">mask</a></p>
+<h3 id="shader-effects">Shader effects<a class="headerlink" href="#shader-effects" title="Permanent link">&para;</a></h3>
+<p>Support <a href="../shader-builtin/">preFX and postFX effects</a></p>
 
 
   
diff --git a/docs/site/youtubeplayer/index.html b/docs/site/youtubeplayer/index.html
index e4b7b7e2e3..14d89c43d0 100644
--- a/docs/site/youtubeplayer/index.html
+++ b/docs/site/youtubeplayer/index.html
@@ -2989,6 +2989,13 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9648,6 +9655,13 @@
     Events
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -9990,6 +10004,8 @@ <h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link
 <p class="admonition-title">No <code>Playback time changed</code> event</p>
 <p>Get playback time every tick might cause playing video lagging.</p>
 </div>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../domelement/">dom game object</a>, <a href="../gameobject/">game object</a></p>
 <h3 id="interactive-with-other-game-objects">Interactive with other game objects<a class="headerlink" href="#interactive-with-other-game-objects" title="Permanent link">&para;</a></h3>
 <p>See <a href="../domelement/#interactive-with-other-game-objects">dom-element's Interactive with other game objects</a></p>
 
diff --git a/docs/site/zone/index.html b/docs/site/zone/index.html
index 1dce04a63d..25a451d4d9 100644
--- a/docs/site/zone/index.html
+++ b/docs/site/zone/index.html
@@ -2583,22 +2583,22 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#other-properties" class="md-nav__link">
-    Other properties
+  <a href="#input-hit-zone" class="md-nav__link">
+    Input hit zone
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#input-hit-zone" class="md-nav__link">
-    Input hit zone
+  <a href="#drop-zones" class="md-nav__link">
+    Drop zones
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#drop-zones" class="md-nav__link">
-    Drop zones
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
   </a>
   
 </li>
@@ -9415,22 +9415,22 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#other-properties" class="md-nav__link">
-    Other properties
+  <a href="#input-hit-zone" class="md-nav__link">
+    Input hit zone
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#input-hit-zone" class="md-nav__link">
-    Input hit zone
+  <a href="#drop-zones" class="md-nav__link">
+    Drop zones
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#drop-zones" class="md-nav__link">
-    Drop zones
+  <a href="#other-properties" class="md-nav__link">
+    Other properties
   </a>
   
 </li>
@@ -9503,8 +9503,6 @@ <h3 id="custom-class">Custom class<a class="headerlink" href="#custom-class" tit
     <div class="highlight"><pre><span></span><code><span class="kd">var</span><span class="w"> </span><span class="nx">zone</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MyZone</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
 </code></pre></div></li>
 </ul>
-<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
-<p>See <a href="../gameobject/">game object</a></p>
 <h3 id="input-hit-zone">Input hit zone<a class="headerlink" href="#input-hit-zone" title="Permanent link">&para;</a></h3>
 <div class="highlight"><pre><span></span><code><span class="nx">zone</span><span class="p">.</span><span class="nx">setInteractive</span><span class="p">();</span>
 </code></pre></div>
@@ -9532,6 +9530,8 @@ <h3 id="drop-zones">Drop zones<a class="headerlink" href="#drop-zones" title="Pe
 </li>
 </ul>
 <p>See <a href="../touchevents/#drop-zone">drop zone</a></p>
+<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
+<p>See <a href="../gameobject/">game object</a></p>